fix(core): fallback detection for themes and modes (#29224)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

With the latest changes on `next`, the fallback behavior for detecting
the themes from the Ionic config does not work when using
`ion-router-outlet`.

For example, in a React app with:

```ts
setupIonicReact({
  theme: 'ios'
});
```

and a template of:
```tsx
<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
         /* All children will apply the default mode for the mode and theme - not expected */
     </IonRouterOutlet>
  </IonReactRouter>
</IonApp>
```

All components rendered inside the `IonRouterOutlet` will apply the
`mode` detection for the `theme`. This is not expected behavior, since
the configuration has specified the `ionic` theme is the default theme.

This problem occurs due to this specific logic:
```ts
const elmMode = (elm as any).mode || elm.getAttribute('mode');
```

The `ion-router-outlet` component has a property defined on the class
for `mode`:
ca0923812a/core/src/components/router-outlet/router-outlet.tsx (L42)

This means that `defaultMode` will always apply over the Ionic config's
theme (`defaultTheme`).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Specifying the `ionic` theme from the `initialize`/`setupIonicReact`
functions will persist to children components.
- Developers can still use the `mode` to persist the changes to child
nodes. However for in the case of `IonRouterOutlet`, it will require
actually specifying the attribute in the mark-up:
```tsx
<IonRouterOutlet mode="md">
  /* Any children will apply the "md" mode and theme */
</IonRouterOutlet>
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Sean Perkins
2024-04-02 22:26:14 -04:00
committed by GitHub
parent 5234224700
commit b11c630410

View File

@ -227,7 +227,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
* behavior for applications that are not setting the "theme".
*/
while (elm) {
const theme = (elm as any).theme || elm.getAttribute('theme');
const theme = elm.getAttribute('theme');
if (theme) {
if (isThemeSupported(theme)) {
@ -241,7 +241,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
* If a theme is not detected, then fallback to using the
* `mode` attribute to determine the style sheets to use.
*/
const elmMode = (elm as any).mode || elm.getAttribute('mode');
const elmMode = elm.getAttribute('mode');
if (elmMode) {
if (isModeSupported(elmMode)) {