diff --git a/.changeset/silent-books-remain.md b/.changeset/silent-books-remain.md new file mode 100644 index 00000000000..7aadef5029a --- /dev/null +++ b/.changeset/silent-books-remain.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +Make checkmark visible on reduced-motion + + diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index b475670bde2..c971e12c3c9 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -56,9 +56,7 @@ const StyledCheckbox = styled.input` mask-repeat: no-repeat; mask-position: center; - @media screen and (prefers-reduced-motion: no-preference) { - animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; - } + animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } &:checked, @@ -67,9 +65,7 @@ const StyledCheckbox = styled.input` border-color: ${get('colors.accent.fg')}; &::before { - @media screen and (prefers-reduced-motion: no-preference) { - animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; - } + animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; } } diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap index 39de01ea347..95b7436368b 100644 --- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -44,6 +44,8 @@ exports[`Checkbox renders consistently 1`] = ` mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; + -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; + animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; } .c0:checked, @@ -52,6 +54,12 @@ exports[`Checkbox renders consistently 1`] = ` border-color: #0969da; } +.c0:checked::before, +.c0:indeterminate::before { + -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; + animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; +} + .c0:checked { -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; @@ -100,21 +108,6 @@ exports[`Checkbox renders consistently 1`] = ` outline-offset: 2px; } -@media screen and (prefers-reduced-motion:no-preference) { - .c0::before { - -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - } -} - -@media screen and (prefers-reduced-motion:no-preference) { - .c0:checked::before, - .c0:indeterminate::before { - -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - } -} - @media (forced-colors:active) { .c0:checked { background-color: canvastext; diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap index 97844173021..efcb59b7703 100644 --- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap +++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap @@ -111,6 +111,8 @@ exports[`CheckboxGroup renders consistently 1`] = ` mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; + -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; + animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; } .c6:checked, @@ -119,6 +121,12 @@ exports[`CheckboxGroup renders consistently 1`] = ` border-color: #0969da; } +.c6:checked::before, +.c6:indeterminate::before { + -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; + animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; +} + .c6:checked { -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; @@ -167,21 +175,6 @@ exports[`CheckboxGroup renders consistently 1`] = ` outline-offset: 2px; } -@media screen and (prefers-reduced-motion:no-preference) { - .c6::before { - -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - } -} - -@media screen and (prefers-reduced-motion:no-preference) { - .c6:checked::before, - .c6:indeterminate::before { - -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - } -} - @media (forced-colors:active) { .c6:checked { background-color: canvastext; diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index be01ca621c5..ba1610c7f2c 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -844,6 +844,8 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = ` mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; + -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; + animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; } .c6:checked, @@ -852,6 +854,12 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = ` border-color: #0969da; } +.c6:checked::before, +.c6:indeterminate::before { + -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; + animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; +} + .c6:checked { -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; @@ -917,21 +925,6 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = ` margin-top: 8px; } -@media screen and (prefers-reduced-motion:no-preference) { - .c6::before { - -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - } -} - -@media screen and (prefers-reduced-motion:no-preference) { - .c6:checked::before, - .c6:indeterminate::before { - -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - } -} - @media (forced-colors:active) { .c6:checked { background-color: canvastext;