mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 19:21:29 +03:00
d4d6991643
tl;dr; Use a class for each variant instead of overriding one variant.
Before, we relied on CSS specificity in an unclear way.
The `Focused` class was applying properly because it was ordered later
than the `Tab` class in the stylesheet.
The ordering that is important is the ordering in `styles` value.
Since `elm-css` generates the stylesheet in the order of the lists,
the `Focused` rule would be generated after the `Tab` rule.
Meaning the `Focused` rule would take precedence over the `Tab` rule
if an element had both classes as it was defined later in the stylesheet.
There are some concerns with this approach:
1. It's not readily apparent that the ordering in `styles` is important.
It is pretty easy to change the ordering of the list
and have it break the styling.
2. We rely on `elm-css` to generate the stylesheet in a specific order.
If it changes the order of rules it generates,
we're almost surely going to break the styling.
3. Altering styles for tabs that are not focused is even less intuitive.
Since the specificity is the same,
you might not know why a given rule applies (or doesn't apply).
Rather, we can eschew the specificity/precedence issues
by applying a different class to each tab.
The stuff that is the same can stay on the `Tab` class,
and the stuff that differs can be on different classes.
We are now able to set the background color for `Unfocused` tabs.
We were relying on the control being placed atop a white background.
When we moved to using the control atop a non-whitebackground,
it showed that the `Unfocused` tabs had a transparent backround.
All of our designs show `Unfocused` tabs with a white backround.
See https://github.com/NoRedInk/noredink-ui/pull/14 for more information.
133 lines
3.8 KiB
Elm
133 lines
3.8 KiB
Elm
module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, styles, subscriptions, update)
|
|
|
|
import Assets exposing (assets)
|
|
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
|
import Examples.Colors
|
|
import Examples.Fonts
|
|
import Examples.Icon
|
|
import Examples.SegmentedControl
|
|
import Examples.Text
|
|
import Examples.Text.Writing
|
|
import Examples.TextArea as TextAreaExample
|
|
import Html exposing (Html, img)
|
|
import Html.Attributes exposing (..)
|
|
import ModuleExample exposing (Category(..), ModuleExample)
|
|
import Navigation
|
|
import Nri.Ui.AssetPath as AssetPath exposing (Asset(Asset))
|
|
import Nri.Ui.Icon.V2
|
|
import Nri.Ui.SegmentedControl.V5
|
|
import Nri.Ui.Text.V1 as Text
|
|
import Nri.Ui.TextArea.V1 as TextArea
|
|
import String.Extra
|
|
|
|
|
|
type alias ModuleStates =
|
|
{ segmentedControlState : Examples.SegmentedControl.State
|
|
, textAreaExampleState : TextAreaExample.State
|
|
}
|
|
|
|
|
|
init : ModuleStates
|
|
init =
|
|
{ segmentedControlState = Examples.SegmentedControl.init
|
|
, textAreaExampleState = TextAreaExample.init
|
|
}
|
|
|
|
|
|
type Msg
|
|
= SegmentedControlMsg Examples.SegmentedControl.Msg
|
|
| ShowItWorked String String
|
|
| TextAreaExampleMsg TextAreaExample.Msg
|
|
| NoOp
|
|
|
|
|
|
update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg )
|
|
update msg moduleStates =
|
|
case msg of
|
|
SegmentedControlMsg msg ->
|
|
let
|
|
( segmentedControlState, cmd ) =
|
|
Examples.SegmentedControl.update msg moduleStates.segmentedControlState
|
|
in
|
|
( { moduleStates | segmentedControlState = segmentedControlState }
|
|
, Cmd.map SegmentedControlMsg cmd
|
|
)
|
|
|
|
ShowItWorked group message ->
|
|
let
|
|
_ =
|
|
Debug.log group message
|
|
in
|
|
( moduleStates, Cmd.none )
|
|
|
|
TextAreaExampleMsg msg ->
|
|
let
|
|
( textAreaExampleState, cmd ) =
|
|
TextAreaExample.update msg moduleStates.textAreaExampleState
|
|
in
|
|
( { moduleStates | textAreaExampleState = textAreaExampleState }
|
|
, Cmd.map TextAreaExampleMsg cmd
|
|
)
|
|
|
|
NoOp ->
|
|
( moduleStates, Cmd.none )
|
|
|
|
|
|
subscriptions : ModuleStates -> Sub Msg
|
|
subscriptions moduleStates =
|
|
Sub.batch
|
|
[]
|
|
|
|
|
|
{-| A container with a visually-apparent size for demonstrating how style guide components
|
|
fill their parents.
|
|
-}
|
|
container : Int -> List (Html msg) -> Html msg
|
|
container width children =
|
|
Html.div
|
|
[ Html.Attributes.class "demo-container"
|
|
, style [ ( "width", toString width ++ "px" ) ]
|
|
]
|
|
children
|
|
|
|
|
|
nriThemedModules : ModuleStates -> List (ModuleExample Msg)
|
|
nriThemedModules model =
|
|
[ Examples.Icon.example
|
|
, Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState
|
|
, Examples.Text.example
|
|
, Examples.Text.Writing.example
|
|
, Examples.Fonts.example
|
|
, TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState
|
|
, Examples.Colors.example
|
|
]
|
|
|
|
|
|
exampleMessages : (msg -> Msg) -> String -> ModuleExample.ModuleMessages msg Msg
|
|
exampleMessages exampleMessageWrapper exampleName =
|
|
{ noOp = NoOp
|
|
, showItWorked = ShowItWorked exampleName
|
|
, wrapper = exampleMessageWrapper
|
|
}
|
|
|
|
|
|
route : Navigation.Location -> Maybe String
|
|
route location =
|
|
location.hash
|
|
|> String.dropLeft 1
|
|
|> String.Extra.nonEmpty
|
|
|
|
|
|
styles : List Stylesheet
|
|
styles =
|
|
List.concat
|
|
[ -- NOTE: these will go away as the modules' styles are integrated with Nri.Css.Site.elm
|
|
[ ModuleExample.styles
|
|
]
|
|
, (Examples.Icon.styles |> .css) ()
|
|
, (Nri.Ui.Icon.V2.styles |> .css) ()
|
|
, (Nri.Ui.SegmentedControl.V5.styles |> .css) ()
|
|
, (Text.styles |> .css) ()
|
|
, (TextArea.styles |> .css) assets
|
|
]
|