ai_m_d (#4081)

* ai_m_d * Update src/pages/components/modal/style.mdx Co-authored-by: Kritvi <[email protected]> * ai_m_d * Update src/pages/components/modal/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> --------- Co-authored-by: Alina Jacob <[email protected]> Co-authored-by: Kritvi <[email protected]> Co-authored-by: Anna Gonzales <[email protected]>
carbon-design-system · May 30, 2024 · 617169c · 617169c
1 parent 759033d
commit 617169c
Show file tree

Hide file tree

Showing 23 changed files with 254 additions and 8 deletions.
diff --git a/src/pages/components/dropdown/images/dropdown-ai-presence-default.png b/src/pages/components/dropdown/images/dropdown-ai-presence-default.png
diff --git a/src/pages/components/dropdown/images/dropdown-ai-presence-fluid.png b/src/pages/components/dropdown/images/dropdown-ai-presence-fluid.png
diff --git a/src/pages/components/dropdown/images/dropdown-ai-revert-default.png b/src/pages/components/dropdown/images/dropdown-ai-revert-default.png
diff --git a/src/pages/components/dropdown/images/dropdown-ai-revert-fluid.png b/src/pages/components/dropdown/images/dropdown-ai-revert-fluid.png
diff --git a/...ges/components/dropdown/images/dropdown-style-ai-presence-ai-revert-default.png b/...ges/components/dropdown/images/dropdown-style-ai-presence-ai-revert-default.png
diff --git a/...pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-fluid.png b/...pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-fluid.png
diff --git a/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-do.png b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-do.png
diff --git a/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-dont.png b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-dont.png
diff --git a/src/pages/components/dropdown/style.mdx b/src/pages/components/dropdown/style.mdx
@@ -6,6 +6,23 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size and AI presence.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Sizes</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 | Element            | Property         | Color token                  |
@@ -353,3 +370,46 @@ condensed.
 </Row>
 
 <Caption>Fluid dropdown sizes | px / rem</Caption>
+
+## 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.
+
+More information about AI style elements 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">
+
+![Default dropdown AI example](images/dropdown-style-ai-presence-ai-revert-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid dropdown AI example](images/dropdown-style-ai-presence-ai-revert-default.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
@@ -17,6 +17,18 @@ action to filter or sort existing content.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[dropdown](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--dropdown),
+[combobox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--combobox),
+[multiselect](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--multiselect),
+[filterable multiselect](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--filterable-multiselect).
+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>
@@ -28,6 +40,7 @@ action to filter or sort existing content.
 <AnchorLink>Multiselect</AnchorLink>
 <AnchorLink>Combo box</AnchorLink>
 <AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>References</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -434,6 +447,19 @@ even if it's next to a non-interactive item.
   </DoDont>
 </DoDontRow>
 
+<DoDontRow>
+  <DoDont caption="Do introduce a vertical divider to the left of the leftmost interactive set in an input field.">
+
+![Do introduce a vertical divider to the left of the leftmost interactive set in an input field.](images/usage-ai-combobox-vertical-divider-do.png)
+
+  </DoDont>
+  <DoDont type="dont" caption="Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.">
+
+![Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.](images/usage-ai-combobox-vertical-divider-dont.png)
+
+  </DoDont>
+</DoDontRow>
+
 ### Interactions
 
 #### Mouse
@@ -808,6 +834,68 @@ modifier for dropdown and does not have filtering functionality._
 </Column>
 </Row>
 
+## AI presence
+
+Dropdown and its varinats have a modification that takes on the AI visual
+styling when the AI slug is present in the input. The AI variant of these
+components function 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">
+
+![Default dropdown AI presence example](images/dropdown-ai-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid dropdown AI presence example](images/dropdown-ai-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+### Revert to AI
+
+A dropdown 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 non-AI 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">
+
+![Default dropdown AI revert example](images/dropdown-ai-revert-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid dropdown AI revert example](images/dropdown-ai-revert-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 - [Checkbox](https://www.carbondesignsystem.com/components/checkbox/code)

diff --git a/src/pages/components/modal/images/modal-usage-ai-presence-g100.png b/src/pages/components/modal/images/modal-usage-ai-presence-g100.png
diff --git a/src/pages/components/modal/images/modal-usage-ai-presence-w.png b/src/pages/components/modal/images/modal-usage-ai-presence-w.png
diff --git a/src/pages/components/modal/images/modal-usage-style-presence.png b/src/pages/components/modal/images/modal-usage-style-presence.png
diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx
@@ -6,6 +6,23 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size and AI presence.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Sizes</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 Refer to the [button](/components/button/style) for primary and secondary button
@@ -193,3 +210,31 @@ the content while sticking to the bottom of the mobile screen.
 
 </Column>
 </Row>
+
+## 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.
+
+More information about AI style elements is coming soon.
+
+| Element                    | Property         | Token / Size        |
+| -------------------------- | ---------------- | ------------------- |
+| Modal:background           | background-color | `$layer` \*         |
+|                            | box-shadow       | `$ai-drop-shadow`   |
+|                            | inner-shadow     | `$ai-inner-shadow`  |
+| Overlay                    | background-color | `$ai-overlay`       |
+| Linear gradient:background | start            | `$ai-aura-start-sm` |
+|                            | stop             | `$ai-aura-stop`     |
+| Linear gradient:border     | top              | `$ai-border-start`  |
+|                            | bottom           | `$ai-border-end`    |
+| AI Slug                    | size             | large               |
+
+<Row>
+<Column colLg={8}>
+
+![Modal AI presence](images/modal-usage-style-presence.png)
+
+</Column>
+</Row>
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
@@ -15,6 +15,15 @@ information via a window that sits on top of the page content.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[modal](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--modal).
+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>
@@ -23,6 +32,7 @@ information via a window that sits on top of the page content.
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
 <AnchorLink>Modal variants</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
@@ -490,6 +500,42 @@ The Cancel button is aligned to left side of the dialog and uses a ghost button.
 </Column>
 </Row>
 
+## AI presence
+
+Modal has a modification that takes on the AI visual styling when AI is present
+in the entire container. The AI variants of a modal function the same as the
+normal variants except for the addition of the AI slug, which is both a visual
+indicator and the trigger for the explainability popover.
+
+When the entire modal is styled for AI, it indicates to the user that AI is
+present in all aspects of the modal. If only a limited amount of the modal
+content is generated by AI, then only those components should receive the AI
+presence styling, not the entire modal.
+
+More information about designing for AI guidelines is coming soon.
+
+<Row>
+<Column colLg={12}>
+
+<Tabs>
+
+<Tab label="White">
+
+![Modal's White theme AI presence example](images/modal-usage-ai-presence-w.png)
+
+</Tab>
+
+<Tab label="Gray100">
+
+![Modal's Gray100 theme AI presence example](images/modal-usage-ai-presence-g100.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 #### Modal vs. notification

diff --git a/...onents/number-input/images/number-input-style-ai-presence-ai-revert-default.png b/...onents/number-input/images/number-input-style-ai-presence-ai-revert-default.png
diff --git a/...mponents/number-input/images/number-input-style-ai-presence-ai-revert-fluid.png b/...mponents/number-input/images/number-input-style-ai-presence-ai-revert-fluid.png
diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
@@ -6,6 +6,13 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and size and AI presence.
+
+</PageDescription>
+
 <AnchorLinks>
 
 <AnchorLink>Color</AnchorLink>
@@ -213,13 +220,13 @@ More information about AI style elements is coming soon.
 
 <Tab label="Default">
 
-![Default number input AI example](images/number-input-style-ai-default.png)
+![Default number input AI example](images/number-input-style-ai-presence-ai-revert-default.png)
 
 </Tab>
 
 <Tab label="Fluid">
 
-![Fluid number input AI example](images/number-input-style-ai-fluid.png)
+![Fluid number input AI example](images/number-input-style-ai-presence-ai-revert-fluid.png)
 
 </Tab>
 

diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
@@ -17,7 +17,7 @@ decrease the value with a two-segment control.
 
 <InlineNotification>
 
-Experimental Slug is now available for
+Experimental slug is now available for
 [number input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--number-input&_ga=2.126834955.781464953.1715000611-86992666.1707752603&_gl=1*1l8cah1*_ga*ODY5OTI2NjYuMTcwNzc1MjYwMw..*_ga_FYECCCS21D*MTcxNTE3NzAxMC4zNi4xLjE3MTUxNzc1MTQuMC4wLjA.).
 This addition changes the visual appearance of the component and introduces an
 AI explainability feature when AI is present in the component.
@@ -343,7 +343,7 @@ number of children as ‘0’.
 
 Number input has a modification that takes on the AI visual styling when the AI
 slug is present in the input. The AI variant of number input functions the same
-as the normal version except with the additional of the AI slug which is both a
+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.

diff --git a/...onents/text-input/images/text-input-text-area-ai-presence-ai-revert-default.png b/...onents/text-input/images/text-input-text-area-ai-presence-ai-revert-default.png
diff --git a/...mponents/text-input/images/text-input-text-area-ai-presence-ai-revert-fluid.png b/...mponents/text-input/images/text-input-text-area-ai-presence-ai-revert-fluid.png
diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/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, and size and AI presence.
 
 </PageDescription>
 
@@ -355,13 +355,13 @@ More information about AI style elements is coming soon.
 
 <Tab label="Default">
 
-![Default text input and text area AI example](images/text-input-text-area-ai-presence-default.png)
+![Default text input and text area AI example](images/text-input-text-area-ai-presence-ai-revert-default.png)
 
 </Tab>
 
 <Tab label="Fluid">
 
-![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-fluid.png)
+![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-ai-revert-fluid.png)
 
 </Tab>
 

diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
@@ -17,7 +17,7 @@ and short-form entries.
 
 <InlineNotification>
 
-Experimental Slug is now available for
+Experimental slug is now available for
 [text input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-input)
 and
 [text area](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-area).