From 8aa4c9ff19c104660ad1a65d0561dcbe8feb3206 Mon Sep 17 00:00:00 2001 From: barsnes Date: Fri, 6 Sep 2024 14:04:19 +0200 Subject: [PATCH 1/9] feat(spinner): css changes --- packages/css/spinner.css | 14 +++++--------- packages/react/src/components/Spinner/Spinner.tsx | 3 ++- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index cbf5a9d31c..ab98a2e2e0 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -1,9 +1,13 @@ .ds-spinner { --dsc-spinner-background: var(--ds-color-neutral-surface-default); - --dsc-spinner-stroke: var(--ds-color-accent-base-default); + --dsc-spinner-stroke: var(--ds-color-neutral-border-default); animation: ds-spinner-rotate-animation linear infinite; animation-duration: 2s; + + &[data-color='accent'] { + --dsc-spinner-stroke: var(--ds-color-accent-base-default); + } } .ds-spinner__circle { @@ -27,14 +31,6 @@ but don't remove it since it is not decorative. } } -.ds-spinner--neutral { - --dsc-spinner-stroke: var(--ds-color-neutral-border-default); -} - -.ds-spinner--accent { - --dsc-spinner-stroke: var(--ds-color-accent-base-default); -} - .ds-spinner__background { stroke: var(--dsc-spinner-background); } diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx index 2f9da6eb95..9b3eb5f759 100644 --- a/packages/react/src/components/Spinner/Spinner.tsx +++ b/packages/react/src/components/Spinner/Spinner.tsx @@ -49,7 +49,8 @@ export const Spinner = ({ return ( Date: Mon, 9 Sep 2024 08:11:25 +0200 Subject: [PATCH 2/9] size as data attr --- packages/css/spinner.css | 23 +++++++++++++++++++ .../react/src/components/Spinner/Spinner.tsx | 16 ++----------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index ab98a2e2e0..ce7e924f88 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -1,13 +1,36 @@ .ds-spinner { --dsc-spinner-background: var(--ds-color-neutral-surface-default); --dsc-spinner-stroke: var(--ds-color-neutral-border-default); + --dsc-spinner-size: 40px; + width: var(--dsc-spinner-size); + height: var(--dsc-spinner-size); animation: ds-spinner-rotate-animation linear infinite; animation-duration: 2s; &[data-color='accent'] { --dsc-spinner-stroke: var(--ds-color-accent-base-default); } + + &[data-size='2xs'] { + --dsc-spinner-size: 13px; + } + + &[data-size='xs'] { + --dsc-spinner-size: 20px; + } + + &[data-size='sm'] { + --dsc-spinner-size: 27px; + } + + &[data-size='lg'] { + --dsc-spinner-size: 56px; + } + + &[data-size='xl'] { + --dsc-spinner-size: 79px; + } } .ds-spinner__circle { diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx index 9b3eb5f759..0423d38ef0 100644 --- a/packages/react/src/components/Spinner/Spinner.tsx +++ b/packages/react/src/components/Spinner/Spinner.tsx @@ -3,17 +3,6 @@ import type * as React from 'react'; import { useSynchronizedAnimation } from '../../utilities'; -const sizeMap: { - [key in NonNullable]: number; -} = { - '2xs': 13, - xs: 20, - sm: 27, - md: 40, - lg: 56, - xl: 79, -}; - export type SpinnerProps = { /** Spinner title */ title: string; @@ -36,7 +25,6 @@ export const Spinner = ({ color = 'neutral', size = 'md', className, - style, ...rest }: SpinnerProps): JSX.Element => { const svgRef = useSynchronizedAnimation( @@ -50,10 +38,10 @@ export const Spinner = ({ return ( {title} From 66aef47f9df7e4517fc54b69bdf6ef7d485f0b4f Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 9 Sep 2024 08:13:47 +0200 Subject: [PATCH 3/9] animation duration as var --- packages/css/spinner.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index ce7e924f88..5bb544c13f 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -2,11 +2,12 @@ --dsc-spinner-background: var(--ds-color-neutral-surface-default); --dsc-spinner-stroke: var(--ds-color-neutral-border-default); --dsc-spinner-size: 40px; + --dsc-spinner-animation-duration: 2s; width: var(--dsc-spinner-size); height: var(--dsc-spinner-size); animation: ds-spinner-rotate-animation linear infinite; - animation-duration: 2s; + animation-duration: var(--dsc-spinner-animation-duration); &[data-color='accent'] { --dsc-spinner-stroke: var(--ds-color-accent-base-default); @@ -38,7 +39,7 @@ stroke-dasharray: 1px, 200px; transform-origin: center; animation: ds-spinner-stroke-animation ease-in-out infinite; - animation-duration: 2s; + animation-duration: var(--dsc-spinner-animation-duration); } /* Prefers reduced motion needs longer animation, @@ -46,11 +47,7 @@ but don't remove it since it is not decorative. */ @media (prefers-reduced-motion: reduce) { .ds-spinner { - animation-duration: 6s; - } - - .ds-spinner__circle { - animation-duration: 6s; + --dsc-spinner-animation-duration: 6s; } } From 5ef2598307d5dff67ed8b88638fefffa8b042dc8 Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 9 Sep 2024 08:16:46 +0200 Subject: [PATCH 4/9] rearrange --- packages/css/spinner.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index 5bb544c13f..a37b87f2e1 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -34,6 +34,10 @@ } } +.ds-spinner__background { + stroke: var(--dsc-spinner-background); +} + .ds-spinner__circle { stroke: var(--dsc-spinner-stroke); stroke-dasharray: 1px, 200px; @@ -51,10 +55,6 @@ but don't remove it since it is not decorative. } } -.ds-spinner__background { - stroke: var(--dsc-spinner-background); -} - @keyframes ds-spinner-rotate-animation { 0% { transform: rotate(0deg); From 1892918e7862d0205cd8df455fdd1fb95f0f127d Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 9 Sep 2024 08:17:47 +0200 Subject: [PATCH 5/9] update test --- packages/react/src/components/Spinner/Spinner.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Spinner/Spinner.test.tsx b/packages/react/src/components/Spinner/Spinner.test.tsx index d0c33fedad..ac7c6cc49e 100644 --- a/packages/react/src/components/Spinner/Spinner.test.tsx +++ b/packages/react/src/components/Spinner/Spinner.test.tsx @@ -9,9 +9,10 @@ beforeAll(() => { describe('spinner', (): void => { it('should render with default medium size', (): void => { render(); - expect(screen.getByTitle('Loading').parentElement).toHaveStyle({ - width: '40px', - }); + expect(screen.getByTitle('Loading').parentElement).toHaveAttribute( + 'data-size', + 'md', + ); }); it('should render with title "loading', (): void => { From 15a4db58eb8f8b413a32b96d8a7498efa7f90d17 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Mon, 9 Sep 2024 08:19:35 +0200 Subject: [PATCH 6/9] Create small-queens-breathe.md --- .changeset/small-queens-breathe.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/small-queens-breathe.md diff --git a/.changeset/small-queens-breathe.md b/.changeset/small-queens-breathe.md new file mode 100644 index 0000000000..739f242e0d --- /dev/null +++ b/.changeset/small-queens-breathe.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Spinner: Style using data attributes From ffdecf2b2d0f99e97813bddb8ec87cf4ad7e7d67 Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 9 Sep 2024 10:58:25 +0200 Subject: [PATCH 7/9] use sizing vars --- packages/css/spinner.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index a37b87f2e1..b8eb11ca39 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -1,7 +1,7 @@ .ds-spinner { --dsc-spinner-background: var(--ds-color-neutral-surface-default); --dsc-spinner-stroke: var(--ds-color-neutral-border-default); - --dsc-spinner-size: 40px; + --dsc-spinner-size: var(--ds-sizing-10); --dsc-spinner-animation-duration: 2s; width: var(--dsc-spinner-size); @@ -14,23 +14,23 @@ } &[data-size='2xs'] { - --dsc-spinner-size: 13px; + --dsc-spinner-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 4)); } &[data-size='xs'] { - --dsc-spinner-size: 20px; + --dsc-spinner-size: var(--ds-sizing-5); } &[data-size='sm'] { - --dsc-spinner-size: 27px; + --dsc-spinner-size: calc(var(--ds-sizing-7) - calc(var(--ds-spacing-1) / 4)); } &[data-size='lg'] { - --dsc-spinner-size: 56px; + --dsc-spinner-size: var(--ds-sizing-14); } &[data-size='xl'] { - --dsc-spinner-size: 79px; + --dsc-spinner-size: calc(var(--ds-sizing-18) + var(--ds-sizing-1) + calc((var(--ds-spacing-1) / 4) * 3)); } } From 5f3737c023218f4fc7d21f9050dc17aea5df2c1c Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 9 Sep 2024 10:59:07 +0200 Subject: [PATCH 8/9] sizing --- packages/css/spinner.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index b8eb11ca39..cdbede62ba 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -14,7 +14,7 @@ } &[data-size='2xs'] { - --dsc-spinner-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 4)); + --dsc-spinner-size: calc(var(--ds-sizing-3) + calc(var(--ds-sizing-1) / 4)); } &[data-size='xs'] { @@ -22,7 +22,7 @@ } &[data-size='sm'] { - --dsc-spinner-size: calc(var(--ds-sizing-7) - calc(var(--ds-spacing-1) / 4)); + --dsc-spinner-size: calc(var(--ds-sizing-7) - calc(var(--ds-sizing-1) / 4)); } &[data-size='lg'] { From 0d4b750baf6a9dc68280aefb23c281e089cb4f40 Mon Sep 17 00:00:00 2001 From: barsnes Date: Tue, 10 Sep 2024 10:28:38 +0200 Subject: [PATCH 9/9] sizes with only variables --- packages/css/spinner.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/css/spinner.css b/packages/css/spinner.css index cdbede62ba..16712296fd 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -1,7 +1,7 @@ .ds-spinner { --dsc-spinner-background: var(--ds-color-neutral-surface-default); --dsc-spinner-stroke: var(--ds-color-neutral-border-default); - --dsc-spinner-size: var(--ds-sizing-10); + --dsc-spinner-size: var(--ds-sizing-11); --dsc-spinner-animation-duration: 2s; width: var(--dsc-spinner-size); @@ -14,7 +14,7 @@ } &[data-size='2xs'] { - --dsc-spinner-size: calc(var(--ds-sizing-3) + calc(var(--ds-sizing-1) / 4)); + --dsc-spinner-size: var(--ds-sizing-3); } &[data-size='xs'] { @@ -22,15 +22,15 @@ } &[data-size='sm'] { - --dsc-spinner-size: calc(var(--ds-sizing-7) - calc(var(--ds-sizing-1) / 4)); + --dsc-spinner-size: var(--ds-sizing-8); } &[data-size='lg'] { - --dsc-spinner-size: var(--ds-sizing-14); + --dsc-spinner-size: var(--ds-sizing-15); } &[data-size='xl'] { - --dsc-spinner-size: calc(var(--ds-sizing-18) + var(--ds-sizing-1) + calc((var(--ds-spacing-1) / 4) * 3)); + --dsc-spinner-size: var(--ds-sizing-22); } }