add attribute for changing on-hover row color

NoRedInk · Nov 14, 2024 · 1f8f753 · 1f8f753
1 parent 2a12c63
commit 1f8f753
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 43 deletions.
diff --git a/component-catalog/src/Examples/Table.elm b/component-catalog/src/Examples/Table.elm
@@ -74,11 +74,25 @@ example =
     , view =
         \ellieLinkConfig state ->
             let
-                { showHeader, isLoading, alternatingRowColors } =
+                { showHeader, isLoading, alternatingRowColors, backgroundChangeOnRowHover } =
                     Control.currentValue state
 
                 ( columnsCode, columns ) =
                     List.unzip columnsWithCode
+
+                tableAttributes =
+                    List.concat
+                        [ if alternatingRowColors then
+                            []
+
+                          else
+                            [ Table.disableAlternatingRowColors ]
+                        , if backgroundChangeOnRowHover then
+                            [ Table.backgroundChangeOnRowHover ]
+
+                          else
+                            []
+                        ]
             in
             [ ControlView.view
                 { ellieLinkConfig = ellieLinkConfig
@@ -103,11 +117,18 @@ example =
                                     (moduleName ++ "." ++ viewName)
                                         ++ " "
                                         ++ Code.list
-                                            (if alternatingRowColors then
-                                                []
-
-                                             else
-                                                [ "Table.disableAlternatingRowColors" ]
+                                            (List.concat
+                                                [ if alternatingRowColors then
+                                                    []
+
+                                                  else
+                                                    [ "Table.disableAlternatingRowColors" ]
+                                                , if backgroundChangeOnRowHover then
+                                                    [ "Table.backgroundChangeOnRowHover" ]
+
+                                                  else
+                                                    []
+                                                ]
                                             )
                                         ++ Code.list columnsCode
                                         ++ dataStr
@@ -126,44 +147,24 @@ example =
             , case ( showHeader, isLoading ) of
                 ( True, False ) ->
                     Table.view
-                        (if alternatingRowColors then
-                            []
-
-                         else
-                            [ Table.disableAlternatingRowColors ]
-                        )
+                        tableAttributes
                         columns
                         data
 
                 ( False, False ) ->
                     Table.viewWithoutHeader
-                        (if alternatingRowColors then
-                            []
-
-                         else
-                            [ Table.disableAlternatingRowColors ]
-                        )
+                        tableAttributes
                         columns
                         data
 
                 ( True, True ) ->
                     Table.viewLoading
-                        (if alternatingRowColors then
-                            []
-
-                         else
-                            [ Table.disableAlternatingRowColors ]
-                        )
+                        tableAttributes
                         columns
 
                 ( False, True ) ->
                     Table.viewLoadingWithoutHeader
-                        (if alternatingRowColors then
-                            []
-
-                         else
-                            [ Table.disableAlternatingRowColors ]
-                        )
+                        tableAttributes
                         columns
             , Heading.h2
                 [ Heading.plaintext "Using placeholder columns for consistent column alignment"
@@ -227,6 +228,7 @@ type alias Settings =
     { showHeader : Bool
     , isLoading : Bool
     , alternatingRowColors : Bool
+    , backgroundChangeOnRowHover : Bool
     }
 
 
@@ -236,6 +238,7 @@ controlSettings =
         |> Control.field "visible header" (Control.bool True)
         |> Control.field "is loading" (Control.bool False)
         |> Control.field "alternatingRowColors" (Control.bool True)
+        |> Control.field "backgroundChangeOnRowHover" (Control.bool False)
 
 
 type alias Datum =

diff --git a/src/Nri/Ui/Table/V8.elm b/src/Nri/Ui/Table/V8.elm
@@ -1,6 +1,6 @@
 module Nri.Ui.Table.V8 exposing
     ( Column, SortDirection(..), custom, string, rowHeader, placeholderColumn
-    , disableAlternatingRowColors, css, Attribute
+    , Attribute, css, disableAlternatingRowColors, backgroundChangeOnRowHover
     , view, viewWithoutHeader
     , viewLoading, viewLoadingWithoutHeader
     )
@@ -13,7 +13,7 @@ module Nri.Ui.Table.V8 exposing
     upgrades easier.
 
 @docs Column, SortDirection, custom, string, rowHeader, placeholderColumn
-@docs disableAlternatingRowColors, css, Attribute
+@docs Attribute, css, disableAlternatingRowColors, backgroundChangeOnRowHover
 
 @docs view, viewWithoutHeader
 
@@ -124,7 +124,10 @@ rowHeader options =
 
 
 type alias Config =
-    { css : List Style, alternatingRowColors : Bool }
+    { css : List Style
+    , alternatingRowColors : Bool
+    , backgroundChangeOnRowHover : Bool
+    }
 
 
 {-| Attribute to configure the table
@@ -135,7 +138,10 @@ type Attribute
 
 defaultConfig : Config
 defaultConfig =
-    { css = [], alternatingRowColors = True }
+    { css = []
+    , alternatingRowColors = True
+    , backgroundChangeOnRowHover = False
+    }
 
 
 {-| Add a CSS style to the table
@@ -156,6 +162,15 @@ disableAlternatingRowColors =
             { config | alternatingRowColors = False }
 
 
+{-| Makes it so that rows are highlighted with a different background color when hovering over them
+-}
+backgroundChangeOnRowHover : Attribute
+backgroundChangeOnRowHover =
+    Attribute <|
+        \config ->
+            { config | backgroundChangeOnRowHover = True }
+
+
 
 -- VIEW
 
@@ -175,7 +190,14 @@ viewWithoutHeader attrs columns =
                 defaultConfig
                 attrs
     in
-    tableWithoutHeader config.css columns (viewRow columns config.alternatingRowColors)
+    tableWithoutHeader config.css
+        columns
+        (viewRow
+            { alternatingColors = config.alternatingRowColors
+            , backgroundChangeOnHover = config.backgroundChangeOnRowHover
+            }
+            columns
+        )
 
 
 {-| Displays a table of data based on the provided column definitions
@@ -193,13 +215,26 @@ view attrs columns =
                 defaultConfig
                 attrs
     in
-    tableWithHeader config.css columns (viewRow columns config.alternatingRowColors)
+    tableWithHeader config.css
+        columns
+        (viewRow
+            { alternatingColors = config.alternatingRowColors
+            , backgroundChangeOnHover = config.backgroundChangeOnRowHover
+            }
+            columns
+        )
 
 
-viewRow : List (Column data msg) -> Bool -> data -> Html msg
-viewRow columns alternatingRowColors data =
+viewRow :
+    { alternatingColors : Bool
+    , backgroundChangeOnHover : Bool
+    }
+    -> List (Column data msg)
+    -> data
+    -> Html msg
+viewRow rowConfig columns data =
     tr
-        [ Attributes.css (rowStyles alternatingRowColors) ]
+        [ Attributes.css (rowStyles rowConfig) ]
         (List.map (viewColumn data) columns)
 
 
@@ -263,7 +298,13 @@ viewLoadingWithoutHeader attrs columns =
 viewLoadingRow : List (Column data msg) -> Bool -> Int -> Html msg
 viewLoadingRow columns alternatingRowColors index =
     tr
-        [ Attributes.css (rowStyles alternatingRowColors) ]
+        [ Attributes.css
+            (rowStyles
+                { alternatingColors = alternatingRowColors
+                , backgroundChangeOnHover = False
+                }
+            )
+        ]
         (List.indexedMap (viewLoadingColumn index) columns)
 
 
@@ -382,17 +423,26 @@ headerStyles =
     ]
 
 
-rowStyles : Bool -> List Style
-rowStyles alternatingRowColors =
+rowStyles :
+    { alternatingColors : Bool
+    , backgroundChangeOnHover : Bool
+    }
+    -> List Style
+rowStyles rowConfig =
     [ height (px 45)
     , fontSize (px 14)
     , color gray20
-    , if alternatingRowColors then
+    , if rowConfig.alternatingColors then
         pseudoClass "nth-child(odd)"
             [ backgroundColor gray96 ]
 
       else
         Css.batch [ Css.borderBottom3 (Css.px 1) Css.solid gray92 ]
+    , if rowConfig.backgroundChangeOnHover then
+        Css.hover [ Css.backgroundColor frost ]
+
+      else
+        Css.batch []
     ]