Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
@emyarod
emyarod committed Jun 10, 2021
1 parent 67d4d6b commit 1c65d0d
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 60 deletions.
20 changes: 10 additions & 10 deletions src/components/ComponentDemo/ComponentDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
return currentVariant.props.children;
});
};

const labelText = `Live editor for the ${components[0].label} component`;

// TODO max width editor handle multiple clicks use regex for individual props?
Expand Down Expand Up @@ -166,15 +166,15 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {

<Code links={links} code={code} src={src} className={codeRow}>
<label htmlFor="live-editor-label">
<span className="live-editor-label">{labelText}</span>
</label>
<LiveEditor
padding={16}
style={{ overflowX: 'auto', whiteSpace: 'pre' }}
onChange={(updatedCode) => setCode(updatedCode)}
className={editorContainer}
textareaId="live-editor-label"
/>
<span className="live-editor-label">{labelText}</span>
</label>
<LiveEditor
padding={16}
style={{ overflowX: 'auto', whiteSpace: 'pre' }}
onChange={(updatedCode) => setCode(updatedCode)}
className={editorContainer}
textareaId="live-editor-label"
/>
</Code>
{knobs && (
<>
Expand Down
13 changes: 5 additions & 8 deletions src/pages/components/accordion/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,8 @@ of the accordion panel.

## Sizes

| Element | Size | Height (px/rem) |
| --------------- | ------------ | ------------ |
| Header | Small (sm) | 32 / 2 |
| | Medium (md) | 40 / 2.5 |
| | Large (lg) | 48 / 3 |



| Element | Size | Height (px/rem) |
| ------- | ----------- | --------------- |
| Header | Small (sm) | 32 / 2 |
| | Medium (md) | 40 / 2.5 |
| | Large (lg) | 48 / 3 |
2 changes: 1 addition & 1 deletion src/pages/components/file-uploader/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ The file and button heights should always match.
| Element | Size | Property | px / rem |
| ------- | ------ | -------- | -------- |
| File | Small | height | 32 / 2 |
| | Medium | height | 40 / 2.5 |
| | Medium | height | 40 / 2.5 |
| | Large | height | 48 / 3 |
| Button | Small | height | 32 / 2 |
| | Medium | height | 40 / 2.5 |
Expand Down
82 changes: 41 additions & 41 deletions src/pages/components/tooltip/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Interactive tooltip

| Class | Property | Color token |
| ----------------------- | ---------------- | ------------- |
| Label | text color | `$text-secondary` |
| Trigger icon | svg | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |
| Class | Property | Color token |
| ------------ | ---------------- | --------------------- |
| Label | text color | `$text-secondary` |
| Trigger icon | svg | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

<div className="image--fixed">

Expand All @@ -27,29 +27,29 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Icon tooltip

| Class | Property | Color token |
| --------------------------- | ---------------- | ------------- |
| Trigger icon | background-color | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |
| Class | Property | Color token |
| ------------ | ---------------- | --------------------- |
| Trigger icon | background-color | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

### Definition tooltip

| Class | Property | Color token |
| -------------------------- | ---------------- | ----------------- |
| Label | color | `$text-secondary` |
| Dotted underline | border-bottom | `$interactive` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |
| Class | Property | Color token |
| ---------------- | ---------------- | --------------------- |
| Label | color | `$text-secondary` |
| Dotted underline | border-bottom | `$interactive` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

## Typography

Tooltip labels and text should be set in sentence case.

| Property | Font-size (px/rem) | Font-weight | Type token |
| --------------------- | ------------------ | ------------- | ---------------- |
| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
| Body copy | 14 / 0.875 | Regular / 400 | `$body-short-01` |
| Property | Font-size (px/rem) | Font-weight | Type token |
| --------- | ------------------ | ------------- | ---------------- |
| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
| Body copy | 14 / 0.875 | Regular / 400 | `$body-short-01` |

## Structure

Expand All @@ -58,13 +58,13 @@ contain.

### Interactive tooltip

| Element | Property | px / rem | Spacing token |
| --------------------------- | ------------- | -------- | ------------- |
| Container | max-width | 240 / 15 | – |
| | padding | 16 / 1 | `$spacing-05` |
| | margin-top | 8 / 0.5 | `$spacing-03` |
| Trigger icon | height, width | 16 / 1 | – |
| | margin-left | 8 / 0.5 | `$spacing-03` |
| Element | Property | px / rem | Spacing token |
| ------------ | ------------- | -------- | ------------- |
| Container | max-width | 240 / 15 | – |
| | padding | 16 / 1 | `$spacing-05` |
| | margin-top | 8 / 0.5 | `$spacing-03` |
| Trigger icon | height, width | 16 / 1 | – |
| | margin-left | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand All @@ -78,13 +78,13 @@ contain.

### Definition tooltip

| Class | Property | px / rem | Spacing token |
| ------------ | --------------------------- | -------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Underline | border-bottom | 1px | – |
| Caret | margin-top | 4px | `$spacing-02` |
| Class | Property | px / rem | Spacing token |
| --------- | --------------------------- | -------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Underline | border-bottom | 1px | – |
| Caret | margin-top | 4px | `$spacing-02` |

<div className="image--fixed">

Expand All @@ -98,12 +98,12 @@ contain.

### Icon tooltip

| Class | Property | px / rem | Spacing token |
| ---------- | --------------------------- | --------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
| Caret | margin-top | 8 / 0.5 | `$spacing-03` |
| Class | Property | px / rem | Spacing token |
| --------- | --------------------------- | --------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
| Caret | margin-top | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand Down

0 comments on commit 1c65d0d

Please sign in to comment.