Skip to content

chore(docs): correct ignore lists and drop archived playground versions #4670

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.

Sign up for GitHub

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

Open
thetaPC wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(docs): correct ignore lists and drop archived playground versions #4670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e4d301
chore(docs): correct ignore lists and drop archived playground versions
thetaPC Aug 27, 2026
340f7b1
Merge branch 'main' of github.com:ionic-team/ionic-docs into more-arc…
thetaPC Aug 27, 2026
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
4 changes: 2 additions & 2 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ src/theme/prism-include-languages.ts
legacy-stencil-components
scripts/bak

docs/api
versioned_docs/version-v*/api
# Auto-generated files
Comment thread
brandyscarney marked this conversation as resolved.
docs/native
versioned_docs/version-v*/native
docs/cli/commands
versioned_docs/version-v*/cli/commands

# Archived versions
versioned_docs/version-v5
Expand Down
9 changes: 8 additions & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,14 @@ Everything from here on refers to `<archiving>`:

Then remove that version's `@ionic/` `allowedVersions` rule from `packageRules`, since it no longer has anything to match.

9. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building `<archiving>`.
9. **Update the playground generator.** Remove `<archiving>` from the version choices in [`_templates/playground/new/index.js`](./_templates/playground/new/index.js) so `npm run playground:new` stops offering a version that is no longer built. The choices are bare numbers, without the `v`:

```diff
- choices: ['<archiving>', '8', '9'],
+ choices: ['8', '9'],
```

10. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building `<archiving>`.

Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`.

Expand Down
2 changes: 1 addition & 1 deletion _templates/playground/new/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ module.exports = {
name: 'version',
message: 'Select the Ionic Framework version for the playground',
initial: '9',
choices: ['6', '7', '8', '9'],
choices: ['8', '9'],
},
{
type: 'toggle',
Expand Down
12 changes: 8 additions & 4 deletions docs/api/accordion-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "ion-accordion-group"
title: 'ion-accordion-group'
---

import Props from '@ionic-internal/component-api/v9/accordion-group/props.mdx';
import Events from '@ionic-internal/component-api/v9/accordion-group/events.mdx';
import Methods from '@ionic-internal/component-api/v9/accordion-group/methods.mdx';
Expand All @@ -16,7 +17,6 @@ Accordion group is a container for accordion instances. It manages the state of

Refer to the [Accordion](./accordion) documentation for more information.


## Interfaces

### AccordionGroupChangeEventDetail
Expand All @@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
}
```



## Properties

<Props />

## Events

<Events />

## Methods

<Methods />

## CSS Shadow Parts

<Parts />

## CSS Custom Properties

<CustomProps />

## Slots

<Slots />
47 changes: 28 additions & 19 deletions docs/api/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "ion-accordion"
title: 'ion-accordion'
---

import Props from '@ionic-internal/component-api/v9/accordion/props.mdx';
import Events from '@ionic-internal/component-api/v9/accordion/events.mdx';
import Methods from '@ionic-internal/component-api/v9/accordion/methods.mdx';
Expand All @@ -10,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/accordion/slots.mdx';

<head>
<title>ion-accordion: Accordion Components: How to Build & Examples</title>
<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 explore examples." />
<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 explore examples."
/>
</head>

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

<EncapsulationPill type="shadow" />


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.

## Basic Usage
Expand Down Expand Up @@ -120,18 +123,18 @@ import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expan

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:

| Class Name | Description |
| ---------- | ----------- |
| `.accordion-expanding` | Applied when the accordion is actively expanding |
| `.accordion-expanded` | Applied when the accordion is fully expanded |
| Class Name | Description |
| ----------------------- | ------------------------------------------------- |
| `.accordion-expanding` | Applied when the accordion is actively expanding |
| `.accordion-expanded` | Applied when the accordion is fully expanded |
| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
| `.accordion-collapsed` | Applied when the accordion is fully collapsed |

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:

```css
ion-accordion.accordion-expanding ion-item[slot="header"],
ion-accordion.accordion-expanded ion-item[slot="header"] {
ion-accordion.accordion-expanding ion-item[slot='header'],
ion-accordion.accordion-expanded ion-item[slot='header'] {
--color: red;
}
```
Expand Down Expand Up @@ -174,15 +177,15 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili

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:

