docs: added ai slug examples to some components (#4097)

Co-authored-by: Taylor Jones <[email protected]>

src/pages/components/checkbox/code.mdx

@@ -68,5 +68,9 @@ documentation, see the Storybooks for each framework below.
       label: 'Default',
       variant: 'components-checkbox--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--checkbox',
+    },
   ]}
 />

src/pages/components/checkbox/usage.mdx

@@ -48,6 +48,10 @@ AI explainability feature when AI is present in the component.
       label: 'Default',
       variant: 'components-checkbox--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--checkbox',
+    },
   ]}
 />
 

src/pages/components/data-table/code.mdx

@@ -125,6 +125,15 @@ usage documentation, see the Storybooks for each framework below.
       label: 'With Overflow Menu',
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
+    {
+      label: 'Sorting (with AI slug)',
+      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+    },
+    {
+      label: 'Selection and Expansion (with AI slug)',
+      variant:
+        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+    },
   ]}
 />
 

src/pages/components/data-table/usage.mdx

@@ -94,6 +94,15 @@ your product's users.
       label: 'With Overflow Menu',
       variant: 'components-datatable-toolbar--with-overflow-menu',
     },
+    {
+      label: 'Sorting (with AI slug)',
+      variant: 'experimental-unstable-slug-datatable--column-slug-sort',
+    },
+    {
+      label: 'Selection and Expansion (with AI slug)',
+      variant:
+        'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+    },
   ]}
 />
 

src/pages/components/date-picker/code.mdx

@@ -89,5 +89,9 @@ usage documentation, see the Storybooks for each framework below.
       label: 'Fluid Single (unstable)',
       variant: 'experimental-unstable-fluiddatepicker--single',
     },
+    {
+      label: 'Single with AI slug',
+      variant: 'experimental-unstable-slug-examples--date-picker',
+    },
   ]}
 />

src/pages/components/date-picker/usage.mdx

@@ -71,6 +71,10 @@ AI explainability feature when AI is present in the component.
       label: 'Fluid Single (unstable)',
       variant: 'experimental-unstable-fluiddatepicker--single',
     },
+    {
+      label: 'Single with AI slug',
+      variant: 'experimental-unstable-slug-examples--date-picker',
+    },
   ]}
 />
 

src/pages/components/dropdown/code.mdx

@@ -86,14 +86,26 @@ documentation, see the Storybooks for each framework below.
       variant:
         'experimental-fluid-components-unstable-fluiddropdown--condensed',
     },
+    {
+      label: 'Dropdown with AI slug',
+      variant: 'experimental-unstable-slug-examples--dropdown',
+    },
     {
       label: 'Multiselect',
       variant: 'components-multiselect--default',
     },
+    {
+      label: 'Multiselect with AI slug',
+      variant: 'experimental-unstable-slug-examples--multiselect',
+    },
     {
       label: 'Filterable multiselect',
       variant: 'components-multiselect--filterable',
     },
+    {
+      label: 'Filterable multiselect with AI slug',
+      variant: 'experimental-unstable-slug-examples--filterable-multiselect',
+    },
     {
       label: 'Fluid multiselect (unstable)',
       variant:
@@ -117,5 +129,9 @@ documentation, see the Storybooks for each framework below.
       variant:
         'experimental-fluid-components-unstable-fluidcombobox--condensed',
     },
+    {
+      label: 'Combobox with AI slug',
+      variant: 'experimental-unstable-slug-examples--combobox',
+    },
   ]}
 />

src/pages/components/dropdown/usage.mdx

@@ -71,14 +71,26 @@ AI explainability feature when AI is present in the component.
       variant:
         'experimental-fluid-components-unstable-fluiddropdown--condensed',
     },
+    {
+      label: 'Dropdown with AI slug',
+      variant: 'experimental-unstable-slug-examples--dropdown',
+    },
     {
       label: 'Multiselect',
       variant: 'components-multiselect--default',
     },
+    {
+      label: 'Multiselect with AI slug',
+      variant: 'experimental-unstable-slug-examples--multiselect',
+    },
     {
       label: 'Filterable multiselect',
       variant: 'components-multiselect--filterable',
     },
+    {
+      label: 'Filterable multiselect with AI slug',
+      variant: 'experimental-unstable-slug-examples--filterable-multiselect',
+    },
     {
       label: 'Fluid multiselect (unstable)',
       variant:
@@ -102,6 +114,10 @@ AI explainability feature when AI is present in the component.
       variant:
         'experimental-fluid-components-unstable-fluidcombobox--condensed',
     },
+    {
+      label: 'Combobox with AI slug',
+      variant: 'experimental-unstable-slug-examples--combobox',
+    },
   ]}
 />
 

src/pages/components/modal/code.mdx

@@ -85,5 +85,9 @@ documentation, see the Storybooks for each framework below.
       label: 'With State Manager',
       variant: 'components-modal--with-state-manager',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--modal',
