diff --git a/src/Nri/Ui/SortableTable/V2.elm b/src/Nri/Ui/SortableTable/V2.elm index 05b08504..e6905371 100644 --- a/src/Nri/Ui/SortableTable/V2.elm +++ b/src/Nri/Ui/SortableTable/V2.elm @@ -5,7 +5,10 @@ module Nri.Ui.SortableTable.V2 exposing , invariantSort, simpleSort, combineSorters ) -{-| +{-| TODO for next major version: + + - make sure the "sort" feature is fully accessible + - use Nri.Ui.UiIcon.V1 sortArrow and Nri.Ui.UiIcon.V1 sortArrowDown icons for the sort indicators @docs Column, Config, Sorter, State @docs init, initDescending diff --git a/src/Nri/Ui/UiIcon/V1.elm b/src/Nri/Ui/UiIcon/V1.elm index 70e905d9..7fc89007 100644 --- a/src/Nri/Ui/UiIcon/V1.elm +++ b/src/Nri/Ui/UiIcon/V1.elm @@ -1,5 +1,5 @@ module Nri.Ui.UiIcon.V1 exposing - ( seeMore, openClose, download, sort, gear, flipper, sortArrow + ( seeMore, openClose, download, sort, gear, flipper , archive, unarchive , playInCircle, pauseInCircle, stopInCircle, skip , share, preview, copyToClipboard, gift @@ -12,7 +12,7 @@ module Nri.Ui.UiIcon.V1 exposing , missingDocument, document, documents, newspaper, openBook, openBooks , edit, pen, highlighter , speechBalloon, mail - , arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick + , arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick, sortArrow, sortArrowDown , checkmark, checkmarkInCircle, x , attention, exclamation , flag, star, starFilled, starOutline @@ -29,7 +29,7 @@ module Nri.Ui.UiIcon.V1 exposing {-| How to add new icons: -@docs seeMore, openClose, download, sort, gear, flipper, sortArrow +@docs seeMore, openClose, download, sort, gear, flipper @docs archive, unarchive @docs playInCircle, pauseInCircle, stopInCircle, skip @docs share, preview, copyToClipboard, gift @@ -42,7 +42,7 @@ module Nri.Ui.UiIcon.V1 exposing @docs missingDocument, document, documents, newspaper, openBook, openBooks @docs edit, pen, highlighter @docs speechBalloon, mail -@docs arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick +@docs arrowTop, arrowRight, arrowDown, arrowLeft, arrowPointingRight, arrowPointingRightThick, sortArrow, sortArrowDown @docs checkmark, checkmarkInCircle, x @docs attention, exclamation @docs flag, star, starFilled, starOutline @@ -641,16 +641,30 @@ arrowPointingRight = |> Nri.Ui.Svg.V1.fromHtml +sortArrow_ : List (Svg.Attribute msg) -> Svg.Svg msg +sortArrow_ transforms = + Svg.svg + ([ Attributes.width "100%" + , Attributes.height "100%" + , Attributes.fill "currentcolor" + , Attributes.viewBox "0 0 8 6" + ] + ++ transforms + ) + [ Svg.polygon [ Attributes.points "0 6 4 0 8 6 0 6" ] [] ] + + {-| -} sortArrow : Nri.Ui.Svg.V1.Svg sortArrow = - Svg.svg - [ Attributes.width "100%" - , Attributes.height "100%" - , Attributes.fill "currentcolor" - , Attributes.viewBox "0 0 8 6" - ] - [ Svg.polygon [ Attributes.points "0 6 4 0 8 6 0 6" ] [] ] + sortArrow_ [] + |> Nri.Ui.Svg.V1.fromHtml + + +{-| -} +sortArrowDown : Nri.Ui.Svg.V1.Svg +sortArrowDown = + sortArrow_ [ Attributes.transform "rotate(180)" ] |> Nri.Ui.Svg.V1.fromHtml diff --git a/styleguide-app/Examples/Loading.elm b/styleguide-app/Examples/Loading.elm index 5708cc06..d18ad21e 100644 --- a/styleguide-app/Examples/Loading.elm +++ b/styleguide-app/Examples/Loading.elm @@ -91,7 +91,14 @@ example = , state = init , update = update , subscriptions = subscriptions - , preview = [] + , preview = + [ Loading.spinningDots + |> Svg.withCss + [ Css.property "animation-name" "none" |> Css.important + , Css.alignSelf Css.center + ] + |> Svg.toHtml + ] , view = \ellieLinkConfig { showLoadingFadeIn, showLoading, showSpinners } -> [ if showLoading then diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm index 994ef81e..c15dbf3e 100644 --- a/styleguide-app/Examples/SortableTable.elm +++ b/styleguide-app/Examples/SortableTable.elm @@ -7,10 +7,16 @@ module Examples.SortableTable exposing (Msg, State, example) -} import Category exposing (Category(..)) +import Css exposing (..) import Example exposing (Example) -import Html.Styled as Html +import Html.Styled as Html exposing (..) +import Html.Styled.Attributes exposing (css) +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.SortableTable.V2 as SortableTable +import Nri.Ui.Svg.V1 as Svg exposing (Svg) +import Nri.Ui.Table.V5 as Table +import Nri.Ui.UiIcon.V1 as UiIcon type Column @@ -39,7 +45,59 @@ example = , state = init , update = update , subscriptions = \_ -> Sub.none - , preview = [] + , preview = + let + header name = + div + [ css + [ Css.displayFlex + , Css.justifyContent Css.spaceBetween + , Css.alignItems Css.center + ] + ] + [ text name + , div + [ css + [ Css.displayFlex + , Css.flexDirection Css.column + , Css.marginTop (Css.px -4) + ] + ] + [ renderPreviewArrow UiIcon.sortArrow + , renderPreviewArrow UiIcon.sortArrowDown + ] + ] + + renderPreviewArrow : Svg -> Html msg + renderPreviewArrow arrow = + arrow + |> Svg.withColor Colors.gray75 + |> Svg.withWidth (Css.px 12) + |> Svg.withHeight (Css.px 12) + |> Svg.toHtml + in + [ Table.view + [ Table.custom + { header = header "X" + , view = .x >> Html.text + , width = px 50 + , cellStyles = always [] + } + , Table.custom + { header = header "Y" + , view = .y >> Html.text + , width = px 50 + , cellStyles = always [] + } + ] + [ { x = "Row 1 X" + , y = "Row 1 Y" + } + , { x = "Row 2 X" + , y = "Row 2 Y" + } + ] + ] , view = \ellieLinkConfig { sortState } -> let diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 95844786..4ae9841e 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -7,11 +7,15 @@ module Examples.TextArea exposing (Msg, State, example) -} import Category exposing (Category(..)) +import Css import Dict exposing (Dict) import Example exposing (Example) import Html.Styled as Html +import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Checkbox.V5 as Checkbox +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading +import Nri.Ui.InputStyles.V3 as InputStyles exposing (Theme(..)) import Nri.Ui.TextArea.V4 as TextArea @@ -42,7 +46,29 @@ example = , subscriptions = \_ -> Sub.none , categories = [ Inputs ] , keyboardSupport = [] - , preview = [] + , preview = + [ Html.div [ css [ Css.position Css.relative ] ] + [ Html.textarea + [ css + [ InputStyles.input Standard False + , Css.minHeight (Css.px 100) + , Css.maxWidth (Css.px 140) + , Css.backgroundColor Colors.white |> Css.important + , Css.cursor Css.pointer |> Css.important + , Css.resize Css.none + ] + , Attributes.class "override-sass-styles" + , Attributes.disabled True + , Attributes.id "preview-textarea" + ] + [] + , Html.label + [ css [ InputStyles.label Standard False ] + , Attributes.for "preview-textarea" + ] + [ Html.text "Label" ] + ] + ] , view = \ellieLinkConfig state -> [ Heading.h1 [] [ Html.text "Textarea controls" ] diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm index af69f340..3bade375 100644 --- a/styleguide-app/Examples/UiIcon.elm +++ b/styleguide-app/Examples/UiIcon.elm @@ -60,7 +60,6 @@ example = , ( "download", UiIcon.download ) , ( "sort", UiIcon.sort ) , ( "gear", UiIcon.gear ) - , ( "sortArrow", UiIcon.sortArrow ) ] , viewExampleSection "Archive & Unarchive" [ ( "archive", UiIcon.archive ) @@ -128,6 +127,8 @@ example = , ( "arrowLeft", UiIcon.arrowLeft ) , ( "arrowPointingRight", UiIcon.arrowPointingRight ) , ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick ) + , ( "sortArrow", UiIcon.sortArrow ) + , ( "sortArrowDown", UiIcon.sortArrowDown ) ] , viewExampleSection "Sticky things" [ ( "checkmark", UiIcon.checkmark )