diff --git a/BREAKING.md b/BREAKING.md index 12fca9b9580..f50b2a403a8 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Grid](#version-9x-grid) - [Input Otp](#version-9x-input-otp) - [Item Divider](#version-9x-item-divider) + - [Menu Toggle](#version-9x-menu-toggle) - [Radio Group](#version-9x-radio-group) - [Spinner](#version-9x-spinner) - [Textarea](#version-9x-textarea) @@ -272,6 +273,16 @@ If you were targeting the internals of `ion-input-otp` in your CSS, you will nee - `--inner-padding-start` is replaced by `IonItemDivider.inner.padding.start` for global styles and `--ion-item-divider-inner-padding-start` for component-specific overrides. - Specific theme classes (e.g., `ion-item-divider.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting. +

Menu Toggle

+ +The following breaking changes apply to `ion-menu-toggle`: + +1. Theme classes (`ion-menu-toggle.md`, `ion-menu-toggle.ios`) are no longer supported. + +
Theme classes
+ +Remove any instances that target the theme classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`. +

Radio Group

Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). diff --git a/core/api.txt b/core/api.txt index 618916e5be4..d2f8d2ecbc7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1722,7 +1722,6 @@ ion-menu-toggle,shadow ion-menu-toggle,prop,autoHide,boolean,true,false,false ion-menu-toggle,prop,menu,string | undefined,undefined,false,false ion-menu-toggle,prop,mode,"ios" | "md",undefined,false,false -ion-menu-toggle,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-modal,shadow ion-modal,prop,animated,boolean,true,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1b7292c8df1..a5a588b858c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2325,10 +2325,6 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonModal { /** @@ -8345,10 +8341,6 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonModal { /** diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index f3983889575..4739504325f 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -2,13 +2,10 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Listen, Prop, State, h } from '@stencil/core'; import { menuController } from '@utils/menu-controller'; -import { getIonTheme } from '../../global/ionic-global'; - import { updateVisibility } from './menu-toggle-util'; /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. * * @slot - Content is placed inside the toggle to act as the click target. */ @@ -45,7 +42,11 @@ export class MenuToggle implements ComponentInterface { @Listen('ionMenuChange', { target: 'body' }) @Listen('ionSplitPaneVisible', { target: 'body' }) async visibilityChanged() { - this.visible = await updateVisibility(this.menu); + try { + this.visible = await updateVisibility(this.menu); + } catch { + this.visible = false; + } } private onClick = () => { @@ -53,7 +54,6 @@ export class MenuToggle implements ComponentInterface { }; render() { - const theme = getIonTheme(this); const hidden = this.autoHide && !this.visible; return ( @@ -61,7 +61,6 @@ export class MenuToggle implements ComponentInterface { onClick={this.onClick} aria-hidden={hidden ? 'true' : null} class={{ - [theme]: true, 'menu-toggle-hidden': hidden, }} > diff --git a/core/src/components/menu-toggle/test/button/index.html b/core/src/components/menu-toggle/test/button/index.html index 83a915d60f0..9c3a74c06ce 100644 --- a/core/src/components/menu-toggle/test/button/index.html +++ b/core/src/components/menu-toggle/test/button/index.html @@ -2,7 +2,7 @@ - Menu - Button + Menu Toggle - Button - Menu - List + Menu Toggle - List ', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoHide', 'menu', 'mode', 'theme'], + inputs: ['autoHide', 'menu', 'mode'], }) export class IonMenuToggle { protected el: HTMLIonMenuToggleElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index d11f99cd10c..acbd76af6d7 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1398,14 +1398,14 @@ export declare interface IonMenuButton extends Components.IonMenuButton {} @ProxyCmp({ defineCustomElementFn: defineIonMenuToggle, - inputs: ['autoHide', 'menu', 'mode', 'theme'] + inputs: ['autoHide', 'menu', 'mode'] }) @Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoHide', 'menu', 'mode', 'theme'], + inputs: ['autoHide', 'menu', 'mode'], standalone: true }) export class IonMenuToggle {