diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss index f28f8f4982d..2e78b86849f 100644 --- a/core/src/components/button/button.common.scss +++ b/core/src/components/button/button.common.scss @@ -211,10 +211,11 @@ flex-shrink: 0; } -// Button Icons +// Button Icons & Spinners // -------------------------------------------------- -::slotted(ion-icon) { +::slotted(ion-icon), +::slotted(ion-spinner) { pointer-events: none; } diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index efc4277d849..93ccbbde884 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -93,18 +93,6 @@ // Button Sizes // ------------------------------------------------------------------------------- -/* Extra Small and Small Button */ -:host(.button-xsmall), -:host(.button-small) { - ::slotted(ion-icon[slot="start"]) { - @include globals.margin-horizontal(null, globals.$ion-space-100); - } - - ::slotted(ion-icon[slot="end"]) { - @include globals.margin-horizontal(globals.$ion-space-100, null); - } -} - /* Extra Small Button */ :host(.button-xsmall) { --padding-top: #{globals.$ion-space-100}; @@ -172,6 +160,25 @@ aspect-ratio: 1 / 1; } +// Button with Spinner +// ------------------------------------------------------------------------------- +::slotted(ion-spinner) { + --color: currentColor; +} + +/* Button containing only a spinner */ +::slotted(ion-spinner[slot="start"]), +::slotted(ion-spinner[slot="end"]), +::slotted(ion-spinner[slot="icon-only"]) { + width: globals.$ion-space-500; + height: globals.$ion-space-500; +} + +:host(.button-xlarge) ::slotted(ion-spinner) { + width: globals.$ion-space-600; + height: globals.$ion-space-600; +} + // Button Shapes // ------------------------------------------------------------------------------- @@ -246,26 +253,40 @@ font-size: globals.$ion-font-size-500; } -:host(.button-small) ::slotted(ion-icon[slot="start"]) { +:host(.button-xsmall) ::slotted(ion-icon[slot="start"]), +:host(.button-xsmall) ::slotted(ion-spinner[slot="start"]), +:host(.button-small) ::slotted(ion-icon[slot="start"]), +:host(.button-small) ::slotted(ion-spinner[slot="start"]) { @include globals.margin-horizontal(null, globals.$ion-space-200); } -::slotted(ion-icon[slot="start"]) { +::slotted(ion-icon[slot="start"]), +::slotted(ion-spinner[slot="start"]) { @include globals.margin-horizontal(null, globals.$ion-space-250); } -:host(.button-large) ::slotted(ion-icon[slot="start"]) { +:host(.button-large) ::slotted(ion-icon[slot="start"]), +:host(.button-large) ::slotted(ion-spinner[slot="start"]), +:host(.button-xlarge) ::slotted(ion-icon[slot="start"]), +:host(.button-xlarge) ::slotted(ion-spinner[slot="start"]) { @include globals.margin-horizontal(null, globals.$ion-space-300); } -:host(.button-small) ::slotted(ion-icon[slot="end"]) { +:host(.button-xsmall) ::slotted(ion-icon[slot="end"]), +:host(.button-xsmall) ::slotted(ion-spinner[slot="end"]), +:host(.button-small) ::slotted(ion-icon[slot="end"]), +:host(.button-small) ::slotted(ion-spinner[slot="end"]) { @include globals.margin-horizontal(globals.$ion-space-200, null); } -::slotted(ion-icon[slot="end"]) { +::slotted(ion-icon[slot="end"]), +::slotted(ion-spinner[slot="end"]) { @include globals.margin-horizontal(globals.$ion-space-250, null); } -:host(.button-large) ::slotted(ion-icon[slot="end"]) { +:host(.button-large) ::slotted(ion-icon[slot="end"]), +:host(.button-large) ::slotted(ion-spinner[slot="end"]), +:host(.button-xlarge) ::slotted(ion-icon[slot="end"]), +:host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) { @include globals.margin-horizontal(globals.$ion-space-300, null); } diff --git a/core/src/components/button/test/spinner/button.e2e.ts b/core/src/components/button/test/spinner/button.e2e.ts new file mode 100644 index 00000000000..b394b6775cc --- /dev/null +++ b/core/src/components/button/test/spinner/button.e2e.ts @@ -0,0 +1,14 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('button: spinner'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/button/test/spinner`, config); + + await page.setIonViewport(); + + await expect(page).toHaveScreenshot(screenshot(`button-spinner`)); + }); + }); +}); diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3eb825031f9 Binary files /dev/null and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..dc1e139b486 Binary files /dev/null and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..11981ba1b3e Binary files /dev/null and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/spinner/index.html b/core/src/components/button/test/spinner/index.html new file mode 100644 index 00000000000..b2b41561f65 --- /dev/null +++ b/core/src/components/button/test/spinner/index.html @@ -0,0 +1,147 @@ + + + + + Button - Spinner + + + + + + + + + + + + + Button - Spinner + + + + +

+ + + Left Spinner + + + + Left Spinner + +

+

+ + + Right Spinner + + + + Right Spinner + +

+

+ + + + + + +

+

+ + + Left, Large + + + + Left, Large + +

+

+ + + Right, Large + + + + Right, Large + +

+

+ + + + + + +

+

+ + + Left, Small + + + + Left, Small + +

+

+ + + Right, Small + + + + Right, Small + +

+

+ + + + + + +

+

+ + + Left, Extra Large + +

+

+ + + Left, Extra Large + +

+

+ + + Right, Extra Large + +

+

+ + + Right, Extra Large + +

+

+ + + +

+

+ + + +

+ + + + diff --git a/core/src/components/button/test/theme-ionic/index.html b/core/src/components/button/test/theme-ionic/index.html index 94bdeee88f0..8ea373e3f08 100644 --- a/core/src/components/button/test/theme-ionic/index.html +++ b/core/src/components/button/test/theme-ionic/index.html @@ -52,6 +52,14 @@

Preview options

Outline Clear + + + default + Primary + Success + Warning + Neutral +

@@ -86,10 +94,30 @@

Preview

+

+ + Button + + + + + +

+

+ + Button + + +

+

States

Default + + Button + + @@ -97,6 +125,10 @@

States

Activated + + Button + + @@ -104,6 +136,10 @@

States

Focused + + Button + + @@ -111,6 +147,10 @@

States

Disabled + + Button + + @@ -150,6 +190,13 @@

States

updateAttr(el, 'fill', e.detail.value); } }); + + const selectColor = document.getElementById('select-color'); + selectColor.addEventListener('ionChange', (e) => { + for (const el of listOfBtns) { + updateAttr(el, 'color', e.detail.value); + } + });