Fixing the caption (#4435)

* Fixing the caption * Added fullWidth prop --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 24, 2025 · a137888 · a137888
1 parent 88285c4
commit a137888
Show file tree

Hide file tree

Showing 26 changed files with 140 additions and 140 deletions.
diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx
@@ -17,8 +17,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Copy button     | See [ghost button - icon only](/components/button/style#ghost-button) |                 |
 | Container:focus | border                                                                | `$focus`        |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -42,8 +42,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Copy button <br/> Snippet button | See [ghost button - icon only](/components/button/style#ghost-button) |                 |
 | Container:focus                  | border                                                                | `$focus`        |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -79,8 +79,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Container:focus  | focus            | `$focus`           |
 | Container:active | background-color | `$layer-active` \* |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/contained-list/style.mdx b/src/pages/components/contained-list/style.mdx
@@ -36,8 +36,8 @@ structure, and size.
 | Icon (optional)       | svg              | `$icon-primary`    |
 | Row divider           | border-bottom    | `$border-subtle`\* |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -61,8 +61,8 @@ structure, and size.
 | Disabled | text color       | `$text-disabled`   |
 |          | border           | `$border-disabled` |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx
@@ -39,8 +39,8 @@ Content switcher includes two default-enabled content states: **selected** and
 |            | Border     | border           | `$border-inverse`         |
 |            | Divider    | border           | `$border-subtle` \*       |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -94,8 +94,8 @@ Content switcher has three interactive states—**hover**, **focus**, and
 |            |          | Border     | border           | `$border-disabled`         |
 |            |          | Divider    | border           | `$border-subtle` \*        |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx
@@ -32,8 +32,8 @@ structure, and AI presence.
 | Title        | text-color       | `$text-primary`   |
 | Description  | text-color       | `$text-secondary` |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -57,8 +57,8 @@ structure, and AI presence.
 | Focus   | border           | `$focus`                  |
 | Active  | background-color | `$layer-accent-active` \* |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -90,8 +90,8 @@ structure, and AI presence.
 |                  | svg              | `$icon-primary`             |
 | Zebra            | background-color | `$layer-accent` \*          |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -111,8 +111,8 @@ structure, and AI presence.
 | Icon button | See [ghost button](https://carbondesignsystem.com/components/button/style#ghost-button)     |             |
 | Button      | See [primary button](https://carbondesignsystem.com/components/button/style#primary-button) |             |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx
@@ -38,8 +38,8 @@ structure, size, and AI presence.
 | Helper text      | text-color       | `$text-helper`      |
 | Calendar icon    | svg              | `$icon-primary`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -92,8 +92,8 @@ structure, size, and AI presence.
 |           | Field (fluid)        | background-color | `$field` \*         |
 |           | Chevron icon         | svg              | `$icon-disabled`    |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -129,8 +129,8 @@ structure, size, and AI presence.
 | Calendar menu | box-shadow       | `0 2px 6px 0 rgba(0, 0, 0, 0.2)` |
 | Today         | text-color       | `$link-01`                       |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -163,8 +163,8 @@ structure, size, and AI presence.
 |            |         | border           | `$focus`            |
 | Next month | Day     | text-color       | `$text-secondary`   |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -195,8 +195,8 @@ The time picker is made up of text input and select input components.
 | Placeholder text | text-color       | `$text-placeholder` |
 | Chevron icon     | svg              | `$icon-primary`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -253,8 +253,8 @@ style tab for more details on select component interactive state colors.
 |           | Field (fluid)        | background-color | `$field` \*         |
 |           | Chevron icon         | svg              | `$icon-disabled`    |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -486,8 +486,8 @@ For more information on the AI style elements, see the
 |                 | background color | `$field` \*         |
 | AI label        | size             | mini                |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/dropdown/style.mdx b/src/pages/components/dropdown/style.mdx
@@ -43,8 +43,8 @@ structure, and size and AI presence.
 |                    | check            | `$icon-inverse`              |
 |                    | border           | `$icon-primary`              |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -111,8 +111,8 @@ structure, and size and AI presence.
 |               | Tag (fluid)          | text-color       | `$text-secondary`     |
 |               | Tag                  | svg              | `$icon-disabled`      |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -207,8 +207,8 @@ structure, and size and AI presence.
 |          | Error message | text-color       | `$text-error`        |
 |          | Error icon    | svg              | `$support-error`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -410,8 +410,8 @@ For more information on the AI style elements, see the
 |                 | background color | `$field`\*          |
 | AI label        | size             | mini                |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx
@@ -19,8 +19,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | File container      | background-color                                                                                | `$field` \*       |
 | Delete icon         | svg                                                                                             | `$icon-primary`   |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/inline-loading/style.mdx b/src/pages/components/inline-loading/style.mdx
@@ -15,8 +15,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | `status: finished`           | svg      | `$support-success`    |
 | `status: finished`           | svg      | `$support-error`      |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/menu/style.mdx b/src/pages/components/menu/style.mdx
@@ -32,8 +32,8 @@ structure, and size.
 | Shortcut icon | svg              | `$icon-secondary`          |
 | Container     | box-shadow       | 0 2px 6px 0 rgba(0,0,0,.2) |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -69,8 +69,8 @@ structure, and size.
 |                        | Menu option | text-color       | `$text-disabled`  |
 |                        | Icon        | svg              | `$icon-disabled`  |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx
@@ -38,8 +38,8 @@ styling in the transactional modal.
 | Close icon:hover | background-color | `$layer-hover` \* |
 | Page overlay     | color            | `$overlay`        |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
@@ -33,8 +33,8 @@ structure, size, and AI presence.
 |          | border-bottom    | `$border-strong` \* |
 | Controls | svg color        | `$icon-primary`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -209,8 +209,8 @@ For more information on the AI style elements, see the
 |                 | background color | `$field`\*          |
 | AI label        | size             | mini                |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/overflow-menu/style.mdx b/src/pages/components/overflow-menu/style.mdx
@@ -16,8 +16,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Danger option      | background-color | `$layer`\*                       |
 | Container          | box-shadow       | `0 2px 6px 0 rgba(0, 0, 0, 0.3)` |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/pagination/style.mdx b/src/pages/components/pagination/style.mdx
@@ -36,8 +36,8 @@ structure, and size.
 | Text: page range of total items | text-color       | `$text-secondary`   |
 | Icon                            | fill             | `$icon-primary`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -67,8 +67,8 @@ style tab for more information.
 |          | Icon       | fill             | `$icon-primary` |
 |          | Background | background-color | `$layer` \*     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
@@ -117,8 +117,8 @@ style tab for more information.
 |          | Icon       | fill             | `$icon-disabled`      |
 |          | Background | background-color | transparent           |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/popover/style.mdx b/src/pages/components/popover/style.mdx
@@ -12,8 +12,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Container | background-color | `$layer` \*           |
 |           | background-color | `$background-inverse` |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx
@@ -38,8 +38,8 @@ following table describes the color tokens used for each of these
 | Label              | text color       | `$text-primary`       |
 | Helper text        | text color       | `$text-secondary`     |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 

diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx
@@ -16,8 +16,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Placeholder text   | text-color       | `$text-placeholder` |
 | Search icon        | fill             | `$icon-secondary`   |
 
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 <div className="image--fixed">