Skip to content

Commit

Permalink
docs(read-only): number input docs (#3406)
Browse files Browse the repository at this point in the history 
* update usage.mdx

* update style.mdx

* update affected a11y images

* update usage.mdx

* fix typo

* update states image

* update style content

* update style interactive states table

* edit state images

* update style tab

* update image

* update image

* update image size

* update wording of disabled and read-only states

* fix image

* add image

* fix(docs): format

---------

Co-authored-by: Francine Lucca <[email protected]>
  • Loading branch information
@laurenmrice @francinelucca
laurenmrice and francinelucca authored Mar 1, 2023
1 parent f298c65 commit 28a04d9
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 30 deletions.
Binary file modified src/pages/components/number-input/images/number-input-accessibility-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/number-input/images/number-input-accessibility-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/pages/components/number-input/images/number-input-style-2.png
View file
Binary file not shown.
Binary file modified src/pages/components/number-input/images/number-input-style-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/number-input/images/number-input-style-size.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/number-input/images/number-input-usage-3-fluid.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/number-input/images/number-input-usage-6-fluid.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/number-input/images/number-input-usage-6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 23 additions & 17 deletions src/pages/components/number-input/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,25 +45,31 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Interactive states

| Element | Property | Color token |
| ----------------- | ----------------------- | ------------------- |
| Controls:hover | background-color | `field-hover` \* |
| Field:focus | border | `$focus` |
| Controls:focus | border | `$focus` |
| Field:invalid | border | `$support-error` |
| Error icon | svg | `$support-error` |
| Error message | text color | `$text-error` |
| Warning icon | svg | `support-warning` |
| Warning message | text color | `text-primary` |
| Label:disabled | text color | `$text-disabled` |
| Field:disabled | background-color | `$field` \* |
| | border-bottom (default) | transparent |
| | border-bottom (fluid) | `$border-subtle` \* |
| Number:disabled | text color | `$text-disabled` |
| Controls:disabled | svg color | `$icon-disabled` |
| State | Element | Property | Color token |
| --------- | --------------- | -------------------------- | ------------------- |
| Hover | Controls | background-color | `field-hover` \* |
| Focus | Field | border | `$focus` |
| | Controls | border | `$focus` |
| Invalid | Field | border | `$support-error` |
| | Error icon | svg | `$support-error` |
| | Error message | text color | `$text-error` |
| Warning | Warning icon | svg | `support-warning` |
| | Warning message | text color | `text-primary` |
| Disabled | Label | text color | `$text-disabled` |
| | Field | background-color | `$field` \* |
| | | border-bottom (default) | transparent |
| | | border-bottom (fluid) | `$border-subtle` \* |
| | Number | text color | `$text-disabled` |
| | Controls | svg color | `$icon-disabled` |
| Read-only | Field | background-color (default) | transparent |
| | | background-color (fluid) | `$field` \* |
| | | border-bottom | `$border-subtle` \* |
| | Number | text color (default) | `$text-primary` |
| | | text color (fluid) | `$text-secondary` |
| | Controls | svg color | `$icon-disabled` |

<Row>
<Column colLg={12}>
<Column colLg={8}>

<Tabs>

Expand Down
27 changes: 14 additions & 13 deletions src/pages/components/number-input/usage.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,21 +264,22 @@ Label, numeric value, and helper text should be short and not exceed two lines.
### States

The number input has a series of states for both field and controls elements:
**enabled**, **hover**, **focus**, **error**, **warning**, and **disabled**.

| State | When to use |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _Enabled_ | When the number input is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled number input field should contain a default value. |
| _Hover_ | When a user's mouse cursor is hovering over the field or the button controls. |
| _Focus_ | When a user tabs to or clicks on the number input, the field or controls become focused, indicating the user has successfully navigated to the component. |
| _Error_ | When the required number input has not been filled in. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
| _Warning_ | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved. |
| _Disabled_ | When the user is not allowed to interact with the number input due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. |
| _Skeleton_ | Use on an initial page load to indicate that the number input has not yet fully loaded. |
| _Read-only_ | _Coming soon!_ |
**enabled**, **hover**, **focus**, **error**, **warning**, **disabled**, and
**read-only**.

| State | When to use |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _Enabled_ | When the number input is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled number input field should contain a default value. |
| _Hover_ | When a user's mouse cursor is hovering over the field or the button controls. |
| _Focus_ | When a user tabs to or clicks on the number input, the field or controls become focused, indicating the user has successfully navigated to the component. |
| _Error_ | When the required number input has not been filled in. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
| _Warning_ | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved. |
| _Disabled_ | When the user cannot interact with a component and all interactive functions have been removed. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted. |
| _Skeleton_ | Use on an initial page load to indicate that the number input has not yet fully loaded. |
| _Read-only_ | When the user can review but not modify the component. This state removes all interactive functions like the disabled state but can still be focusable, accessible by screen readers, and passes visual contrast for readability. |

<Row>
<Column colLg={12}>
<Column colLg={8}>

<Tabs>

Expand Down

1 comment on commit 28a04d9

@vercel
Copy link

@vercel vercel bot commented on 28a04d9 Mar 1, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app

Please sign in to comment.