NoRedInk/noredink-ui/24.9.0

NOTE: the latest version is 35.9.3

Nri.Ui.Menu.V4

Patch changes:

  • improve interoperability with Tooltip (Note that tooltip keyboard events are not fully supported!)
  • Use Nri.Ui.WhenFocusLeaves.V2

Changes from V3:

  • improve composability with Button, ClickableText, and ClickableSvg

A togglable menu view and related buttons.

https://zpl.io/a75OrE2

( { isOpen : Bool
, focus : Maybe String
}
-> msg
)
-> List (Attribute msg)
-> List (Entry msg)
-> Html msg

Menu/pulldown configuration:

  • focusAndToggle: the message produced to control the open/closed state and DOM focus
  • attributes: List of (attributes)[#menu-attributes] to apply to the menu.
  • entries: the entries of the menu
type Attribute msg
isOpen : Bool -> Attribute msg

Whether the menu is open

isDisabled : Bool -> Attribute msg

Whether the menu can be opened

opensOnHover : Bool -> Attribute msg

Whether the menu will be opened/closed by mouseEnter and mouseLeave interaction. Defaults to False.

Triggering button options

defaultTrigger : String -> List (Attribute msg) -> Attribute msg

Use Button with default styles as the triggering element for the Menu.

button : String -> List (Attribute msg) -> Attribute msg

Use Button as the triggering element for the Menu.

clickableText : String -> List (Attribute msg) -> Attribute msg

Use ClickableText as the triggering element for the Menu.

clickableSvg : String -> Svg -> List (Attribute msg) -> Attribute msg

Use ClickableSvg as the triggering element for the Menu.

clickableSvgWithoutIndicator : String -> Svg -> List (Attribute msg) -> Attribute msg

Use ClickableSvg as the triggering element for the Menu without a dropdown indicator

withTooltip : List (Attribute msg) -> Attribute msg

Warning: Tooltip keyboard events are not fully supported!

buttonId : String -> Attribute msg

A unique string identifier for the button that opens/closes the menu

disclosure : { lastId : String } -> Attribute msg

Makes the menu behave as a disclosure.

For more information, please read Disclosure (Show/Hide) pattern.

You will need to pass in the last focusable element in the disclosed content in order for:

  • any focusable elements in the disclosed content to be keyboard accessible
  • the disclosure to close appropriately when the user tabs past all of the disclosed content
{ firstId : String
, lastId : String
}
-> Attribute msg

Makes the menu behave as a dialog.

For more information, please read Dialog pattern.

You will need to pass in the first and last focusable element in the dialog content in order for:

  • any focusable elements in the dialog content to be keyboard accessible
  • the tab to wrap around appropriately when the user tabs past all of the dialog content

Align the menu popover on the left side of the triggering button.

Align the menu popover on the right side of the triggering button.

Right (this property) is the default behavior.

type Entry msg

Represents zero or more entries within the menu content

group : String -> List (Entry msg) -> Entry msg

Represents a group of entries with a named legend.

entry : String -> (List (Attribute msg) -> Html msg) -> Entry msg

Represents a single focusable entry.

Pass in the id you'd like for your menu item, which will be used to manage the focus.

Menu.entry "my-button-id"
    (\attributes -> Button.button "One great button" [ Button.custom attributes ])

Modules