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.

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

Deprecated docs #1547

Open
wants to merge 13 commits into
base: feat/select-validation
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,5 @@ Category filter has six states: Default, hover, active, disabled, read-only and

- [Expanding search](expanding-search.md)
- [Input](input.mdx)
- [Input Legacy](input-legacy.md)
- [Select](select.mdx)
- [Dropdown button](./buttons/dropdown-button.md)
3 changes: 0 additions & 3 deletions packages/documentation/docs/controls/_date-input_code.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import Playground from '@site/src/components/PlaygroundV2';
import Props from '@site/docs/auto-generated/ix-date-input/props.md';
import Events from '@site/docs/auto-generated/ix-date-input/events.md';
import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';

# Date input

<Tags />

## Examples

### Basic
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ The date input component enables users to enter and select a date in a standardi
- **Validation**:
- Use feedback text for validation types valid, info, warning and invalid.
- Invalid feedback automatically provided if entered date in not parsable.
- Refer to the [validation](./forms/forms-validation.md) chapter for detailed guidelines.
- Refer to the [validation](./forms/forms-validation.mdx) chapter for detailed guidelines.
- **Overflow**: The input field should be wide enough to display the full date without truncation.
- **Alignment**: Date inputs are always aligned to the left.

Expand All @@ -62,7 +62,7 @@ Date input has five states: Default, hover, disabled, read-only and focused.
- [Date picker](./date-picker.md)
- [Date time picker](./date-picker.md)
- [Forms field](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Validation](./forms/forms-validation.mdx)
- [Dropdown](./dropdown.md)
- [Input](input.mdx)
- [Select](select.mdx)
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ A checkbox is a small interactive box that allows the user to toggle between an

## Options

- **Checkbox label:**ย See [form field](forms-field.md).
- **Checkbox label:**ย See [form field](forms/forms-field.md).
- **Group label:** Add a label to the group of checkboxes to provide context to your users. We typically use short and descriptive labels to summarize the options in the group.
- **Helper text**: See [form field](forms-field.md).
- **Feedback text**: See [form field](forms-field.md).
- **Helper text**: See [form field](forms/forms-field.md).
- **Feedback text**: See [form field](forms/forms-field.md).
- **Indeterminate checkbox:**ย Indicates that only some items in a checkbox group are selected. We offer the indeterminate state, but the implementation when this state is active is the responsibility of each individual.
- **Checkbox group**: Group checkboxes to indicate that they are related. We typically use checkbox groups when multiple options need to be presented for selection, allowing users to choose any combination of the available choices. They are particularly useful in user interface design for forms, settings and preferences where multiple selections are possible.

## Behavior in context

- **Validation**: See [validation](forms-validation.md).
- **Validation**: See [validation](forms/forms-validation.mdx).
- **Interaction**: Clicking on the checkbox toggles the state between checked and unchecked.ย 
- **Grouping**: Checkbox groups have only one label and helper text for the entire group. Grouped checkboxes are validated collectively, not individually.

Expand All @@ -28,4 +28,4 @@ A checkbox is a small interactive box that allows the user to toggle between an
- Do use checkboxes in forms to allow users to select multiple options
- Donโ€™t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead
- Donโ€™t use checkboxes for mutually exclusive options - use [radio buttons](forms-radio-button.md) instead
- Donโ€™t use checkboxes for actions that have immediate consequences - use [buttons](buttons.md) or [links](links.md) instead
- Donโ€™t use checkboxes for actions that have immediate consequences - use [buttons](buttons.md) or [links](links.md) instead
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ The custom field is a wrapper component that can host any forms component. Its p
4. Mandatory indicator
## Options

- **Label:**ย See [form field](forms-field.md).
- **Label:**ย See [form field](forms/forms-field.md).
- **Group label:** Add a label to the group of radio buttons to provide context to your users. We typically use short and descriptive labels to summarize the options in the group.
- **Helper text**: See [form field](forms-field.md).
- **Feedback text**: See [form field](forms-field.md).
- **Helper text**: See [form field](forms/forms-field.md).
- **Feedback text**: See [form field](forms/forms-field.md).
- **Customization**: Add form components to create the use case you need. For example, for a file upload field, add an input field with a `readonly`ย state and an [icon button](buttons/icon-button.md).

![Custom field example](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3483-7223&t=DlxXBQ9vTnyDcIUI-4)

## Behavior in context

- **Validation:**ย See [validation](forms-validation.md).
- **Form behavior:** See [behavior](forms-behavior.md).
- **Validation:**ย See [validation](forms/forms-validation.mdx).
- **Form behavior:** See [behavior](forms/forms-behavior.md).
## States

The states depend on theย component that you use in the custom field. The custom field itself does not have any interaction states.
Expand All @@ -31,7 +31,7 @@ The states depend on theย component that you use in the custom field. The custom
- Don't use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component
## Related patterns

