NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-02 11:28:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add TextInput.V5.email input type

Browse Source
This commit is contained in:
Aaron VonderHaar 2020-03-31 13:19:56 -07:00
parent 03c0845973
commit f18656157c
2 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/Nri/Ui/TextInput/V5.elm
View File

@ -2,7 +2,7 @@ module Nri.Ui.TextInput.V5 exposing
( Model
, view, writing
, generateId
, InputType, number, float, text, password
, InputType, number, float, text, password, email
)
{-|
@ -19,7 +19,7 @@ module Nri.Ui.TextInput.V5 exposing
## Input types
@docs InputType, number, float, text, password
@docs InputType, number, float, text, password, email
-}
@ -54,6 +54,8 @@ type InputType value
{ toString : value -> String
, fromString : String -> value
, fieldType : String
, inputMode : Maybe String
, autocomplete : Maybe String
}
@ -65,6 +67,8 @@ text =
{ toString = identity
, fromString = identity
, fieldType = "text"
, inputMode = Nothing
, autocomplete = Nothing
}
@ -76,6 +80,8 @@ number =
{ toString = Maybe.map String.fromInt >> Maybe.withDefault ""
, fromString = String.toInt
, fieldType = "number"
, inputMode = Nothing
, autocomplete = Nothing
}
@ -87,6 +93,8 @@ float =
{ toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
, fromString = String.toFloat
, fieldType = "number"
, inputMode = Nothing
, autocomplete = Nothing
}
@ -98,6 +106,26 @@ password =
{ toString = identity
, fromString = identity
, fieldType = "password"
, inputMode = Nothing
, autocomplete = Just "current-password"
}
{-| An input that is optimized for email entry
NOTE: this uses `inputmode="email"` so that mobile devices will use the email keyboard,
but not `type="email"` because that would enable browser-provided validation which is inconsistent and at odds
with our validation UI.
-}
email : InputType String
email =
InputType
{ toString = identity
, fromString = identity
, fieldType = "text"
, inputMode = Just "email"
, autocomplete = Just "email"
}
@ -128,6 +156,11 @@ view_ theme model =
else
[]
maybeAttr attr maybeValue =
maybeValue
|> Maybe.map attr
|> Maybe.withDefault Extra.none
in
div
[ Attributes.css [ position relative ]
@ -151,9 +184,11 @@ view_ theme model =
, placeholder model.placeholder
, value (inputType.toString model.value)
, onInput (inputType.fromString >> model.onInput)
, Maybe.withDefault Extra.none (Maybe.map Events.onBlur model.onBlur)
, maybeAttr Events.onBlur model.onBlur
, autofocus model.autofocus
, type_ inputType.fieldType
, maybeAttr (attribute "inputmode") inputType.inputMode
, maybeAttr (attribute "autocomplete") inputType.autocomplete
, class "override-sass-styles"
, Attributes.attribute "aria-invalid" <|
if model.isInError then

24
styleguide-app/Examples/TextInput.elm
View File

@ -29,7 +29,7 @@ type Msg
type alias State =
{ numberInputValue : Maybe Int
, floatInputValue : Maybe Float
, textInputValues : Dict Id String
, stringInputValues : Dict Id String
, passwordInputValue : String
, control : Control ExampleConfig
}
@ -63,7 +63,7 @@ example parentMessage state =
, isInError = exampleConfig.isInError
, placeholder = exampleConfig.placeholder
, showLabel = exampleConfig.showLabel
, value = Maybe.withDefault "" <| Dict.get 1 state.textInputValues
, value = Maybe.withDefault "" <| Dict.get 1 state.stringInputValues
, onInput = SetTextInput 1
, onBlur = Nothing
, autofocus = False
@ -105,12 +105,24 @@ example parentMessage state =
, autofocus = False
, type_ = TextInput.password
}
, Heading.h3 [] [ text "... type_ = TextInput.email" ]
, TextInput.view
{ label = exampleConfig.label
, isInError = exampleConfig.isInError
, placeholder = exampleConfig.placeholder
, showLabel = exampleConfig.showLabel
, value = Maybe.withDefault "" <| Dict.get 2 state.stringInputValues
, onInput = SetTextInput 2
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.email
}
, Heading.h3 [] [ Html.text "TextInput.writing { type_ = TextInput.text }" ]
, TextInput.writing
{ label = exampleConfig.label
, isInError = exampleConfig.isInError
, placeholder = exampleConfig.placeholder
, value = Maybe.withDefault "" <| Dict.get 4 state.textInputValues
, value = Maybe.withDefault "" <| Dict.get 4 state.stringInputValues
, onInput = SetTextInput 4
, onBlur = Nothing
, autofocus = False
@ -122,7 +134,7 @@ example parentMessage state =
{ label = exampleConfig.label
, isInError = exampleConfig.isInError
, placeholder = exampleConfig.placeholder
, value = Maybe.withDefault "" <| Dict.get 7 state.textInputValues
, value = Maybe.withDefault "" <| Dict.get 7 state.stringInputValues
, onInput = SetTextInput 7
, onBlur = Just (SetTextInput 7 "Blurred!")
, autofocus = False
@ -139,7 +151,7 @@ init : State
init =
{ numberInputValue = Nothing
, floatInputValue = Nothing
, textInputValues = Dict.empty
, stringInputValues = Dict.empty
, passwordInputValue = ""
, control =
Control.record ExampleConfig
@ -155,7 +167,7 @@ update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetTextInput id textInputValue ->
( { state | textInputValues = Dict.insert id textInputValue state.textInputValues }, Cmd.none )
( { state | stringInputValues = Dict.insert id textInputValue state.stringInputValues }, Cmd.none )
SetNumberInput numberInputValue ->
( { state | numberInputValue = numberInputValue }, Cmd.none )