Merge branch 'main' into ai-label-component

package.json

@@ -39,12 +39,12 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.46.0",
-    "@carbon/icons": "^11.43.0",
-    "@carbon/icons-react": "^11.43.0",
-    "@carbon/pictograms": "^12.36.0",
-    "@carbon/pictograms-react": "^11.62.0",
-    "@carbon/react": "^1.59.0",
+    "@carbon/elements": "^11.48.1",
+    "@carbon/icons": "^11.44.1",
+    "@carbon/icons-react": "^11.44.1",
+    "@carbon/pictograms": "^12.37.1",
+    "@carbon/pictograms-react": "^11.63.1",
+    "@carbon/react": "^1.60.1",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",

src/data/guidelines/color-tokens.js

@@ -2992,11 +2992,11 @@ const colorTokens = {
         },
         g90: {
           name: 'Cyan 70 hover',
-          hex: '#bae6ff',
+          hex: '#0066bd',
         },
         g100: {
           name: 'Cyan 70 hover',
-          hex: '#bae6ff',
+          hex: '#0066bd',
         },
       },
     },
@@ -3915,4 +3915,4 @@ const colorTokens = {
   },
 };
 
-export default colorTokens;
+export default colorTokens;

src/pages/components/data-table/style.mdx

@@ -6,6 +6,22 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+structure, and AI presence.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 ### Table header
@@ -290,3 +306,87 @@ sizes.
 <Caption>
   Structure and spacing measurements for batch action bar | 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.
+
+<Title>Entire table</Title>
+
+| 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               |
+
+<Row>
+<Column colLg={12}>
+
+![AI Data table](images/style-ai-presence-entire-datatable.png)
+
+<Caption>
+  Structure and spacing measurements for entire data table generated by AI.
+</Caption>
+
+</Column>
+</Row>
+
+<Title>Individual cells</Title>
+
+| Element     | Property | Token / Size |
+| ----------- | -------- | ------------ |
+| Inline Slug | size     | medium       |
+
+<Row>
+<Column colLg={12}>
+
+![Data table with AI generated cells](images/style-ai-presence-individual-cells.png)
+
+<Caption>
+  Structure and spacing measurements for individual cells of a data table
+  generated by AI.
+</Caption>
+
+</Column>
+</Row>
+
+<Title>Rows and columns</Title>
+
+| 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                |
+
+<Row>
+<Column colLg={12}>
+
+![Data table with AI generated rows and columns](images/style-ai-presence-row-columns.png)
+
+<Caption>
+  Structure and spacing measurements for rows and columns of a data table
+  generated by AI.
+</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![AI Data table hover interaction](images/style-ai-presence-datatable-row-hover.png)
+
+<Caption>Hover interaction for an AI generated row.</Caption>
+
+</Column>
+</Row>

src/pages/components/data-table/usage.mdx

@@ -16,6 +16,15 @@ your product's users.
 
 </PageDescription>
 
+<InlineNotification>
+
+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.
+
+</InlineNotification>
+
 <AnchorLinks>
 
 <AnchorLink>Live demo</AnchorLink>
@@ -25,6 +34,7 @@ your product's users.
 <AnchorLink>Variants</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
 <AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
@@ -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.
 
 <Row>
 <Column colLg={12}>
@@ -616,6 +626,87 @@ alternating colors to make scanning horizontal information easier for the user.
 </Column>
 </Row>
 
+## 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.
+
+<Row>
+<Column colLg={12}>
+
+![Example of a data table generated by AI](images/usage-ai-presence-datatable.png)
+
+<Caption>Example of a data table generated by AI.</Caption>
+
+</Column>
+</Row>
+
+#### 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.
+
+<Row>
+<Column colLg={12}>
+
+![Example of a data table cell generated by AI represneted by the in-line AI slug](images/usage-ai-presence-inline-datatable.png)
+
+<Caption>
+  Example of a data table cell generated by AI represneted by the in-line AI
+  slug.
+</Caption>
+
+</Column>
+</Row>
+
+#### 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.
+
+<Row>
+<Column colLg={12}>
+
+![Example of a data table column generated by AI](images/usage-ai-presence-datatable-column-ai.png)
+
+<Caption>Example of a data table column generated by AI.</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+<Tabs>
+
+<Tab label="Light mode">
+
+![Light mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-l.png)
+
+</Tab>
+
+<Tab label="Dark mode">
+
+![Dark mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-d.png)
+
+</Tab>
+
+</Tabs>
+
+</Column>
+</Row>
+
 ## Related
 
 ### Community extensions