From c5155ca40844d51c0b5e4bb3ef704faa090bc176 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 10 Feb 2021 17:30:44 -0800 Subject: [PATCH] Make the menu more generic: move the tooltip and clickable svg stuff to an example --- src/Nri/Ui/Menu/V2.elm | 72 +++++--------------------------- styleguide-app/Examples/Menu.elm | 52 ++++++++++++++++------- 2 files changed, 46 insertions(+), 78 deletions(-) diff --git a/src/Nri/Ui/Menu/V2.elm b/src/Nri/Ui/Menu/V2.elm index 85479c3d..2e5678d8 100644 --- a/src/Nri/Ui/Menu/V2.elm +++ b/src/Nri/Ui/Menu/V2.elm @@ -1,6 +1,6 @@ module Nri.Ui.Menu.V2 exposing ( view, Alignment(..), TitleWrapping(..) - , iconButtonWithMenu + , viewCustom , Entry, group, none, entry ) @@ -10,10 +10,8 @@ module Nri.Ui.Menu.V2 exposing - adds `focus` to configuration - renames `onToggle` to `toggle` (just for consistency) - remove `iconButton` and `iconLink` (use ClickableSvg instead) - - use ClickableSvg for the iconButtonWithMenu helper - - use Tooltip.V2 instead of Tooltip.V1 - - change which id you pass in to the component (it's more useful to have a focusable element's id outside the component) - - explicitly pass in a buttonId and a menuId + - replace iconButtonWithMenu helper with a custom helper + - explicitly pass in a buttonId and a menuId (instead of the container id) - when wrapping the menu title, use the title in the description rather than an HTML id string A togglable menu view and related buttons. @@ -24,7 +22,7 @@ A togglable menu view and related buttons. ## Menu buttons @docs view, Alignment, TitleWrapping -@docs iconButtonWithMenu +@docs viewCustom ## Menu content @@ -43,13 +41,11 @@ import Html.Styled as Html exposing (..) import Html.Styled.Attributes as Attributes exposing (class, classList, css) import Html.Styled.Events as Events import Json.Decode -import Nri.Ui.ClickableSvg.V2 as ClickableSvg import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 import Nri.Ui.Html.Attributes.V2 as AttributesExtra import Nri.Ui.Html.V3 exposing (viewJust) import Nri.Ui.Svg.V1 as Svg exposing (Svg) -import Nri.Ui.Tooltip.V2 as Tooltip import Nri.Ui.UiIcon.V1 as UiIcon import String.Extra @@ -136,7 +132,7 @@ view : } -> Html msg view config = - viewMenu config <| + viewCustom config <| \buttonAttributes -> Html.button ([ classList [ ( "ToggleButton", True ), ( "WithBorder", config.hasBorder ) ] @@ -283,67 +279,19 @@ viewEntry entry_ = Html.text "" -{-| Configure the icon button & menu +{-| - - `icon`: the icon - - `label`: the text to display in the tooltip - - `isTooltipOpen`: whether the tooltip is open when hovering over the icon - - `onShowTooltip`: the message for toggling the tooltip - `entries`: the entries of the menu - - `isOpen`: whether the menu is opened - `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 - `alignment`: where the menu popover should appear relative to the button - `isDisabled`: whether the menu can be openned - `menuWidth` : optionally fix the width of the popover - - `buttonId`: a unique string id for the menu elements - - `menuId`: a unique string identifier for the men + - `buttonId`: a unique string identifier for the button that opens/closes the menu + - `menuId`: a unique string identifier for the menu -} -iconButtonWithMenu : - { icon : Svg.Svg - , label : String - , isTooltipOpen : Bool - , onShowTooltip : Bool -> msg - , entries : List (Entry msg) - , isOpen : Bool - , toggle : Bool -> msg - , focus : String -> msg - , alignment : Alignment - , isDisabled : Bool - , menuWidth : Maybe Int - , buttonId : String - , menuId : String - } - -> Html msg -iconButtonWithMenu config = - viewMenu config <| - \buttonAttributes -> - Tooltip.view - { trigger = - \attrs -> - ClickableSvg.button config.label - config.icon - [ ClickableSvg.disabled config.isDisabled - , ClickableSvg.custom (attrs ++ buttonAttributes) - , ClickableSvg.exactWidth 25 - , ClickableSvg.exactHeight 25 - , ClickableSvg.css [ Css.marginLeft (Css.px 10) ] - ] - , id = config.buttonId ++ "-tooltip" - } - [ Tooltip.plaintext config.label - , Tooltip.primaryLabel - , Tooltip.onHover config.onShowTooltip - , Tooltip.open config.isTooltipOpen - , Tooltip.smallPadding - , Tooltip.fitToContent - , Tooltip.containerCss [ display inlineBlock, position relative ] - ] - - -{-| -} -viewMenu : +viewCustom : { config | entries : List (Entry msg) , isOpen : Bool @@ -357,7 +305,7 @@ viewMenu : } -> (List (Attribute msg) -> Html msg) -> Html msg -viewMenu config content = +viewCustom config content = div (Attributes.id (config.buttonId ++ "__container") :: Key.onKeyDown [ Key.escape (config.toggle False) ] diff --git a/styleguide-app/Examples/Menu.elm b/styleguide-app/Examples/Menu.elm index 103295c2..9a504039 100644 --- a/styleguide-app/Examples/Menu.elm +++ b/styleguide-app/Examples/Menu.elm @@ -15,10 +15,12 @@ import Debug.Control as Control exposing (Control) import Example exposing (Example) import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Direction(..), Key(..)) +import Nri.Ui.ClickableSvg.V2 as ClickableSvg import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Menu.V2 as Menu import Nri.Ui.Svg.V1 as Svg exposing (Svg) +import Nri.Ui.Tooltip.V2 as Tooltip import Nri.Ui.UiIcon.V1 as UiIcon import Set exposing (Set) import Task @@ -57,8 +59,8 @@ view state = viewConfiguration = Control.currentValue state.viewConfiguration - iconButtonWithMenuConfiguration = - Control.currentValue state.iconButtonWithMenuConfiguration + viewCustomConfiguration = + Control.currentValue state.viewCustomConfiguration isOpen name = case state.openMenu of @@ -103,23 +105,41 @@ view state = ] , div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ] - [ Html.h3 [ css [ Css.width (Css.pct 100) ] ] [ Html.text "Nri.Menu.iconButtonWithMenu" ] - , viewControl SetIconButtonWithMenuConfiguration state.iconButtonWithMenuConfiguration - , Menu.iconButtonWithMenu - { isTooltipOpen = Set.member "iconButtonWithMenu" state.openTooltips - , onShowTooltip = ShowTooltip "iconButtonWithMenu" - , buttonId = "icon-button-with-menu__button" + [ Html.h3 [ css [ Css.width (Css.pct 100) ] ] [ Html.text "Nri.Menu.viewCustom" ] + , viewControl SetIconButtonWithMenuConfiguration state.viewCustomConfiguration + , Menu.viewCustom + { buttonId = "icon-button-with-menu__button" , menuId = "icon-button-with-menu__menu" - , label = "Menu.iconButtonWithMenu: Click me!" , isOpen = isOpen "icon-button-with-menu" , toggle = menuToggler "icon-button-with-menu" , focus = Focus - , icon = iconButtonWithMenuConfiguration.icon - , alignment = iconButtonWithMenuConfiguration.alignment - , isDisabled = iconButtonWithMenuConfiguration.isDisabled - , menuWidth = iconButtonWithMenuConfiguration.menuWidth + , alignment = viewCustomConfiguration.alignment + , isDisabled = viewCustomConfiguration.isDisabled + , menuWidth = viewCustomConfiguration.menuWidth , entries = [] } + <| + \buttonAttributes -> + Tooltip.view + { trigger = + \attrs -> + ClickableSvg.button "Menu.viewCustom: Click me!" + viewCustomConfiguration.icon + [ ClickableSvg.disabled viewCustomConfiguration.isDisabled + , ClickableSvg.custom (attrs ++ buttonAttributes) + , ClickableSvg.exactWidth 25 + , ClickableSvg.exactHeight 25 + , ClickableSvg.css [ Css.marginLeft (Css.px 10) ] + ] + , id = "viewCustom-example-tooltip" + } + [ Tooltip.plaintext "Menu.viewCustom: Click me!" + , Tooltip.primaryLabel + , Tooltip.onHover (ShowTooltip "viewCustom") + , Tooltip.open (Set.member "viewCustom" state.openTooltips) + , Tooltip.smallPadding + , Tooltip.fitToContent + ] ] ] @@ -140,7 +160,7 @@ init = , checkboxChecked = False , openTooltips = Set.empty , viewConfiguration = initViewConfiguration - , iconButtonWithMenuConfiguration = initIconButtonWithMenuConfiguration + , viewCustomConfiguration = initIconButtonWithMenuConfiguration } @@ -150,7 +170,7 @@ type alias State = , checkboxChecked : Bool , openTooltips : Set String , viewConfiguration : Control ViewConfiguration - , iconButtonWithMenuConfiguration : Control IconButtonWithMenuConfiguration + , viewCustomConfiguration : Control IconButtonWithMenuConfiguration } @@ -268,7 +288,7 @@ update msg state = ( { state | viewConfiguration = configuration }, Cmd.none ) SetIconButtonWithMenuConfiguration configuration -> - ( { state | iconButtonWithMenuConfiguration = configuration }, Cmd.none ) + ( { state | viewCustomConfiguration = configuration }, Cmd.none ) Focus idString -> ( state, Task.attempt Focused (Dom.focus idString) )