AI doc update - Checkbox & Radio button (carbon-design-system#4074)

* AI doc update - Checkbox, Radio button & Tile

* Updated tile images

* Only radio-button, checkbox

* removed tile

* Updated style tab images

* Updated style tab images

* Fixed a few minor typos

src/pages/components/checkbox/style.mdx

@@ -6,6 +6,23 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<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
 
 | Element            | Property         | Color token       |
@@ -101,3 +118,29 @@ labels should not exceed three words.
   Structure and spacing measurements for vertical and horizontal checkbox
   groupings | px / rem
 </Caption>
+
+## AI presence
+
+The only style modification an AI variant of the checkbox has is the addition of
+the slug. All other tokens in the component remain the same as the non-AI
+variants.
+
+More information about designing for AI guidelines is coming soon.
+
+| Element | Property | Token / Size |
+| ------- | -------- | ------------ |
+| AI slug | size     | mini         |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for checkbox with AI presence](images/checkbox-style-5.png)
+
+</Column>
+</Row>
+
+## 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).

src/pages/components/checkbox/usage.mdx

@@ -15,13 +15,23 @@ select zero, one, or any number of items.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[checkbox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--checkbox).
+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>
@@ -333,6 +343,24 @@ Users can navigate to and between checkbox inputs by pressing `Tab` or
 checkbox input has focus. For additional keyboard interactions, see the
 [accessibility tab](https://www.carbondesignsystem.com/components/checkbox/accessibility).
 
+## AI presence
+
+Checkbox has a modification that embeds the AI slug when AI present in the
+control. 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. The slug can be placed on the group label or on
+individual checkbox labels.
+
+More information about designing for AI guidelines is coming soon.
+
+<Row>
+<Column colLg={8}>
+
+![Checkbox with AI presence](images/checkbox-usage-10.png)
+
+</Column>
+</Row>
+
 ## Related
 
 #### Checkbox versus radio button

src/pages/components/date-picker/usage.mdx

@@ -610,7 +610,7 @@ More information about designing for AI guidelines is coming soon.
 
 A date picker 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 default variant.
+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.
 
@@ -627,7 +627,7 @@ generated content via a revert to AI button.
 
 <Tab label="Fluid">
 
-![Enabled state of fluid date picker with AI presence](images/date-picker-usage-revert-to-AI-fluid.png)
+![Enabled state of fluid date picker with AI reverted](images/date-picker-usage-revert-to-AI-fluid.png)
 
 </Tab>
 

src/pages/components/radio-button/style.mdx

@@ -6,6 +6,23 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+<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
 
 | Element                   | Property         | Color token       |
@@ -99,3 +116,29 @@ a phrase and any proper nouns capitalized.
 <Caption>
   Structure and spacing measurements for radio button | px | rem
 </Caption>
+
+## AI presence
+
+The only style modification an AI variant of the radio button has is the
+addition of the slug. All other tokens in the component remain the same as the
+non-AI variants.
+
+More information about designing for AI guidelines is coming soon.
+
+| Element | Property | Token / Size |
+| ------- | -------- | ------------ |
+| AI slug | size     | mini         |
+
+<Row>
+<Column colLg={8}>
+
+![Structure and spacing measurements for radio button with AI presence](images/radio-button-style-5.png)
+
+</Column>
+</Row>
+
+## 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).

src/pages/components/radio-button/usage.mdx

@@ -15,13 +15,23 @@ one selection from the group is allowed.
 
 </PageDescription>
 
+<InlineNotification>
+
+Experimental slug is now available for
+[radio button](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--radio-button).
+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>
@@ -302,6 +312,24 @@ radio button or they can press an arrow key to select the next radio button. For
 additional keyboard interactions, see
 the [accessibility tab](https://www.carbondesignsystem.com/components/radio-button/accessibility).
 
+## AI presence
+
+Radio button has a modification that embeds the AI slug when AI present in the
+control. 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. The slug can be placed on the group label or on
+individual checkbox labels.
+
+More information about designing for AI guidelines is coming soon.
+
+<Row>
+<Column colLg={8}>
+
+![Radio button with AI presence](images/images/radio-button-usage-11.png)
+
+</Column>
+</Row>
+
 ## Related
 
 #### Radio buttons versus checkboxes

src/pages/components/select/usage.mdx

@@ -461,7 +461,7 @@ More information about designing for AI guidelines is coming soon.
 
 A select 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 default variant. Once
+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.
 
@@ -478,7 +478,7 @@ generated content via a revert to AI button.
 
 <Tab label="Fluid">
 
-![Enabled state of fluid select with AI presence](images/select-usage-revert-to-AI-fluid.png)
+![Enabled state of fluid select with AI reverted](images/select-usage-revert-to-AI-fluid.png)
 
 </Tab>