- [Form field](forms-field.md)
- [Validation](forms-validation.md)
- [Behavior](forms-behavior.md)
- [Layout](forms-layout.md)
- [Form field](forms/forms-field.md)
- [Validation](forms/forms-validation.mdx)
- [Behavior](forms/forms-behavior.md)
- [Layout](forms/forms-layout.md)
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ A radio button is a interface element that enables the user to choose only one o

## Options

- **Label:**ย See [form field](forms-field.md).
- **Helper text**: See [form field](forms-field.md).
- **Feedback text**: See [form field](forms-field.md).
- **Label:**ย 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).

## Behavior in context

- **Validation**: Radio buttons are validated collectively, not individually. For more information on validation, see [validation](forms-validation.md).
- **Validation**: Radio buttons are validated collectively, not individually. For more information on validation, see [validation](forms/forms-validation.mdx).
- **Interaction**: Clicking on a radio button toggles its state between checked and unchecked/default. Every other radio button in the group is automatically unchecked.

## States
Expand All @@ -27,8 +27,8 @@ A radio button is a interface element that enables the user to choose only one o

## Related patterns

- [Form field](forms-field.md)
- [Validation](forms-validation.md)
- [Layout](forms-layout.md)
- [Form field](forms/forms-field.md)
- [Validation](forms/forms-validation.mdx)
- [Layout](forms/forms-layout.md)
- Checkbox
- Toggle
- Toggle
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ A toggle is a user interface element that enables users to switch between two st

## Options

- **Label:**ย See [form field](forms-field.md).
- **Helper text**: See [form field](forms-field.md).
- **Feedback text**: See [form field](forms-field.md).
- **Label:**ย 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).

## Behavior in context

- **Validation**: See [validation](forms-validation.md).
- **Validation**: See [validation](forms/forms-validation.mdx).
- **Interaction**: Clicking on the toggle switch changes its state from on to off or vice versa. The toggle visually reflects the current state.

## States
Expand All @@ -19,17 +19,17 @@ A toggle is a user interface element that enables users to switch between two st

## Dos and Donโ€™ts

Do use toggles for single features or options that need to be switched quickly and easily
Do provide clear labels for toggles to indicate what they control
Do use toggles consistently throughout the interface for similar actions or settings
Don't use toggles for complex multi-state options or settings
Don't use toggles for actions that require a confirmation or additional input
Don't use toggles for actions that are irreversible or have serious consequences
- Do use toggles for single features or options that need to be switched quickly and easily
- Do provide clear labels for toggles to indicate what they control
- Do use toggles consistently throughout the interface for similar actions or settings
- Don't use toggles for complex multi-state options or settings
- Don't use toggles for actions that require a confirmation or additional input
- Don't use toggles for actions that are irreversible or have serious consequences

## Related patterns

- [Form field](forms-field.md)
- [Validation](forms-validation.md)
- [Layout](forms-layout.md)
- Checkbox
- Radio button
- [Form field](forms/forms-field.md)
- [Validation](forms/forms-validation.mdx)
- [Layout](forms/forms-layout.md)
- [Checkbox](checkbox.mdx)
- [Radio](radio.mdx)
4 changes: 2 additions & 2 deletions packages/documentation/docs/controls/_input_styleguide.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ An input field is a user interface element that allows users to enter and edit t

## Behavior in context

- **Validation:**ย See [validation](./forms/forms-validation.md).
- **Validation:**ย See [validation](./forms/forms-validation.mdx).
- **Interaction**: Clicking in the container enables the editing of the field.
- **Text truncation**: The text in an input field is cut off with the length of the container.
- **Alignment**: Inputs are always aligned to the left, while right alignment is reserved exclusively for [number fields](number-input.mdx).
Expand All @@ -44,7 +44,7 @@ The input field has five states: default, focused, hover, disabled and read-only
## Related patterns

- [Form field](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Validation](./forms/forms-validation.mdx)
- [Layout](./forms/forms-layout.md)
- [Number input](number-input.mdx)
- [Date input](date-input.mdx)
2 changes: 0 additions & 2 deletions packages/documentation/docs/controls/_number-input_code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ The number input component allows users to enter and adjust numerical values. It

## 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)
- **Validation:** See [form field](./forms/forms-validation.mdx)
- **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.

Expand All @@ -42,7 +42,7 @@ The number input has five states: default, hover, focused, disabled and read-onl

## Related patterns
- [Form fields](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Validation](./forms/forms-validation.mdx)
- [Layout](./forms/forms-layout.md)
- [Input](./input.mdx)
- [Select](./select.mdx)
10 changes: 5 additions & 5 deletions packages/documentation/docs/controls/_select_styleguide.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ A select component allows users to choose from a list of options. It supports si

## Behavior in context

