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` |