diff --git a/.changeset/tidy-glasses-dress.md b/.changeset/tidy-glasses-dress.md new file mode 100644 index 00000000000..ff0de68a05b --- /dev/null +++ b/.changeset/tidy-glasses-dress.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added `prefers-reduced-motion` media queries to `Frame` width transitions diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css index b7a51359c0c..3fd19ff4685 100644 --- a/polaris-react/src/components/Frame/Frame.module.css +++ b/polaris-react/src/components/Frame/Frame.module.css @@ -30,6 +30,10 @@ /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ width: calc(100% - var(--pc-sidebar-width)); } + + @media (prefers-reduced-motion) { + transition: none; + } } .Frame-TopBarAndReframe { @@ -38,6 +42,10 @@ /* stylelint-enable */ background-color: var(--p-color-bg-inverse); transition: width var(--p-motion-duration-250) var(--p-motion-ease); + + @media (prefers-reduced-motion) { + transition: none; + } } .Navigation { @@ -305,6 +313,10 @@ var(--pc-app-provider-scrollbar-width) - var(--p-space-150) ); /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */ + + @media (prefers-reduced-motion) { + transition: none; + } } .hasSidebar & { @@ -320,6 +332,10 @@ var(--pc-sidebar-width) ); } + + @media (prefers-reduced-motion) { + transition: none; + } } }