AI docs: Updated links and notifications (carbon-design-system#4192)

* AI docs: Updated links and notifications * Apply suggestions from code review Co-authored-by: andrew <[email protected]> * feat: rename live demos from ai slug to ai label * chore: yarn format --------- Co-authored-by: andrew <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
laurenmrice · Aug 14, 2024 · e2d8953 · e2d8953
1 parent 027a425
commit e2d8953
Show file tree

Hide file tree

Showing 36 changed files with 320 additions and 240 deletions.
diff --git a/src/pages/components/ai-label/code.mdx b/src/pages/components/ai-label/code.mdx
@@ -38,8 +38,17 @@ documentation, see the Storybooks for each framework below.
 
 ## Live demo
 
-<InlineNotification>
-
-The live demo for AI label will be added soon. Check back later for updates.
-
-</InlineNotification>
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-ailabel--default',
+    },
+    {
+      label: 'Callout',
+      variant: 'components-ailabel--callout',
+    },
+  ]}
+/>
diff --git a/src/pages/components/ai-label/usage.mdx b/src/pages/components/ai-label/usage.mdx
@@ -18,10 +18,8 @@ explainability by acting as the trigger for the explainability popover.
 
 **New!**
 [AI label](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview)
-is now available as an experimental component. The AI label was previously
-called "AI Slug" but has been changed to better reflect its usage. This name
-change will be reflected in code and Figma once it moves to stable in the near
-future.
+is now a stable component. The AI label was previously called "AI Slug" but has
+been changed to better reflect its usage.
 
 </InlineNotification>
 
@@ -39,12 +37,20 @@ future.
 
 ## Live demo
 
-<InlineNotification>
-
-The live demo and accessibility testing status for AI label will be added soon.
-Check back later for updates.
-
-</InlineNotification>
+<StorybookDemo
+  themeSelector
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-ailabel--default',
+    },
+    {
+      label: 'Callout',
+      variant: 'components-ailabel--callout',
+    },
+  ]}
+/>
 
 ## Overview
 

diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
@@ -69,8 +69,8 @@ documentation, see the Storybooks for each framework below.
       variant: 'components-checkbox--default',
     },
     {
-      label: 'With AI slug',
-      variant: 'experimental-unstable-slug-examples--checkbox',
+      label: 'with AI Label',
+      variant: 'components-checkbox--with-ai-label',
     },
   ]}
 />
diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx
@@ -122,14 +122,15 @@ labels should not exceed three words.
 ## AI presence
 
 The only style modification an AI variant of the checkbox has is the addition of
-the slug. All other tokens in the component remain the same as the non-AI
+the AI label. All other tokens in the component remain the same as the non-AI
 variants.
 
-More information about designing for AI guidelines is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
-| Element | Property | Token / Size |
-| ------- | -------- | ------------ |
-| AI slug | size     | mini         |
+| Element  | Property | Token / Size |
+| -------- | -------- | ------------ |
+| AI label | size     | mini         |
 
 <Row>
 <Column colLg={8}>

diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
@@ -17,10 +17,12 @@ select zero, one, or any number of items.
 
 <InlineNotification>
 
-Experimental slug is now available for
-[checkbox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--checkbox).
-This addition changes the visual appearance of the component and introduces an
-AI explainability feature when AI is present in the component.
+Checkbox
+[with AI label](https://react.carbondesignsystem.com/?path=/story/components-checkbox--with-ai-label)
+is now stable. This addition changes the visual appearance of the component and
+introduces an AI explainability feature when AI is present in the component. See
+the [AI presence](/components/checkbox/usage/#ai-presence) section for more
+details.
 
 </InlineNotification>
 
@@ -49,8 +51,8 @@ AI explainability feature when AI is present in the component.
       variant: 'components-checkbox--default',
     },
     {
-      label: 'With AI slug',
-      variant: 'experimental-unstable-slug-examples--checkbox',
+      label: 'with AI Label',
+      variant: 'components-checkbox--with-ai-label',
     },
   ]}
 />
@@ -349,13 +351,14 @@ checkbox input has focus. For additional keyboard interactions, see the
 
 ## AI presence
 
-Checkbox has a modification that embeds the AI slug when AI present in the
+Checkbox has a modification that embeds the AI label when AI is present in the
 control. The AI variant functions the same as the normal version except with the
