Skip to content

Commit 7cb083d

Browse files
mirkajameskosterciampo
authored and
widoz
committed
Update UI Spinner appearance and add a color prop (WordPress#83775)
* Update UI Spinner to use a foreground arc * Document UI Spinner visual update * Fix Spinner changelog punctuation * Use weak neutral foreground for UI Spinner * Add configurable color to UI Spinner * Make Spinner color stories clearer * Keep Spinner custom color story at default size * Fix Spinner contrast in forced colors Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent d2e8686 commit 7cb083d

5 files changed

Lines changed: 47 additions & 21 deletions

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
### Enhancements
1717

18+
- `Spinner`: Show a trackless half-circle like the `Button` loading indicator, with a `color` prop that accepts any CSS color value and defaults to weak neutral foreground. Keep the arc visible in forced-colors mode ([#83775](https://github.com/WordPress/gutenberg/pull/83775)).
1819
- Native text inputs and textareas use at least 16px below 600px to avoid iOS Safari zoom. Prefix and suffix text on `Input` match that size. Select and combobox trigger text stay at the `md` font size. ([#82764](https://github.com/WordPress/gutenberg/pull/82764))
1920
- `Menu`: Add development-only checks against nesting `Group` and `RadioGroup` within each other, and document how to label radio groups ([#83792](https://github.com/WordPress/gutenberg/pull/83792)).
2021
- `Autocomplete`, `Combobox`, `SearchableSelect`, `SearchableChipSelect`, `SearchableSelectControl`, and `SearchableChipSelectControl` add `ItemLabel` and `ItemDescription` subcomponents. Searchable selection items also accept an optional `description` string ([#83493](https://github.com/WordPress/gutenberg/pull/83493)).

‎packages/ui/src/spinner/spinner.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
import clsx from 'clsx';
2-
import type { ComponentProps } from 'react';
32
import { forwardRef } from '@wordpress/element';
3+
import type { SpinnerProps } from './types';
44
import styles from './style.module.css';
55

66
/**
77
* A component used to notify users that their action is being processed.
88
*/
9-
export const Spinner = forwardRef< SVGSVGElement, ComponentProps< 'svg' > >(
10-
function UnforwardedSpinner( { className, ...props }, ref ) {
9+
export const Spinner = forwardRef< SVGSVGElement, SpinnerProps >(
10+
function UnforwardedSpinner( { className, color, style, ...props }, ref ) {
1111
return (
1212
<svg
1313
className={ clsx( styles.spinner, className ) }
14+
style={ color === undefined ? style : { ...style, color } }
1415
viewBox="0 0 100 100"
1516
xmlns="http://www.w3.org/2000/svg"
1617
role="presentation"
1718
focusable="false"
1819
{ ...props }
1920
ref={ ref }
2021
>
21-
<circle
22-
className={ styles.track }
23-
cx="50"
24-
cy="50"
25-
r="50"
26-
vectorEffect="non-scaling-stroke"
27-
/>
2822
<path
2923
className={ styles.indicator }
30-
d="m 50 0 a 50 50 0 0 1 50 50"
24+
d="m 50 0 a 50 50 0 0 1 0 100"
3125
vectorEffect="non-scaling-stroke"
3226
/>
3327
</svg>

‎packages/ui/src/spinner/stories/index.story.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import type { Meta, StoryObj } from '@storybook/react-vite';
2+
import { Stack } from '../../stack';
23
import { Spinner } from '../index';
34

45
const meta: Meta< typeof Spinner > = {
56
tags: [ 'manifest' ],
67
title: 'Components/@wordpress-ui/Spinner',
78
id: 'design-system-components-spinner',
89
component: Spinner,
10+
argTypes: {
11+
color: { control: 'text' },
12+
},
913
parameters: {
1014
componentStatus: {
1115
status: 'recommended',
@@ -26,3 +30,22 @@ export const CustomSize: Story = {
2630
},
2731
},
2832
};
33+
34+
export const CustomColor: Story = {
35+
args: { color: '#d92d20' },
36+
};
37+
38+
export const CurrentColor: Story = {
39+
args: { color: 'currentColor' },
40+
render: ( args ) => (
41+
<Stack
42+
direction="row"
43+
gap="sm"
44+
align="center"
45+
style={ { color: '#7f32c9' } }
46+
>
47+
<Spinner { ...args } />
48+
<span>Loading…</span>
49+
</Stack>
50+
),
51+
};

‎packages/ui/src/spinner/style.module.css‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,20 @@
1010
overflow: visible;
1111
opacity: 1;
1212
background-color: transparent;
13+
color: var(--wpds-color-foreground-content-neutral-weak);
1314
}
1415

15-
.track,
1616
.indicator {
1717
fill: transparent;
18-
stroke-width: 1.5px;
19-
}
20-
21-
.track {
22-
stroke: var(--wpds-color-background-track-neutral);
23-
}
24-
25-
.indicator {
26-
stroke: var(--wpds-color-background-thumb-brand);
18+
stroke: currentColor;
19+
stroke-width: var(--wpds-border-width-sm);
2720
stroke-linecap: round;
2821
transform-origin: 50% 50%;
2922

23+
@media ( forced-colors: active ) {
24+
stroke: CanvasText;
25+
}
26+
3027
/* Intentionally kept even for prefers-reduced-motion.
3128
See Note 4 of https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html */
3229
animation: spinner-spin 1.4s linear infinite both;

‎packages/ui/src/spinner/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { ComponentProps } from 'react';
2+
3+
export type SpinnerProps = Omit< ComponentProps< 'svg' >, 'color' > & {
4+
/**
5+
* The spinner color. Accepts any CSS color value, including `currentColor`
6+
* to inherit the surrounding text color.
7+
*
8+
* @default 'var(--wpds-color-foreground-content-neutral-weak)'
9+
*/
10+
color?: string;
11+
};

0 commit comments

Comments
 (0)