diff --git a/elm.json b/elm.json
index 487743f9..48f567a9 100644
--- a/elm.json
+++ b/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",
diff --git a/src/Nri/Ui/ClickableText/V2.elm b/src/Nri/Ui/ClickableText/V2.elm
index 9f0f2a36..624d498f 100644
--- a/src/Nri/Ui/ClickableText/V2.elm
+++ b/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.maxWidth fontSize
- , Css.display Css.inlineBlock
- , Css.verticalAlign Css.baseline
- , Css.marginRight (Css.px 2)
+ [ Css.displayFlex
+ , Css.alignItems Css.center
+ , Css.property "line-height" "normal"
]
]
- [ 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
]
diff --git a/src/Nri/Ui/SlideModal/V1.elm b/src/Nri/Ui/SlideModal/V1.elm
index 0a197cf1..ca8d0be5 100644
--- a/src/Nri/Ui/SlideModal/V1.elm
+++ b/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
diff --git a/src/Nri/Ui/SlideModal/V2.elm b/src/Nri/Ui/SlideModal/V2.elm
index 38a8df7b..1501ec88 100644
--- a/src/Nri/Ui/SlideModal/V2.elm
+++ b/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
diff --git a/styleguide-app/Assets.elm b/styleguide-app/Assets.elm
index 846dd03e..ead61da1 100644
--- a/styleguide-app/Assets.elm
+++ b/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"
diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm
index b757d97e..93311ab2 100644
--- a/styleguide-app/Examples/ClickableText.elm
+++ b/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"
- , Icon.performance assets
+ ( "Help"
+ , 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
diff --git a/styleguide-app/assets/generated_svgs.js b/styleguide-app/assets/generated_svgs.js
index b69f01e8..421b2f45 100644
--- a/styleguide-app/assets/generated_svgs.js
+++ b/styleguide-app/assets/generated_svgs.js
@@ -8,7 +8,7 @@
container.id = "icon-sprite";
container.setAttribute("data-build-datetime", "2018-05-02 08:12:17.887294");
container.innerHTML =
- '\n';
+ "\n";
document.body.insertBefore(container, document.getElementById("svg-target"));
}