From 4e4f3165fea49b9ef14d3bbaa888af86cc6c0197 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 17 Mar 2022 15:18:10 -0700 Subject: [PATCH 1/2] Avoid implying in the example that shadows include border radius styles --- styleguide-app/Examples/Shadows.elm | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/styleguide-app/Examples/Shadows.elm b/styleguide-app/Examples/Shadows.elm index 9bcc71f8..135b14ea 100644 --- a/styleguide-app/Examples/Shadows.elm +++ b/styleguide-app/Examples/Shadows.elm @@ -79,15 +79,14 @@ viewShadow : ( String, Css.Style ) -> Html msg viewShadow ( usageGuidance, shadow ) = Html.div [ Attributes.css - [ Css.padding2 (Css.px 10) Css.zero - , Css.margin2 (Css.px 20) (Css.px 4) - , Css.borderRadius (Css.px 8) - , Css.height (Css.px 16) - , shadow + [ Css.margin2 (Css.px 20) (Css.px 4) ] ] [ Text.smallBodyGray - [ Text.css [ Css.textAlign Css.center ] + [ Text.css + [ Css.textAlign Css.center + , shadow + ] , Text.plaintext usageGuidance ] ] From 09fc94703c36abca244d8f7db79b0895d740037b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 17 Mar 2022 15:25:53 -0700 Subject: [PATCH 2/2] Use Shadows component --- src/Nri/Ui/Balloon/V1.elm | 11 ++++++++++- src/Nri/Ui/Container/V2.elm | 10 ++++++++-- src/Nri/Ui/Menu/V3.elm | 9 +++++++-- src/Nri/Ui/Message/V3.elm | 4 +++- src/Nri/Ui/Modal/V11.elm | 8 +++++--- src/Nri/Ui/Tooltip/V2.elm | 4 +++- 6 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/Nri/Ui/Balloon/V1.elm b/src/Nri/Ui/Balloon/V1.elm index 7848154e..bda78acf 100644 --- a/src/Nri/Ui/Balloon/V1.elm +++ b/src/Nri/Ui/Balloon/V1.elm @@ -10,6 +10,14 @@ module Nri.Ui.Balloon.V1 exposing {-| You propably want to use `Nri.Tooltip` not this. This is used to display a ballon-like container. + +# Changelog + + +## Patch changes + + - use `Shadows` + @docs balloon @@ -31,6 +39,7 @@ import Css exposing (..) import Html.Styled as Html exposing (Html, div, styled) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Shadows.V1 as Shadows @@ -275,7 +284,7 @@ viewBalloon theme_ width_ padding contents = , Just (textAlign left) , Just (position relative) , Just (Css.borderRadius (px 8)) - , Just (property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)") + , Just Shadows.high , Just padding , Just (balloonTheme theme_) , width_ diff --git a/src/Nri/Ui/Container/V2.elm b/src/Nri/Ui/Container/V2.elm index 645937f3..fddb5ba7 100644 --- a/src/Nri/Ui/Container/V2.elm +++ b/src/Nri/Ui/Container/V2.elm @@ -11,6 +11,11 @@ module Nri.Ui.Container.V2 exposing # Changelog +## Patch changes + + - use `Shadows` + + ## Changes from V1 - removes fullHeight @@ -54,6 +59,7 @@ import Nri.Ui import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.MediaQuery.V1 exposing (mobile) +import Nri.Ui.Shadows.V1 as Shadows {-| -} @@ -152,7 +158,7 @@ defaultStyles : List Css.Style defaultStyles = [ borderRadius (px 8) , border3 (px 1) solid Colors.gray92 - , property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);" + , Shadows.low , backgroundColor Colors.white ] @@ -236,7 +242,7 @@ pillowStyles : List Style pillowStyles = [ borderRadius (px 20) , border3 (px 1) solid Colors.gray92 - , property "box-shadow" "0 0.5px 0.7px hsl(0deg 0% 0% / 0.075), 0 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.075), 0 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.075), 5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.075);" + , Shadows.medium , backgroundColor Colors.white , withMedia [ mobile ] [ borderRadius (px 8) diff --git a/src/Nri/Ui/Menu/V3.elm b/src/Nri/Ui/Menu/V3.elm index cb2ca5b9..8a94cb23 100644 --- a/src/Nri/Ui/Menu/V3.elm +++ b/src/Nri/Ui/Menu/V3.elm @@ -8,7 +8,11 @@ module Nri.Ui.Menu.V3 exposing , Entry, group, entry ) -{-| Changes from V2: +{-| Patch changes: + + - Use `Shadows` + +Changes from V2: - Adpoted attribute pattern - Added option to customize the z-index @@ -57,6 +61,7 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 import Nri.Ui.Html.Attributes.V2 as AttributesExtra import Nri.Ui.Html.V3 exposing (viewJust) +import Nri.Ui.Shadows.V1 as Shadows import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon @@ -757,7 +762,7 @@ styleContent contentVisible config = , zIndex (int <| config.zIndex + 1) , backgroundColor Colors.white , listStyle Css.none - , Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)" + , Shadows.high , before [ property "content" "\"\"" , position absolute diff --git a/src/Nri/Ui/Message/V3.elm b/src/Nri/Ui/Message/V3.elm index 290d76e4..18c10559 100644 --- a/src/Nri/Ui/Message/V3.elm +++ b/src/Nri/Ui/Message/V3.elm @@ -15,6 +15,7 @@ module Nri.Ui.Message.V3 exposing - adds `notMobileCss`, `mobileCss`, `quizEngineMobileCss` - adds `hideIconForMobile` and `hideIconFor` + - use `Shadows` Changes from V2: @@ -75,6 +76,7 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.MediaQuery.V1 as MediaQuery +import Nri.Ui.Shadows.V1 as Shadows import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon @@ -176,7 +178,7 @@ view attributes_ = borderRadius (px 8) , padding (px 20) , backgroundColor_ - , property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);" + , Shadows.low , Css.Media.withMedia [ Css.Media.all [ Css.Media.maxWidth (px 1000) ] ] [ padding (px 15) diff --git a/src/Nri/Ui/Modal/V11.elm b/src/Nri/Ui/Modal/V11.elm index 1bfb2c01..1baa35db 100644 --- a/src/Nri/Ui/Modal/V11.elm +++ b/src/Nri/Ui/Modal/V11.elm @@ -14,8 +14,9 @@ module Nri.Ui.Modal.V11 exposing # Patch changes: - - adds `testId` helper - - adds data-nri-descriptions to the header, content, and footer + - adds `testId` helper + - adds data-nri-descriptions to the header, content, and footer + - use `Shadows` # Changes from V10: @@ -176,6 +177,7 @@ import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.MediaQuery.V1 exposing (mobile) +import Nri.Ui.Shadows.V1 as Shadows import Nri.Ui.SpriteSheet import Nri.Ui.Svg.V1 import Task @@ -419,7 +421,7 @@ modalStyles = -- Border , borderRadius (px 20) - , property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)" + , Shadows.high , Css.Media.withMedia [ mobile ] [ borderRadius zero ] diff --git a/src/Nri/Ui/Tooltip/V2.elm b/src/Nri/Ui/Tooltip/V2.elm index 208a971b..1444baed 100644 --- a/src/Nri/Ui/Tooltip/V2.elm +++ b/src/Nri/Ui/Tooltip/V2.elm @@ -27,6 +27,7 @@ Post-release patches: - add containerCss - adds `nriDescription` and `testId` - fix + - use `Shadows` Changes from V1: @@ -96,6 +97,7 @@ import Nri.Ui.ClickableSvg.V2 as ClickableSvg import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as ExtraAttributes +import Nri.Ui.Shadows.V1 as Shadows import Nri.Ui.UiIcon.V1 as UiIcon import String.Extra @@ -769,7 +771,7 @@ pointerBox tail direction alignment = , Css.fontSize (Css.px 16) , Css.fontWeight (Css.int 600) , Css.color Colors.white - , Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)" + , Shadows.high , Global.descendants [ Global.a [ Css.textDecoration Css.underline ] ] , Global.descendants [ Global.a [ Css.color Colors.white ] ] ]