-addition of the AI slug which is both a visual indicator and the trigger for the
-explainability popover. The slug can be placed on the group label or on
-individual checkbox labels.
+addition of the AI label which is both a visual indicator and the trigger for
+the explainability popover. The AI label can be placed on the checkbox group
+label or on individual checkbox labels.
 
-More information about designing for AI guidelines is coming soon.
+For more information on designing for AI, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 <Row>
 <Column colLg={8}>

diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx
@@ -126,13 +126,31 @@ usage documentation, see the Storybooks for each framework below.
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
     {
-      label: 'Sorting (with AI slug)',
-      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+      label: 'AI Label With Expansion',
+      variant: 'components-datatable-withailabel--ai-label-with-expansion',
     },
     {
-      label: 'Selection and Expansion (with AI slug)',
+      label: 'AI Label with Radio Selection',
       variant:
-        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+        'components-datatable-withailabel--ai-label-with-radio-selection',
+    },
+    {
+      label: 'AI Label with Selection',
+      variant: 'components-datatable-withailabel--ai-label-with-selection',
+    },
+    {
+      label: 'AI Label with Selection and Expansion',
+      variant:
+        'components-datatable-withailabel--ai-label-with-selection-and-expansion',
+    },
+    {
+      label: 'Column AI Label Sort',
+      variant: 'components-datatable-withailabel--column-ai-label-sort',
+    },
+    {
+      label: 'Column AI Label with Selection and  Expansion',
+      variant:
+        'components-datatable-withailabel--column-ai-label-with-selection-and-expansion',
     },
   ]}
 />

diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx
@@ -309,11 +309,12 @@ sizes.
 
 ## AI presence
 
-The following are the unique styles applied to the component when the AI slug is
-present. Unless specified, all other tokens in the component remain the same as
-the non-AI variant.
+The following are the unique styles applied to the component when the AI label
+is present. Unless specified, all other tokens in the component remain the same
+as the non-AI variant.
 
-More information about AI style elements is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 <Title>Entire table</Title>
 
@@ -326,7 +327,7 @@ More information about AI style elements is coming soon.
 |                            | stop             | `$ai-aura-stop`     |
 | Linear gradient:border     | top              | `$ai-border-start`  |
 |                            | bottom           | `$ai-border-end`    |
-| AI Slug                    | size             | large               |
+| AI label                   | size             | large               |
 
 <Row>
 <Column colLg={12}>
@@ -342,9 +343,9 @@ More information about AI style elements is coming soon.
 
 <Title>Individual cells</Title>
 
-| Element     | Property | Token / Size |
-| ----------- | -------- | ------------ |
-| Inline Slug | size     | medium       |
+| Element         | Property | Token / Size |
+| --------------- | -------- | ------------ |
+| Inline AI label | size     | medium       |
 
 <Row>
 <Column colLg={12}>
@@ -366,7 +367,7 @@ More information about AI style elements is coming soon.
 | Linear gradient:background | start     | `$ai-aura-start-sm` |
 |                            | stop      | `$ai-aura-stop`     |
 | Linear gradient:border     | left, top | `$ai-border-strong` |
-| AI Slug                    | size      | mini                |
+| AI label                   | size      | mini                |
 
 <Row>
 <Column colLg={12}>

diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx
@@ -18,10 +18,12 @@ your product's users.
 
 <InlineNotification>
 
-Experimental slug is now available for
-[data table](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug-datatable--overview).
-This addition changes the visual appearance of the component and introduces an
-AI explainability feature when AI is present in the component.
+Data table
+[with AI label](https://react.carbondesignsystem.com/?path=/docs/components-datatable-withailabel--overview)
+is now stable. This addition changes the visual appearance of the component and
+introduces an AI explainability feature when AI is present in the component. See
+the [AI presence](/components/data-table/usage/#ai-presence) section for more
+details.
 
 </InlineNotification>
 
@@ -105,13 +107,31 @@ AI explainability feature when AI is present in the component.
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
     {
-      label: 'Sorting (with AI slug)',
-      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+      label: 'AI Label With Expansion',
+      variant: 'components-datatable-withailabel--ai-label-with-expansion',
     },
     {
-      label: 'Selection and Expansion (with AI slug)',
+      label: 'AI Label with Radio Selection',
       variant:
-        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+        'components-datatable-withailabel--ai-label-with-radio-selection',
+    },
+    {
+      label: 'AI Label with Selection',
+      variant: 'components-datatable-withailabel--ai-label-with-selection',
+    },
+    {
+      label: 'AI Label with Selection and Expansion',
+      variant:
+        'components-datatable-withailabel--ai-label-with-selection-and-expansion',
+    },
+    {
+      label: 'Column AI Label Sort',
+      variant: 'components-datatable-withailabel--column-ai-label-sort',
+    },
+    {
+      label: 'Column AI Label with Selection and  Expansion',
+      variant:
+        'components-datatable-withailabel--column-ai-label-with-selection-and-expansion',
     },
   ]}
 />
