Adds errored state

src/Nri/Ui/Select/V7.elm

@@ -33,6 +33,7 @@ view :
     , id : String
     , valueToString : a -> String
     , defaultDisplayText : Maybe String
+    , isInError : Bool
     }
     -> Html a
 view config =
@@ -78,7 +79,14 @@ view config =
         |> Nri.Ui.styled Html.select
             "nri-select-menu"
             [ -- border
-              Css.border3 (Css.px 1) Css.solid Colors.gray75
+              Css.border3 (Css.px 1)
+                Css.solid
+                (if config.isInError then
+                    Colors.purple
+
+                 else
+                    Colors.gray75
+                )
             , Css.borderBottomWidth (Css.px 4)
             , Css.borderRadius (Css.px 8)
             , Css.focus [ Css.borderColor Colors.azure ]

styleguide-app/Examples/Select.elm

@@ -42,6 +42,19 @@ example parentMessage state =
             , id = "tortilla-selector"
             , valueToString = identity
             , defaultDisplayText = Just "Select a tasty tortilla based treat!"
+            , isInError = False
+            }
+            |> Html.Styled.map (parentMessage << ConsoleLog)
+        , Html.Styled.label
+            [ Html.Styled.Attributes.for "errored-selector" ]
+            [ Heading.h3 [] [ Html.Styled.text "Errored Selector" ] ]
+        , Select.view
+            { current = Nothing
+            , choices = []
+            , id = "errored-selector"
+            , valueToString = identity
+            , defaultDisplayText = Just "Please select an option"
+            , isInError = True
             }
             |> Html.Styled.map (parentMessage << ConsoleLog)
         ]