Merge remote-tracking branch 'origin/master' into lab/slidimations

elm.json

@@ -3,7 +3,7 @@
     "name": "NoRedInk/noredink-ui",
     "summary": "UI Widgets we use at NRI",
     "license": "BSD-3-Clause",
-    "version": "6.11.0",
+    "version": "6.11.1",
     "exposed-modules": [
         "Nri.Ui.Alert.V2",
         "Nri.Ui.Alert.V3",

src/Nri/Ui/ClickableText/V2.elm

@@ -101,24 +101,38 @@ viewContent config =
             sizeToPx config.size
     in
     span [ Attributes.css [ Css.fontSize fontSize ] ]
-        [ case config.icon of
+        (case config.icon of
             Just icon ->
-                div
+                [ div
                     [ Attributes.css
-                        [ Css.height fontSize
+                        [ Css.displayFlex
-                        , Css.maxWidth fontSize
+                        , Css.alignItems Css.center
-                        , Css.display Css.inlineBlock
+                        , Css.property "line-height" "normal"
-                        , Css.verticalAlign Css.baseline
-                        , Css.marginRight (Css.px 2)
                         ]
                     ]
-                    [ NriSvg.toHtml icon
+                    [ div
+                        [ Attributes.css
+                            [ Css.height fontSize
+                            , Css.maxWidth fontSize
+                            , case config.size of
+                                Small ->
+                                    Css.marginRight (Css.px 2)
+
+                                Medium ->
+                                    Css.marginRight (Css.px 3)
+
+                                Large ->
+                                    Css.marginRight (Css.px 4)
+                            ]
+                        ]
+                        [ NriSvg.toHtml icon ]
+                    , span [] [ text config.label ]
                     ]
+                ]
 
             Nothing ->
-                text ""
+                [ text config.label ]
-        , text config.label
+        )
-        ]
 
 
 clickableTextStyles : List Css.Style
@@ -138,6 +152,8 @@ clickableTextStyles =
     , Css.textDecoration Css.none
     , Css.hover [ Css.textDecoration Css.underline ]
     , Css.padding Css.zero
+    , Css.display Css.inlineBlock
+    , Css.verticalAlign Css.textBottom
     ]
 
 

src/Nri/Ui/SlideModal/V1.elm

@@ -104,6 +104,7 @@ viewModal height ( labelledById, panels ) =
         "modal-container"
         [ Css.width (Css.px 600)
         , Css.height height
+        , Css.minHeight (Css.px 400)
         , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100)
         , Css.padding4 (Css.px 35) Css.zero (Css.px 25) Css.zero
         , Css.margin2 (Css.px 75) Css.auto
@@ -197,6 +198,7 @@ viewIcon svg =
         [ css
             [ Css.width (Css.px 100)
             , Css.height (Css.px 100)
+            , Css.flexShrink Css.zero
             , Css.displayFlex
             , Css.alignItems Css.center
             , Css.justifyContent Css.center
@@ -222,7 +224,8 @@ viewFooter { previous, current, upcoming } =
     in
     Nri.Ui.styled div
         "modal-footer"
-        [ Css.displayFlex
+        [ Css.flexShrink Css.zero
+        , Css.displayFlex
         , Css.flexDirection Css.column
         , Css.alignItems Css.center
         , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero
@@ -273,6 +276,7 @@ dot type_ =
                 , Css.borderRadius (Css.px 5)
                 , Css.margin2 Css.zero (Css.px 2)
                 , Css.display Css.inlineBlock
+                , Css.verticalAlign Css.middle
                 , Css.cursor cursor
                 , Css.backgroundColor backgroundColor
 

src/Nri/Ui/SlideModal/V2.elm

@@ -164,6 +164,7 @@ panelContainer height direction panel =
         [ css
             [ -- Layout
               Css.height height
+            , Css.minHeight (Css.px 400)
             , Css.width (Css.px 600)
             , Css.minHeight (Css.px 360)
             , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100)
@@ -361,6 +362,7 @@ viewIcon svg =
         [ css
             [ Css.width (Css.px 100)
             , Css.height (Css.px 100)
+            , Css.flexShrink Css.zero
             , Css.displayFlex
             , Css.alignItems Css.center
             , Css.justifyContent Css.center
@@ -386,7 +388,8 @@ viewFooter { previous, current, upcoming } =
     in
     Nri.Ui.styled div
         "modal-footer"
-        [ Css.displayFlex
+        [ Css.flexShrink Css.zero
+        , Css.displayFlex
         , Css.flexDirection Css.column
         , Css.alignItems Css.center
         , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero
@@ -437,6 +440,7 @@ dot type_ =
                 , Css.borderRadius (Css.px 5)
                 , Css.margin2 Css.zero (Css.px 2)
                 , Css.display Css.inlineBlock
+                , Css.verticalAlign Css.middle
                 , Css.cursor cursor
                 , Css.backgroundColor backgroundColor
 

styleguide-app/Assets.elm

@@ -15,8 +15,8 @@ type alias Assets =
     , checkboxCheckedPartially_svg : Asset
     , checkboxLockOnInside_svg : Asset
     , checkboxUnchecked_svg : Asset
-    , checkWhite_svg : Asset
     , checkmark : String
+    , checkWhite_svg : Asset
     , class : String
     , clever : String
     , clock : String
@@ -36,6 +36,7 @@ type alias Assets =
     , footsteps : String
     , gear : String
     , guidedDraft : String
+    , help : String
     , hint_png : Asset
     , iconCalendar_svg : Asset
     , iconCheck_png : Asset
@@ -89,8 +90,8 @@ type alias Assets =
     , startingOffBadge_png : Asset
     , submitting : String
     , teach_assignments_copyWhite_svg : Asset
-    , twitterBlue_svg : Asset
     , tip_svg : Asset
+    , twitterBlue_svg : Asset
     , unarchiveBlue2x_png : Asset
     , writingAssignment : String
     , writingcycle : String
@@ -103,11 +104,11 @@ assets : Assets
 assets =
     { activity = "icon-activity"
     , arrowDown = "icon-arrow-down"
+    , assignmentStartButtonPrimary_svg = Asset "assets/images/assignment-start-button-primary.svg"
+    , assignmentStartButtonSecondary_svg = Asset "assets/images/assignment-start-button-secondary.svg"
     , attention_svg = Asset "assets/images/attention.svg"
     , bulb = "icon-bulb"
     , calendar = "icon-calendar"
-    , assignmentStartButtonPrimary_svg = Asset "assets/images/assignment-start-button-primary.svg"
-    , assignmentStartButtonSecondary_svg = Asset "assets/images/assignment-start-button-secondary.svg"
     , checkboxChecked_svg = Asset "assets/images/checkbox_checked.svg"
     , checkboxCheckedPartially_svg = Asset "assets/images/checkbox_checkedPartially.svg"
     , checkboxLockOnInside_svg = Asset "assets/images/checkbox_lock_on_inside.svg"
@@ -133,6 +134,7 @@ assets =
     , footsteps = "icon-footsteps"
     , gear = "icon-gear"
     , guidedDraft = "icon-guided-draft"
+    , help = "icon-help"
     , hint_png = Asset "assets/images/hint.png"
     , iconCalendar_svg = Asset "assets/images/icon-calendar.svg"
     , iconCheck_png = Asset "assets/images/icon-check.png"

styleguide-app/Examples/ClickableText.elm

@@ -46,20 +46,26 @@ example unnamedMessages state =
 
 
 {-| -}
-init : { r | performance : String, lock : String } -> State
+init : { r | performance : String, lock : String, help : String } -> State
 init assets =
     Control.record Model
         |> Control.field "label" (Control.string "Clickable Text")
         |> Control.field "icon"
             (Control.maybe True <|
                 Control.choice
-                    ( "Performance"
+                    ( "Help"
-                    , Icon.performance assets
+                    , Icon.helpSvg assets
                         |> Icon.decorativeIcon
                         |> NriSvg.fromHtml
                         |> Control.value
                     )
-                    [ ( "Lock"
+                    [ ( "Performance"
+                      , Icon.performance assets
+                            |> Icon.decorativeIcon
+                            |> NriSvg.fromHtml
+                            |> Control.value
+                      )
+                    , ( "Lock"
                       , Icon.lock assets
                             |> Icon.decorativeIcon
                             |> NriSvg.fromHtml