diff --git a/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png b/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png new file mode 100644 index 00000000000..511ab2d660a Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-datatable.png b/src/pages/components/data-table/images/style-ai-presence-datatable.png new file mode 100644 index 00000000000..118f08d2279 Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-datatable.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png b/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png new file mode 100644 index 00000000000..6da4d68432b Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-individual-cells.png b/src/pages/components/data-table/images/style-ai-presence-individual-cells.png new file mode 100644 index 00000000000..228f1a3b3ee Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-individual-cells.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-row-columns.png b/src/pages/components/data-table/images/style-ai-presence-row-columns.png new file mode 100644 index 00000000000..804684aa0fe Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-row-columns.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png new file mode 100644 index 00000000000..66897bef207 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png new file mode 100644 index 00000000000..8a98139c60e Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png new file mode 100644 index 00000000000..4f6e358c596 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable.png b/src/pages/components/data-table/images/usage-ai-presence-datatable.png new file mode 100644 index 00000000000..86be91689bb Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png b/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png new file mode 100644 index 00000000000..e914a4eb596 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png differ diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx index 9f3ef7f1195..d31d9860ed3 100755 --- a/src/pages/components/data-table/style.mdx +++ b/src/pages/components/data-table/style.mdx @@ -6,6 +6,22 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and AI presence. + + + + + +Color +Typography +Structure +AI presence + + + ## Color ### Table header @@ -290,3 +306,87 @@ sizes. Structure and spacing measurements for batch action bar | 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. + +Entire table + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------- | +| Data table:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| 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 | + + + + +![AI Data table](images/style-ai-presence-entire-datatable.png) + + + Structure and spacing measurements for entire data table generated by AI. + + + + + +Individual cells + +| Element | Property | Token / Size | +| ----------- | -------- | ------------ | +| Inline Slug | size | medium | + + + + +![Data table with AI generated cells](images/style-ai-presence-individual-cells.png) + + + Structure and spacing measurements for individual cells of a data table + generated by AI. + + + + + +Rows and columns + +| Element | Property | Token / Size | +| -------------------------- | --------- | ------------------- | +| Linear gradient:background | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Linear gradient:border | left, top | `$ai-border-strong` | +| AI Slug | size | mini | + + + + +![Data table with AI generated rows and columns](images/style-ai-presence-row-columns.png) + + + Structure and spacing measurements for rows and columns of a data table + generated by AI. + + + + + + + + +![AI Data table hover interaction](images/style-ai-presence-datatable-row-hover.png) + +Hover interaction for an AI generated row. + + + diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 9486da88fab..969cd5b697c 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -16,6 +16,15 @@ your product's users. + + +Experimental slug is now available for +[data table](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug-datatable--overview). +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 +34,7 @@ your product's users. Variants Universal behaviors Modifiers +AI presence Related Feedback @@ -217,8 +227,8 @@ row heights. ### Placement Data tables should be placed in a page's main content area and given plenty of -space to display data without truncation. Avoid placing data tables inside -modals or smaller containers where the information can feel cramped or needs +space to display data without truncation. Avoid placing data tables inside data +tables or smaller containers where the information can feel cramped or needs truncation. The data table can be placed on the grid following the three different @@ -317,8 +327,8 @@ For further content guidance, see Carbon's The expandable data table helps present large amounts of data in a small space. Use the expanded section for supplementary information or data that needs additional query time. When the content in the expanded area feels cramped, -consider taking the user to a dedicated page, side panel, or modal to view the -information and complete tasks. +consider taking the user to a dedicated page, side panel, or data table to view +the information and complete tasks. @@ -616,6 +626,87 @@ alternating colors to make scanning horizontal information easier for the user. +## AI presence + +Data table has a modification that takes on the AI visual styling when AI is +present in the table. The AI variants of a data table 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. Where the AI label +goes inside of a data table depends on which parts of the data are AI generated. + +More information about designing for AI guidelines is coming soon. + +#### Entire table + +When the entire data table is styled for AI, it indicates to the user that AI is +present in all aspects of the data table. + + + + +![Example of a data table generated by AI](images/usage-ai-presence-datatable.png) + +Example of a data table generated by AI. + + + + +#### Individual cells + +If only some data table cells have content generated by AI, then those cells +have an in-line AI slug next to them. These cells do not get any AI layering. + + + + +![Example of a data table cell generated by AI represneted by the in-line AI slug](images/usage-ai-presence-inline-datatable.png) + + + Example of a data table cell generated by AI represneted by the in-line AI + slug. + + + + + +#### Rows and columns + +If content belonging to only a row or column of the data table is generated by +AI, then only those respective row/s and column/s should receive the AI presence +styling along with the AI slug, not the entire data table. + + + + +![Example of a data table column generated by AI](images/usage-ai-presence-datatable-column-ai.png) + +Example of a data table column generated by AI. + + + + + + + + + + + +![Light mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-l.png) + + + + + +![Dark mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-d.png) + + + + + + + + ## Related ### Community extensions diff --git a/src/pages/components/form/images/form-style-presence.png b/src/pages/components/form/images/form-style-presence.png new file mode 100644 index 00000000000..3d7f0d280ff Binary files /dev/null and b/src/pages/components/form/images/form-style-presence.png differ diff --git a/src/pages/components/form/images/form-usage-states-ai.png b/src/pages/components/form/images/form-usage-states-ai.png new file mode 100644 index 00000000000..e3e363a075a Binary files /dev/null and b/src/pages/components/form/images/form-usage-states-ai.png differ diff --git a/src/pages/components/form/images/usage-ai-presence-form.png b/src/pages/components/form/images/usage-ai-presence-form.png new file mode 100644 index 00000000000..dfd91efa636 Binary files /dev/null and b/src/pages/components/form/images/usage-ai-presence-form.png differ diff --git a/src/pages/components/form/style.mdx b/src/pages/components/form/style.mdx index 13265b567e2..519feb531dd 100644 --- a/src/pages/components/form/style.mdx +++ b/src/pages/components/form/style.mdx @@ -6,6 +6,22 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and AI presence. + + + + + +Color +Typography +Structure +AI presence + + + ## Color Refer to the [text input](/components/text-input/usage), @@ -83,3 +99,33 @@ content and layout of the design. On mobile, forms can only have one column. Structure and spacing measurements + +## 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. The AI styling spec of individual components inside of the +form can be found on their respective style tabs. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------- | +| Form:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| 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 | + + + + +![Form AI presence](images/form-style-presence.png) + +Structure and spacing measurements for an AI form. + + + diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx index 7f1451c8918..cfcc258ab23 100755 --- a/src/pages/components/form/usage.mdx +++ b/src/pages/components/form/usage.mdx @@ -15,6 +15,15 @@ configure options. + + +Experimental slug is now available for +[form](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--form-example). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -23,6 +32,7 @@ configure options. Content Behaviors Additional guidance +AI presence Related Feedback @@ -388,6 +398,12 @@ form. + + +![Examples fluid input states](images/form-usage-states-ai.png) + + + @@ -407,6 +423,34 @@ pattern. | [Designing for longer forms](/patterns/forms-pattern/#designing-for-longer-forms) | Techniques to help make longer forms less overwhelming, including guidance for accordion and multistep forms. | | [Form variants](/patterns/forms-pattern/#variants) | Forms may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation. | +## AI presence + +Form has a modification that takes on the AI visual styling when AI is present +in the form. The AI variants of a form 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. + +The AI presence in form can appear in two ways: broadly, over the whole form, or +focused, just in certain parts of the form. When the entire form is styled for +AI, it indicates to the user that AI is present in all aspects of the form. If +only a limited amount of the form content is generated by AI, then only those +components should receive the AI presence styling, not the entire form. + +More information about designing for AI guidelines is coming soon. + + + + +![Example of form with full and compoment based AI presence](images/usage-ai-presence-form.png) + + + Example of form with full AI presence on the left and compoment based AI + presence on the right. + + + + + ## Related diff --git a/src/pages/components/modal/images/modal-style-presence.png b/src/pages/components/modal/images/modal-style-presence.png new file mode 100644 index 00000000000..7b829eea3d3 Binary files /dev/null and b/src/pages/components/modal/images/modal-style-presence.png differ diff --git a/src/pages/components/modal/images/modal-usage-style-presence.png b/src/pages/components/modal/images/modal-usage-style-presence.png deleted file mode 100644 index e8732cab640..00000000000 Binary files a/src/pages/components/modal/images/modal-usage-style-presence.png and /dev/null differ diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index 8daa2944731..0a2f5611ad4 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] The following page documents visual specifications such as color, typography, -structure, and size and AI presence. +structure, size, and AI presence. @@ -215,7 +215,8 @@ the content while sticking to the bottom of the mobile screen. 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. +the non-AI variant. The AI styling spec of individual components inside of the +modal can be found on their respective style tabs. More information about AI style elements is coming soon. @@ -234,7 +235,9 @@ More information about AI style elements is coming soon. -![Modal AI presence](images/modal-usage-style-presence.png) +![Modal AI presence](images/modal-style-presence.png) + +Structure and spacing measurements for an AI Modal. diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 552cc092df8..ca0e6848f72 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -511,10 +511,11 @@ 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. +The AI presence in modal can appear in two ways: broadly, over the whole modal, +or focused, just in certain parts of the modal. 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. @@ -523,15 +524,15 @@ More information about designing for AI guidelines is coming soon. - + -![Modal's White theme AI presence example](images/modal-usage-ai-presence-w.png) +![Modal's light mode AI presence example](images/modal-usage-ai-presence-w.png) - + -![Modal's Gray100 theme AI presence example](images/modal-usage-ai-presence-g100.png) +![Modal's dark mode AI presence example](images/modal-usage-ai-presence-g100.png) diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index cbeacbe3a92..2f809410d87 100755 --- a/src/pages/components/number-input/style.mdx +++ b/src/pages/components/number-input/style.mdx @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] The following page documents visual specifications such as color, typography, -structure, and size and AI presence. +structure, size, and AI presence. diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index afe0c821555..9bb814e483f 100755 --- 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'] The following page documents visual specifications such as color, typography, -structure, and size and AI presence. +structure, size, and AI presence.