NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-11 06:31:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

onToggle -> toggle

Browse Source
This commit is contained in:
Tessa Kelly 2021-02-10 16:02:38 -08:00
parent 06242c36f2
commit 643d0a0bc4
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Nri/Ui/Menu/V2.elm
View File

@ -6,7 +6,13 @@ module Nri.Ui.Menu.V2 exposing
, Entry, group, none, entry , Entry, group, none, entry
) )
{-| A togglable menu view and related buttons. {-| Changes from V1:
- Improves keyboard support
- adds `focus` to configuration
- renames `onToggle` to `toggle` (just for consistency)
A togglable menu view and related buttons.
<https://zpl.io/a75OrE2> <https://zpl.io/a75OrE2>
@ -96,7 +102,7 @@ type Alignment
- `icon`: display a particular icon to the left of the title - `icon`: display a particular icon to the left of the title
- `entries`: the entries of the menu - `entries`: the entries of the menu
- `title`: the text to display in the menu button - `title`: the text to display in the menu button
- `onToggle`: a message to trigger when then menu wants to invert its open state - `toggle`: a message to trigger when then menu wants to invert its open state
- `focus`: a message to control the focus in the DOM, takes an HTML id string - `focus`: a message to control the focus in the DOM, takes an HTML id string
- `hasBorder`: whether the menu button has a border - `hasBorder`: whether the menu button has a border
- `alignment`: where the menu popover should appear relative to the button - `alignment`: where the menu popover should appear relative to the button
@ -111,7 +117,7 @@ view :
, entries : List (Entry msg) , entries : List (Entry msg)
, title : String , title : String
, isOpen : Bool , isOpen : Bool
, onToggle : Bool -> msg , toggle : Bool -> msg
, focus : String -> msg , focus : String -> msg
, hasBorder : Bool , hasBorder : Bool
, alignment : Alignment , alignment : Alignment
@ -133,7 +139,7 @@ view config =
div (Attributes.id config.id :: styleContainer) div (Attributes.id config.id :: styleContainer)
[ if config.isOpen then [ if config.isOpen then
div div
(onClick (config.onToggle False) (onClick (config.toggle False)
:: class "Nri-Menu-Overlay" :: class "Nri-Menu-Overlay"
:: styleOverlay :: styleOverlay
) )
@ -169,7 +175,7 @@ view config =
else else
[] []
] ]
, onClick <| config.onToggle (not config.isOpen) , onClick <| config.toggle (not config.isOpen)
, Attributes.disabled config.isDisabled , Attributes.disabled config.isDisabled
, Widget.disabled config.isDisabled , Widget.disabled config.isDisabled
, Widget.hasMenuPopUp , Widget.hasMenuPopUp
@ -372,7 +378,7 @@ iconButton config =
- `onShowTooltip`: the message for toggling the tooltip - `onShowTooltip`: the message for toggling the tooltip
- `entries`: the entries of the menu - `entries`: the entries of the menu
- `isOpen`: whether the menu is opened - `isOpen`: whether the menu is opened
- `onToggle`: a message to trigger when then menu wants to invert its open state - `toggle`: a message to trigger when then menu wants to invert its open state
- `alignment`: where the menu popover should appear relative to the button - `alignment`: where the menu popover should appear relative to the button
- `isDisabled`: whether the menu can be openned - `isDisabled`: whether the menu can be openned
- `id`: a unique string id for the menu elements - `id`: a unique string id for the menu elements
@ -386,7 +392,7 @@ iconButtonWithMenu :
, onShowTooltip : Bool -> msg , onShowTooltip : Bool -> msg
, entries : List (Entry msg) , entries : List (Entry msg)
, isOpen : Bool , isOpen : Bool
, onToggle : Bool -> msg , toggle : Bool -> msg
, alignment : Alignment , alignment : Alignment
, isDisabled : Bool , isDisabled : Bool
, menuWidth : Maybe Int , menuWidth : Maybe Int
@ -404,7 +410,7 @@ iconButtonWithMenu config =
div (Attributes.id config.id :: styleContainer) div (Attributes.id config.id :: styleContainer)
[ if config.isOpen then [ if config.isOpen then
div div
(onClick (config.onToggle False) (onClick (config.toggle False)
:: Attributes.class "Nri-Menu-Overlay" :: Attributes.class "Nri-Menu-Overlay"
:: styleOverlay :: styleOverlay
) )
@ -417,7 +423,7 @@ iconButtonWithMenu config =
{ icon = config.icon { icon = config.icon
, isDisabled = config.isDisabled , isDisabled = config.isDisabled
, label = config.label , label = config.label
, onClick = config.onToggle (not config.isOpen) , onClick = config.toggle (not config.isOpen)
, isTooltipOpen = config.isTooltipOpen , isTooltipOpen = config.isTooltipOpen
, onShowTooltip = config.onShowTooltip , onShowTooltip = config.onShowTooltip
, id = buttonId , id = buttonId

4
styleguide-app/Examples/Menu.elm
View File

@ -73,7 +73,7 @@ view state =
, viewControl SetViewConfiguration state.viewConfiguration , viewControl SetViewConfiguration state.viewConfiguration
, Menu.view , Menu.view
{ isOpen = isOpen "1stPeriodEnglish" { isOpen = isOpen "1stPeriodEnglish"
, onToggle = menuToggler "1stPeriodEnglish" , toggle = menuToggler "1stPeriodEnglish"
, focus = Focus , focus = Focus
, id = "1stPeriodEnglish" , id = "1stPeriodEnglish"
, title = "1st Period English with Mx. Trainer" , title = "1st Period English with Mx. Trainer"
@ -110,7 +110,7 @@ view state =
, id = "icon-button-with-menu" , id = "icon-button-with-menu"
, label = "Menu.iconButtonWithMenu: Click me!" , label = "Menu.iconButtonWithMenu: Click me!"
, isOpen = isOpen "icon-button-with-menu" , isOpen = isOpen "icon-button-with-menu"
, onToggle = menuToggler "icon-button-with-menu" , toggle = menuToggler "icon-button-with-menu"
, icon = iconButtonWithMenuConfiguration.icon , icon = iconButtonWithMenuConfiguration.icon
, alignment = iconButtonWithMenuConfiguration.alignment , alignment = iconButtonWithMenuConfiguration.alignment
, isDisabled = iconButtonWithMenuConfiguration.isDisabled , isDisabled = iconButtonWithMenuConfiguration.isDisabled