+    },
   ]}
 />

src/pages/components/modal/usage.mdx

@@ -65,6 +65,10 @@ AI explainability feature when AI is present in the component.
       label: 'With State Manager',
       variant: 'components-modal--with-state-manager',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--modal',
+    },
   ]}
 />
 

src/pages/components/number-input/code.mdx

@@ -72,5 +72,9 @@ usage documentation, see the Storybooks for each framework below.
       label: 'Fluid (unstable)',
       variant: 'experimental-unstable-fluidnumberinput--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--number-input',
+    },
   ]}
 />

src/pages/components/number-input/usage.mdx

@@ -52,6 +52,10 @@ AI explainability feature when AI is present in the component.
       label: 'Fluid (unstable)',
       variant: 'experimental-unstable-fluidnumberinput--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--number-input',
+    },
   ]}
 />
 

src/pages/components/radio-button/code.mdx

@@ -68,5 +68,9 @@ usage documentation, see the Storybooks for each framework below.
       label: 'Default',
       variant: 'components-radiobutton--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--radio-button',
+    },
   ]}
 />

src/pages/components/radio-button/usage.mdx

@@ -48,6 +48,10 @@ AI explainability feature when AI is present in the component.
       label: 'Default',
       variant: 'components-radiobutton--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--radio-button',
+    },
   ]}
 />
 

src/pages/components/select/code.mdx

@@ -76,5 +76,9 @@ documentation, see the Storybooks for each framework below.
       label: 'Fluid (unstable)',
       variant: 'experimental-unstable-fluidselect--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--select',
+    },
   ]}
 />

src/pages/components/select/usage.mdx

@@ -54,6 +54,10 @@ AI explainability feature when AI is present in the component.
       label: 'Fluid (unstable)',
       variant: 'experimental-unstable-fluidselect--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--select',
+    },
   ]}
 />
 

src/pages/components/tag/code.mdx

@@ -68,5 +68,9 @@ documentation, see the Storybooks for each framework below.
       label: 'Default',
       variant: 'components-tag--default',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--tag',
+    },
   ]}
 />

src/pages/components/tag/usage.mdx

@@ -50,6 +50,10 @@ to the filter prop and will eventually replace the prop in v12.
       label: 'ReadOnly',
       variant: 'components-tag--read-only',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--tag',
+    },
   ]}
 />
 

src/pages/components/text-input/code.mdx

@@ -82,15 +82,25 @@ usage documentation, see the Storybooks for each framework below.
     },
     {
       label: 'Fluid (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--default',
+      variant: 'experimental-fluid-components-unstable-fluidtextinput--default',
     },
     {
       label: 'Fluid with Tooltip (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--default-with-tooltip',
+      variant:
+        'experimental-fluid-components-unstable-fluidtextinput--default-with-tooltip',
     },
     {
       label: 'Fluid with Password Input (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--password-input',
+      variant:
+        'experimental-fluid-components-unstable-fluidpasswordinput--default',
+    },
+    {
+      label: 'Text Area with AI slug',
+      variant: 'experimental-unstable-slug-examples--text-area',
+    },
+    {
+      label: 'Text Input with AI slug',
+      variant: 'experimental-unstable-slug-examples--text-input',
     },
   ]}
 />

src/pages/components/text-input/usage.mdx

@@ -66,15 +66,25 @@ AI explainability feature when AI is present in the component.
     },
     {
       label: 'Fluid (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--default',
+      variant: 'experimental-fluid-components-unstable-fluidtextinput--default',
     },
     {
       label: 'Fluid with Tooltip (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--default-with-tooltip',
+      variant:
+        'experimental-fluid-components-unstable-fluidtextinput--default-with-tooltip',
     },
     {
       label: 'Fluid with Password Input (unstable)',
-      variant: 'experimental-unstable-fluidtextinput--password-input',
+      variant:
+        'experimental-fluid-components-unstable-fluidpasswordinput--default',
+    },
+    {
+      label: 'Text Area with AI slug',
+      variant: 'experimental-unstable-slug-examples--text-area',
+    },
+    {
+      label: 'Text Input with AI slug',
+      variant: 'experimental-unstable-slug-examples--text-input',
     },
   ]}
 />

src/pages/components/tile/code.mdx

@@ -112,5 +112,9 @@ documentation, see the Storybooks for each framework below.
       label: 'Selectable with Improved Contrast (unstable)',
       variant: 'experimental-feature-flags-tile--selectable',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--tile',
+    },
   ]}
 />

src/pages/components/tile/usage.mdx

@@ -99,6 +99,10 @@ supported.
       label: 'Selectable with Improved Contrast (unstable)',
       variant: 'experimental-feature-flags-tile--selectable',
     },
+    {
+      label: 'With AI slug',
+      variant: 'experimental-unstable-slug-examples--tile',
+    },
   ]}
 />