From 3824f756938c5ac526ef00c4595eedd14db825da Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 20 Jul 2022 17:08:51 -0600 Subject: [PATCH] Remove transition for prefers-reduced-motion users --- src/Nri/Ui/Confetti/V2.elm | 5 ++--- src/Nri/Ui/MediaQuery/V1.elm | 21 +++++++++++++++--- src/Nri/Ui/SideNav/V4.elm | 42 +++++++++++++++++++++++++----------- src/Nri/Ui/Switch/V2.elm | 6 ++---- 4 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/Nri/Ui/Confetti/V2.elm b/src/Nri/Ui/Confetti/V2.elm index ce48181b..7e7f7b74 100644 --- a/src/Nri/Ui/Confetti/V2.elm +++ b/src/Nri/Ui/Confetti/V2.elm @@ -17,10 +17,10 @@ Changes from V1: -} import Css exposing (Color) -import Css.Media exposing (withMediaQuery) import Html.Styled as Html import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.MediaQuery.V1 as MediaQuery import Particle exposing (Particle) import Particle.System as ParticleSystem import Random exposing (Generator) @@ -68,8 +68,7 @@ view (System system _) = , Css.width (Css.pct 100) , Css.height (Css.vh 100) , Css.pointerEvents Css.none - , withMediaQuery [ "(prefers-reduced-motion)" ] - [ Css.display Css.none ] + , MediaQuery.prefersReducedMotion [ Css.display Css.none ] ] ] ) diff --git a/src/Nri/Ui/MediaQuery/V1.elm b/src/Nri/Ui/MediaQuery/V1.elm index 9c6fdbdc..d1ec7e3c 100644 --- a/src/Nri/Ui/MediaQuery/V1.elm +++ b/src/Nri/Ui/MediaQuery/V1.elm @@ -1,5 +1,6 @@ module Nri.Ui.MediaQuery.V1 exposing - ( mobile, notMobile + ( anyMotion, prefersReducedMotion + , mobile, notMobile , mobileBreakpoint , quizEngineMobile , quizEngineBreakpoint @@ -20,6 +21,8 @@ module Nri.Ui.MediaQuery.V1 exposing [ Css.padding (Css.px 2) ] +@docs anyMotion, prefersReducedMotion + @docs mobile, notMobile @docs mobileBreakpoint @@ -31,8 +34,20 @@ module Nri.Ui.MediaQuery.V1 exposing -} -import Css exposing (px) -import Css.Media exposing (MediaQuery, maxWidth, minWidth, only, screen) +import Css exposing (Style, px) +import Css.Media exposing (MediaQuery, maxWidth, minWidth, only, screen, withMediaQuery) + + +{-| -} +anyMotion : List Style -> Style +anyMotion = + withMediaQuery [ "(prefers-reduced-motion: no-preference)" ] + + +{-| -} +prefersReducedMotion : List Style -> Style +prefersReducedMotion = + withMediaQuery [ "(prefers-reduced-motion)" ] {-| Styles using the `mobileBreakpoint` value as the maxWidth. diff --git a/src/Nri/Ui/SideNav/V4.elm b/src/Nri/Ui/SideNav/V4.elm index ca629211..b9b7eb8d 100644 --- a/src/Nri/Ui/SideNav/V4.elm +++ b/src/Nri/Ui/SideNav/V4.elm @@ -121,15 +121,7 @@ type alias NavAttributeConfig msg = defaultNavAttributeConfig : NavAttributeConfig msg defaultNavAttributeConfig = { navLabel = Nothing - , css = - [ flexBasis (px 250) - , flexShrink (num 0) - , borderRadius (px 8) - , backgroundColor Colors.gray96 - , padding (px 20) - , marginRight (px 20) - , position absolute - ] + , css = [] , collapsible = Nothing } @@ -187,11 +179,30 @@ view config navAttributes entries = let appliedNavAttributes = List.foldl (\(NavAttribute f) b -> f b) defaultNavAttributeConfig navAttributes + + showNav = + Maybe.map .isOpen appliedNavAttributes.collapsible + |> Maybe.withDefault True + + defaultCss = + [ if showNav then + flexBasis (px 250) + + else + Css.flexBasis (Css.px 5) + , MediaQuery.anyMotion [ property "transition" "flex-basis 0.2s" ] + , flexShrink (num 0) + , borderRadius (px 8) + , backgroundColor Colors.gray96 + , padding (px 20) + , marginRight (px 20) + , position absolute + ] in - div [ Attributes.css appliedNavAttributes.css ] + div [ Attributes.css (defaultCss ++ appliedNavAttributes.css) ] [ viewSkipLink config.onSkipNav , viewJust viewOpenCloseButton appliedNavAttributes.collapsible - , viewNav config appliedNavAttributes entries + , viewNav config appliedNavAttributes entries showNav ] @@ -226,11 +237,16 @@ viewOpenCloseButton { isOpen, toggle } = ] -viewNav : Config route msg -> NavAttributeConfig msg -> List (Entry route msg) -> Html msg -viewNav config appliedNavAttributes entries = +viewNav : Config route msg -> NavAttributeConfig msg -> List (Entry route msg) -> Bool -> Html msg +viewNav config appliedNavAttributes entries showNav = nav ([ Maybe.map Aria.label appliedNavAttributes.navLabel , Just (Attributes.id sidenavId) + , if showNav then + Nothing + + else + Just (Attributes.css [ Css.display Css.none ]) ] |> List.filterMap identity ) diff --git a/src/Nri/Ui/Switch/V2.elm b/src/Nri/Ui/Switch/V2.elm index fa901096..ac88d7a7 100644 --- a/src/Nri/Ui/Switch/V2.elm +++ b/src/Nri/Ui/Switch/V2.elm @@ -36,13 +36,13 @@ import Accessibility.Styled as Html exposing (Html) import Accessibility.Styled.Aria as Aria import Css exposing (Color, Style) import Css.Global as Global -import Css.Media import Html.Styled.Attributes as Attributes import Html.Styled.Events as Events import Nri.Ui.Colors.Extra exposing (toCssString) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as Extra +import Nri.Ui.MediaQuery.V1 as MediaQuery import Nri.Ui.Svg.V1 exposing (Svg) import Svg.Styled as Svg import Svg.Styled.Attributes as SvgAttributes @@ -373,6 +373,4 @@ stroke color = transition : String -> Css.Style transition transitionRules = - Css.Media.withMediaQuery - [ "(prefers-reduced-motion: no-preference)" ] - [ Css.property "transition" transitionRules ] + MediaQuery.anyMotion [ Css.property "transition" transitionRules ]