diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index df0b688487..c5a156e0fb 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -462,8 +462,8 @@ export class IonMenu { } export declare interface IonMenuButton extends Components.IonMenuButton { } -@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "type"] }) -@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["autoHide", "color", "disabled", "menu", "type"] }) +@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }) +@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }) export class IonMenuButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { diff --git a/core/api.txt b/core/api.txt index bfe6d19b2f..ee2d879a90 100644 --- a/core/api.txt +++ b/core/api.txt @@ -120,6 +120,9 @@ ion-back-button,css-prop,--padding-start ion-back-button,css-prop,--padding-top ion-back-button,css-prop,--ripple-color ion-back-button,css-prop,--transition +ion-back-button,part,icon +ion-back-button,part,native +ion-back-button,part,text ion-backdrop,shadow ion-backdrop,prop,stopPropagation,boolean,true,false,false @@ -179,6 +182,7 @@ ion-button,css-prop,--padding-start ion-button,css-prop,--padding-top ion-button,css-prop,--ripple-color ion-button,css-prop,--transition +ion-button,part,native ion-buttons,scoped ion-buttons,prop,collapse,boolean,false,false,false @@ -197,6 +201,7 @@ ion-card,prop,target,string | undefined,undefined,false,false ion-card,prop,type,"button" | "reset" | "submit",'button',false,false ion-card,css-prop,--background ion-card,css-prop,--color +ion-card,part,native ion-card-content,none ion-card-content,prop,mode,"ios" | "md",undefined,false,false @@ -393,6 +398,8 @@ ion-fab-button,css-prop,--padding-start ion-fab-button,css-prop,--padding-top ion-fab-button,css-prop,--ripple-color ion-fab-button,css-prop,--transition +ion-fab-button,part,close-icon +ion-fab-button,part,native ion-fab-list,shadow ion-fab-list,prop,activated,boolean,false,false,false @@ -538,6 +545,7 @@ ion-item,css-prop,--padding-top ion-item,css-prop,--ripple-color ion-item,css-prop,--transition ion-item,part,detail-icon +ion-item,part,native ion-item-divider,shadow ion-item-divider,prop,color,string | undefined,undefined,false,false @@ -568,6 +576,7 @@ ion-item-option,prop,target,string | undefined,undefined,false,false ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false ion-item-option,css-prop,--background ion-item-option,css-prop,--color +ion-item-option,part,native ion-item-options,none ion-item-options,prop,side,"end" | "start",'end',false,false @@ -669,6 +678,7 @@ ion-menu-button,prop,autoHide,boolean,true,false,false ion-menu-button,prop,color,string | undefined,undefined,false,false ion-menu-button,prop,disabled,boolean,false,false,false ion-menu-button,prop,menu,string | undefined,undefined,false,false +ion-menu-button,prop,mode,"ios" | "md",undefined,false,false ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-menu-button,css-prop,--background ion-menu-button,css-prop,--background-focused @@ -683,6 +693,8 @@ ion-menu-button,css-prop,--padding-bottom ion-menu-button,css-prop,--padding-end ion-menu-button,css-prop,--padding-start ion-menu-button,css-prop,--padding-top +ion-menu-button,part,icon +ion-menu-button,part,native ion-menu-toggle,shadow ion-menu-toggle,prop,autoHide,boolean,true,false,false @@ -1038,6 +1050,8 @@ ion-segment-button,css-prop,--padding-end ion-segment-button,css-prop,--padding-start ion-segment-button,css-prop,--padding-top ion-segment-button,css-prop,--transition +ion-segment-button,part,indicator +ion-segment-button,part,native ion-select,shadow ion-select,prop,cancelText,string,'Cancel',false,false @@ -1175,6 +1189,7 @@ ion-tab-button,css-prop,--padding-end ion-tab-button,css-prop,--padding-start ion-tab-button,css-prop,--padding-top ion-tab-button,css-prop,--ripple-color +ion-tab-button,part,native ion-tabs,shadow ion-tabs,method,getSelected,getSelected() => Promise diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 27e506e189..7bde5b5347 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1277,6 +1277,10 @@ export namespace Components { * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle */ "menu"?: string; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; /** * The type of the button. */ @@ -4556,6 +4560,10 @@ declare namespace LocalJSX { * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle */ "menu"?: string; + /** + * The mode determines which platform styles to use. + */ + "mode"?: "ios" | "md"; /** * The type of the button. */ diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 886456c7a9..2f85ff6182 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -8,6 +8,10 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part native - The native HTML button element that wraps all child elements. + * @part icon - The back button icon (uses ion-icon). + * @part text - The back button text. */ @Component({ tag: 'ion-back-button', @@ -132,10 +136,16 @@ export class BackButton implements ComponentInterface, ButtonInterface { 'show-back-button': showBackButton }} > - diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index 0f8b6fc70d..a0b6865bdf 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -313,6 +313,15 @@ export class BackButtonExample { | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | +## Shadow Parts + +| Part | Description | +| ---------- | ------------------------------------------------------------- | +| `"icon"` | The back button icon (uses ion-icon). | +| `"native"` | The native HTML button element that wraps all child elements. | +| `"text"` | The back button text. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 1cb4a8f138..4f83871214 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -13,6 +13,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; * @slot icon-only - Should be used on an icon in a button that has no text. * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL. * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL. + * + * @part native - The native HTML button or anchor element that wraps all child elements. */ @Component({ tag: 'ion-button', @@ -222,6 +224,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf openURL(href, ev, routerDirection, routerAnimation)} > diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md index 0fdb87fa1e..14964e8efd 100644 --- a/core/src/components/card/readme.md +++ b/core/src/components/card/readme.md @@ -269,6 +269,13 @@ export class CardExample { | `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | +## Shadow Parts + +| Part | Description | +| ---------- | ----------------------------------------------------------------------------- | +| `"native"` | The native HTML button, anchor, or div element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index afc63da75e..69d333bd34 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -209,14 +209,11 @@ // -------------------------------------------------- .close-icon { + @include margin(0, auto); @include position(0, 0, null, 0); - display: flex; position: absolute; - align-items: center; - justify-content: center; - height: 100%; transform: scale(.4) rotateZ(-45deg); diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 5a906a3a6a..0ed64e0f13 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -7,6 +7,9 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part native - The native HTML button or anchor element that wraps all child elements. + * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon). */ @Component({ tag: 'ion-fab-button', @@ -157,14 +160,13 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt openURL(href, ev, this.routerDirection, this.routerAnimation)} > - - - + diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 3c395ca851..be86ac94f0 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -164,6 +164,14 @@ export class FabButtonExample { | `ionFocus` | Emitted when the button has focus. | `CustomEvent` | +## Shadow Parts + +| Part | Description | +| -------------- | ----------------------------------------------------------------------- | +| `"close-icon"` | The close icon that is displayed when a fab list opens (uses ion-icon). | +| `"native"` | The native HTML button or anchor element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/fab-button/test/standalone/index.html b/core/src/components/fab-button/test/standalone/index.html index e4b6f45a23..b3aa82e56d 100644 --- a/core/src/components/fab-button/test/standalone/index.html +++ b/core/src/components/fab-button/test/standalone/index.html @@ -71,6 +71,22 @@ + + + + + + + + + + + + + + + + diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html index 13c673f5ea..9a99c9ed49 100644 --- a/core/src/components/fab/test/basic/index.html +++ b/core/src/components/fab/test/basic/index.html @@ -200,7 +200,6 @@ f:last-of-type { background: yellow; } - diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index ea42479900..4b27302420 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -14,6 +14,8 @@ import { createColorClasses } from '../../utils/theme'; * @slot icon-only - Should be used on an icon in an option that has no text. * @slot bottom - Content is placed below the option text. * @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL. + * + * @part native - The native HTML button or anchor element that wraps all child elements. */ @Component({ tag: 'ion-item-option', @@ -110,6 +112,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md index 1b6af776e7..931956756b 100644 --- a/core/src/components/item-option/readme.md +++ b/core/src/components/item-option/readme.md @@ -34,6 +34,13 @@ action for the item. | `"top"` | Content is placed above the option text. | +## Shadow Parts + +| Part | Description | +| ---------- | ----------------------------------------------------------------------- | +| `"native"` | The native HTML button or anchor element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index fb55dbfc32..329fee5ee7 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -12,6 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL. * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL. * + * @part native - The native HTML button, anchor or div element that wraps all child elements. * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`. */ @Component({ @@ -214,6 +215,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac openURL(href, ev, routerDirection, routerAnimation)} > diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 53791eb2d0..5d0fbd0b51 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -1812,9 +1812,10 @@ export class ItemExample { ## Shadow Parts -| Part | Description | -| --------------- | ----------------------------------------------------------------- | -| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. | +| Part | Description | +| --------------- | ---------------------------------------------------------------------------- | +| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. | +| `"native"` | The native HTML button, anchor or div element that wraps all child elements. | ## CSS Custom Properties diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index 2b214e9564..2e54d8a051 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -8,6 +8,12 @@ import { menuController } from '../../utils/menu-controller'; import { createColorClasses, hostContext } from '../../utils/theme'; import { updateVisibility } from '../menu-toggle/menu-toggle-util'; +/** + * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part native - The native HTML button element that wraps all child elements. + * @part icon - The menu button icon (uses ion-icon). + */ @Component({ tag: 'ion-menu-button', styleUrls: { @@ -95,11 +101,12 @@ export class MenuButton implements ComponentInterface, ButtonInterface { {...attrs} disabled={disabled} class="button-native" + part="native" aria-label="menu" > - + {mode === 'md' && } diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index f83fbdf20a..63049b69e7 100644 --- a/core/src/components/menu-button/readme.md +++ b/core/src/components/menu-button/readme.md @@ -14,9 +14,18 @@ Menu Button is component that automatically creates the icon and functionality t | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `disabled` | `disabled` | If `true`, the user cannot interact with the menu button. | `boolean` | `false` | | `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | +## Shadow Parts + +| Part | Description | +| ---------- | ------------------------------------------------------------- | +| `"icon"` | The menu button icon (uses ion-icon). | +| `"native"` | The native HTML button element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md index 950cbdbd42..01d69bca60 100644 --- a/core/src/components/reorder/readme.md +++ b/core/src/components/reorder/readme.md @@ -315,9 +315,9 @@ export class ReorderExample { ## Shadow Parts -| Part | Description | -| -------- | ------------------------------- | -| `"icon"` | The icon of the reorder handle. | +| Part | Description | +| -------- | ----------------------------------------------- | +| `"icon"` | The icon of the reorder handle (uses ion-icon). | ## Dependencies diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx index 5e0c66db6c..18b4d997ba 100644 --- a/core/src/components/reorder/reorder.tsx +++ b/core/src/components/reorder/reorder.tsx @@ -3,7 +3,7 @@ import { Component, ComponentInterface, Host, Listen, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; /** - * @part icon - The icon of the reorder handle. + * @part icon - The icon of the reorder handle (uses ion-icon). */ @Component({ tag: 'ion-reorder', diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index abbbbef990..3cf0ed7946 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -794,6 +794,14 @@ export class SegmentButtonExample { | `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` | +## Shadow Parts + +| Part | Description | +| ------------- | ------------------------------------------------------------- | +| `"indicator"` | The indicator displayed on the checked segment button. | +| `"native"` | The native HTML button element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index ce9e888e07..29e461f0eb 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -9,6 +9,9 @@ let ids = 0; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part native - The native HTML button element that wraps all child elements. + * @part indicator - The indicator displayed on the checked segment button. */ @Component({ tag: 'ion-segment-button', @@ -103,6 +106,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { type={type} aria-pressed={checked ? 'true' : 'false'} class="button-native" + part="native" disabled={disabled} > diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md index 2c5cfbb98a..d323ec626f 100644 --- a/core/src/components/tab-button/readme.md +++ b/core/src/components/tab-button/readme.md @@ -232,6 +232,13 @@ export class TabButtonExample { | `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | +## Shadow Parts + +| Part | Description | +| ---------- | ------------------------------------------------------------- | +| `"native"` | The native HTML anchor element that wraps all child elements. | + + ## CSS Custom Properties | Name | Description | diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index 88aef7b28a..9e07e17cd5 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -7,6 +7,8 @@ import { AnchorInterface } from '../../utils/element-interface'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part native - The native HTML anchor element that wraps all child elements. */ @Component({ tag: 'ion-tab-button', @@ -161,7 +163,7 @@ export class TabButton implements ComponentInterface, AnchorInterface { 'ion-focusable': true }} > - +