@@ -232,10 +252,10 @@ tables or smaller containers where the information can feel cramped or needs
 truncation.
 
 The data table can be placed on the grid following the three different
-[gutter modes](/elements/2x-grid/usage/#gutter-modes) outlined in the
-2x grid guidelines. Although, the data table can share horizontal space with
-other components and content, consider giving your data table the most width on
-the page to help your user view dense data.
+[gutter modes](/elements/2x-grid/usage/#gutter-modes) outlined in the 2x grid
+guidelines. Although, the data table can share horizontal space with other
+components and content, consider giving your data table the most width on the
+page to help your user view dense data.
 
 These three examples show the data table on the wide (default), narrow, and
 condensed gutter modes. Note the different type alignments and gutter sizes.
@@ -630,11 +650,12 @@ alternating colors to make scanning horizontal information easier for the user.
 
 Data table has a modification that takes on the AI visual styling when AI is
 present in the table. The AI variants of a data table function the same as the
-normal variants except for the addition of the AI slug, which is both a visual
+normal variants except for the addition of the AI label, which is both a visual
 indicator and the trigger for the explainability popover. Where the AI label
 goes inside of a data table depends on which parts of the data are AI generated.
 
-More information about designing for AI guidelines is coming soon.
+For more information on designing for AI, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 #### Entire table
 
@@ -654,16 +675,16 @@ present in all aspects of the data table.
 #### Individual cells
 
 If only some data table cells have content generated by AI, then those cells
-have an in-line AI slug next to them. These cells do not get any AI layering.
+have an in-line AI label next to them. These cells do not get any AI layering.
 
 <Row>
 <Column colLg={12}>
 
-![Example of a data table cell generated by AI represneted by the in-line AI slug](images/usage-ai-presence-inline-datatable.png)
+![Example of a data table cell generated by AI represented by the in-line AI label](images/usage-ai-presence-inline-datatable.png)
 
 <Caption>
-  Example of a data table cell generated by AI represneted by the in-line AI
-  slug.
+  Example of a data table cell generated by AI represented by the in-line AI
+  label.
 </Caption>
 
 </Column>
@@ -673,7 +694,7 @@ have an in-line AI slug next to them. These cells do not get any AI layering.
 
 If content belonging to only a row or column of the data table is generated by
 AI, then only those respective row/s and column/s should receive the AI presence
-styling along with the AI slug, not the entire data table.
+styling along with the AI label, not the entire data table.
 
 <Row>
 <Column colLg={12}>

diff --git a/src/pages/components/date-picker/code.mdx b/src/pages/components/date-picker/code.mdx
@@ -90,8 +90,8 @@ usage documentation, see the Storybooks for each framework below.
       variant: 'experimental-unstable-fluiddatepicker--single',
     },
     {
-      label: 'Single with AI slug',
-      variant: 'experimental-unstable-slug-examples--date-picker',
+      label: 'Single with AI Label',
+      variant: 'components-datepicker--with-ai-label',
     },
   ]}
 />
diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx
@@ -471,19 +471,20 @@ group. Time picker's total width will vary based on the grid and layout
 
 ## AI presence
 
-The following are the unique styles applied to the components when the AI slug
+The following are the unique styles applied to the components when the AI label
 is present. Unless specified, all other tokens in the components remain the same
 as the non-AI variants.
 
-More information about designing for AI guidelines is coming soon.
+For more information on the AI style elements, see the
+[Carbon for AI](/guidelines/carbon-for-ai/) guidelines.
 
 | Element         | Property         | Token / Size        |
 | --------------- | ---------------- | ------------------- |
 | Linear-gradient | start            | `$ai-aura-start-sm` |
 |                 | stop             | `$ai-aura-stop`     |
 | Field           | border-bottom    | `$ai-border-strong` |
 |                 | background color | `$field` \*         |
-| AI slug         | size             | mini                |
+| AI label        | size             | mini                |
 
 <Caption>
   * Denotes a contextual color token that will change values based on the layer