Deprecated docs

packages/documentation/docs/controls/_category-filter_styleguide.md

@@ -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)

packages/documentation/docs/controls/_date-input_code.mdx

@@ -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

packages/documentation/docs/controls/_date-input_styleguide.mdx

@@ -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.
 
@@ -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)

packages/documentation/docs/controls/forms/_forms-checkbox_styleguide.md → packages/documentation/docs/controls/_forms-checkbox_styleguide.md

@@ -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.
 
@@ -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

packages/documentation/docs/controls/forms/_forms-custom-field_styleguide.md → packages/documentation/docs/controls/_forms-custom-field_styleguide.md

@@ -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.
@@ -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)

packages/documentation/docs/controls/forms/_forms-radio-button_styleguide.md → packages/documentation/docs/controls/_forms-radio-button_styleguide.md

@@ -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
@@ -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

packages/documentation/docs/controls/forms/_forms-toggle_styleguide.md → packages/documentation/docs/controls/_forms-toggle_styleguide.md

@@ -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
@@ -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)

packages/documentation/docs/controls/_input_styleguide.md

@@ -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).
@@ -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)

packages/documentation/docs/controls/_number-input_code.mdx

@@ -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

packages/documentation/docs/controls/_number-input_styleguide.mdx

@@ -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.
 
@@ -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)

packages/documentation/docs/controls/_select_styleguide.md

@@ -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.
@@ -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)
 
@@ -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)

packages/documentation/docs/controls/_textarea-field_styleguide.mdx

@@ -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**:
@@ -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)

packages/documentation/docs/controls/_toggle_code.mdx

@@ -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 />

packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md

@@ -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](...) -->

packages/documentation/docs/controls/checkbox.mdx

@@ -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
 

packages/documentation/docs/controls/date-input.mdx

@@ -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} />

packages/documentation/docs/controls/forms/forms-behavior.md

@@ -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)