javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-03-21

Browse Source
This commit is contained in:
Sean Perkins
2024-03-21 16:28:35 -04:00
parent e8169bfddb 44529f0a62
commit d73de9194d
146 changed files with 295 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/button/button.tsx
View File

@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, State, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
@ -40,6 +40,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
@Element() el!: HTMLElement;
/**
* If `true`, the button only has an icon.
*/
@State() isCircle: boolean = false;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -297,6 +302,18 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.ionBlur.emit();
};
private slotChanged = () => {
/**
* Ensures that the 'has-icon-only' class is properly added
* or removed from `ion-button` when manipulating the
* `icon-only` slot.
*
* Without this, the 'has-icon-only' class is only checked
* or added when `ion-button` component first renders.
*/
this.isCircle = this.hasIconOnly;
};
render() {
const {
buttonType,
@ -377,7 +394,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
{...inheritedAttributes}
>
<span class="button-inner">
<slot name="icon-only"></slot>
<slot name="icon-only" onSlotchange={this.slotChanged}></slot>
<slot name="start"></slot>
<slot></slot>
<slot name="end"></slot>