From 38a192df8fd865644d62dfb376abe25123e60944 Mon Sep 17 00:00:00 2001 From: Marcos Kolodny Date: Fri, 31 May 2024 11:42:25 -0300 Subject: [PATCH] fix(Spinner): use controlActivatedInverse token as default when used inside inverse variant (#1133) --- ...est-tsx-spinner-default-desktop-1-snap.png | Bin 0 -> 718 bytes ...-spinner-default-mobile-android-1-snap.png | Bin 0 -> 1382 bytes ...-tsx-spinner-default-mobile-ios-1-snap.png | Bin 0 -> 930 bytes ...est-tsx-spinner-inverse-desktop-1-snap.png | Bin 0 -> 706 bytes ...-spinner-inverse-mobile-android-1-snap.png | Bin 0 -> 1318 bytes ...-tsx-spinner-inverse-mobile-ios-1-snap.png | Bin 0 -> 929 bytes .../spinner-screenshot-test.tsx | 28 ++++++++++++++++++ src/__stories__/spinner-story.tsx | 15 ++++++++-- src/spinner.tsx | 4 ++- 9 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-ios-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-desktop-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-android-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-ios-1-snap.png create mode 100644 src/__screenshot_tests__/spinner-screenshot-test.tsx diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..f93690b30624bea4e2b77ef7251489e9aaaea35a GIT binary patch literal 718 zcmV;<0x|uGP)Px#1am@3R0s$N2z&@+hyVZrcu7P-R7i=fmOWD%Q5c1vy|RGA3Jf+{Bx^$zVnLbl zqe&4bP^2~Kbte7-t<^tZp?zY?6c8t^ACnSikj}=N6xzT5*&SseyD9b~jJimaQ{I_- z&VBFu-gBh6{W;zhU+0HvmahVLhK!^gFd{wkjs=u1mAKFu{jx{H{Ph`P`Js-ePj# z-S$HoHYT83RR0n~4BWmK}sN{ik*6lY=xT@x&O?zeqvBA-x+G;Fp{U5i-G#{YTIMm`aE z$m&u1(E=-n?ZDGEJj)Q^zGC0xjxW0`9W?)|5^2~h9W(>G?zj5Tz)3~j!1?&%;lSBG zHG>2U4ICdOX|ZzH4if5RCW1a8n4MIapH_n^tMx9`dM}th-|7cOW`D_>6*I8$hp?QD zvoUPw-xexec;6Pw2?9QsiI9#e6!aLynZe(dzuew60zaD-#{d8T07*qoM6N<$f)y4( Ap#T5? literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b874928bf59ae5ed0122cd316c6ffaada7f7e0af GIT binary patch literal 1382 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 D3lpv$ literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/spinner-screenshot-test.tsx b/src/__screenshot_tests__/spinner-screenshot-test.tsx new file mode 100644 index 0000000000..1297faafb1 --- /dev/null +++ b/src/__screenshot_tests__/spinner-screenshot-test.tsx @@ -0,0 +1,28 @@ +import {openStoryPage, screen} from '../test-utils'; + +const DEVICES = ['DESKTOP', 'MOBILE_ANDROID', 'MOBILE_IOS'] as const; + +test.each(DEVICES)('Spinner - default %s', async (device) => { + await openStoryPage({ + id: 'components-spinner--default', + device, + }); + + const spinner = await screen.findByLabelText('Cargando'); + + const image = await spinner.screenshot(); + expect(image).toMatchImageSnapshot(); +}); + +test.each(DEVICES)('Spinner - inverse %s', async (device) => { + await openStoryPage({ + id: 'components-spinner--default', + device, + args: {inverse: true}, + }); + + const spinner = await screen.findByLabelText('Cargando'); + + const image = await spinner.screenshot(); + expect(image).toMatchImageSnapshot(); +}); diff --git a/src/__stories__/spinner-story.tsx b/src/__stories__/spinner-story.tsx index 443797a4e2..087485a56e 100644 --- a/src/__stories__/spinner-story.tsx +++ b/src/__stories__/spinner-story.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Spinner} from '..'; +import {Box, ResponsiveLayout, Spinner} from '..'; export default { title: 'Components/Spinner', @@ -9,17 +9,26 @@ export default { control: {type: 'range', min: 24, max: 100, step: 4}, }, }, + parameters: {fullScreen: true}, }; type Args = { size: number; + inverse: boolean; }; -export const Default: StoryComponent = ({size}) => { - return ; +export const Default: StoryComponent = ({size, inverse}) => { + return ( + + + + + + ); }; Default.storyName = 'Spinner'; Default.args = { size: 24, + inverse: false, }; diff --git a/src/spinner.tsx b/src/spinner.tsx index c551994947..8bc2b814aa 100644 --- a/src/spinner.tsx +++ b/src/spinner.tsx @@ -5,6 +5,7 @@ import FadeIn from './fade-in'; import {useAriaId, useTheme} from './hooks'; import * as styles from './spinner.css'; import {vars} from './skins/skin-contract.css'; +import {useIsInverseVariant} from './theme-variant-context'; type Props = { color?: string; @@ -17,7 +18,8 @@ type Props = { const Spinner: React.FC = ({color, delay = '500ms', size = 24, style, rolePresentation}) => { const {texts, platformOverrides} = useTheme(); - color = color || vars.colors.controlActivated; + const isInverse = useIsInverseVariant(); + color = color || (isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated); const spinnerId = useAriaId(); const withTitle = !rolePresentation; const title = texts.loading;