mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
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:
@ -227,7 +227,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
|
|||||||
* behavior for applications that are not setting the "theme".
|
* behavior for applications that are not setting the "theme".
|
||||||
*/
|
*/
|
||||||
while (elm) {
|
while (elm) {
|
||||||
const theme = (elm as any).theme || elm.getAttribute('theme');
|
const theme = elm.getAttribute('theme');
|
||||||
|
|
||||||
if (theme) {
|
if (theme) {
|
||||||
if (isThemeSupported(theme)) {
|
if (isThemeSupported(theme)) {
|
||||||
@ -241,7 +241,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
|
|||||||
* If a theme is not detected, then fallback to using the
|
* If a theme is not detected, then fallback to using the
|
||||||
* `mode` attribute to determine the style sheets to use.
|
* `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 (elmMode) {
|
||||||
if (isModeSupported(elmMode)) {
|
if (isModeSupported(elmMode)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user