AI doc update - Select & Date picker (#4060)

* AI doc update - Select & Date picker

* fixed positioning shift

* fixed a copy

* Update src/pages/components/date-picker/style.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/select/style.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

---------

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <PageDescription>
 
 The following page documents visual specifications such as color, typography,
-structure, and size.
+structure, size, and AI presence.
 
 </PageDescription>
 
@@ -19,6 +19,7 @@ structure, and size.
 <AnchorLink>Typography</AnchorLink>
 <AnchorLink>Structure</AnchorLink>
 <AnchorLink>Size</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
@@ -468,6 +469,49 @@ group. Time picker's total width will vary based on the grid and layout
 
 <Caption>Sizes for default style time picker input | px / rem</Caption>
 
+## AI presence
+
+The following are the unique styles applied to the components when the AI slug
+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.
+
+| 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                |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default date picker with AI presence](images/date-picker-usage-AI-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid date picker with AI presence](images/date-picker-usage-AI-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions, and

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

@@ -15,6 +15,15 @@ and times.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[date picker](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--date-picker).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Live demo</AnchorLink>
@@ -25,6 +34,7 @@ and times.
 <AnchorLink>Simple date input</AnchorLink>
 <AnchorLink>Calendar pickers</AnchorLink>
 <AnchorLink>Time pickers</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
@@ -565,6 +575,67 @@ a meeting time.
 </Column>
 </Row>
 
+## AI presence
+
+Date picker has a modification that takes on the AI visual styling when the AI
+slug is present in the input. 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.
+
+More information about designing for AI guidelines is coming soon.
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default date picker with AI presence](images/date-picker-usage-AI-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid date picker with AI presence](images/date-picker-usage-AI-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+### Revert to AI
+
+A date picker can toggle between the AI variant and the non-AI variant depending
+on the user’s interaction. If the user manually overrides the AI-suggested
+content then the input will change from the AI variant to the default variant.
+Once edited, the user should still be able to switch back to the initially AI
+generated content via a revert to AI button.
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default date picker with AI presence](images/date-picker-usage-revert-to-AI-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid date picker with AI presence](images/date-picker-usage-revert-to-AI-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 #### Asking for relative times and dates

src/pages/components/select/style.mdx

@@ -6,6 +6,24 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, size, and AI presence.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Size</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 | Element       | Property      | Color token         |
@@ -177,7 +195,7 @@ and any proper nouns capitalized. Select text should be three words or less.
   Structure and spacing measurements for fluid select | px / rem
 </Caption>
 
-## Sizes
+## Size
 
 ### Default select
 
@@ -216,3 +234,52 @@ and any proper nouns capitalized. Select text should be three words or less.
 </div>
 
 <Caption>Size for fluid select | px / rem</Caption>
+
+## AI presence
+
+The following are the unique styles applied to the components when the AI slug
+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.
+
+| 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                |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default select with AI presence](images/select-usage-AI-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid select with AI presence](images/select-usage-AI-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).

src/pages/components/select/usage.mdx

@@ -14,13 +14,24 @@ Select allows users to choose one option from a list of values.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--select).
+This addition changes the visual appearance of the component and introduces an
+AI explainability feature when AI is present in the component.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Live demo</AnchorLink>
 <AnchorLink>Overview</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+<AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
@@ -415,6 +426,67 @@ red border, an error icon indicator, and an error message.
 </Column>
 </Row>
 
+## AI presence
+
+Select has a modification that takes on the AI visual styling when the AI slug
+is present in the input. 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.
+
+More information about designing for AI guidelines is coming soon.
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default select with AI presence](images/select-usage-AI-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid select with AI presence](images/select-usage-AI-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+### Revert to AI
+
+A select can toggle between the AI variant and the non-AI variant depending on
+the user’s interaction. If the user manually overrides the AI-suggested content
+then the input will change from the AI variant to the default variant. Once
+edited, the user should still be able to switch back to the initially AI
+generated content via a revert to AI button.
+
+<Row>
+<Column colLg={8}>
+
+<Tabs>
+
+<Tab label="Default">
+
+![Enabled state of default select with AI presence](images/select-usage-revert-to-AI-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Enabled state of fluid select with AI presence](images/select-usage-revert-to-AI-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 - If there are fewer than three options to choose from, use a