-
-This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.
-
-**Minimum Browser Versions**
-| Desktop Browser | Supported Versions |
-| --------------- | ----------------- |
-| Chrome | 89+ |
-| Safari | 15+ |
-| Firefox | 75+ |
-| Edge | 89+ |
-
-**Minimum JavaScript Framework Versions**
-| Framework | Supported Version |
-| --------- | --------------------- |
-| Angular | 16+ |
-| React | 17+ |
-| Vue | 3.0.6+ |
-
-**Minimum Mobile Platform Versions**
-| Platform | Supported Version |
-| -------- | ---------------------- |
-| iOS | 15+ |
-| Android | 5.1+ with Chromium 89+ |
-
-Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.
-
-
Dark Mode
-
-
-In previous versions, it was recommended to define the dark palette in the following way:
-
-```css
-@media (prefers-color-scheme: dark) {
- body {
- /* global app variables */
- }
-
- .ios body {
- /* global ios app variables */
- }
-
- .md body {
- /* global md app variables */
- }
-}
-```
-
-In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
-
-```css
-/* @import '@ionic/angular/css/palettes/dark.always.css'; */
-/* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import "@ionic/angular/css/palettes/dark.system.css";
-```
-
-By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
-
-```css
-@media (prefers-color-scheme: dark) {
- :root {
- /* global app variables */
- }
+## Version 9.x
- :root.ios {
- /* global ios app variables */
- }
+- [Framework Specific](#version-9x-framework-specific)
+ - [React](#version-9x-react)
- :root.md {
- /* global md app variables */
- }
-}
-```
+
Framework Specific
-Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `` element and is identical to the selector `html`, except that its specificity is higher.
+
React
-While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
+The `@ionic/react-router` package now requires React Router v6. React Router v5 is no longer supported.
-For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
+**Minimum Version Requirements**
+| Package | Supported Version |
+| ---------------- | ----------------- |
+| react-router | 6.0.0+ |
+| react-router-dom | 6.0.0+ |
-
Global Styles
+React Router v6 introduces several API changes that will require updates to your application's routing configuration:
-
Text Color
+**Route Definition Changes**
-The `core.css` file has been updated to set the text color on the `body` element:
+The `component` prop has been replaced with the `element` prop, which accepts JSX:
```diff
-body {
-+ color: var(--ion-text-color);
-}
+-
++ } />
```
-This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit.
-
-
Dynamic Font
-
-The `core.css` file has been updated to enable dynamic font scaling by default.
-
-The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`.
-
-Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling.
-
-Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes.
+**Redirect Changes**
-For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling).
+The `` component has been replaced with ``:
-
Haptics
-
-- Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
-
-
Components
-
-
Button
-
-- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
-
-
Checkbox
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
-
-
Content
-
-- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
-
-
Datetime
-
-- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
- - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
- ```diff
- ion-datetime::part(month-year-button) {
- - --background: red;
-
- + background: red;
- }
- ```
+```diff
+- import { Redirect } from 'react-router-dom';
++ import { Navigate } from 'react-router-dom';
-
Input
+-
++
+```
-- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
-- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
+**Nested Route Paths**
-
Item
+Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths:
-- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
-- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
-- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
-- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
-- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
-- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
+```diff
+- } />
++ } />
+```
-
CSS variables
+**Accessing Route Parameters**
-The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item.
+Route parameters are now accessed via the `useParams` hook instead of props:
-If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below:
-- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax)
-- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
-- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
+```diff
+- import { RouteComponentProps } from 'react-router-dom';
++ import { useParams } from 'react-router-dom';
-Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself:
+- const MyComponent: React.FC> = ({ match }) => {
+- const id = match.params.id;
++ const MyComponent: React.FC = () => {
++ const { id } = useParams<{ id: string }>();
+```
-| Name | Description |
-| ----------------------------| ----------------------------------------|
-| `--highlight-color-focused` | The color of the highlight when focused |
-| `--highlight-color-invalid` | The color of the highlight when invalid |
-| `--highlight-color-valid` | The color of the highlight when valid |
-| `--highlight-height` | The height of the highlight indicator |
+**RouteComponentProps Removed**
-The following styles for item:
+The `RouteComponentProps` type and its `history`, `location`, and `match` props are no longer available in React Router v6. Use the equivalent hooks instead:
-```css
-ion-item {
- --highlight-color-focused: purple;
- --highlight-color-valid: blue;
- --highlight-color-invalid: orange;
- --highlight-height: 6px;
-}
-```
+- `history` -> `useNavigate` (see below) or `useIonRouter`
+- `match.params` -> `useParams` (covered above)
+- `location` -> `useLocation`
-will instead be applied on the form controls:
-
-```css
-ion-input,
-ion-textarea,
-ion-select {
- --highlight-color-focused: purple;
- --highlight-color-valid: blue;
- --highlight-color-invalid: orange;
- --highlight-height: 6px;
-}
+```diff
+- import { RouteComponentProps } from 'react-router-dom';
++ import { useNavigate, useLocation } from 'react-router-dom';
++ import { useIonRouter } from '@ionic/react';
+
+- const MyComponent: React.FC = ({ history, location }) => {
+- history.push('/path');
+- history.replace('/path');
+- history.goBack();
+- console.log(location.pathname);
++ const MyComponent: React.FC = () => {
++ const navigate = useNavigate();
++ const router = useIonRouter();
++ const location = useLocation();
++ // In an event handler or useEffect:
++ navigate('/path');
++ navigate('/path', { replace: true });
++ router.goBack();
++ console.log(location.pathname);
```
-> [!NOTE]
-> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way.
+**Exact Prop Removed**
-
Modal
+The `exact` prop is no longer needed. React Router v6 routes match exactly by default. To match sub-paths, use a `/*` suffix on the path:
-- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation.
+```diff
+-
++
+```
-
Nav
+**Render Prop Removed**
-- `getLength` returns `Promise` instead of ``. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
+The `render` prop has been replaced with the `element` prop:
-
Picker
+```diff
+- } />
++ } />
+```
-- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
- - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
- - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
+**Programmatic Navigation**
-
Progress bar
+The `useHistory` hook has been replaced with `useNavigate`:
-- The `--buffer-background` CSS variable has been removed. Use `--background` instead.
+```diff
+- import { useHistory } from 'react-router-dom';
++ import { useNavigate } from 'react-router-dom';
++ import { useIonRouter } from '@ionic/react';
-
Toast
+- const history = useHistory();
++ const navigate = useNavigate();
++ const router = useIonRouter();
-- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.
+- history.push('/path');
++ navigate('/path');
-For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
+- history.replace('/path');
++ navigate('/path', { replace: true });
-
Radio
+- history.goBack();
++ router.goBack();
+```
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
+**Custom History Prop Removed**
-
Range
+The `history` prop has been removed from `IonReactRouter`, `IonReactHashRouter`, and `IonReactMemoryRouter`. React Router v6's `BrowserRouter`, `HashRouter`, and `MemoryRouter` no longer accept custom `history` objects.
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `