ai-alina (carbon-design-system#4059)

* ai-alina * Update src/pages/components/text-input/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/style.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/style.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/number-input/style.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/number-input/style.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/number-input/usage.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/text-input/style.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/text-input/usage.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/number-input/style.mdx Co-authored-by: Kritvi <[email protected]> * Update src/pages/components/number-input/usage.mdx Co-authored-by: Kritvi <[email protected]> * ai-alina * ai-alina * Update src/pages/components/text-input/usage.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/style.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/text-input/style.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/components/number-input/style.mdx Co-authored-by: Anna Gonzales <[email protected]> * PR_name --------- Co-authored-by: Alina Jacob <[email protected]> Co-authored-by: Anna Gonzales <[email protected]> Co-authored-by: Kritvi <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
kingtraceyj · May 16, 2024 · 69b2aa4 · 69b2aa4
1 parent c9bce4c
commit 69b2aa4
Show file tree

Hide file tree

Showing 15 changed files with 241 additions and 0 deletions.
diff --git a/src/pages/components/number-input/images/number-input-style-ai-default.png b/src/pages/components/number-input/images/number-input-style-ai-default.png
diff --git a/src/pages/components/number-input/images/number-input-style-ai-fluid.png b/src/pages/components/number-input/images/number-input-style-ai-fluid.png
diff --git a/src/pages/components/number-input/images/number-input-usage-12.png b/src/pages/components/number-input/images/number-input-usage-12.png
diff --git a/src/pages/components/number-input/images/number-input-usage-13.png b/src/pages/components/number-input/images/number-input-usage-13.png
diff --git a/src/pages/components/number-input/images/number-input-usage-14.png b/src/pages/components/number-input/images/number-input-usage-14.png
diff --git a/src/pages/components/number-input/images/number-input-usage-15.png b/src/pages/components/number-input/images/number-input-usage-15.png
diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx
@@ -6,6 +6,16 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>Sizes</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 | Element  | Property         | Color token         |
@@ -174,3 +184,46 @@ layout, and design.
 </div>
 
 <Caption>Sizes for number input fields | 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 number input AI example](images/number-input-style-ai-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid number input AI example](images/number-input-style-ai-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
@@ -15,13 +15,23 @@ decrease the value with a two-segment control.
 
 </PageDescription>
 
+<InlineNotification>
+
+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.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Live demo</AnchorLink>
 <AnchorLink>Overview</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Behaviors</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>References</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -329,6 +339,67 @@ number of children as ‘0’.
   </DoDont>
 </Row>
 
+## AI presence
+
+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
+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 number input AI presence example](images/number-input-style-ai-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid number input AI presence example](images/number-input-style-ai-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+### Revert to AI
+
+A number input 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 number input AI revert example](images/number-input-usage-13.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid number input AI revert example](images/number-input-usage-15.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 - Use [slider](https://carbondesignsystem.com/components/slider/usage/) when

diff --git a/...pages/components/text-input/images/text-input-text-area-ai-presence-default.png b/...pages/components/text-input/images/text-input-text-area-ai-presence-default.png
diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png
diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence.png
diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png b/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png
diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-revert.png b/src/pages/components/text-input/images/text-input-text-area-ai-revert.png
diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx
@@ -19,6 +19,7 @@ structure, and size.
 <AnchorLink>Typography</AnchorLink>
 <AnchorLink>Structure</AnchorLink>
 <AnchorLink>Size</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
@@ -326,6 +327,49 @@ These sizes apply only to the default style of text input.
 
 <Caption>Text input default style 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 text input and text area AI example](images/text-input-text-area-ai-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions, and

diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
@@ -15,6 +15,17 @@ and short-form entries.
 
 </PageDescription>
 
+<InlineNotification>
+
+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).
+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 +36,7 @@ and short-form entries.
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
 <AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>AI Presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
@@ -561,6 +573,67 @@ met.
 </Column>
 </Row>
 
+## AI presence
+
+Text input and text area have 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">
+
+![Default text input and text area AI presence example](images/text-input-text-area-ai-presence-default.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid text input and text area AI presence example](images/text-input-text-area-ai-presence-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
+### Revert to AI
+
+The text input and text area 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 text input and text area AI revert example](images/text-input-text-area-ai-revert.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid text input and text area AI revert example](images/text-input-text-area-ai-revert-fluid.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 - [Form pattern](/patterns/forms-pattern/)