Merge pull request #643 from NoRedInk/fab/checkbox

FAB/checkbox

src/Nri/Ui/Checkbox/V5.elm

@@ -161,7 +161,17 @@ checkboxContainer model =
         [ css
             [ display block
             , height inherit
-            , Css.Global.descendants [ Css.Global.input [ display none ] ]
+            , position relative
+            , pseudoClass "focus-within"
+                [ Css.Global.descendants
+                    [ Css.Global.class "checkbox-icon-container"
+                        [ borderColor (rgb 0 95 204)
+                        ]
+                    ]
+                ]
+            , Css.Global.descendants
+                [ Css.Global.input [ position absolute, top (calc (pct 50) minus (px 10)), left (px 10) ]
+                ]
             ]
         , Attributes.id (model.identifier ++ "-container")
         , Events.stopPropagationOn "click" (Json.Decode.fail "stop click propagation")
@@ -179,9 +189,12 @@ viewCheckbox :
 viewCheckbox model =
     Html.checkbox model.identifier
         (selectedToMaybe model.selected)
-        [ Events.onCheck (\_ -> onCheck model)
-        , Attributes.id model.identifier
-        , Attributes.disabled model.disabled
+        [ Attributes.id model.identifier
+        , if model.disabled then
+            Widget.disabled True
+
+          else
+            Events.onCheck (\_ -> onCheck model)
         ]
 
 
@@ -199,19 +212,7 @@ viewEnabledLabel model labelView icon =
     Html.Styled.label
         [ Attributes.for model.identifier
         , Aria.controls model.identifier
-        , Widget.disabled False
         , Widget.checked (selectedToMaybe model.selected)
-        , Attributes.tabindex 0
-        , HtmlExtra.onKeyUp
-            { defaultOptions | preventDefault = True }
-            (\keyCode ->
-                -- 32 is the space bar, 13 is enter
-                if keyCode == 32 || keyCode == 13 then
-                    Just (onCheck model)
-
-                else
-                    Nothing
-            )
         , labelClass model.selected
         , css
             [ positioning
@@ -241,7 +242,6 @@ viewDisabledLabel model labelView icon =
     Html.Styled.label
         [ Attributes.for model.identifier
         , Aria.controls model.identifier
-        , Widget.disabled True
         , Widget.checked (selectedToMaybe model.selected)
         , labelClass model.selected
         , css
@@ -299,13 +299,23 @@ viewIcon styles icon =
         [ css
             [ position absolute
             , left zero
-            , top (calc (pct 50) minus (px 14))
-            , width (px 24)
-            , height (px 24)
-            , Css.batch styles
+            , top (calc (pct 50) minus (px 18))
+            , border3 (px 2) solid transparent
+            , padding (px 2)
+            , borderRadius (px 3)
+            , height (Css.px 27)
             ]
+        , Attributes.class "checkbox-icon-container"
         ]
-        [ Nri.Ui.Svg.V1.toHtml icon
+        [ Html.div
+            [ css
+                [ display inlineBlock
+                , backgroundColor Colors.white
+                , height (Css.px 27)
+                ]
+            ]
+            [ Nri.Ui.Svg.V1.toHtml (Nri.Ui.Svg.V1.withCss styles icon)
+            ]
         ]
 
 

styleguide-app/Examples/Checkbox.elm

@@ -46,13 +46,17 @@ example =
             , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
             , viewDisabledCheckbox "styleguide-checkbox-disabled" state
-            , viewMultilineCheckboxes
+            , viewMultilineCheckboxes state
             , h3 [] [ text "Premium Checkboxes" ]
             , viewPremiumCheckboxes state
             ]
     , categories = [ Inputs ]
     , atomicDesignType = Molecule
-    , keyboardSupport = []
+    , keyboardSupport =
+        [ { keys = [ Space ]
+          , result = "Select or deselect the checkbox (may cause page scroll)"
+          }
+        ]
     }
 
 
@@ -134,16 +138,20 @@ viewDisabledCheckbox id state =
         }
 
 
-viewMultilineCheckboxes : Html Msg
-viewMultilineCheckboxes =
+viewMultilineCheckboxes : State -> Html Msg
+viewMultilineCheckboxes state =
     Html.section
         [ css [ Css.width (Css.px 500) ] ]
         [ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ]
-        , Checkbox.viewWithLabel
-            { identifier = "fake-not-selected"
+        , let
+            id =
+                "styleguide-checkbox-multiline"
+          in
+          Checkbox.viewWithLabel
+            { identifier = id
             , label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
-            , setterMsg = ToggleCheck "fake-not-selected"
-            , selected = Checkbox.NotSelected
+            , setterMsg = ToggleCheck id
+            , selected = isSelected id state
             , disabled = False
             , theme = Checkbox.Square
             }

tests/Spec/Nri/Ui/PremiumCheckbox.elm

@@ -100,7 +100,7 @@ spec =
                         , isLocked = False
                         , isPremium = False
                         }
-                        |> Query.has [ Selector.disabled False ]
+                        |> Query.hasNot [ Selector.attribute (Attributes.attribute "aria-disabled" "true") ]
             , test "is disabled when disabled = True" <|
                 \() ->
                     premiumView
@@ -109,6 +109,6 @@ spec =
                         , isLocked = False
                         , isPremium = False
                         }
-                        |> Query.has [ Selector.disabled True ]
+                        |> Query.has [ Selector.attribute (Attributes.attribute "aria-disabled" "true") ]
             ]
         ]