Merge branch 'main' into toggle_style_doc

src/data/nav-items.yaml

@@ -33,6 +33,8 @@
       path: /developing/community-frameworks/angular/
     - title: Developer resources
       path: /developing/dev-resources/resources/
+    - title: React tutorial
+      path: /developing/react-tutorial/overview/
 - title: Contributing
   pages:
     - title: Get started

src/pages/all-about-carbon/the-carbon-ecosystem.mdx

@@ -121,7 +121,7 @@ _This content is accessible to IBMers only._
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="Carbon for IBM Products"
-    href="https://pages.github.ibm.com/cdai-design/pal/"
+    href="https://pages.github.ibm.com/carbon/ibm-products/"
     >
 
 ![Carbon for IBM products icon](images/ecosystem/carbon-for-ibm-product.svg)

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>
 

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>
 
@@ -103,14 +103,19 @@ in a phrase and any proper nouns capitalized.
 
 ## Structure
 
-| Element                     | Property                    | px / rem | Spacing token |
-| --------------------------- | --------------------------- | -------- | ------------- |
-| List header area: on-page   | height                      | 32 / 2   | `$spacing-07` |
-|                             | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| List header area: disclosed | height                      | 48 / 3   | `$spacing-09` |
-|                             | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| List item                   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| Icon (optional)             | height, width               | 16 / 1   | —             |
+| Element                              | Property                    | px / rem | Spacing token |
+| ------------------------------------ | --------------------------- | -------- | ------------- |
+| List header area: on-page            | height                      | 32 / 2   | `$spacing-07` |
+|                                      | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| List header area: disclosed          | height                      | 48 / 3   | `$spacing-09` |
+|                                      | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| List item                            | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Non-interactive icon (optional)      | height, width               | 16px     | —             |
+|                                      | padding left, padding-right | 16 / 1   | `$spacing-05` |
+| Inline action icon button (optional) | height, width               | 16px     | —             |
+|                                      | padding left, padding-right | 16 / 1   | `$spacing-05` |
+| Search icon button (optional)        | height, width               | 16px     | —             |
+|                                      | padding left, padding-right | 16 / 1   | `$spacing-05` |
 
 <div className="image--fixed">
 
@@ -168,7 +173,31 @@ in a phrase and any proper nouns capitalized.
 </div>
 
 <Caption>
-  Structure and spacing measurements for inline actions. | px / rem
+  Structure and spacing measurements for inline actions | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for non-interactive icons.](images/contained-list-non-interactive-icons-style.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for non-interactive icons | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for search and filtering.](images/contained-list-search-style.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for search and filtering | px / rem
 </Caption>
 
 ## Size

src/pages/components/contained-list/usage.mdx

@@ -124,10 +124,15 @@ and optional interactive elements.
 </Row>
 
 1. **List header area:** Area to group the succeeding list items.
-2. **List title:** Descriptive name for the group of list items.
-3. **List item:** The content with in a list item row.
-4. **Interactive element** (optional): An interactive element in the header or
-   row such as a button, link, icon, or toggle.
+2. **List item area:** Area to group text and elements in a list row.
+3. **List title:** Descriptive name for the group of list items.
+4. **List item:** The content in a list item row.
+5. **Non-interactive icon (optional):** A decorative icon to help visually
+   describe a list item.
+6. **Search icon button (optional):** An icon button for search or filtering
+   functionality in the contained list.
+7. **Interactive element (optional):** An interactive element in the header or
+   row such as a button, link, icon, tag, or toggle.
 
 ### Alignment
 
@@ -334,6 +339,22 @@ multiple column headers, we recommend using a data table instead.
 </Column>
 </Row>
 
+### Non-interactive icons
+
+Contained lists can have non-interactive icons positioned before the text in
+each row to help visually describe the list item, category, or status. These
+icons are decorative elements and are used for visual purposes only. Icons
+should typically be the same color as the text in the row unless they are status
+indicators.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list non-interactive icons](images/contained-list-non-interactive-icons-usage.png)
+
+</Column>
+</Row>
+
 ### Search and filtering
 
 Contained lists can include a search or filter functionality. The search or

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>
 

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>
 

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>
 

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>
 

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>
 

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>