Skip to content

Commit 358946f

Browse files
bucknattleagrdv
bucknatt
and
leagrdv
authored
chore(styles): rename loader to spinner (#6194)
## 📄 Description Classes for the spinner component are renamed: `loader-*` is renamed to `spinner-*` in styles, docs and migration guide. --------- Co-authored-by: Lea <[email protected]>
1 parent db643ad commit 358946f

File tree

6 files changed

+64
-44
lines changed

6 files changed

+64
-44
lines changed

‎.changeset/many-wings-call.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@swisspost/design-system-documentation': minor
3+
'@swisspost/design-system-styles': major
4+
---
5+
6+
Renamed the loader classes from `loader-*` to `spinner-*`.

‎packages/documentation/cypress/e2e/components/spinner.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ describe('Spinner', () => {
22
describe('Accessibility', () => {
33
beforeEach(() => {
44
cy.visit('/iframe.html?id=snapshots--spinner');
5-
cy.get('.loader', { timeout: 30000 }).should('be.visible');
5+
cy.get('.spinner', { timeout: 30000 }).should('be.visible');
66
cy.injectAxe();
77
});
88

‎packages/documentation/src/stories/components/spinner/spinner.stories.ts‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@ const meta: MetaComponent = {
2525
control: {
2626
type: 'select',
2727
labels: {
28-
'loader-12': '12',
29-
'loader-16': '16',
30-
'loader-24': '24',
31-
'loader-32': '32',
32-
'loader-40': '40',
33-
'loader-48': '48',
28+
'spinner-12': '12',
29+
'spinner-16': '16',
30+
'spinner-24': '24',
31+
'spinner-32': '32',
32+
'spinner-40': '40',
33+
'spinner-48': '48',
3434
'null': 'Default (56)',
35-
'loader-80': '80',
35+
'spinner-80': '80',
3636
},
3737
},
3838
options: [
39-
'loader-12',
40-
'loader-16',
41-
'loader-24',
42-
'loader-32',
43-
'loader-40',
44-
'loader-48',
39+
'spinner-12',
40+
'spinner-16',
41+
'spinner-24',
42+
'spinner-32',
43+
'spinner-40',
44+
'spinner-48',
4545
'null',
46-
'loader-80',
46+
'spinner-80',
4747
],
4848
},
4949
},
@@ -58,10 +58,10 @@ function generateDecorators(story: StoryFn, context: StoryContext) {
5858
}
5959

6060
function render(args: Args) {
61-
const classes = ['loader', 'm-auto', args.size].filter(c => c && c !== 'null').join(' ');
61+
const classes = ['spinner', 'm-auto', args.size].filter(c => c && c !== 'null').join(' ');
6262

6363
return html` <div class="spinner-bg">
64-
<div class="loading-modal">
64+
<div class="spinner-modal">
6565
<div class="${classes}" role="status" aria-live="polite">
6666
<span class="visually-hidden">Loading…</span>
6767
</div>
@@ -75,8 +75,8 @@ export const BlockSection: Story = {
7575
render: () =>
7676
html`<div class="position-relative">
7777
<div class="spinner-bg">
78-
<div class="loading-modal">
79-
<div class="loader m-auto" role="status" aria-live="polite">
78+
<div class="spinner-modal">
79+
<div class="spinner m-auto" role="status" aria-live="polite">
8080
<span class="visually-hidden">Loading…</span>
8181
</div>
8282
</div>
@@ -91,22 +91,23 @@ export const BlockSection: Story = {
9191
};
9292

9393
export const Inline: Story = {
94-
render: () => html`<button class="btn btn-secondary">
95-
<div
96-
class="loader loader-16 d-inline-block me-4"
97-
role="status"
98-
aria-live="polite"
99-
aria-hidden="true"
100-
></div>
101-
<span>Data is loading…</span>
102-
</button>
103-
<button class="btn btn-secondary ms-16" disabled="disabled">
104-
<div
105-
class="loader loader-16 d-inline-block me-4"
106-
role="status"
107-
aria-live="polite"
108-
aria-hidden="true"
109-
></div>
110-
<span>Data is loading…</span>
111-
</button>`,
94+
render: () =>
95+
html`<button class="btn btn-secondary">
96+
<div
97+
class="spinner spinner-16 d-inline-block me-4"
98+
role="status"
99+
aria-live="polite"
100+
aria-hidden="true"
101+
></div>
102+
<span>Data is loading…</span>
103+
</button>
104+
<button class="btn btn-secondary ms-16" disabled="disabled">
105+
<div
106+
class="spinner spinner-16 d-inline-block me-4"
107+
role="status"
108+
aria-live="polite"
109+
aria-hidden="true"
110+
></div>
111+
<span>Data is loading…</span>
112+
</button>`,
112113
};

‎packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -784,7 +784,7 @@ export class MigrationV99Component extends LitElement {
784784
<li><code>.loader-sm</code></li>
785785
</ul>
786786
<p class="info">
787-
Instead, use classes <code>.loader-16</code> and <code>.loader-40</code>.
787+
Instead, use classes <code>.spinner-16</code> and <code>.spinner-40</code>.
788788
</p>
789789
</li>
790790
@@ -797,6 +797,18 @@ export class MigrationV99Component extends LitElement {
797797
Replaced by the <code>post-banner</code> component.
798798
</p>
799799
</li>
800+
801+
<li class="mb-16">
802+
<p>
803+
The following spinner classes have been renamed
804+
<span class="tag tag-sm tag-danger">breaking</span>
805+
</p>
806+
<ul>
807+
<li><code>.loading-modal</code> is now <code>.spinner-modal</code></li>
808+
<li><code>.loader</code> is now <code>.spinner</code></li>
809+
<li><code>.loader-*</code> are now <code>.spinner-*</code></li>
810+
</ul>
811+
</li>
800812
</ul>
801813
</section>
802814
@@ -830,15 +842,15 @@ export class MigrationV99Component extends LitElement {
830842
</li>
831843
<li class="mb-16">
832844
<p>
833-
Removed the <code>accordion-item</code> shadow part from the
845+
Removed the <code>accordion-item</code> shadow part from the
834846
<code>post-accordion-item</code> component and introduced two new shadow parts:
835847
<code>button</code> and <code>body</code>.
836848
<span class="tag tag-sm tag-danger">breaking</span>
837849
</p>
838850
<p class="info">
839851
If you were styling the component using the <code>::part(accordion-item)</code> selector,
840-
this will no longer work. Update your styles to use
841-
<code>::part(button)</code> for the header trigger and
852+
this will no longer work. Update your styles to use
853+
<code>::part(button)</code> for the header trigger and
842854
<code>::part(body)</code> for the content area instead.
843855
</p>
844856
</li>

‎packages/styles/src/components/spinner.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
height: 100%;
1515
}
1616

17-
.loading-modal {
17+
.spinner-modal {
1818
display: inline-flex;
1919
position: absolute;
2020
z-index: commons.$zindex-spinner;
@@ -24,7 +24,7 @@
2424
left: 0;
2525
}
2626

27-
.loader {
27+
.spinner {
2828
width: 1em;
2929
height: 1em;
3030
animation: spin spinners.$spinner-duration linear infinite;
@@ -33,7 +33,7 @@
3333

3434
// Sizes
3535
@each $key, $font-size in spinners.$spinner-size-map {
36-
&.loader-#{$key} {
36+
&.spinner-#{$key} {
3737
font-size: $font-size;
3838
}
3939
}

‎packages/styles/src/variables/components/_spinners.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ $spinner-duration: 3.125s !default;
1818
$spinner-speed-reduced-motion: math.div(1, 8) !default;
1919

2020
$spinner-size-map: (
21+
12: 0.75rem,
2122
16: 1rem,
2223
24: 1.5rem,
2324
32: 2rem,

0 commit comments

Comments
 (0)