From ea9b50a12773dd437122f0febececd16d7b7a63c Mon Sep 17 00:00:00 2001 From: "kendra.jade" Date: Fri, 18 Jul 2025 15:55:31 -0500 Subject: [PATCH 1/3] docs(input): removed mentions of legacy syntax support for ion-input --- docs/api/input.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 78059609d8e..229978f5f2b 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -192,7 +192,7 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience. -Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. +Developers can perform this migration one input at a time. The legacy syntax is no longer supported. ### Using the Modern Syntax @@ -206,10 +206,6 @@ import Migration from '@site/static/usage/v8/input/migration/index.md'; -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax. - ## Interfaces ### InputChangeEventDetail From dff8fd3b22e8d27ad73e9fd85676d39c56f90fc2 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Thu, 24 Jul 2025 16:02:16 -0400 Subject: [PATCH 2/3] docs(components): remove all legacy syntax sections from v8 --- docs/api/checkbox.md | 26 +------------------------- docs/api/input.md | 18 ------------------ docs/api/radio.md | 25 ------------------------- docs/api/range.md | 26 -------------------------- docs/api/select.md | 22 ---------------------- docs/api/textarea.md | 23 ----------------------- docs/api/toggle.md | 23 ----------------------- docs/updating/8-0.md | 12 ++++++------ 8 files changed, 7 insertions(+), 168 deletions(-) diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index a7b733f201d..ddc9331f50e 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -65,7 +65,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; - + ## Links inside of Labels Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. @@ -114,30 +114,6 @@ interface CheckboxCustomEvent extends CustomEvent { } ``` -## Migrating from Legacy Checkbox Syntax - -A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - -### Using the Modern Syntax - -Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`. - -import Migration from '@site/static/usage/v8/checkbox/migration/index.md'; - - - - -:::note -In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly. -::: - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax. - - ## Properties diff --git a/docs/api/input.md b/docs/api/input.md index 229978f5f2b..18d71de4eb8 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -188,24 +188,6 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m -## Migrating from Legacy Input Syntax - -A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one input at a time. The legacy syntax is no longer supported. - -### Using the Modern Syntax - -Using the modern syntax involves three steps: - -1. Remove `ion-label` and use the `label` property on `ion-input` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-input`. -2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties. -3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead. - -import Migration from '@site/static/usage/v8/input/migration/index.md'; - - - ## Interfaces ### InputChangeEventDetail diff --git a/docs/api/radio.md b/docs/api/radio.md index fb717c14835..3cd52c13a4b 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -107,31 +107,6 @@ import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index -## Migrating from Legacy Radio Syntax - -A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an radio, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - -### Using the Modern Syntax - -Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`. - -import Migration from '@site/static/usage/v8/radio/migration/index.md'; - - - - -:::note -In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly. -::: - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern radio syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-radio` to `true` to force that instance of the radio to use the legacy syntax. - - - ## Properties diff --git a/docs/api/range.md b/docs/api/range.md index 838b981be05..fdb042bb3e9 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -128,32 +128,6 @@ import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index -## Migrating from Legacy Range Syntax - -A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - -### Using the Modern Syntax - -Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property. - -If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead. - -import Migration from '@site/static/usage/v8/range/migration/index.md'; - - - - -:::note -In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly. -::: - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax. - - ## Interfaces ### RangeChangeEventDetail diff --git a/docs/api/select.md b/docs/api/select.md index 0642c6e701d..2ee43b4751e 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -284,28 +284,6 @@ interface SelectCustomEvent extends CustomEvent { } ``` -## Migrating from Legacy Select Syntax - -A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - - -### Using the Modern Syntax - -Using the modern syntax involves two steps: - -1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`. -2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`. - -import Migration from '@site/static/usage/v8/select/migration/index.md'; - - - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax. - ## Accessibility ### Keyboard Interactions diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 5e34e78a72a..feed4b04bee 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -127,29 +127,6 @@ import StartEndSlots from '@site/static/usage/v8/textarea/start-end-slots/index. -## Migrating from Legacy Textarea Syntax - -A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience. - -Developers can perform this migration one textarea at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - - -### Using the Modern Syntax - -Using the modern syntax involves three steps: - -1. Remove `ion-label` and use the `label` property on `ion-textarea` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-textarea`. -2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties. -3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead. - -import Migration from '@site/static/usage/v8/textarea/migration/index.md'; - - - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern textarea syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-textarea` to `true` to force that instance of the textarea to use the legacy syntax. - ## Theming import ThemingPlayground from '@site/static/usage/v8/textarea/theming/index.md'; diff --git a/docs/api/toggle.md b/docs/api/toggle.md index c0b7445b2ac..ad2ebe3554e 100644 --- a/docs/api/toggle.md +++ b/docs/api/toggle.md @@ -107,29 +107,6 @@ import CSSParts from '@site/static/usage/v8/toggle/theming/css-shadow-parts/inde -## Migrating from Legacy Toggle Syntax - -A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an toggle, resolves accessibility issues, and improves the developer experience. - -While developers can continue using the legacy syntax, we recommend migrating as soon as possible. - -### Using the Modern Syntax - -Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`. - -import Migration from '@site/static/usage/v8/toggle/migration/index.md'; - - - - -:::note -In past versions of Ionic, `ion-item` was required for `ion-toggle` to function properly. Starting in Ionic 7.0, `ion-toggle` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-toggle` to function properly. -::: - -### Using the Legacy Syntax - -Ionic uses heuristics to detect if an app is using the modern toggle syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-toggle` to `true` to force that instance of the toggle to use the legacy syntax. - ## Interfaces ### ToggleChangeEventDetail diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index e0e283b4ac5..ca20c9cb6cb 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -215,13 +215,13 @@ iOS >=15 ### Checkbox -1. Migrate any remaining instances of Checkbox to use the [modern form control syntax](../api/checkbox#migrating-from-legacy-checkbox-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Checkbox to use the [modern form control syntax](../v7/api/checkbox#migrating-from-legacy-checkbox-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Input 1. Remove any usages of the `size` property. CSS should be used to specify the visible width of the input instead. 2. Remove any usages of the `accept` property. -3. Migrate any remaining instances of Input to use the [modern form control syntax](../api/input#migrating-from-legacy-input-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +3. Migrate any remaining instances of Input to use the [modern form control syntax](../v7/api/input#migrating-from-legacy-input-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Item @@ -243,19 +243,19 @@ iOS >=15 ### Radio -1. Migrate any remaining instances of Radio to use the [modern form control syntax](../api/radio#migrating-from-legacy-radio-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Radio to use the [modern form control syntax](../v7/api/radio#migrating-from-legacy-radio-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Select -1. Migrate any remaining instances of Select to use the [modern form control syntax](../api/select#migrating-from-legacy-select-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Select to use the [modern form control syntax](../v7/api/select#migrating-from-legacy-select-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Textarea -1. Migrate any remaining instances of Textarea to use the [modern form control syntax](../api/textarea#migrating-from-legacy-textarea-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Textarea to use the [modern form control syntax](../v7/api/textarea#migrating-from-legacy-textarea-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Toggle -1. Migrate any remaining instances of Toggle to use the [modern form control syntax](../api/toggle#migrating-from-legacy-toggle-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Toggle to use the [modern form control syntax](../v7/api/toggle#migrating-from-legacy-toggle-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ## Need Help Upgrading? From 6b74afcf4907a87caa055509d6d17946afcdcdb7 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Thu, 24 Jul 2025 16:03:52 -0400 Subject: [PATCH 3/3] docs(usage): remove migration code examples from v8 --- static/usage/v8/checkbox/migration/index.md | 188 -------------- static/usage/v8/input/migration/index.md | 248 ------------------- static/usage/v8/radio/migration/index.md | 188 -------------- static/usage/v8/range/migration/index.md | 256 -------------------- static/usage/v8/select/migration/index.md | 140 ----------- static/usage/v8/textarea/migration/index.md | 248 ------------------- static/usage/v8/toggle/migration/index.md | 188 -------------- 7 files changed, 1456 deletions(-) delete mode 100644 static/usage/v8/checkbox/migration/index.md delete mode 100644 static/usage/v8/input/migration/index.md delete mode 100644 static/usage/v8/radio/migration/index.md delete mode 100644 static/usage/v8/range/migration/index.md delete mode 100644 static/usage/v8/select/migration/index.md delete mode 100644 static/usage/v8/textarea/migration/index.md delete mode 100644 static/usage/v8/toggle/migration/index.md diff --git a/static/usage/v8/checkbox/migration/index.md b/static/usage/v8/checkbox/migration/index.md deleted file mode 100644 index acf77957566..00000000000 --- a/static/usage/v8/checkbox/migration/index.md +++ /dev/null @@ -1,188 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - -``` - - - -```html - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - -``` - - - -```tsx -{/* Basic */} - -{/* Before */} - - Checkbox Label - - - -{/* After */} - - Checkbox Label - - -{/* Fixed Labels */} - -{/* Before */} - - Checkbox Label - - - -{/* After */} - - Checkbox Label - - -{/* Checkbox at the start of line, Label at the end of line */} - -{/* Before */} - - Checkbox Label - - - -{/* After */} - - Checkbox Label - -``` - - - -```html - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - - - - - - - Checkbox Label - - - - - - Checkbox Label - -``` - - -```` diff --git a/static/usage/v8/input/migration/index.md b/static/usage/v8/input/migration/index.md deleted file mode 100644 index 34e3ccaece5..00000000000 --- a/static/usage/v8/input/migration/index.md +++ /dev/null @@ -1,248 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Email: - - - - - - - - - - - - - - Email: - - - - - - - - - - - - - Email: - -
Enter an email
-
Please enter a valid email
- - - - - - - -``` - - - -```html - - - - - Email: - - - - - - - - - - - - - - Email: - - - - - - - - - - - - - Email: - -
Enter an email
-
Please enter a valid email
- - - - - - - -``` - - - -```tsx -{/* Label and Label Position */} - -{/* Before */} - - Email: - - - -{/* After */} - - - - - -{/* Fill */} - -{/* Before */} - - Email: - - - -{/* After */} - -{/* Inputs using `fill` should not be placed in IonItem */} - - -{/* Input-specific features on IonItem */} - -{/* Before */} - - Email: - -
Enter an email
-
Please enter a valid email
- - -{/* After */} - -{/* - Metadata such as counters and helper text should not - be used when an input is in an item/list. If you need to - provide more context on a input, consider using an IonNote - underneath the IonList. -*/} - - -``` - - - -```html - - - - - Email: - - - - - - - - - - - - - - Email: - - - - - - - - - - - - - Email: - -
Enter an email
-
Please enter a valid email
- - - - - - - -``` - - -```` diff --git a/static/usage/v8/radio/migration/index.md b/static/usage/v8/radio/migration/index.md deleted file mode 100644 index 4c0477f1e4a..00000000000 --- a/static/usage/v8/radio/migration/index.md +++ /dev/null @@ -1,188 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - -``` - - - -```html - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - -``` - - - -```tsx -{/* Basic */} - -{/* Before */} - - Radio Label - - - -{/* After */} - - Radio Label - - -{/* Fixed Labels */} - -{/* Before */} - - Radio Label - - - -{/* After */} - - Radio Label - - -{/* Radio at the start of line, Label at the end of line */} - -{/* Before */} - - Radio Label - - - -{/* After */} - - Radio Label - -``` - - - -```html - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - - - - - - - Radio Label - - - - - - Radio Label - -``` - - -```` diff --git a/static/usage/v8/range/migration/index.md b/static/usage/v8/range/migration/index.md deleted file mode 100644 index 4025f91bc31..00000000000 --- a/static/usage/v8/range/migration/index.md +++ /dev/null @@ -1,256 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - -
Notifications
- - - - - - - -
Notifications
- - -``` - - - -```html - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - -
Notifications
- - - - - - - -
Notifications
- - -``` - - - -```tsx -{/* Basic */} - -{/* Before */} - - Notifications - - - -{/* After */} - - - - -{/* Fixed Labels */} - -{/* Before */} - - Notifications - - - -{/* After */} - - - - -{/* Range at the start of line, Label at the end of line */} - -{/* Before */} - - Notifications - - - -{/* After */} - - - - -{/* Custom HTML label */} - -{/* Before */} - - -
Notifications
- - - - - - - -
Notifications
- - -``` - - - -```html - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - Notifications - - - - - - - - - - - - - -
Notifications
- - - - - - - -
Notifications
- - -``` - - -```` diff --git a/static/usage/v8/select/migration/index.md b/static/usage/v8/select/migration/index.md deleted file mode 100644 index daf1a3a2612..00000000000 --- a/static/usage/v8/select/migration/index.md +++ /dev/null @@ -1,140 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Favorite Fruit: - ... - - - - - ... - - - - - - - - Favorite Fruit: - ... - - - - - -... -``` - - - -```html - - - - - Favorite Fruit: - ... - - - - - ... - - - - - - - - Favorite Fruit: - ... - - - - - -... -``` - - - -```tsx -{/* Label and Label Position */} - -{/* Before */} - - Favorite Fruit: - ... - - -{/* After */} - - ... - - - -{/* Fill */} - -{/* Before */} - - Favorite Fruit: - ... - - -{/* After */} - -{/* Inputs using `fill` should not be placed in IonItem */} -... -``` - - - -```html - - - - - Favorite Fruit: - ... - - - - - ... - - - - - - - - Favorite Fruit: - ... - - - - - -... -``` - - -```` diff --git a/static/usage/v8/textarea/migration/index.md b/static/usage/v8/textarea/migration/index.md deleted file mode 100644 index aa820c53b48..00000000000 --- a/static/usage/v8/textarea/migration/index.md +++ /dev/null @@ -1,248 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Label: - - - - - - - - - - - - - - Label: - - - - - - - - - - - - - Label: - -
Enter text
-
Please enter text
- - - - - - - -``` - - - -```html - - - - - Label: - - - - - - - - - - - - - - Label: - - - - - - - - - - - - - Label: - -
Enter text
-
Please enter text
- - - - - - - -``` - - - -```tsx -{/* Label and Label Position */} - -{/* Before */} - - Label: - - - -{/* After */} - - - - - -{/* Fill */} - -{/* Before */} - - Label: - - - -{/* After */} - -{/* Textareas using `fill` should not be placed in IonItem */} - - -{/* Textarea-specific features on IonItem */} - -{/* Before */} - - Label: - -
Enter text
-
Please enter text
- - -{/* After */} - -{/* - Metadata such as counters and helper text should not - be used when a textarea is in an item/list. If you need to - provide more context on a textarea, consider using an IonNote - underneath the IonList. -*/} - - -``` - - - -```html - - - - - Label: - - - - - - - - - - - - - - Label: - - - - - - - - - - - - - Label: - -
Enter text
-
Please enter text
- - - - - - - -``` - - -```` diff --git a/static/usage/v8/toggle/migration/index.md b/static/usage/v8/toggle/migration/index.md deleted file mode 100644 index a1f855766b8..00000000000 --- a/static/usage/v8/toggle/migration/index.md +++ /dev/null @@ -1,188 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -````mdx-code-block - - - -```html - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - -``` - - - -```html - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - -``` - - - -```tsx -{/* Basic */} - -{/* Before */} - - Notifications - - - -{/* After */} - - Notifications - - -{/* Fixed Labels */} - -{/* Before */} - - Notifications - - - -{/* After */} - - Notifications - - -{/* Toggle at the start of line, Label at the end of line */} - -{/* Before */} - - Notifications - - - -{/* After */} - - Notifications - -``` - - - -```html - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - - - - - - - Notifications - - - - - - Notifications - -``` - - -````