Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔧 supporting different width behaviors for breakpoints #1287

Merged
merged 14 commits into from
Feb 22, 2023
Merged

🔧 supporting different width behaviors for breakpoints #1287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1d57f61
Adds new helpers for mobile width (unused and not implemented)
tesk9 Feb 17, 2023
182b91b
Begin setting up for separation of interactive section from non-inter…
tesk9 Feb 17, 2023
3f5920e
Make the table totally un-customizable
tesk9 Feb 21, 2023
50aff24
Re-add customizable example
tesk9 Feb 21, 2023
8e20ffc
Adds mobile width customization to component catalog example
tesk9 Feb 21, 2023
59380e4
Adds quiz engine mobile width customization to component catalog example
tesk9 Feb 21, 2023
6105ea2
Adds narrow mobile viewport width settings
tesk9 Feb 21, 2023
f3ccda8
Use a record for button style arguments
tesk9 Feb 21, 2023
a483c16
Pass more size information through to the size style helper
tesk9 Feb 21, 2023
fd7c537
Extract width style helper
tesk9 Feb 21, 2023
aeae07b
Add viewport-specific width style implementations
tesk9 Feb 21, 2023
d39045b
Adds customizable size and theme
tesk9 Feb 21, 2023
2d7081a
Improve the code rendering
tesk9 Feb 21, 2023
14038a6
Update docs
tesk9 Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 123 additions & 37 deletions component-catalog-app/Examples/Button.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V3 as Heading
import Nri.Ui.Spacing.V1 as Spacing
import Nri.Ui.UiIcon.V1 as UiIcon
import Set exposing (Set)

