-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(number-input): add guidelines (#1521)
Co-authored-by: Daniel Leroux <[email protected]>
- Loading branch information
1 parent
ccc91c0
commit 36656fa
Showing
3 changed files
with
103 additions
and
41 deletions.
There are no files selected for viewing
45 changes: 45 additions & 0 deletions
45
packages/documentation/docs/controls/_number-input_code.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import Playground from '@site/src/components/PlaygroundV3'; | ||
| import Props from '@site/docs/auto-generated/ix-number-input/props.md'; | ||
| import Events from '@site/docs/auto-generated/ix-number-input/events.md'; | ||
|
|
||
| # Number field | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic | ||
|
|
||
| <Playground name="number-input" examplesByName></Playground> | ||
|
|
||
| ### Disabled | ||
|
|
||
| <Playground name="number-input-disabled" examplesByName></Playground> | ||
|
|
||
| ### Label | ||
|
|
||
| <Playground name="number-input-label" examplesByName></Playground> | ||
|
|
||
| ### Readonly | ||
|
|
||
| <Playground name="number-input-readonly" examplesByName></Playground> | ||
|
|
||
| ### StepperButton | ||
|
|
||
| <Playground name="number-input-stepper-button" examplesByName></Playground> | ||
|
|
||
| ### Validation | ||
|
|
||
| <Playground | ||
| name="number-input-validation" | ||
| height="20rem" | ||
| examplesByName | ||
| ></Playground> | ||
|
|
||
| ## API | ||
|
|
||
| ### Properties | ||
|
|
||
| <Props /> | ||
|
|
||
| ### Events | ||
|
|
||
| <Events /> |
48 changes: 48 additions & 0 deletions
48
packages/documentation/docs/controls/_number-input_styleguide.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| The number input component allows users to enter and adjust numerical values. It’s commonly used in forms, calculators, and other areas where precise numerical input is required. We typically use the number input component to ensure accurate and efficient data entry. | ||
|
|
||
|
|
||
|  | ||
|
|
||
| 1. Label | ||
| 2. Required field indicator | ||
| 3. Value | ||
| 4. Stepper buttons | ||
| 5. Input field | ||
| 6. Helper or feedback text | ||
|
|
||
| ## Options | ||
|
|
||
| - **Label**: See [form field](./forms/forms-field.md) | ||
| - **Value**: See [form field](./forms/forms-field.md) | ||
| - **Required**: See [form field](./forms/forms-field.md) | ||
| - **Helper text**: See [form field](./forms/forms-field.md) | ||
| - **Feedback text**: See [form field](./forms/forms-field.md) | ||
| - **Show text as tooltip**: See [form field](./forms/forms-field.md) | ||
| - **Placeholder**: See [form field](./forms/forms-field.md) | ||
| - **Allowed characters pattern**: Specify the allowed characters for input. We typically use this to reject invalid characters, such as decimal points, by triggering a shaking animation immediately upon value change during typing. | ||
| - **Pattern**: Define the expected input using regular expressions, such as an integer between 1 and 100. We typically use this to validate the input when the user leaves the field or clicks submit. | ||
| - **Min/Max**: Specifies the minimum and maximum values that can be entered, ensuring the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values. | ||
| - **Show stepper buttons**: Stepper buttons are optional controls used to increment or decrement the value, suitable for small ranges with few steps. We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems, or form inputs requiring fine-tuned numerical values. | ||
|
|
||
| ## Behavior in context | ||
| - **Interaction:** Users can type a value or use stepper buttons to adjust it. We typically recommend using stepper buttons, especially for touch interactions, to enhance usability and precision. | ||
| - **Validation:** See [form field](./forms/forms-validation.md) | ||
| - **Overflow:** Numbers are truncated to fit within the input field. Ensure that the expected value is visible in the input field so it can be properly displayed. | ||
| - **Alignment:** Number inputs are always aligned to the right. | ||
|
|
||
| ## States | ||
| The number input has five states: default, hover, focused, disabled and read-only. | ||
|  | ||
|
|
||
| ## Dos and Don’ts | ||
| - Do set appropriate min and max values to prevent invalid entries and guide user input | ||
| - Do provide clear error messages when the input value is out of the allowed range or doesn’t match the required pattern | ||
| - Do consider special cases such as zero, negative numbers, and very large numbers to ensure all possible inputs are handled correctly | ||
| - Don't specify patterns that do not align with your use case, e.g. inappropriate interval between valid values | ||
|
|
||
| ## Related patterns | ||
| - [Form fields](./forms/forms-field.md) | ||
| - [Validation](./forms/forms-validation.md) | ||
| - [Layout](./forms/forms-layout.md) | ||
| - [Input](./input.mdx) | ||
| - [Select](./select.mdx) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,17 @@ | ||
| import Playground from '@site/src/components/PlaygroundV2'; | ||
| import Props from '@site/docs/auto-generated/ix-number-input/props.md'; | ||
| import Events from '@site/docs/auto-generated/ix-number-input/events.md'; | ||
| import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; | ||
|
|
||
| import DocsUx from './_number-input_styleguide.mdx'; | ||
| import DocsCode from './_number-input_code.mdx'; | ||
| import Tags from '@site/docs/auto-generated/ix-number-input/tags.md'; | ||
|
|
||
| # Number input | ||
|
|
||
| <Tags /> | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic | ||
|
|
||
| <Playground name="number-input" examplesByName></Playground> | ||
|
|
||
| ### Disabled | ||
|
|
||
| <Playground name="number-input-disabled" examplesByName></Playground> | ||
|
|
||
| ### Label | ||
|
|
||
| <Playground name="number-input-label" examplesByName></Playground> | ||
|
|
||
| ### Readonly | ||
|
|
||
| <Playground name="number-input-readonly" examplesByName></Playground> | ||
|
|
||
| ### StepperButton | ||
|
|
||
| <Playground name="number-input-stepper-button" examplesByName></Playground> | ||
|
|
||
| ### Validation | ||
|
|
||
| <Playground | ||
| name="number-input-validation" | ||
| height="20rem" | ||
| examplesByName | ||
| ></Playground> | ||
|
|
||
| ## API | ||
|
|
||
| ### Properties | ||
|
|
||
| <Props /> | ||
|
|
||
| ### Events | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <Events /> | ||
| <LinkableDocsTabs> | ||
| <DocsUx /> | ||
| <DocsCode /> | ||
| </LinkableDocsTabs> |