Stop underline/dashed from affecting the emphasis border

NoRedInk · Jan 16, 2024 · 40fda93 · 40fda93
1 parent fc91fdb
commit 40fda93
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 49 deletions.
diff --git a/component-catalog/src/Examples/Block.elm b/component-catalog/src/Examples/Block.elm
@@ -579,7 +579,7 @@ initControl : Control Settings
 initControl =
     ControlExtra.list
         |> ControlExtra.optionalListItemDefaultChecked "content" controlContent
-        |> ControlExtra.optionalListItemDefaultChecked "borderStyle" borderStyleContent
+        |> ControlExtra.optionalListItemDefaultChecked "blankStyle" blankStyleContent
         |> ControlExtra.optionalBoolListItemDefaultChecked "emphasize" ( Code.fromModule moduleName "emphasize", Block.emphasize )
         |> ControlExtra.optionalListItem "label"
             (CommonControls.string ( Code.fromModule moduleName "label", Block.label ) "Fruit")
@@ -650,8 +650,8 @@ controlContent =
         ]
 
 
-borderStyleContent : Control ( String, Block.Attribute msg )
-borderStyleContent =
+blankStyleContent : Control ( String, Block.Attribute msg )
+blankStyleContent =
     Control.choice
         [ ( "Dashed"
           , Control.value ( "Block.dashed", Block.dashed )

diff --git a/src/Nri/Ui/Block/V6.elm b/src/Nri/Ui/Block/V6.elm
@@ -340,7 +340,7 @@ renderContent config content_ styles =
                         BlankHeightFull
             in
             blockSegmentContainer
-                [ viewBlank config.borderStyle blankHeight length ]
+                [ viewBlank config.blankStyle blankHeight length ]
                 styles
 
         Markdown markdown contents ->
@@ -425,14 +425,14 @@ italic =
 -}
 dashed : Attribute msg
 dashed =
-    Attribute (\config -> { config | borderStyle = Dashed })
+    Attribute (\config -> { config | blankStyle = Dashed })
 
 
 {-| Sets the border style to be underlined
 -}
 underline : Attribute msg
 underline =
-    Attribute (\config -> { config | borderStyle = Underline })
+    Attribute (\config -> { config | blankStyle = Underline })
 
 
 
@@ -524,7 +524,7 @@ toMark :
         | emphasize : Bool
         , label : Maybe String
         , content : List (Content msg)
-        , borderStyle : BorderStyle
+        , blankStyle : BlankStyle
     }
     -> Palette
     -> Maybe Mark
@@ -533,54 +533,27 @@ toMark config { backgroundColor, borderColor } =
         let
             borderWidth =
                 Css.px 1
-
-            borderStyle =
-                case config.borderStyle of
-                    Dashed ->
-                        Css.dashed
-
-                    Underline ->
-                        Css.solid
-
-            borderColor_ =
-                case config.borderStyle of
-                    Dashed ->
-                        borderColor
-
-                    Underline ->
-                        backgroundColor
         in
         Just
             { name = config.label
             , startStyles =
-                [ Css.borderLeft3 borderWidth borderStyle borderColor_
+                [ Css.borderLeft3 borderWidth Css.dashed borderColor
                 , Css.paddingLeft (Css.px 2)
                 ]
             , styles =
                 [ Css.paddingTop topBottomSpace
                 , Css.paddingBottom topBottomSpace
                 , Css.backgroundColor backgroundColor
-                , Css.borderTop3 borderWidth borderStyle borderColor_
-                , Css.borderBottom3 borderWidth borderStyle borderColor_
+                , Css.borderTop3 borderWidth Css.dashed borderColor
+                , Css.borderBottom3 borderWidth Css.dashed borderColor
                 , MediaQuery.highContrastMode
                     [ Css.property "background-color" "Mark"
                     , Css.property "color" "MarkText"
                     , Css.property "forced-color-adjust" "none"
                     ]
-                , Css.batch
-                    (case config.borderStyle of
-                        Dashed ->
-                            []
-
-                        Underline ->
-                            [ Css.textDecoration Css.underline
-                            , Css.property "text-decoration-thickness" "1px"
-                            , Css.property "text-underline-offset" "4.5px"
-                            ]
-                    )
                 ]
             , endStyles =
-                [ Css.borderRight3 borderWidth borderStyle borderColor_
+                [ Css.borderRight3 borderWidth Css.dashed borderColor
                 , Css.paddingRight (Css.px 2)
                 ]
             }
@@ -676,7 +649,7 @@ defaultConfig =
     , theme = Yellow
     , emphasize = False
     , insertWbrAfterSpace = False
-    , borderStyle = Dashed
+    , blankStyle = Dashed
     }
 
 
@@ -690,11 +663,11 @@ type alias Config msg =
     , theme : Theme
     , emphasize : Bool
     , insertWbrAfterSpace : Bool
-    , borderStyle : BorderStyle
+    , blankStyle : BlankStyle
     }
 
 
-type BorderStyle
+type BlankStyle
     = Dashed
     | Underline
 
@@ -728,11 +701,11 @@ type BlankHeight
     | BlankHeightInline
 
 
-viewBlank : BorderStyle -> BlankHeight -> CharacterWidth -> Html msg
-viewBlank borderStyle blankHeight (CharacterWidth width) =
+viewBlank : BlankStyle -> BlankHeight -> CharacterWidth -> Html msg
+viewBlank blankStyle blankHeight (CharacterWidth width) =
     let
         heightStyles =
-            case borderStyle of
+            case blankStyle of
                 Dashed ->
                     case blankHeight of
                         BlankHeightFull ->
@@ -745,22 +718,22 @@ viewBlank borderStyle blankHeight (CharacterWidth width) =
                             [ Css.lineHeight (Css.num 1) ]
 
                 Underline ->
-                    [ Css.lineHeight (Css.num 1) ]
+                    [ Css.lineHeight (Css.num 0.75) ]
     in
     span
         [ css
-            [ case borderStyle of
+            [ case blankStyle of
                 Dashed ->
                     Css.border3 (Css.px 2) Css.dashed Colors.navy
 
                 Underline ->
-                    Css.borderBottom2 (Css.px 1) Css.solid
+                    Css.borderBottom2 (Css.rem 0.1) Css.solid
             , MediaQuery.highContrastMode
                 [ Css.property "border-color" "CanvasText"
                 , Css.property "background-color" "Canvas"
                 ]
             , Css.backgroundColor
-                (case borderStyle of
+                (case blankStyle of
                     Dashed ->
                         Colors.white
 
@@ -771,7 +744,7 @@ viewBlank borderStyle blankHeight (CharacterWidth width) =
             , Css.display Css.inlineBlock
             , Css.borderRadius
                 (Css.px
-                    (case borderStyle of
+                    (case blankStyle of
                         Dashed ->
                             4