AI doc update - Tile (carbon-design-system#4084)

* AI doc update - Tile * Fixed a minor typo * Fixed a few typos --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
aagonzales · Jun 3, 2024 · 66b6ae4 · 66b6ae4
1 parent 617169c
commit 66b6ae4
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 5 deletions.
diff --git a/src/pages/components/tile/images/tile-AI-presence-style.png b/src/pages/components/tile/images/tile-AI-presence-style.png
diff --git a/src/pages/components/tile/images/tile-AI-presence-usage.png b/src/pages/components/tile/images/tile-AI-presence-usage.png
diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx
@@ -9,6 +9,23 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 import { Checkmark } from '@carbon/icons-react';
 import { white } from '@carbon/themes';
 
+<PageDescription>
+
+The following page documents visual specifications such as color, typography,
+and structure.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Color</AnchorLink>
+<AnchorLink>Typography</AnchorLink>
+<AnchorLink>Structure</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
 ## Color
 
 <InlineNotification>
@@ -27,6 +44,11 @@ base tiles.
 | Checkmark icon  | svg              | `$icon-primary`     |
 | Chevron icon    | svg              | `$icon-primary`     |
 
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
 <Row>
 <Column colLg={8}>
 
@@ -50,6 +72,11 @@ base tiles.
 | Icon:disabled (or pictogram) | svg              | `$icon-disabled`   |
 | Text:disabled                | text color       | `$text-disabled`   |
 
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
 #### Base tile
 
 Base tile doesn't have a border. It's not interactive, but can have interactive
@@ -173,3 +200,43 @@ altered as needed by the product teams.
 | 1/3        | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> |                                         |
 | 1/4        | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> |                                         |
 | 1/6        | <Checkmark color={white.iconPrimary} /> | <Checkmark color={white.iconPrimary} /> |                                         |                                         |                                         |
+
+## AI presence
+
+The following are the unique styles applied to the components when the AI slug
+is present. Unless specified, all other tokens in the components remain the same
+as the non-AI variants.
+
+More information about designing for AI guidelines is coming soon.
+
+| Element                    | Property         | Token / Size       |
+| -------------------------- | ---------------- | ------------------ |
+| Tile:background            | background-color | `$layer` \*        |
+|                            | box-shadow       | `$ai-drop-shadow`  |
+|                            | inner-shadow     | `$ai-inner-shadow` |
+| Linear-gradient:background | start            | `$ai-aura-start`   |
+|                            | top              | `$ai-aura-stop`    |
+| Linear-gradient:border     | start            | `$ai-border-start` |
+|                            | stop             | `$ai-border-stop`  |
+| 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}>
+
+![Structure and spacing measurements for tile with AI presence](images/tile-AI-presence-style.png)
+
+</Column>
+</Row>
+
+<Caption>Structure and spacing measurements for tile with AI presence</Caption>
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
@@ -17,11 +17,17 @@ including information, getting started, how-to, next steps, and more.
 
 <InlineNotification>
 
-[Experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview)
-are now available. This addition enhances accessibility and only applies to the
-visual appearance, not the function of tiles. Though we are not deprecating the
-current tiles, we encourage all design teams to use the new experimental tiles
-in their products moving forward.
+Tile now offers multiple experimental features. The experimental
+[slug](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--tile)
+changes the visual appearance and adds an AI explainability feature when AI is
+present in tile.
+
+<br />
+
+Additionally, a visual accessibility enhancement is available with
+[experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview).
+We encourage teams to start using these tiles, although current tiles are still
+supported.
 
 </InlineNotification>
 
@@ -32,6 +38,7 @@ in their products moving forward.
 <AnchorLink>Variants</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Universal behaviors</AnchorLink>
+<AnchorLink>AI presence</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>References</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -498,6 +505,23 @@ what content it contains but all types of tiles can take focus.
 | Return or Enter | Return or enter will open the tile (if the tile itself is clickable). If the tile is not clickable but has interactive elements, their corresponding actions are performed. |
 | Space           | If the tile is selectable, the space bar will toggle tile selection.                                                                                                        |
 
+## AI presence
+
+Tile has a modification that takes on the AI visual styling when the AI slug is
+present in the container. The AI variants function the same as the normal
+versions 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}>
+
+![Base, clickable, single-select and multi-select tiles with AI presence](images/tile-AI-presence-usage.png)
+
+</Column>
+</Row>
+
 ## Related
 
 #### Grid