fix: lighten up the PaginatedTable UI

Fixes #4155

Author: starpit

docs/readme/images/grid.png

@@ -96,7 +96,7 @@ body[kui-theme="Carbon Gray10"] {
   --color-brand-03: #0062ff;
 
   --color-ui-05: #171717;
-  --color-ui-03: var(--color-background-inverted02);
+  --color-ui-03: #e0e0e0;
   --color-text-02: #565656;
 
   --color-map-key: #6ea6ff;

docs/readme/images/namespaces.png

@@ -114,7 +114,7 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
         )
       )
 
-      return <Toolbar breadcrumbs={breadcrumbs.length > 0 && breadcrumbs} />
+      return <Toolbar className="kui--data-table-toolbar-top" breadcrumbs={breadcrumbs.length > 0 && breadcrumbs} />
     }
   }
 
@@ -131,7 +131,8 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
     return (
       this.props.toolbars && (
         <Toolbar
-          frame={this.state.asGrid}
+          framed
+          className="kui--data-table-toolbar-bottom"
           asGrid={this.state.asGrid}
           gridableColumn={this.state.gridableColumn}
           setAsGrid={(asGrid: boolean) => this.setState({ asGrid })}

plugins/plugin-carbon-themes/web/css/carbon-gray10.css

@@ -30,7 +30,8 @@ import 'carbon-components/scss/components/pagination/_pagination.scss'
 export type Props = Partial<GridProps> &
   Partial<PaginationProps> &
   Partial<BreadcrumbProps> & {
-    frame?: boolean
+    framed?: boolean
+    className?: string
   }
 
 interface GridProps {
@@ -168,8 +169,10 @@ export default class Toolbar extends React.PureComponent<Props> {
   }
 
   public render() {
+    const className = 'kui--data-table-toolbar' + (this.props.className ? ` ${this.props.className}` : '')
+
     return (
-      <div className="kui--data-table-toolbar" data-frame={this.props.frame}>
+      <div className={className} data-frame={this.props.framed}>
         {this.breadcrumbs()}
         {this.buttons()}
         {this.filler()}

plugins/plugin-client-common/src/components/Table/PaginatedTable.tsx

@@ -13,14 +13,4 @@
       fill: var(--color-text-01) !important;
     }
   }
-
-  &[data-enabled='true'] {
-    background-color: var(--color-base03);
-    svg {
-      fill: var(--color-base0D);
-    }
-  }
-  &[data-enabled='false'] svg {
-    filter: opacity(0.375);
-  }
 }

plugins/plugin-client-common/src/components/Table/Toolbar.tsx

@@ -1,29 +1,39 @@
-$toolbar-height: 2.375em;
+$toolbar-height: 1.875em;
 
 body[kui-theme-style='light'] {
-  .kui--data-table-toolbar,
-  .bx--data-table-container.kui--data-table-container-with-toolbars.kui--data-table-container-with-title th {
-    background-color: rgba(0, 0, 0, 0.0375);
-  }
-}
-body[kui-theme-style='dark'] {
-  .kui--data-table-toolbar,
-  .bx--data-table-container.kui--data-table-container-with-toolbars.kui--data-table-container-with-title th {
-    background-color: var(--color-base01);
+  .bx--data-table-container.kui--data-table-container-with-toolbars.kui--data-table-container-with-title td,
+  .bx--data-table.kui--data-table-as-grid {
+    background-color: rgba(0, 0, 0, 0.01375);
   }
 }
 
 .bx--data-table-container.kui--data-table-container-with-toolbars.kui--data-table-container-with-title {
   padding-top: 0;
 }
 
-body[kui-theme-style] .kui--data-table-toolbar {
-  display: flex;
-  border-radius: 2px / 4px;
+.kui--data-table-wrapper {
+  /* so that captured screenshots have some padding away from the breadcrumbs */
+  padding: 0 0.1875em;
+}
 
-  &:first-child {
-    margin-top: 0.125em;
+.kui--toolbar-button-with-icon {
+  &[data-enabled='true'] {
+    svg {
+      fill: var(--color-base0D);
+      path {
+        /* give the enabled button a bit more weight */
+        stroke: var(--color-base0D);
+        stroke-width: 1.1;
+      }
+    }
+  }
+  &[data-enabled='false'] svg {
+    filter: opacity(0.375);
   }
+}
+
+body[kui-theme-style] .kui--data-table-toolbar {
+  display: flex;
 
   nav[aria-label='Breadcrumb'] {
     overflow-x: unset;
@@ -38,10 +48,18 @@ body[kui-theme-style] .kui--data-table-toolbar {
     height: $toolbar-height;
   }
 
-  [aria-label='Breadcrumb'] {
+  &.kui--data-table-toolbar-bottom {
+    padding-top: 0.1875em;
+  }
+
+  nav[aria-label='Breadcrumb'] {
     display: flex;
     align-items: center;
     flex: 1;
+
+    .bx--breadcrumb {
+      padding-left: 0;
+    }
   }
 
   .kui--toolbar-button-with-icon {
@@ -64,7 +82,6 @@ body[kui-theme-style] .kui--data-table-toolbar {
     border: none;
     background-color: transparent;
     width: unset;
-    height: $toolbar-height;
     align-items: unset;
 
     .kui--data-table-toolbar-pagination-info {
@@ -75,8 +92,7 @@ body[kui-theme-style] .kui--data-table-toolbar {
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      border-left: 1px solid;
-      border-color: var(--color-table-border3);
+      border: none;
     }
   }
 }

plugins/plugin-client-common/web/css/static/ToolbarButton.scss

@@ -9,14 +9,19 @@ body[kui-theme-style] {
       tbody tr.bx--data-table--selected:hover {
         &,
         td {
-          background-color: var(--color-base03);
+          background-color: var(--color-ui-03);
         }
       }
 
-      &.bx--data-table--compact td {
-        border-color: transparent;
-        border-bottom: 1px solid var(--color-base03);
-        vertical-align: middle;
+      &.bx--data-table--compact {
+        td {
+          border-color: transparent;
+          border-bottom: 1px solid var(--color-base03);
+          vertical-align: middle;
+        }
+        tr:last-child td {
+          border-bottom: none;
+        }
       }
     }
   }

plugins/plugin-client-common/web/scss/components/Table/Toolbar.scss

@@ -32,7 +32,7 @@ body[kui-theme-style] .bx--pagination {
 
   .bx--pagination__button {
     fill: var(--color-text-01);
-    padding: 0 0.875em;
+    padding: 0 0.1875em;
 
     &:focus {
       outline-color: var(--color-brand-03);
@@ -52,10 +52,10 @@ body[kui-theme-style] .bx--pagination {
 
   .bx--select-input,
   .bx--pagination__button {
-    border-color: var(--color-table-border3);
+    border: none;
   }
 
-  .bx--pagination__button:hover {
+  .bx--pagination__button:not(.bx--pagination__button--no-index):hover {
     background-color: var(--color-table-border3);
   }
 }

plugins/plugin-client-common/web/scss/components/Table/kui-tables.scss

@@ -115,9 +115,10 @@ body .bx--data-table-container {
 
     tbody {
       .bx--data-table--selected {
+        background-color: var(--color-ui-03);
         td {
           color: var(--color-text-01);
-          background-color: var(--color-ui-02);
+          background-color: var(--color-ui-03);
           border-color: transparent;
         }
       }