mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-13 07:48:26 +03:00
💀 remove TextInput.V6
This commit is contained in:
Tessa Kelly
parent
2e2c93a0bd
commit
835c7d777d
@ -4,5 +4,4 @@ Nri.Ui.Menu.V2,upgrade to V3
|
|||||||
Nri.Ui.Select.V7,upgrade to V8
|
Nri.Ui.Select.V7,upgrade to V8
|
||||||
Nri.Ui.Table.V4,upgrade to V5
|
Nri.Ui.Table.V4,upgrade to V5
|
||||||
Nri.Ui.Tabs.V6,upgrade to V7
|
Nri.Ui.Tabs.V6,upgrade to V7
|
||||||
Nri.Ui.TextInput.V6,upgrade to V7
|
|
||||||
Nri.Ui.Tooltip.V1,upgrade to V2
|
Nri.Ui.Tooltip.V1,upgrade to V2
|
||||||
|
|||||||
|
1
elm.json
1
elm.json
@ -59,7 +59,6 @@
|
|||||||
"Nri.Ui.Text.V6",
|
"Nri.Ui.Text.V6",
|
||||||
"Nri.Ui.Text.Writing.V1",
|
"Nri.Ui.Text.Writing.V1",
|
||||||
"Nri.Ui.TextArea.V4",
|
"Nri.Ui.TextArea.V4",
|
||||||
"Nri.Ui.TextInput.V6",
|
|
||||||
"Nri.Ui.TextInput.V7",
|
"Nri.Ui.TextInput.V7",
|
||||||
"Nri.Ui.Tooltip.V1",
|
"Nri.Ui.Tooltip.V1",
|
||||||
"Nri.Ui.Tooltip.V2",
|
"Nri.Ui.Tooltip.V2",
|
||||||
|
|||||||
@ -1,560 +0,0 @@
|
|||||||
module Nri.Ui.TextInput.V6 exposing
|
|
||||||
( view, generateId
|
|
||||||
, InputType, number, float, text, password, email, search
|
|
||||||
, Attribute, placeholder, hiddenLabel, autofocus
|
|
||||||
, onBlur, onReset, onEnter
|
|
||||||
, css, custom, nriDescription, id, testId, noMargin
|
|
||||||
, disabled, loading, errorIf, errorMessage
|
|
||||||
, writing
|
|
||||||
)
|
|
||||||
|
|
||||||
{-|
|
|
||||||
|
|
||||||
|
|
||||||
# Patch changes:
|
|
||||||
|
|
||||||
- adds `nriDescription` and `testId` helpers
|
|
||||||
|
|
||||||
|
|
||||||
# Changes from V5
|
|
||||||
|
|
||||||
- new Attributes-style API
|
|
||||||
|
|
||||||
@docs view, generateId
|
|
||||||
|
|
||||||
|
|
||||||
### Input types
|
|
||||||
|
|
||||||
@docs InputType, number, float, text, password, email, search
|
|
||||||
|
|
||||||
|
|
||||||
## Attributes
|
|
||||||
|
|
||||||
@docs Attribute, placeholder, hiddenLabel, autofocus
|
|
||||||
@docs onBlur, onReset, onEnter
|
|
||||||
@docs css, custom, nriDescription, id, testId, noMargin
|
|
||||||
@docs disabled, loading, errorIf, errorMessage
|
|
||||||
@docs writing
|
|
||||||
|
|
||||||
-}
|
|
||||||
|
|
||||||
import Accessibility.Styled.Style as Accessibility
|
|
||||||
import Css exposing (center, num, position, px, relative, textAlign)
|
|
||||||
import Css.Global
|
|
||||||
import Html.Styled as Html exposing (..)
|
|
||||||
import Html.Styled.Attributes as Attributes exposing (..)
|
|
||||||
import Html.Styled.Events as Events exposing (onInput)
|
|
||||||
import Keyboard.Event exposing (KeyboardEvent)
|
|
||||||
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
|
|
||||||
import Nri.Ui.Colors.V1 as Colors
|
|
||||||
import Nri.Ui.Html.Attributes.V2 as Extra
|
|
||||||
import Nri.Ui.Html.V3 exposing (viewJust)
|
|
||||||
import Nri.Ui.InputStyles.V3 as InputStyles
|
|
||||||
import Nri.Ui.Message.V3 as Message
|
|
||||||
import Nri.Ui.Svg.V1 as Svg
|
|
||||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
|
||||||
import Nri.Ui.Util exposing (dashify)
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
type InputType value msg
|
|
||||||
= InputType
|
|
||||||
{ toString : value -> String
|
|
||||||
, fromString : String -> msg
|
|
||||||
, fieldType : String
|
|
||||||
, inputMode : Maybe String
|
|
||||||
, autocomplete : Maybe String
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An input that allows text entry
|
|
||||||
-}
|
|
||||||
text : (String -> msg) -> InputType String msg
|
|
||||||
text toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = identity
|
|
||||||
, fromString = toMsg
|
|
||||||
, fieldType = "text"
|
|
||||||
, inputMode = Nothing
|
|
||||||
, autocomplete = Nothing
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An input that allows integer entry
|
|
||||||
-}
|
|
||||||
number : (Maybe Int -> msg) -> InputType (Maybe Int) msg
|
|
||||||
number toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = Maybe.map String.fromInt >> Maybe.withDefault ""
|
|
||||||
, fromString = String.toInt >> toMsg
|
|
||||||
, fieldType = "number"
|
|
||||||
, inputMode = Nothing
|
|
||||||
, autocomplete = Nothing
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An input that allows float entry
|
|
||||||
-}
|
|
||||||
float : (Maybe Float -> msg) -> InputType (Maybe Float) msg
|
|
||||||
float toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
|
|
||||||
, fromString = String.toFloat >> toMsg
|
|
||||||
, fieldType = "number"
|
|
||||||
, inputMode = Nothing
|
|
||||||
, autocomplete = Nothing
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An input that allows password entry
|
|
||||||
-}
|
|
||||||
password : (String -> msg) -> InputType String msg
|
|
||||||
password toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = identity
|
|
||||||
, fromString = toMsg
|
|
||||||
, 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 : (String -> msg) -> InputType String msg
|
|
||||||
email toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = identity
|
|
||||||
, fromString = toMsg
|
|
||||||
, fieldType = "text"
|
|
||||||
, inputMode = Just "email"
|
|
||||||
, autocomplete = Just "email"
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An input with ["search" type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) specified.
|
|
||||||
-}
|
|
||||||
search : (String -> msg) -> InputType String msg
|
|
||||||
search toMsg =
|
|
||||||
InputType
|
|
||||||
{ toString = identity
|
|
||||||
, fromString = toMsg
|
|
||||||
, fieldType = "search"
|
|
||||||
, inputMode = Nothing
|
|
||||||
, autocomplete = Nothing
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| An optional customization of a TextInput.
|
|
||||||
-}
|
|
||||||
type Attribute msg
|
|
||||||
= Attribute (Config msg -> Config msg)
|
|
||||||
|
|
||||||
|
|
||||||
{-| If not explicit placeholder is given, the input label will be used as the placeholder.
|
|
||||||
-}
|
|
||||||
placeholder : String -> Attribute msg
|
|
||||||
placeholder text_ =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | placeholder = Just text_ }
|
|
||||||
|
|
||||||
|
|
||||||
{-| This disables the input
|
|
||||||
-}
|
|
||||||
disabled : Attribute msg
|
|
||||||
disabled =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | disabled = True }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Use this while the form the input is a part of is being submitted.
|
|
||||||
-}
|
|
||||||
loading : Attribute msg
|
|
||||||
loading =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | loading = True }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Sets whether or not the field will be highlighted as having a validation error.
|
|
||||||
If you are always passing `True`, then you don't need to use this attribute.
|
|
||||||
-}
|
|
||||||
errorIf : Bool -> Attribute msg
|
|
||||||
errorIf isInError =
|
|
||||||
Attribute <|
|
|
||||||
\config ->
|
|
||||||
{ config
|
|
||||||
| error =
|
|
||||||
if isInError then
|
|
||||||
Error { message = Nothing }
|
|
||||||
|
|
||||||
else
|
|
||||||
NoError
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| If `Just`, the field will be highlighted as having a validation error,
|
|
||||||
and the given error message will be shown.
|
|
||||||
-}
|
|
||||||
errorMessage : Maybe String -> Attribute msg
|
|
||||||
errorMessage maybeMessage =
|
|
||||||
Attribute <|
|
|
||||||
\config ->
|
|
||||||
{ config
|
|
||||||
| error =
|
|
||||||
case maybeMessage of
|
|
||||||
Nothing ->
|
|
||||||
NoError
|
|
||||||
|
|
||||||
Just message ->
|
|
||||||
Error { message = Just message }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| Hides the visible label. (There will still be an invisible label for screen readers.)
|
|
||||||
-}
|
|
||||||
hiddenLabel : Attribute msg
|
|
||||||
hiddenLabel =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | hideLabel = True }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Causes the TextInput to produce the given `msg` when the field is blurred.
|
|
||||||
-}
|
|
||||||
onBlur : msg -> Attribute msg
|
|
||||||
onBlur msg =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | onBlur = Just msg }
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
onReset : msg -> Attribute msg
|
|
||||||
onReset msg =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | onReset = Just msg }
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
onEnter : msg -> Attribute msg
|
|
||||||
onEnter msg =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | onEnter = Just msg }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Sets the `autofocus` attribute of the resulting HTML input.
|
|
||||||
-}
|
|
||||||
autofocus : Attribute msg
|
|
||||||
autofocus =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | autofocus = True }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Adds CSS to the input container.
|
|
||||||
|
|
||||||
If you want to customize colors, borders, font sizes, etc, you should instead add to the TextInput API
|
|
||||||
to support what you need.
|
|
||||||
|
|
||||||
-}
|
|
||||||
css : List Css.Style -> Attribute msg
|
|
||||||
css styles =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | css = styles :: config.css }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Remove default spacing from the Input.
|
|
||||||
-}
|
|
||||||
noMargin : Bool -> Attribute msg
|
|
||||||
noMargin removeMargin =
|
|
||||||
Attribute <| \config -> { config | noMarginTop = removeMargin }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Add any attribute to the input. Don't use this helper for adding css!
|
|
||||||
|
|
||||||
TODO: in V7, change this helper's type to `List (Html.Attribute msg) -> Attribute msg`,
|
|
||||||
to be more consistent with other helpers.
|
|
||||||
|
|
||||||
Also, we should probably change the implemenation from `attr :: config.custom` to
|
|
||||||
`config.custom ++ attributes` for a more intuitive and consistent API.
|
|
||||||
|
|
||||||
-}
|
|
||||||
custom : Html.Attribute msg -> Attribute msg
|
|
||||||
custom attr =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | custom = attr :: config.custom }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Set a custom ID for this text input and label. If you don't set this,
|
|
||||||
we'll automatically generate one from the label you pass in, but this can
|
|
||||||
cause problems if you have more than one text input with the same label on
|
|
||||||
the page. Use this to be more specific and avoid issues with duplicate IDs!
|
|
||||||
-}
|
|
||||||
id : String -> Attribute msg
|
|
||||||
id id_ =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | id = Just id_ }
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
nriDescription : String -> Attribute msg
|
|
||||||
nriDescription description =
|
|
||||||
custom (Extra.nriDescription description)
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
testId : String -> Attribute msg
|
|
||||||
testId id_ =
|
|
||||||
custom (Extra.testId id_)
|
|
||||||
|
|
||||||
|
|
||||||
{-| This is private. The public API only exposes `Attribute`.
|
|
||||||
-}
|
|
||||||
type alias Config msg =
|
|
||||||
{ inputStyle : InputStyles.Theme
|
|
||||||
, error : ErrorState
|
|
||||||
, disabled : Bool
|
|
||||||
, loading : Bool
|
|
||||||
, hideLabel : Bool
|
|
||||||
, placeholder : Maybe String
|
|
||||||
, onBlur : Maybe msg
|
|
||||||
, onReset : Maybe msg
|
|
||||||
, onEnter : Maybe msg
|
|
||||||
, autofocus : Bool
|
|
||||||
, noMarginTop : Bool
|
|
||||||
, css : List (List Css.Style)
|
|
||||||
, id : Maybe String
|
|
||||||
, custom : List (Html.Attribute msg)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
type ErrorState
|
|
||||||
= NoError
|
|
||||||
| Error { message : Maybe String }
|
|
||||||
|
|
||||||
|
|
||||||
emptyConfig : Config msg
|
|
||||||
emptyConfig =
|
|
||||||
{ inputStyle = InputStyles.Standard
|
|
||||||
, error = NoError
|
|
||||||
, disabled = False
|
|
||||||
, loading = False
|
|
||||||
, hideLabel = False
|
|
||||||
, placeholder = Nothing
|
|
||||||
, onBlur = Nothing
|
|
||||||
, onReset = Nothing
|
|
||||||
, onEnter = Nothing
|
|
||||||
, autofocus = False
|
|
||||||
, id = Nothing
|
|
||||||
, noMarginTop = False
|
|
||||||
, css = []
|
|
||||||
, custom = []
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
{-| Render the TextInput as HTML.
|
|
||||||
The input's label, InputType, and current value are all required. Other attributes are all optional.
|
|
||||||
-}
|
|
||||||
view : String -> InputType value msg -> List (Attribute msg) -> value -> Html msg
|
|
||||||
view label inputType attributes currentValue =
|
|
||||||
let
|
|
||||||
config =
|
|
||||||
List.foldl (\(Attribute update) -> update) emptyConfig attributes
|
|
||||||
in
|
|
||||||
view_ label inputType config currentValue
|
|
||||||
|
|
||||||
|
|
||||||
{-| Uses the "Writing" input style. See [`Nri.Ui.InputStyles.V2.Theme`](Nri-Ui-InputStyles-V2#Theme).
|
|
||||||
-}
|
|
||||||
writing : Attribute msg
|
|
||||||
writing =
|
|
||||||
Attribute <|
|
|
||||||
\config -> { config | inputStyle = InputStyles.Writing }
|
|
||||||
|
|
||||||
|
|
||||||
view_ : String -> InputType value msg -> Config msg -> value -> Html msg
|
|
||||||
view_ label (InputType inputType) config currentValue =
|
|
||||||
let
|
|
||||||
idValue =
|
|
||||||
case config.id of
|
|
||||||
Just id_ ->
|
|
||||||
id_
|
|
||||||
|
|
||||||
Nothing ->
|
|
||||||
generateId label
|
|
||||||
|
|
||||||
placeholder_ =
|
|
||||||
config.placeholder
|
|
||||||
|> Maybe.withDefault label
|
|
||||||
|
|
||||||
( isInError, errorMessage_ ) =
|
|
||||||
case config.error of
|
|
||||||
NoError ->
|
|
||||||
( False, Nothing )
|
|
||||||
|
|
||||||
Error { message } ->
|
|
||||||
( True, message )
|
|
||||||
|
|
||||||
( opacity, disabled_ ) =
|
|
||||||
case ( config.disabled, config.loading ) of
|
|
||||||
( False, False ) ->
|
|
||||||
( num 1, False )
|
|
||||||
|
|
||||||
( False, True ) ->
|
|
||||||
( num 0.5, True )
|
|
||||||
|
|
||||||
( True, _ ) ->
|
|
||||||
( num 0.4, True )
|
|
||||||
|
|
||||||
maybeStep =
|
|
||||||
if inputType.fieldType == "number" then
|
|
||||||
[ step "any" ]
|
|
||||||
|
|
||||||
else
|
|
||||||
[]
|
|
||||||
|
|
||||||
maybeAttr attr maybeValue =
|
|
||||||
maybeValue
|
|
||||||
|> Maybe.map attr
|
|
||||||
|> Maybe.withDefault Extra.none
|
|
||||||
|
|
||||||
stringValue =
|
|
||||||
inputType.toString currentValue
|
|
||||||
|
|
||||||
onEnter_ : msg -> Html.Attribute msg
|
|
||||||
onEnter_ msg =
|
|
||||||
(\event ->
|
|
||||||
case event.key of
|
|
||||||
Just "Enter" ->
|
|
||||||
Just msg
|
|
||||||
|
|
||||||
_ ->
|
|
||||||
Nothing
|
|
||||||
)
|
|
||||||
|> Keyboard.Event.considerKeyboardEvent
|
|
||||||
|> Events.on "keydown"
|
|
||||||
in
|
|
||||||
div
|
|
||||||
([ Attributes.css
|
|
||||||
[ position relative
|
|
||||||
, Css.opacity opacity
|
|
||||||
]
|
|
||||||
]
|
|
||||||
++ List.map Attributes.css (List.reverse config.css)
|
|
||||||
)
|
|
||||||
[ input
|
|
||||||
(maybeStep
|
|
||||||
++ List.reverse config.custom
|
|
||||||
++ [ Attributes.id idValue
|
|
||||||
, Attributes.css
|
|
||||||
[ InputStyles.input config.inputStyle isInError
|
|
||||||
, if config.inputStyle == InputStyles.Writing then
|
|
||||||
Css.Global.withClass "override-sass-styles"
|
|
||||||
[ textAlign center
|
|
||||||
, Css.height Css.auto
|
|
||||||
]
|
|
||||||
|
|
||||||
else
|
|
||||||
Css.Global.withClass "override-sass-styles"
|
|
||||||
[ Css.height (px 45)
|
|
||||||
]
|
|
||||||
, Css.pseudoElement "-webkit-search-cancel-button"
|
|
||||||
[ Css.display Css.none ]
|
|
||||||
, if config.noMarginTop then
|
|
||||||
Css.important (Css.marginTop Css.zero)
|
|
||||||
|
|
||||||
else
|
|
||||||
Css.batch []
|
|
||||||
]
|
|
||||||
, Attributes.placeholder placeholder_
|
|
||||||
, value stringValue
|
|
||||||
, Attributes.disabled disabled_
|
|
||||||
, onInput inputType.fromString
|
|
||||||
, maybeAttr Events.onBlur config.onBlur
|
|
||||||
, Attributes.autofocus config.autofocus
|
|
||||||
, type_ inputType.fieldType
|
|
||||||
, maybeAttr (attribute "inputmode") inputType.inputMode
|
|
||||||
, maybeAttr (attribute "autocomplete") inputType.autocomplete
|
|
||||||
, maybeAttr onEnter_ config.onEnter
|
|
||||||
, class "override-sass-styles"
|
|
||||||
, Attributes.attribute "aria-invalid" <|
|
|
||||||
if isInError then
|
|
||||||
"true"
|
|
||||||
|
|
||||||
else
|
|
||||||
"false"
|
|
||||||
]
|
|
||||||
)
|
|
||||||
[]
|
|
||||||
, let
|
|
||||||
extraStyles =
|
|
||||||
if config.hideLabel then
|
|
||||||
Accessibility.invisible
|
|
||||||
|
|
||||||
else
|
|
||||||
[]
|
|
||||||
in
|
|
||||||
Html.label
|
|
||||||
([ for idValue
|
|
||||||
, Attributes.css
|
|
||||||
[ InputStyles.label config.inputStyle isInError
|
|
||||||
, if config.noMarginTop then
|
|
||||||
Css.top (Css.px -9)
|
|
||||||
|
|
||||||
else
|
|
||||||
Css.batch []
|
|
||||||
]
|
|
||||||
]
|
|
||||||
++ extraStyles
|
|
||||||
)
|
|
||||||
[ Html.text label ]
|
|
||||||
, case ( config.onReset, stringValue, inputType.fieldType ) of
|
|
||||||
( Just _, "", "search" ) ->
|
|
||||||
UiIcon.search
|
|
||||||
|> Svg.withWidth (Css.px 20)
|
|
||||||
|> Svg.withHeight (Css.px 20)
|
|
||||||
|> Svg.withColor Colors.gray75
|
|
||||||
|> Svg.withCss
|
|
||||||
[ Css.position Css.absolute
|
|
||||||
, Css.right (Css.px 10)
|
|
||||||
, Css.top (Css.px 22)
|
|
||||||
]
|
|
||||||
|> Svg.toHtml
|
|
||||||
|
|
||||||
( Just resetAction, _, _ ) ->
|
|
||||||
ClickableSvg.button ("Reset " ++ label)
|
|
||||||
UiIcon.x
|
|
||||||
[ ClickableSvg.onClick resetAction
|
|
||||||
, ClickableSvg.exactWidth 14
|
|
||||||
, ClickableSvg.exactHeight 14
|
|
||||||
, ClickableSvg.css
|
|
||||||
[ Css.position Css.absolute
|
|
||||||
, Css.right (Css.px 10)
|
|
||||||
, Css.top (Css.px 25)
|
|
||||||
]
|
|
||||||
]
|
|
||||||
|
|
||||||
( Nothing, _, _ ) ->
|
|
||||||
Html.text ""
|
|
||||||
, case errorMessage_ of
|
|
||||||
Just m ->
|
|
||||||
Message.view
|
|
||||||
[ Message.tiny
|
|
||||||
, Message.error
|
|
||||||
, Message.plaintext m
|
|
||||||
, Message.alertRole
|
|
||||||
]
|
|
||||||
|
|
||||||
Nothing ->
|
|
||||||
Html.text ""
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
{-| Gives you the DOM element id that will be used by a `TextInput.view` with the given label.
|
|
||||||
This is for use when you need the DOM element id for use in javascript (such as trigger an event to focus a particular text input)
|
|
||||||
-}
|
|
||||||
generateId : String -> String
|
|
||||||
generateId labelText =
|
|
||||||
"Nri-Ui-TextInput-" ++ dashify labelText
|
|
||||||
@ -55,7 +55,6 @@
|
|||||||
"Nri.Ui.Text.V6",
|
"Nri.Ui.Text.V6",
|
||||||
"Nri.Ui.Text.Writing.V1",
|
"Nri.Ui.Text.Writing.V1",
|
||||||
"Nri.Ui.TextArea.V4",
|
"Nri.Ui.TextArea.V4",
|
||||||
"Nri.Ui.TextInput.V6",
|
|
||||||
"Nri.Ui.TextInput.V7",
|
"Nri.Ui.TextInput.V7",
|
||||||
"Nri.Ui.Tooltip.V1",
|
"Nri.Ui.Tooltip.V1",
|
||||||
"Nri.Ui.Tooltip.V2",
|
"Nri.Ui.Tooltip.V2",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user