From d9346e098d6159267c5ab1aaf9181c6b6a27ce76 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 9 Apr 2019 09:53:35 -0700 Subject: [PATCH 1/6] Fix button vertical alignment on safari --- src/Nri/Ui/SlideModal/V1.elm | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Nri/Ui/SlideModal/V1.elm b/src/Nri/Ui/SlideModal/V1.elm index 0a197cf1..febac034 100644 --- a/src/Nri/Ui/SlideModal/V1.elm +++ b/src/Nri/Ui/SlideModal/V1.elm @@ -273,6 +273,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 From a216b31b8cf9578d39b763f46dc416b79d1b3d33 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 9 Apr 2019 10:03:21 -0700 Subject: [PATCH 2/6] Prevent contnet from falling off the modal --- src/Nri/Ui/SlideModal/V1.elm | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/SlideModal/V1.elm b/src/Nri/Ui/SlideModal/V1.elm index febac034..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 From 7bedc0f439079a3472b3b78292fb989465b96557 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 9 Apr 2019 16:05:25 -0700 Subject: [PATCH 3/6] Add help icon to the icons availabel in the styleguide --- styleguide-app/Assets.elm | 10 ++++++---- styleguide-app/Examples/ClickableText.elm | 14 ++++++++++---- styleguide-app/assets/generated_svgs.js | 2 +- 3 files changed, 17 insertions(+), 9 deletions(-) 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")); } From a1fbd0b037327d7526922ffb4b6c4269df88300f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 9 Apr 2019 16:51:27 -0700 Subject: [PATCH 4/6] :bowtie: figure out the vertical alignment I think this looks kinda weird with the lock but maybe not. aligning stuff with text is very tricky css lets you do a lot of customization and such --- src/Nri/Ui/ClickableText/V2.elm | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/Nri/Ui/ClickableText/V2.elm b/src/Nri/Ui/ClickableText/V2.elm index 9f0f2a36..c461a1e8 100644 --- a/src/Nri/Ui/ClickableText/V2.elm +++ b/src/Nri/Ui/ClickableText/V2.elm @@ -101,24 +101,30 @@ 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.marginRight (Css.px 2) + , Css.height fontSize + , Css.maxWidth fontSize + ] + ] + [ NriSvg.toHtml icon ] + , span [] [ text config.label ] ] + ] Nothing -> - text "" - , text config.label - ] + [ text config.label ] + ) clickableTextStyles : List Css.Style @@ -138,6 +144,8 @@ clickableTextStyles = , Css.textDecoration Css.none , Css.hover [ Css.textDecoration Css.underline ] , Css.padding Css.zero + , Css.display Css.inlineBlock + , Css.verticalAlign Css.textBottom ] From 6ec830b3434c557ad67d6524b5ba88d9b89653d3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 10 Apr 2019 09:21:45 -0700 Subject: [PATCH 5/6] :bowtie: Nudge the margins --- src/Nri/Ui/ClickableText/V2.elm | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/ClickableText/V2.elm b/src/Nri/Ui/ClickableText/V2.elm index c461a1e8..624d498f 100644 --- a/src/Nri/Ui/ClickableText/V2.elm +++ b/src/Nri/Ui/ClickableText/V2.elm @@ -112,9 +112,17 @@ viewContent config = ] [ div [ Attributes.css - [ Css.marginRight (Css.px 2) - , Css.height fontSize + [ 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 ] From 8ba4d70ff0d431fefdb47e4b03a4cde4e09d1ec5 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 10 Apr 2019 16:48:52 -0700 Subject: [PATCH 6/6] Bump --- elm.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elm.json b/elm.json index 722f9346..613a9e68 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",