Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AI doc update - Select & Date picker #4060

Merged
merged 6 commits into from
May 15, 2024
Merged

AI doc update - Select & Date picker #4060

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1e2e35b
AI doc update - Select & Date picker
Kritvi-bhatia17 May 8, 2024
11ec608
fixed positioning shift
Kritvi-bhatia17 May 12, 2024
3e2c8a6
fixed a copy
Kritvi-bhatia17 May 13, 2024
5798903
Update src/pages/components/date-picker/style.mdx
Kritvi-bhatia17 May 15, 2024
27564f3
Update src/pages/components/select/style.mdx
Kritvi-bhatia17 May 15, 2024
f2a49d3
Merge branch 'main' into Select,Date-picker
kodiakhq[bot] May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/pages/components/date-picker/images/date-picker-usage-AI-presence-default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/date-picker/images/date-picker-usage-AI-presence-fluid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/date-picker/images/date-picker-usage-revert-to-AI-fluid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 45 additions & 1 deletion src/pages/components/date-picker/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
<PageDescription>

The following page documents visual specifications such as color, typography,
structure, and size.
structure, size, and AI presence.

</PageDescription>

Expand All @@ -19,6 +19,7 @@ structure, and size.
<AnchorLink>Typography</AnchorLink>
<AnchorLink>Structure</AnchorLink>
<AnchorLink>Size</AnchorLink>
<AnchorLink>AI presence</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

</AnchorLinks>
Expand Down Expand Up @@ -468,6 +469,49 @@ group. Time picker's total width will vary based on the grid and layout

<Caption>Sizes for default style time picker input | px / rem</Caption>

## 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 default variants.
Kritvi-bhatia17 marked this conversation as resolved.
Show resolved Hide resolved

More information about designing for AI guidelines 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 |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default date picker with AI presence](images/date-picker-usage-AI-presence-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid date picker with AI presence](images/date-picker-usage-AI-presence-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>

## Feedback

Help us improve this component by providing feedback, asking questions, and
Expand Down
71 changes: 71 additions & 0 deletions src/pages/components/date-picker/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@ and times.

</PageDescription>

<InlineNotification>

Experimental slug is now available for
[date picker](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--date-picker).
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>
Expand All @@ -25,6 +34,7 @@ and times.
<AnchorLink>Simple date input</AnchorLink>
<AnchorLink>Calendar pickers</AnchorLink>
<AnchorLink>Time pickers</AnchorLink>
<AnchorLink>AI presence</AnchorLink>
<AnchorLink>Related</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

Expand Down Expand Up @@ -565,6 +575,67 @@ a meeting time.
</Column>
</Row>

## AI presence

Date picker has 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.

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default date picker with AI presence](images/date-picker-usage-AI-presence-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid date picker with AI presence](images/date-picker-usage-AI-presence-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>

### Revert to AI

A date picker can toggle between the AI variant and the default 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 edited, the user should still be able to switch back to
the initially AI generated content via a revert to AI button.

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default date picker with AI presence](images/date-picker-usage-revert-to-AI-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid date picker with AI presence](images/date-picker-usage-revert-to-AI-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>

## Related

#### Asking for relative times and dates
Expand Down
Binary file added src/pages/components/select/images/select-usage-AI-presence-default.png
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @Kritvi-bhatia17, just one more observation, the input field in this image should show some 'AI selected option'
And the menu item will subsequently reflect that (for both default and fluid states)

Here's an example from the dropdown component:
image

Subsequently, while showing the revert image, just change the option item.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/select/images/select-usage-AI-presence-fluid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/select/images/select-usage-revert-to-AI-default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/select/images/select-usage-revert-to-AI-fluid.png
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example for revert state (where user has changed the AI selected option)

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alina-jacob
I noticed that was already updating that in another PR.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 68 additions & 1 deletion src/pages/components/select/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,24 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

<PageDescription>

The following page documents visual specifications such as color, typography,
structure, size, and AI presence.

</PageDescription>

<AnchorLinks>

<AnchorLink>Color</AnchorLink>
<AnchorLink>Typography</AnchorLink>
<AnchorLink>Structure</AnchorLink>
<AnchorLink>Size</AnchorLink>
<AnchorLink>AI presence</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

</AnchorLinks>

## Color

| Element | Property | Color token |
Expand Down Expand Up @@ -177,7 +195,7 @@ and any proper nouns capitalized. Select text should be three words or less.
Structure and spacing measurements for fluid select | px / rem
</Caption>

## Sizes
## Size

### Default select

Expand Down Expand Up @@ -216,3 +234,52 @@ and any proper nouns capitalized. Select text should be three words or less.
</div>

<Caption>Size for fluid select | px / rem</Caption>

## 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 default variants.
Kritvi-bhatia17 marked this conversation as resolved.
Show resolved Hide resolved

More information about designing for AI guidelines 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 |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default select with AI presence](images/select-usage-AI-presence-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid select with AI presence](images/select-usage-AI-presence-fluid.png)

</Tab>

</Tabs>

</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).
72 changes: 72 additions & 0 deletions src/pages/components/select/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,24 @@ Select allows users to choose one option from a list of values.

</PageDescription>

<InlineNotification>

Experimental slug is now available for
[select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--select).
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>Universal behaviors</AnchorLink>
<AnchorLink>AI presence</AnchorLink>
<AnchorLink>Related</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

</AnchorLinks>
Expand Down Expand Up @@ -415,6 +426,67 @@ red border, an error icon indicator, and an error message.
</Column>
</Row>

## AI presence

Select has 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.

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default select with AI presence](images/select-usage-AI-presence-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid select with AI presence](images/select-usage-AI-presence-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>

### Revert to AI

A select can toggle between the AI variant and the default 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"content then the input will change from the AI variant to the non-AI variant."

edited, the user should still be able to switch back to the initially AI
generated content via a revert to AI button.

<Row>
<Column colLg={8}>

<Tabs>

<Tab label="Default">

![Enabled state of default select with AI presence](images/select-usage-revert-to-AI-default.png)

</Tab>

<Tab label="Fluid">

![Enabled state of fluid select with AI presence](images/select-usage-revert-to-AI-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>

## Related

- If there are fewer than three options to choose from, use a
Expand Down
Loading