fix: table footer color contrast #974

h2oai · Oct 28, 2021 · a52b69d · a52b69d
1 parent 327b014
commit a52b69d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/py/examples/table.py b/py/examples/table.py
@@ -44,11 +44,12 @@ def __init__(self, text: str, status: str, progress: float, icon: str, state: st
     ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
     ui.table_column(name='views', label='Views', sortable=True, data_type='number'),
     ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
-    ui.table_column(name='badge', label='State', cell_type=ui.badge_table_cell_type(name='badges', badges=[
-        ui.badge(label='RUNNING', color='#D2E3F8'),
-        ui.badge(label='DONE', color='$red'),
-        ui.badge(label='SUCCESS', color='$mint'),
-    ])),
+    ui.table_column(name='badge', label='State', min_width='170px',
+                    cell_type=ui.badge_table_cell_type(name='badges', badges=[
+                        ui.badge(label='RUNNING', color='#D2E3F8'),
+                        ui.badge(label='DONE', color='$red'),
+                        ui.badge(label='SUCCESS', color='$mint'),
+                    ])),
     ui.table_column(name='created', label='Created', sortable=True, data_type='time'),
 ]
 

diff --git a/ui/src/table.tsx b/ui/src/table.tsx
@@ -324,17 +324,31 @@ const
 
         return (
           <Fluent.Sticky stickyPosition={Fluent.StickyPositionType.Footer} isScrollSynced>
-            <Fluent.Stack horizontal horizontalAlign={isFilterable ? 'space-between' : 'end'} verticalAlign='center'>
+            <Fluent.Stack
+              horizontal
+              horizontalAlign='space-between'
+              verticalAlign='center'
+              styles={{ root: { background: cssVar('$neutralLight'), borderRadius: '0 0 4px 4px', paddingLeft: 12, height: 48 } }}>
               {
-                isFilterable && (
+                (isFilterable || isSearchable) && (
                   <Fluent.Text variant='smallPlus' block styles={{ root: { whiteSpace: 'nowrap' } }}>Rows:
                     <b style={{ paddingLeft: 5 }}>{formatNum(filteredItems.length)} of {formatNum(items.length)}</b>
                   </Fluent.Text>
                 )
               }
-              <div style={{ width: '80%' }}>
-                <Fluent.CommandBar items={footerItems} styles={{ root: { background: cssVar('$card') }, primarySet: { justifyContent: 'flex-end' } }} />
-              </div>
+              {
+                footerItems.length && (
+                  <div style={{ width: '80%' }}>
+                    <Fluent.CommandBar items={footerItems} styles={{
+                      root: {
+                        background: cssVar('$neutralLight'),
+                        '.ms-Button--commandBar': { background: 'transparent' }
+                      },
+                      primarySet: { justifyContent: 'flex-end' }
+                    }} />
+                  </div>
+                )
+              }
             </Fluent.Stack>
           </Fluent.Sticky>
         )
@@ -624,10 +638,7 @@ export const
         </Fluent.Stack>
         <Fluent.ScrollablePane
           scrollbarVisibility={Fluent.ScrollbarVisibility.auto}
-          styles={{
-            root: { top: m.groupable || searchableKeys.length ? 80 : 0 },
-            stickyAbove: { height: '48px !important' }
-          }}>
+          styles={{ root: { top: m.groupable || searchableKeys.length ? 80 : 0 } }}>
           {
             isMultiple
               ? <Fluent.MarqueeSelection selection={selection}><DataTable {...dataTableProps} /></Fluent.MarqueeSelection>