| Key | Description |
| ------------------------------------ | ------------------------------------------------------------ |
| <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. |
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus to the previous focusable element. |
| <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. |
| <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. |
| <kbd>Home</kbd> | When focus is on an accordion header, moves focus to the first accordion header. |
| <kbd>End</kbd> | When focus is on an accordion header, moves focus to the last accordion header. |
| Key | Description |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <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. |
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus to the previous focusable element. |
| <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. |
| <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. |
| <kbd>Home</kbd> | When focus is on an accordion header, moves focus to the first accordion header. |
| <kbd>End</kbd> | When focus is on an accordion header, moves focus to the last accordion header. |

## Performance

Expand All @@ -199,19 +202,25 @@ For example, lazily loading images may cause layout shifts as they load. As the
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).

## Properties

<Props />

## Events

<Events />

## Methods

<Methods />

## CSS Shadow Parts

<Parts />

## CSS Custom Properties

<CustomProps />

## Slots

<Slots />
15 changes: 12 additions & 3 deletions docs/api/action-sheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "ion-action-sheet"
title: 'ion-action-sheet'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Expand All @@ -13,14 +14,16 @@ import Slots from '@ionic-internal/component-api/v9/action-sheet/slots.mdx';

<head>
<title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
<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." />
<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."
/>
</head>

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

<EncapsulationPill type="scoped" />


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.

## Inline Action Sheets (Recommended)
Expand Down Expand Up @@ -280,19 +283,25 @@ interface ActionSheetOptions {
```

## Properties

<Props />

## Events

<Events />

## Methods

<Methods />

## CSS Shadow Parts

<Parts />

## CSS Custom Properties

<CustomProps />

## Slots

<Slots />
20 changes: 13 additions & 7 deletions docs/api/alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "ion-alert"
title: 'ion-alert'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Expand All @@ -13,7 +14,10 @@ import Slots from '@ionic-internal/component-api/v9/alert/slots.mdx';

<head>
<title>ion-alert: Ionic Alert Buttons with Custom Message Prompts</title>
<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." />
<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."
/>
</head>

import EncapsulationPill from '@components/page/api/EncapsulationPill';
Expand Down Expand Up @@ -58,7 +62,6 @@ import Buttons from '@site/static/usage/v9/alert/buttons/index.mdx';

<Buttons />


## Inputs

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.
Expand Down Expand Up @@ -106,7 +109,7 @@ import Customization from '@site/static/usage/v9/alert/customization/index.mdx';
<Customization />

:::note
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
:::

## Accessibility
Expand Down Expand Up @@ -181,7 +184,6 @@ const alert = await alertController.create({

</Tabs>


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

#### Alert Buttons Description
Expand Down Expand Up @@ -281,7 +283,6 @@ interface AlertButton {
}
```


### AlertInput

```typescript
Expand All @@ -306,7 +307,6 @@ interface AlertInput {
}
```


### AlertOptions

```typescript
Expand All @@ -332,19 +332,25 @@ interface AlertOptions {
```

## Properties

<Props />

## Events

<Events />

## Methods

<Methods />

## CSS Shadow Parts

<Parts />

## CSS Custom Properties

<CustomProps />

## Slots

<Slots />
26 changes: 18 additions & 8 deletions docs/api/app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "ion-app"
title: 'ion-app'
---

import Props from '@ionic-internal/component-api/v9/app/props.mdx';
import Events from '@ionic-internal/component-api/v9/app/events.mdx';
import Methods from '@ionic-internal/component-api/v9/app/methods.mdx';
Expand All @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/app/slots.mdx';

<head>
<title>ion-app: Container Element for an Ionic Application</title>
<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." />
<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."
/>
</head>

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

Using `ion-app` enables the following behaviors:

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

## Programmatic Focus

Expand All @@ -35,19 +39,25 @@ import SetFocus from '@site/static/usage/v9/app/set-focus/index.mdx';
<SetFocus />

## Properties

<Props />

## Events

<Events />

## Methods

<Methods />

## CSS Shadow Parts

<Parts />

## CSS Custom Properties

<CustomProps />

## Slots

<Slots />
Loading