Skip to content

feat(button): add spinner sizes for ionic theme #30233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 11, 2025
Merged

feat(button): add spinner sizes for ionic theme #30233

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ecf7295
feat(button): add spinner sizes for ionic theme
OS-martacarlos Mar 6, 2025
0d88065
test(button): add tests for spinner inside buttons
OS-martacarlos Mar 6, 2025
0865a33
fix(button): fix spinner margins
OS-martacarlos Mar 10, 2025
c7835ee
chore: apply suggestions from code review
OS-martacarlos Mar 10, 2025
18312f7
fix: remove unnecessary selectors
OS-martacarlos Mar 11, 2025
d3da1a4
chore: remove unnecessary RTL screenshots
OS-martacarlos Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions core/src/components/button/button.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,10 +211,11 @@
flex-shrink: 0;
}

// Button Icons
// Button Icons & Spinners
// --------------------------------------------------

::slotted(ion-icon) {
::slotted(ion-icon),
::slotted(ion-spinner) {
pointer-events: none;
}

Expand Down
45 changes: 39 additions & 6 deletions core/src/components/button/button.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,13 @@
/* Extra Small and Small Button */
:host(.button-xsmall),
:host(.button-small) {
::slotted(ion-icon[slot="start"]) {
::slotted(ion-icon[slot="start"]),
::slotted(ion-spinner[slot="start"]) {
@include globals.margin-horizontal(null, globals.$ion-space-100);
}

::slotted(ion-icon[slot="end"]) {
::slotted(ion-icon[slot="end"]),
::slotted(ion-spinner[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-100, null);
}
}
Expand Down Expand Up @@ -172,6 +174,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
// -------------------------------------------------------------------------------

Expand Down Expand Up @@ -246,26 +267,38 @@
font-size: globals.$ion-font-size-500;
}

:host(.button-small) ::slotted(ion-icon[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"]) {
@include globals.margin-horizontal(null, globals.$ion-space-300);
}

:host(.button-small) ::slotted(ion-icon[slot="end"]) {
: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-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"]) {
@include globals.margin-horizontal(globals.$ion-space-300, null);
}

:host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-300, null);
}
14 changes: 14 additions & 0 deletions core/src/components/button/test/spinner/button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';

configs({ modes: ['ionic-md', 'ionic-ios'] }).forEach(({ config, screenshot, title }) => {
Copy link
Contributor

@thetaPC thetaPC Mar 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the functionality doesn't change, we don't need to test for all the modes. I also realize that we don't need to test RTL since functionality doesn't change.

I suggest only testing ionic-md. Make sure to remove the snapshots for ionic-ios and RTL.

Suggested change
configs({ modes: ['ionic-md', 'ionic-ios'] }).forEach(({ config, screenshot, title }) => {
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`));
});
});
});
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-ios-ltr-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...on.e2e.ts-snapshots/button-spinner-ionic-ios-ltr-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-ios-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-ios-rtl-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...on.e2e.ts-snapshots/button-spinner-ionic-ios-rtl-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-ios-rtl-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tton.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tton.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tton.e2e.ts-snapshots/button-spinner-ionic-md-rtl-light-Mobile-Chrome-linux.png
View file
Open in desktop
Copy link
Contributor

@thetaPC thetaPC Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The RTL snapshots need to be removed since those aren't being tested.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ton.e2e.ts-snapshots/button-spinner-ionic-md-rtl-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tton.e2e.ts-snapshots/button-spinner-ionic-md-rtl-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
147 changes: 147 additions & 0 deletions core/src/components/button/test/spinner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Button - Spinner</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Button - Spinner</ion-title>
</ion-toolbar>
</ion-header>

<ion-content class="ion-padding" id="content" no-bounce>
<p>
<ion-button>
<ion-spinner slot="start"></ion-spinner>
Left Spinner
</ion-button>
<ion-button href="#">
<ion-spinner slot="start"></ion-spinner>
Left Spinner
</ion-button>
</p>
<p>
<ion-button>
<ion-spinner name="lines" slot="end"></ion-spinner>
Right Spinner
</ion-button>
<ion-button href="#">
<ion-spinner name="lines" slot="end"></ion-spinner>
Right Spinner
</ion-button>
</p>
<p>
<ion-button>
<ion-spinner name="lines-sharp" slot="icon-only"></ion-spinner>
</ion-button>
<ion-button href="#">
<ion-spinner name="lines-sharp" slot="icon-only"></ion-spinner>
</ion-button>
</p>
<p>
<ion-button size="large">
<ion-spinner name="lines-small" slot="start"></ion-spinner>
Left, Large
</ion-button>
<ion-button size="large" href="#">
<ion-spinner name="lines-small" slot="start"></ion-spinner>
Left, Large
</ion-button>
</p>
<p>
<ion-button size="large">
<ion-spinner slot="end"></ion-spinner>
Right, Large
</ion-button>
<ion-button size="large" href="#">
<ion-spinner slot="end"></ion-spinner>
Right, Large
</ion-button>
</p>
<p>
<ion-button size="large">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
<ion-button size="large" href="#">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
</p>
<p>
<ion-button size="small">
<ion-spinner slot="start"></ion-spinner>
Left, Small
</ion-button>
<ion-button size="small" href="#">
<ion-spinner slot="start"></ion-spinner>
Left, Small
</ion-button>
</p>
<p>
<ion-button size="small">
<ion-spinner slot="end"></ion-spinner>
Right, Small
</ion-button>
<ion-button size="small" href="#">
<ion-spinner slot="end"></ion-spinner>
Right, Small
</ion-button>
</p>
<p>
<ion-button size="small">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
<ion-button size="small" href="#">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
</p>
<p>
<ion-button size="xlarge">
<ion-spinner slot="start"></ion-spinner>
Left, Extra Large
</ion-button>
</p>
<p>
<ion-button size="xlarge" href="#">
<ion-spinner slot="start"></ion-spinner>
Left, Extra Large
</ion-button>
</p>
<p>
<ion-button size="xlarge">
<ion-spinner slot="end"></ion-spinner>
Right, Extra Large
</ion-button>
</p>
<p>
<ion-button size="xlarge" href="#">
<ion-spinner slot="end"></ion-spinner>
Right, Extra Large
</ion-button>
</p>
<p>
<ion-button size="xlarge">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
</p>
<p>
<ion-button size="xlarge" href="#">
<ion-spinner slot="icon-only"></ion-spinner>
</ion-button>
</p>
</ion-content>
</ion-app>
</body>
</html>
47 changes: 47 additions & 0 deletions core/src/components/button/test/theme-ionic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,14 @@ <h4>Preview options</h4>
<ion-select-option value="outline">Outline</ion-select-option>
<ion-select-option value="clear">Clear</ion-select-option>
</ion-select>

<ion-select id="select-color" justify="space-between" interface="alert" label="Color" placeholder="">
<ion-select-option value="">default</ion-select-option>
<ion-select-option value="primary">Primary</ion-select-option>
<ion-select-option value="success">Success</ion-select-option>
<ion-select-option value="warning">Warning</ion-select-option>
<ion-select-option value="neutral">Neutral</ion-select-option>
</ion-select>
</p>

<div id="screenshot-wrapper" class="ion-margin-top">
Expand Down Expand Up @@ -86,31 +94,63 @@ <h4>Preview</h4>
</ion-button>
</p>

<p>
<ion-button theme="ionic">
Button
<ion-spinner slot="end" name="lines-small" />
</ion-button>
<ion-button theme="ionic">
<ion-spinner slot="icon-only" name="lines-small"></ion-spinner>
</ion-button>
</p>
<p>
<ion-button theme="ionic">
Button
<ion-spinner slot="start" name="lines-small" />
</ion-button>
</p>

<h4 class="ion-margin-top">States</h4>

<p>
<ion-button theme="ionic">Default</ion-button>
<ion-button theme="ionic">
Button
<ion-spinner slot="end" name="lines-small" />
</ion-button>
<ion-button theme="ionic">
<ion-icon slot="icon-only" name="rocket"></ion-icon>
</ion-button>
</p>

<p>
<ion-button theme="ionic" class="ion-activated">Activated</ion-button>
<ion-button theme="ionic" class="ion-activated">
Button
<ion-spinner slot="end" name="lines-small" />
</ion-button>
<ion-button theme="ionic" class="ion-activated">
<ion-icon slot="icon-only" name="rocket"></ion-icon>
</ion-button>
</p>

<p>
<ion-button theme="ionic" class="ion-focused">Focused</ion-button>
<ion-button theme="ionic" class="ion-focused">
Button
<ion-spinner slot="end" name="lines-small" />
</ion-button>
<ion-button theme="ionic" class="ion-focused ion-margin-start">
<ion-icon slot="icon-only" name="rocket"></ion-icon>
</ion-button>
</p>

<p>
<ion-button theme="ionic" disabled="true">Disabled</ion-button>
<ion-button theme="ionic" disabled="true">
Button
<ion-spinner slot="end" name="lines-small" />
</ion-button>
<ion-button theme="ionic" disabled="true">
<ion-icon slot="icon-only" name="rocket"></ion-icon>
</ion-button>
Expand Down Expand Up @@ -150,6 +190,13 @@ <h4 class="ion-margin-top">States</h4>
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);
}
});
</script>
</body>
</html>
Loading