Skip to content

Commit b3dd3f3

Browse files
kkindraikkindrai
authored
docs(components): remove legacy syntax sections from all form controls for v8 (#4202)
1 parent 0e164eb commit b3dd3f3

File tree

15 files changed

+7
-1628
lines changed

15 files changed

+7
-1628
lines changed

‎docs/api/checkbox.md

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
6565
import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
6666

6767
<Indeterminate />
68-
68+
6969
## Links inside of Labels
7070

7171
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<T = any> extends CustomEvent {
114114
}
115115
```
116116

117-
## Migrating from Legacy Checkbox Syntax
118-
119-
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.
120-
121-
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.
122-
123-
### Using the Modern Syntax
124-
125-
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`.
126-
127-
import Migration from '@site/static/usage/v8/checkbox/migration/index.md';
128-
129-
<Migration />
130-
131-
132-
:::note
133-
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.
134-
:::
135-
136-
### Using the Legacy Syntax
137-
138-
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.
139-
140-
141117
## Properties
142118
<Props />
143119

‎docs/api/input.md

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -188,28 +188,6 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m
188188

189189
<CSSProps />
190190

191-
## Migrating from Legacy Input Syntax
192-
193-
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.
194-
195-
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.
196-
197-
### Using the Modern Syntax
198-
199-
Using the modern syntax involves three steps:
200-
201-
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`.
202-
2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
203-
3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
204-
205-
import Migration from '@site/static/usage/v8/input/migration/index.md';
206-
207-
<Migration />
208-
209-
### Using the Legacy Syntax
210-
211-
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.
212-
213191
## Interfaces
214192

215193
### InputChangeEventDetail

‎docs/api/radio.md

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -107,31 +107,6 @@ import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index
107107

108108
<CSSParts />
109109

110-
## Migrating from Legacy Radio Syntax
111-
112-
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.
113-
114-
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.
115-
116-
### Using the Modern Syntax
117-
118-
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`.
119-
120-
import Migration from '@site/static/usage/v8/radio/migration/index.md';
121-
122-
<Migration />
123-
124-
125-
:::note
126-
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.
127-
:::
128-
129-
### Using the Legacy Syntax
130-
131-
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.
132-
133-
134-
135110
## Properties
136111
<Props />
137112

‎docs/api/range.md

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -128,32 +128,6 @@ import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index
128128

129129
<CSSParts />
130130

131-
## Migrating from Legacy Range Syntax
132-
133-
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.
134-
135-
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.
136-
137-
### Using the Modern Syntax
138-
139-
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.
140-
141-
If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.
142-
143-
import Migration from '@site/static/usage/v8/range/migration/index.md';
144-
145-
<Migration />
146-
147-
148-
:::note
149-
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.
150-
:::
151-
152-
### Using the Legacy Syntax
153-
154-
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.
155-
156-
157131
## Interfaces
158132

159133
### RangeChangeEventDetail

‎docs/api/select.md

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -284,28 +284,6 @@ interface SelectCustomEvent<T = any> extends CustomEvent {
284284
}
285285
```
286286

287-
## Migrating from Legacy Select Syntax
288-
289-
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.
290-
291-
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.
292-
293-
294-
### Using the Modern Syntax
295-
296-
Using the modern syntax involves two steps:
297-
298-
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`.
299-
2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
300-
301-
import Migration from '@site/static/usage/v8/select/migration/index.md';
302-
303-
<Migration />
304-
305-
### Using the Legacy Syntax
306-
307-
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.
308-
309287
## Accessibility
310288

311289
### Keyboard Interactions

‎docs/api/textarea.md

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -127,29 +127,6 @@ import StartEndSlots from '@site/static/usage/v8/textarea/start-end-slots/index.
127127

128128
<StartEndSlots />
129129

130-
## Migrating from Legacy Textarea Syntax
131-
132-
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.
133-
134-
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.
135-
136-
137-
### Using the Modern Syntax
138-
139-
Using the modern syntax involves three steps:
140-
141-
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`.
142-
2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
143-
3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead.
144-
145-
import Migration from '@site/static/usage/v8/textarea/migration/index.md';
146-
147-
<Migration />
148-
149-
### Using the Legacy Syntax
150-
151-
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.
152-
153130
## Theming
154131

155132
import ThemingPlayground from '@site/static/usage/v8/textarea/theming/index.md';

‎docs/api/toggle.md

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -107,29 +107,6 @@ import CSSParts from '@site/static/usage/v8/toggle/theming/css-shadow-parts/inde
107107

108108
<CSSParts />
109109

110-
## Migrating from Legacy Toggle Syntax
111-
112-
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.
113-
114-
While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
115-
116-
### Using the Modern Syntax
117-
118-
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`.
119-
120-
import Migration from '@site/static/usage/v8/toggle/migration/index.md';
121-
122-
<Migration />
123-
124-
125-
:::note
126-
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.
127-
:::
128-
129-
### Using the Legacy Syntax
130-
131-
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.
132-
133110
## Interfaces
134111

135112
### ToggleChangeEventDetail

‎docs/updating/8-0.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,13 @@ iOS >=15
215215

216216
### Checkbox
217217

218-
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.
218+
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.
219219

220220
### Input
221221

222222
1. Remove any usages of the `size` property. CSS should be used to specify the visible width of the input instead.
223223
2. Remove any usages of the `accept` property.
224-
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.
224+
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.
225225

226226
### Item
227227

@@ -243,19 +243,19 @@ iOS >=15
243243

244244
### Radio
245245

246-
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.
246+
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.
247247

248248
### Select
249249

250-
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.
250+
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.
251251

252252
### Textarea
253253

254-
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.
254+
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.
255255

256256
### Toggle
257257

258-
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.
258+
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.
259259

260260
## Need Help Upgrading?
261261

0 commit comments

Comments
 (0)