Expand Down Expand Up @@ -159,6 +161,14 @@ initDebugControls =
(ControlExtra.list
|> CommonControls.icon moduleName Button.icon
|> CommonControls.rightIcon moduleName Button.rightIcon
|> ControlExtra.optionalListItem "size"
(CommonControls.choice moduleName
[ ( "small", Button.small )
, ( "medium", Button.medium )
, ( "large", Button.large )
, ( "modal", Button.modal )
]
)
|> ControlExtra.optionalListItem "width"
(CommonControls.choice moduleName
[ ( "exactWidth 120", Button.exactWidth 120 )
Expand All @@ -168,6 +178,42 @@ initDebugControls =
, ( "fillContainerWidth", Button.fillContainerWidth )
]
)
|> ControlExtra.optionalListItem "mobile width"
(CommonControls.choice moduleName
[ ( "exactWidthForMobile 120", Button.exactWidthForMobile 120 )
, ( "exactWidthForMobile 70", Button.exactWidthForMobile 70 )
, ( "boundedWidthForMobile 100 180", Button.boundedWidthForMobile { min = 100, max = 180 } )
, ( "unboundedWidthForMobile", Button.unboundedWidthForMobile )
, ( "fillContainerWidthForMobile", Button.fillContainerWidthForMobile )
]
)
|> ControlExtra.optionalListItem "quiz engine mobile width"
(CommonControls.choice moduleName
[ ( "exactWidthForQuizEngineMobile 120", Button.exactWidthForQuizEngineMobile 120 )
, ( "exactWidthForQuizEngineMobile 70", Button.exactWidthForQuizEngineMobile 70 )
, ( "boundedWidthForQuizEngineMobile 100 180", Button.boundedWidthForQuizEngineMobile { min = 100, max = 180 } )
, ( "unboundedWidthForQuizEngineMobile", Button.unboundedWidthForQuizEngineMobile )
, ( "fillContainerWidthForQuizEngineMobile", Button.fillContainerWidthForQuizEngineMobile )
]
)
|> ControlExtra.optionalListItem "narrow mobile width"
(CommonControls.choice moduleName
[ ( "exactWidthForNarrowMobile 120", Button.exactWidthForNarrowMobile 120 )
, ( "exactWidthForNarrowMobile 70", Button.exactWidthForNarrowMobile 70 )
, ( "boundedWidthForNarrowMobile 100 180", Button.boundedWidthForNarrowMobile { min = 100, max = 180 } )
, ( "unboundedWidthForNarrowMobile", Button.unboundedWidthForNarrowMobile )
, ( "fillContainerWidthForNarrowMobile", Button.fillContainerWidthForNarrowMobile )
]
)
|> ControlExtra.optionalListItem "theme"
(CommonControls.choice moduleName
[ ( "primary", Button.primary )
, ( "secondary", Button.secondary )
, ( "tertiary", Button.tertiary )
, ( "danger", Button.danger )
, ( "premium", Button.premium )
]
)
|> ControlExtra.optionalBoolListItem "disabled" ( "disabled", Button.disabled )
|> ControlExtra.optionalListItem "state (button only)"
(CommonControls.choice moduleName
Expand Down Expand Up @@ -226,8 +272,7 @@ viewButtonExamples ellieLinkConfig state =
++ fName
++ " "
++ Code.string label
++ " "
++ Code.list (List.map Tuple.first attributes)
++ Code.listMultiline (List.map Tuple.first attributes) 1
in
[ { sectionName = "Button"
, code = toCode "button"
Expand All @@ -237,7 +282,16 @@ viewButtonExamples ellieLinkConfig state =
}
]
}
, buttons model
, Heading.h2
[ Heading.plaintext "Interactive example"
, Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ]
]
, viewCustomizableExample model
, Heading.h2
[ Heading.plaintext "Non-interactive examples"
, Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
]
, buttonsTable
, toggleButtons state.pressedToggleButtons
, Button.link "linkExternalWithTracking"
[ Button.unboundedWidth
Expand All @@ -251,8 +305,23 @@ viewButtonExamples ellieLinkConfig state =
|> div []


buttons : Model -> Html Msg
buttons model =
viewCustomizableExample : Model -> Html Msg
viewCustomizableExample model =
let
buttonOrLink =
case model.buttonType of
Link ->
Button.link

Button ->
Button.button
in
buttonOrLink model.label
(List.map Tuple.second model.attributes)


buttonsTable : Html msg
buttonsTable =
let
sizes =
[ ( Button.small, "small" )
Expand All @@ -268,52 +337,69 @@ buttons model =
, ( Button.premium, "premium" )
]

exampleRow ( style, styleName ) =
List.concat
[ [ td
[ css
[ verticalAlign middle
exampleRow styleTuple =
[ tr []
(td
[ css [ verticalAlign middle, Css.borderTop3 (Css.px 1) Css.solid Colors.gray85 ]
, Attributes.rowspan 2
]
[ code [] [ text (Code.fromModule moduleName (Tuple.second styleTuple)) ] ]
:: List.map
(exampleCell
[ Css.borderTop3 (Css.px 1) Css.solid Colors.gray85
, Css.paddingBottom Css.zero |> Css.important
]
]
[ text styleName ]
]
, List.map (Tuple.first >> exampleCell style) sizes
]
|> tr []

buttonOrLink =
case model.buttonType of
Link ->
Button.link
( Button.button, "button" )
styleTuple
)
sizes
++ [ td [ css [ verticalAlign middle, Css.borderTop3 (Css.px 1) Css.solid Colors.gray85 ] ]
[ code [] [ text "Button.button" ] ]
]
)
, tr []
(List.map (exampleCell [] ( Button.link, "link" ) styleTuple) sizes
++ [ td [ css [ verticalAlign middle ] ]
[ code [] [ text "Button.link" ] ]
]
)
]

Button ->
Button.button
exampleCell cellStyle ( view, viewName ) ( style, styleName ) ( setSize, sizeName ) =
inCell cellStyle <| view (sizeName ++ " " ++ styleName ++ " " ++ viewName) [ setSize, style ]

exampleCell setStyle setSize =
buttonOrLink model.label
(setSize :: setStyle :: List.map Tuple.second model.attributes)
|> List.singleton
|> td
[ css
[ verticalAlign middle
, Css.width (Css.px 200)
]
inCell style content =
td
[ css
[ verticalAlign middle
, Css.batch style
, Css.padding (Css.px 10)
]
]
[ content ]
in
List.concat
[ [ sizes
|> List.map (\( _, sizeName ) -> th [] [ text sizeName ])
|> List.map
(\( _, sizeName ) ->
th [ css [ Css.padding2 (Css.px 25) Css.zero ] ]
[ code [] [ text (Code.fromModule moduleName sizeName) ]
]
)
|> (\cells -> tr [] (th [] [] :: cells))
]
, List.map exampleRow styles
, List.concatMap exampleRow styles
]
|> table []
|> table [ css [ Css.borderCollapse Css.collapse ] ]


toggleButtons : Set Int -> Html Msg
toggleButtons pressedToggleButtons =
div []
[ Heading.h3 [ Heading.plaintext "Button toggle" ]
[ Heading.h2
[ Heading.plaintext "Button toggle"
, Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
]
, div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
[ Button.toggleButton
{ onDeselect = ToggleToggleButton 0
Expand Down
Loading