chore: add selected groups/rows higlight #1713

h2oai · Dec 5, 2022 · e4ffbd3 · e4ffbd3
1 parent 905e3fd
commit e4ffbd3
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/ui/src/table.tsx b/ui/src/table.tsx
@@ -423,14 +423,18 @@ const
         return (
           <Fluent.GroupHeader
             {...props}
-            styles={{
-              root: {
-                position: 'sticky',
-                top: 48,
-                backgroundColor: cssVar('$card'),
-                zIndex: 1
-              }
-            }} />
+            styles={stylesProps => ({
+              root: [
+                {
+                  position: 'sticky',
+                  top: 48,
+                  backgroundColor: cssVar('$card'),
+                  zIndex: 1
+                },
+                stylesProps.selected ? { background: `${cssVar('$neutralLight')} !important` } : undefined
+              ]
+            })
+            } />
         )
       }, []),
       onToggleCollapseAll = (isAllCollapsed: B) => expandedRefs.current = isAllCollapsed ? {} : null,
@@ -444,21 +448,26 @@ const
         }
       },
       onRenderRow = (props?: Fluent.IDetailsRowProps) => props
-        ? <Fluent.DetailsRow {...props} styles={{
+        ? <Fluent.DetailsRow {...props} styles={styleProps =>
+        ({
           cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
           checkCell: { display: 'flex', alignItems: 'center' },
-          root: {
-            width: '100%',
-            border: border(2, 'transparent'),
-            borderTop: border(2, cssVar('$neutralLight')),
-            background: cssVar('$card'),
-            minHeight: 48,
-            '&:hover': {
-              background: cssVar('$neutralLight'),
-              border: `${border(2, cssVar('$themePrimary'))} !important`,
-            }
-          }
-        }} />
+          root: [
+            {
+              width: '100%',
+              border: border(2, 'transparent'),
+              borderTop: border(2, cssVar('$neutralLight')),
+              background: cssVar('$card'),
+              minHeight: 48,
+              '&:hover': {
+                background: cssVar('$neutralLight'),
+                border: `${border(2, cssVar('$themePrimary'))} !important`,
+              },
+            },
+            styleProps.isSelected ? { background: cssVar('$neutralLight') } : undefined
+          ]
+        })
+        } />
         : null,
       onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
         wave.args[m.name] = [item.key as S]