- **Validation:**ย See [validation](./forms/forms-validation.md).
- **Validation:**ย See [validation](./forms/forms-validation.mdx).
- **Interaction:**
- Click or Enter key on button opens dropdown list.
- Typing in the input field filters the dropdown list.
Expand All @@ -54,7 +54,7 @@ The select field has five states: default, hover, focused, disabled and read-onl
- Do take care of performance when loading an extensive list of items
- Do use selects when there is a finite list of items available to avoid manual input errors or duplicates
- Do sort items logically (for example alphabetically or numerically)
- Don't use selects for binary choices, like yes and no (use [radio buttons](radio.mdx), [checkboxes](checkbox.mdx) or [toggles](toggle.md) instead)
- Don't use selects for binary choices, like yes and no (use [radio buttons](radio.mdx), [checkboxes](checkbox.mdx) or [toggles](toggle.mdx) instead)
- Don't use selects for navigational or search patterns (use [category filters](category-filter.md) or [search fields](expanding-search.md) instead)
- Don't combine several data attributes in an item label (use [tables](html-grid.mdx) or [event lists](event-list.md) with a search functionality instead)

Expand All @@ -63,10 +63,10 @@ The select field has five states: default, hover, focused, disabled and read-onl
## Related patterns

- [Form field](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Validation](./forms/forms-validation.mdx)
- [Layout](./forms/forms-layout.md)
- [Input](input.mdx)
- [Radio button](radio.mdx)
- [Checkbox](checkbox.mdx)
- [Toggle](toggle.md)
- [Date input](date-input.mdx)
- [Toggle](toggle.mdx)
- [Date input](date-input.mdx)
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The textarea component allows users to input multi-line text, making it ideal fo
- Optional: Users can resize textareas to fit their needs. For example, vertical resizing can be useful in feedback forms when the entry exceeds the default height.
- **Validation**:
- Minimum and maximum length defines number of characters allowed.
- See [form validation](./forms/forms-validation.md)
- See [form validation](./forms/forms-validation.mdx)
- **Overflow**: Text within the textarea is not truncated; it supports scrolling for overflow content.
- **Alignment**: Text is always left-aligned in textareas.
- **Sizing**:
Expand All @@ -55,6 +55,6 @@ Textareas have five states: Default, hover, focused, read-only, and disabled
## Related patterns

- [Form fields](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Validation](./forms/forms-validation.mdx)
- [Layout](./forms/forms-layout.md)
- [Input](./input.mdx)
43 changes: 43 additions & 0 deletions packages/documentation/docs/controls/_toggle_code.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import Playground from '@site/src/components/PlaygroundV3';
import Props from './../auto-generated/ix-toggle/props.md';
import Events from './../auto-generated/ix-toggle/events.md';

## Examples

### Basic

<Playground name="number-input" examplesByName/>

### Disabled

<Playground name="number-input-disabled" examplesByName/>

### Label

<Playground name="number-input-label" examplesByName/>

### Readonly

<Playground name="number-input-readonly" examplesByName/>

### StepperButton

<Playground name="number-input-stepper-button" examplesByName/>

### Validation

<Playground
name="number-input-validation"
height="20rem"
examplesByName
/>

## API

### Properties

<Props />

### Events

<Events />
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ Toggle buttons have five states: Default, hover, active, disabled, loading and f

- [Button](button.md)
- [Icon button](icon-button.md)
- [Toggle](../toggle.md)
- [Toggle](../toggle.mdx)
<!-- - [Button group](...) -->
6 changes: 5 additions & 1 deletion packages/documentation/docs/controls/checkbox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ import Playground from '@site/src/components/PlaygroundV3';
import Props from '@site/docs/auto-generated/ix-checkbox/props.md';
import Events from '@site/docs/auto-generated/ix-checkbox/events.md';
import Tags from '@site/docs/auto-generated/ix-checkbox/tags.md';
import DeprecatedTags from '@site/src/components/Tags';

# Checkbox

<Tags />
<div className="d-flex gap-2 align-items-center">
<Tags />
<DeprecatedTags url='/docs/legacy/checkbox' hasDeprecatedAncestor={true}></DeprecatedTags>
</div>

## Examples

Expand Down
11 changes: 11 additions & 0 deletions packages/documentation/docs/controls/date-input.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import DeprecatedTags from '@site/src/components/Tags';
import DocsTabs from '@site/src/components/DocsTabs';

import DocsUx from './\_date-input_styleguide.mdx'
import DocsCode from './\_date-input_code.mdx'

import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';

# Date input

<div className="d-flex gap-2 align-items-center">
<Tags />
<DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
</div>

<br/>
<br/>

<DocsTabs styleguide={DocsUx} code={DocsCode} />
4 changes: 2 additions & 2 deletions packages/documentation/docs/controls/forms/forms-behavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ In this strategy, there is no need for a submit button. The form is automaticall
- Con: Handling validation and error messages without a submit button can be challenging.
- Con: Users may not have a chance to review and confirm their input before submission.

For more information on form validation, refer to the [Validation](forms-validation.md) chapter.
For more information on form validation, refer to the [Validation](forms-validation.mdx) chapter.

## Related patterns

- [Validation](forms-validation.md)
- [Validation](forms-validation.mdx)
- [Layout](forms-layout.md)
Loading
Loading