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 new file mode 100644 index 00000000000..a2dbc838f67 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-default.png differ 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 new file mode 100644 index 00000000000..2fae797fef8 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-fluid.png differ 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 new file mode 100644 index 00000000000..a2dbc838f67 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-12.png differ 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 new file mode 100644 index 00000000000..a9b56be7517 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-13.png differ 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 new file mode 100644 index 00000000000..2fae797fef8 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-14.png differ 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 new file mode 100644 index 00000000000..50ee7a48331 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-15.png differ diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index 7b236e4da42..df2c23521f9 100755 --- 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'] --- + + +Color +Typography +Structure +Sizes +AI presence + + + ## Color | Element | Property | Color token | @@ -174,3 +184,46 @@ layout, and design. Sizes for number input fields | px / rem + +## 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 | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Default number input AI example](images/number-input-style-ai-default.png) + + + + + +![Fluid number input AI example](images/number-input-style-ai-fluid.png) + + + + + + + diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx index f9fd4d919c3..c542f091552 100755 --- a/src/pages/components/number-input/usage.mdx +++ b/src/pages/components/number-input/usage.mdx @@ -15,6 +15,15 @@ decrease the value with a two-segment control. + + +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. + + + Live demo @@ -22,6 +31,7 @@ decrease the value with a two-segment control. Formatting Content Behaviors +AI presence Related References Feedback @@ -329,6 +339,67 @@ number of children as ‘0’. +## 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. + + + + + + + + +![Default number input AI presence example](images/number-input-style-ai-default.png) + + + + + +![Fluid number input AI presence example](images/number-input-style-ai-fluid.png) + + + + + + + + +### 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. + + + + + + + + +![Default number input AI revert example](images/number-input-usage-13.png) + + + + + +![Fluid number input AI revert example](images/number-input-usage-15.png) + + + + + + + + ## Related - Use [slider](https://carbondesignsystem.com/components/slider/usage/) when diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png new file mode 100644 index 00000000000..2cea117088d Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png differ 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 new file mode 100644 index 00000000000..2a07e7d71e3 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png differ 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 new file mode 100644 index 00000000000..2cea117088d Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence.png differ 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 new file mode 100644 index 00000000000..74145f521e4 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png differ 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 new file mode 100644 index 00000000000..2dc485b8885 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-revert.png differ diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index c7ffa05f20f..df8f5660334 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -19,6 +19,7 @@ structure, and size. Typography Structure Size +AI presence Feedback @@ -326,6 +327,49 @@ These sizes apply only to the default style of text input. Text input default style sizes | px / rem +## 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 | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Default text input and text area AI example](images/text-input-text-area-ai-presence-default.png) + + + + + +![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-fluid.png) + + + + + + + + ## 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 index 2026b463b23..7c97c90141a 100755 --- a/src/pages/components/text-input/usage.mdx +++ b/src/pages/components/text-input/usage.mdx @@ -15,6 +15,17 @@ and short-form entries. + + +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. + + + Live demo @@ -25,6 +36,7 @@ and short-form entries. Content Universal behaviors Modifiers +AI Presence Related Feedback @@ -561,6 +573,67 @@ met. +## 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. + + + + + + + + +![Default text input and text area AI presence example](images/text-input-text-area-ai-presence-default.png) + + + + + +![Fluid text input and text area AI presence example](images/text-input-text-area-ai-presence-fluid.png) + + + + + + + + +### 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. + + + + + + + + +![Default text input and text area AI revert example](images/text-input-text-area-ai-revert.png) + + + + + +![Fluid text input and text area AI revert example](images/text-input-text-area-ai-revert-fluid.png) + + + + + + + + ## Related - [Form pattern](/patterns/forms-pattern/)