Skip to content

Commit bcf73fe

Browse files
ShaneKShaneK
committed
chore(lint): running lint
1 parent 8fcf1cf commit bcf73fe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+1557
-775
lines changed

‎docs/react/navigation.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,7 @@ Directly after the `Route`, we define our default `Navigate`, which, when a user
4343
You can also conditionally redirect based on a condition, like checking if a user is authenticated or not:
4444

4545
```tsx
46-
<Route
47-
path="/dashboard/*"
48-
element={isAuthed ? <DashboardPage /> : <Navigate to="/login" replace />}
49-
/>
46+
<Route path="/dashboard/*" element={isAuthed ? <DashboardPage /> : <Navigate to="/login" replace />} />
5047
```
5148

5249
## IonReactRouter

‎versioned_docs/version-v8/api/accordion-group.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "ion-accordion-group"
2+
title: 'ion-accordion-group'
33
---
4+
45
import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
56
import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
67
import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
@@ -16,7 +17,6 @@ Accordion group is a container for accordion instances. It manages the state of
1617

1718
See the [Accordion](./accordion) documentation for more information.
1819

19-
2020
## Interfaces
2121

2222
### AccordionGroupChangeEventDetail
@@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
3838
}
3939
```
4040

41-
42-
4341
## Properties
42+
4443
<Props />
4544

4645
## Events
46+
4747
<Events />
4848

4949
## Methods
50+
5051
<Methods />
5152

5253
## CSS Shadow Parts
54+
5355
<Parts />
5456

5557
## CSS Custom Properties
58+
5659
<CustomProps />
5760

5861
## Slots
62+
5963
<Slots />

‎versioned_docs/version-v8/api/accordion.md‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "ion-accordion"
2+
title: 'ion-accordion'
33
---
4+
45
import Props from '@ionic-internal/component-api/v8/accordion/props.md';
56
import Events from '@ionic-internal/component-api/v8/accordion/events.md';
67
import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
@@ -10,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
1011

1112
<head>
1213
<title>ion-accordion: Accordion Components: How to Build & Examples</title>
13-
<meta name="description" content="Ion-accordion components provide collapsible sections in content to reduce vertical space and organize information. Learn how to build one and see examples." />
14+
<meta
15+
name="description"
16+
content="Ion-accordion components provide collapsible sections in content to reduce vertical space and organize information. Learn how to build one and see examples."
17+
/>
1418
</head>
1519

1620
import EncapsulationPill from '@components/page/api/EncapsulationPill';
1721

1822
<EncapsulationPill type="shadow" />
1923

20-
2124
Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components.
2225

2326
## Basic Usage
@@ -120,18 +123,18 @@ import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expan
120123

121124
You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions:
122125

123-
| Class Name | Description |
124-
| ---------- | ----------- |
125-
| `.accordion-expanding` | Applied when the accordion is actively expanding |
126-
| `.accordion-expanded` | Applied when the accordion is fully expanded |
126+
| Class Name | Description |
127+
| ----------------------- | ------------------------------------------------- |
128+
| `.accordion-expanding` | Applied when the accordion is actively expanding |
129+
| `.accordion-expanded` | Applied when the accordion is fully expanded |
127130
| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
128-
| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
131+
| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
129132

130133
If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
131134

132135
```css
133-
ion-accordion.accordion-expanding ion-item[slot="header"],
134-
ion-accordion.accordion-expanded ion-item[slot="header"] {
136+
ion-accordion.accordion-expanding ion-item[slot='header'],
137+
ion-accordion.accordion-expanded ion-item[slot='header'] {
135138
--color: red;
136139
}
137140
```
@@ -174,23 +177,23 @@ import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibili
174177

175178
When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does:
176179

177-
| Key | Description |
178-
| ------------------------------------ | ------------------------------------------------------------ |
179-
| <kbd>Space</kbd> or <kbd>Enter</kbd> | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
180-
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
181-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus to the previous focusable element. |
182-
| <kbd>Down Arrow</kbd> | - When focus is on an accordion header, moves focus to the next accordion header. <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
183-
| <kbd>Up Arrow</kbd> | - When focus is on an accordion header, moves focus to the previous accordion header. <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
184-
| <kbd>Home</kbd> | When focus is on an accordion header, moves focus to the first accordion header. |
185-
| <kbd>End</kbd> | When focus is on an accordion header, moves focus to the last accordion header. |
180+
| Key | Description |
181+
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
182+
| <kbd>Space</kbd> or <kbd>Enter</kbd> | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
183+
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
184+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus to the previous focusable element. |
185+
| <kbd>Down Arrow</kbd> | - When focus is on an accordion header, moves focus to the next accordion header. <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
186+
| <kbd>Up Arrow</kbd> | - When focus is on an accordion header, moves focus to the previous accordion header. <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
187+
| <kbd>Home</kbd> | When focus is on an accordion header, moves focus to the first accordion header. |
188+
| <kbd>End</kbd> | When focus is on an accordion header, moves focus to the last accordion header. |
186189

187190
## Performance
188191

189192
### Animations
190193

191194
The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
192195

193-
For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
196+
For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
194197

195198
1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
196199

@@ -199,19 +202,25 @@ For example, using [ion-img](./img) may cause layout shifts as it lazily loads i
199202
3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
200203

201204
## Properties
205+
202206
<Props />
203207

204208
## Events
209+
205210
<Events />
206211

207212
## Methods
213+
208214
<Methods />
209215

210216
## CSS Shadow Parts
217+
211218
<Parts />
212219

213220
## CSS Custom Properties
221+
214222
<CustomProps />
215223

216224
## Slots
225+
217226
<Slots />

‎versioned_docs/version-v8/api/action-sheet.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "ion-action-sheet"
2+
title: 'ion-action-sheet'
33
---
4+
45
import Tabs from '@theme/Tabs';
56
import TabItem from '@theme/TabItem';
67

@@ -13,14 +14,16 @@ import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
1314

1415
<head>
1516
<title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
16-
<meta name="description" content="Action Sheets are dialogs that display a set of options above app content and must be manually dismissed. Read to learn about use on iOS and Android devices." />
17+
<meta
18+
name="description"
19+
content="Action Sheets are dialogs that display a set of options above app content and must be manually dismissed. Read to learn about use on iOS and Android devices."
20+
/>
1721
</head>
1822

1923
import EncapsulationPill from '@components/page/api/EncapsulationPill';
2024

2125
<EncapsulationPill type="scoped" />
2226

23-
2427
An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
2528

2629
## Inline Action Sheets (Recommended)
@@ -280,19 +283,25 @@ interface ActionSheetOptions {
280283
```
281284

282285
## Properties
286+
283287
<Props />
284288

285289
## Events
290+
286291
<Events />
287292

288293
## Methods
294+
289295
<Methods />
290296

291297
## CSS Shadow Parts
298+
292299
<Parts />
293300

294301
## CSS Custom Properties
302+
295303
<CustomProps />
296304

297305
## Slots
306+
298307
<Slots />

‎versioned_docs/version-v8/api/alert.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "ion-alert"
2+
title: 'ion-alert'
33
---
4+
45
import Tabs from '@theme/Tabs';
56
import TabItem from '@theme/TabItem';
67

@@ -13,7 +14,10 @@ import Slots from '@ionic-internal/component-api/v8/alert/slots.md';
1314

1415
<head>
1516
<title>ion-alert: Ionic Alert Buttons with Custom Message Prompts</title>
16-
<meta name="description" content="ion-alert dialog presents or collects information using inputs. Custom alert button messages appear above the app's content and must be manually dismissed." />
17+
<meta
18+
name="description"
19+
content="ion-alert dialog presents or collects information using inputs. Custom alert button messages appear above the app's content and must be manually dismissed."
20+
/>
1721
</head>
1822

1923
import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -58,7 +62,6 @@ import Buttons from '@site/static/usage/v8/alert/buttons/index.md';
5862

5963
<Buttons />
6064

61-
6265
## Inputs
6366

6467
Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
@@ -106,7 +109,7 @@ import Customization from '@site/static/usage/v8/alert/customization/index.md';
106109
<Customization />
107110

108111
:::note
109-
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
112+
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
110113
:::
111114

112115
## Accessibility
@@ -181,7 +184,6 @@ const alert = await alertController.create({
181184

182185
</Tabs>
183186

184-
185187
All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
186188

187189
#### Alert Buttons Description
@@ -281,7 +283,6 @@ interface AlertButton {
281283
}
282284
```
283285

284-
285286
### AlertInput
286287

287288
```typescript
@@ -306,7 +307,6 @@ interface AlertInput {
306307
}
307308
```
308309

309-
310310
### AlertOptions
311311

312312
```typescript
@@ -332,19 +332,25 @@ interface AlertOptions {
332332
```
333333

334334
## Properties
335+
335336
<Props />
336337

337338
## Events
339+
338340
<Events />
339341

340342
## Methods
343+
341344
<Methods />
342345

343346
## CSS Shadow Parts
347+
344348
<Parts />
345349

346350
## CSS Custom Properties
351+
347352
<CustomProps />
348353

349354
## Slots
355+
350356
<Slots />

‎versioned_docs/version-v8/api/app.md‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
title: "ion-app"
2+
title: 'ion-app'
33
---
4+
45
import Props from '@ionic-internal/component-api/v8/app/props.md';
56
import Events from '@ionic-internal/component-api/v8/app/events.md';
67
import Methods from '@ionic-internal/component-api/v8/app/methods.md';
@@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v8/app/slots.md';
1011

1112
<head>
1213
<title>ion-app: Container Element for an Ionic Application</title>
13-
<meta name="description" content="ion-app is a container element for an Ionic application. Apps can have many Ionic components including menus, headers, content, and footers. Read to learn more." />
14+
<meta
15+
name="description"
16+
content="ion-app is a container element for an Ionic application. Apps can have many Ionic components including menus, headers, content, and footers. Read to learn more."
17+
/>
1418
</head>
1519

1620
import EncapsulationPill from '@components/page/api/EncapsulationPill';
@@ -19,12 +23,12 @@ App is a container element for an Ionic application. There should only be one `<
1923

2024
Using `ion-app` enables the following behaviors:
2125

22-
* [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
23-
* [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
24-
* Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
25-
* Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
26-
* [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
27-
* Other tap and focus utilities which make the experience of using an Ionic app feel more native
26+
- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
27+
- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
28+
- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
29+
- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
30+
- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
31+
- Other tap and focus utilities which make the experience of using an Ionic app feel more native
2832

2933
## Programmatic Focus
3034

@@ -35,19 +39,25 @@ import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
3539
<SetFocus />
3640

3741
## Properties
42+
3843
<Props />
3944

4045
## Events
46+
4147
<Events />
4248

4349
## Methods
50+
4451
<Methods />
4552

4653
## CSS Shadow Parts
54+
4755
<Parts />
4856

4957
## CSS Custom Properties
58+
5059
<CustomProps />
5160

5261
## Slots
62+
5363
<Slots />

0 commit comments

Comments
 (0)