diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js index 8a200ecf2f6..6c4e4f65d53 100644 --- a/src/components/ComponentDemo/ComponentDemo.js +++ b/src/components/ComponentDemo/ComponentDemo.js @@ -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? @@ -166,15 +166,15 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => { - setCode(updatedCode)} - className={editorContainer} - textareaId="live-editor-label" - /> + {labelText} + + setCode(updatedCode)} + className={editorContainer} + textareaId="live-editor-label" + /> {knobs && ( <> diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx index 177c4741c09..2dc220dcc35 100755 --- a/src/pages/components/accordion/style.mdx +++ b/src/pages/components/accordion/style.mdx @@ -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 | diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx index 90ab5e95c7b..4e8ecaab421 100644 --- a/src/pages/components/file-uploader/style.mdx +++ b/src/pages/components/file-uploader/style.mdx @@ -122,8 +122,8 @@ The file and button heights should always match. | Element | Size | Height px / rem | | ------- | ----------- | --------------- | | File | Small (sm) | 32 / 2 | -| | Medium (md) | 40 / 2.5 | -| | Large (lg) | 48 / 3 | +| | Medium (md) | 40 / 2.5 | +| | Large (lg) | 48 / 3 | | Button | Small (sm) | 32 / 2 | | | Medium (md) | 40 / 2.5 | | | Large (lg) | 48 / 3 | diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx index e5dc01cff77..de64d6053b2 100755 --- a/src/pages/components/tooltip/style.mdx +++ b/src/pages/components/tooltip/style.mdx @@ -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` |
@@ -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 @@ -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` |
@@ -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` |
@@ -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` |