fix(Datatable): update styling

securityscorecard · Sep 4, 2023 · 6a6a5a8 · 6a6a5a8
1 parent d445034
commit 6a6a5a8
Show file tree

Hide file tree

Showing 89 changed files with 67 additions and 22 deletions.
diff --git a/..._Datatable_internalComponents_BatchModule_ElementCounter_Abbreviated Counts.png b/..._Datatable_internalComponents_BatchModule_ElementCounter_Abbreviated Counts.png
diff --git a/.../components_Datatable_internalComponents_BatchModule_ElementCounter_Default.png b/.../components_Datatable_internalComponents_BatchModule_ElementCounter_Default.png
diff --git a/...s_Datatable_internalComponents_BatchModule_ElementCounter_No Data Available.png b/...s_Datatable_internalComponents_BatchModule_ElementCounter_No Data Available.png
diff --git a/...omponents_BatchModule_ElementCounter_With Selected Rows And Exclusion Logic.png b/...omponents_BatchModule_ElementCounter_With Selected Rows And Exclusion Logic.png
diff --git a/..._Datatable_internalComponents_BatchModule_ElementCounter_With Selected Rows.png b/..._Datatable_internalComponents_BatchModule_ElementCounter_With Selected Rows.png
diff --git a/...s_Datatable_internalComponents_BatchModule_ElementCounter_Without Selection.png b/...s_Datatable_internalComponents_BatchModule_ElementCounter_Without Selection.png
diff --git a/...cted/components_Datatable_internalComponents_BatchModule_With Batch Actions.png b/...cted/components_Datatable_internalComponents_BatchModule_With Batch Actions.png
diff --git a/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png b/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png
diff --git a/...table_internalComponents_BatchModule_With Selected Rows And Exclusion Logic.png b/...table_internalComponents_BatchModule_With Selected Rows And Exclusion Logic.png
diff --git a/...cted/components_Datatable_internalComponents_BatchModule_With Selected Rows.png b/...cted/components_Datatable_internalComponents_BatchModule_With Selected Rows.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png b/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png
diff --git a/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png b/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_With Disabled Columns.png b/...omponents_Datatable_internalComponents_ControlsModule_With Disabled Columns.png
diff --git a/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png b/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png b/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png
diff --git a/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png b/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png
diff --git a/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png b/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png
diff --git a/...s/expected/components_Datatable_internalComponents_Datatable_Minimal Config.png b/...s/expected/components_Datatable_internalComponents_Datatable_Minimal Config.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png b/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Applied Columns.png b/...cted/components_Datatable_internalComponents_Datatable_With Applied Columns.png
diff --git a/...ed/components_Datatable_internalComponents_Datatable_With Applied Filtering.png b/...ed/components_Datatable_internalComponents_Datatable_With Applied Filtering.png
diff --git a/...pected/components_Datatable_internalComponents_Datatable_With Batch Actions.png b/...pected/components_Datatable_internalComponents_Datatable_With Batch Actions.png
diff --git a/...s_Datatable_internalComponents_Datatable_With Custom Placeholder For Search.png b/...s_Datatable_internalComponents_Datatable_With Custom Placeholder For Search.png
diff --git a/...omponents_Datatable_internalComponents_Datatable_With Disabled Batch Module.png b/...omponents_Datatable_internalComponents_Datatable_With Disabled Batch Module.png
diff --git a/...ted/components_Datatable_internalComponents_Datatable_With Disabled Columns.png b/...ted/components_Datatable_internalComponents_Datatable_With Disabled Columns.png
diff --git a/...able_internalComponents_Datatable_With Disabled Controls And Active Columns.png b/...able_internalComponents_Datatable_With Disabled Controls And Active Columns.png
diff --git a/...ble_internalComponents_Datatable_With Disabled Controls And Applied Columns.png b/...ble_internalComponents_Datatable_With Disabled Controls And Applied Columns.png
diff --git a/...s_Datatable_internalComponents_Datatable_With Disabled Controls And Columns.png b/...s_Datatable_internalComponents_Datatable_With Disabled Controls And Columns.png
diff --git a/...ed/components_Datatable_internalComponents_Datatable_With Disabled Controls.png b/...ed/components_Datatable_internalComponents_Datatable_With Disabled Controls.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With Disabled Filtering.png b/...d/components_Datatable_internalComponents_Datatable_With Disabled Filtering.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Disabled Search.png b/...cted/components_Datatable_internalComponents_Datatable_With Disabled Search.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With Disabled Selection.png b/...d/components_Datatable_internalComponents_Datatable_With Disabled Selection.png
diff --git a/...ots/expected/components_Datatable_internalComponents_Datatable_With No Data.png b/...ots/expected/components_Datatable_internalComponents_Datatable_With No Data.png
diff --git a/...ted/components_Datatable_internalComponents_Datatable_With No Matching Data.png b/...ted/components_Datatable_internalComponents_Datatable_With No Matching Data.png
diff --git a/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png b/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png
diff --git a/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png b/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png
diff --git a/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png b/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png
diff --git a/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png b/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Persisted State.png b/...cted/components_Datatable_internalComponents_Datatable_With Persisted State.png
diff --git a/...tatable_internalComponents_Datatable_With Selected Rows And Exclusion Logic.png b/...tatable_internalComponents_Datatable_With Selected Rows And Exclusion Logic.png
diff --git a/...pected/components_Datatable_internalComponents_Datatable_With Selected Rows.png b/...pected/components_Datatable_internalComponents_Datatable_With Selected Rows.png
diff --git a/...expected/components_Datatable_internalComponents_Datatable_With Single Page.png b/...expected/components_Datatable_internalComponents_Datatable_With Single Page.png
diff --git a/...tatable_internalComponents_Datatable_With Single Selection And Selected Row.png b/...tatable_internalComponents_Datatable_With Single Selection And Selected Row.png
diff --git a/...ted/components_Datatable_internalComponents_Datatable_With Single Selection.png b/...ted/components_Datatable_internalComponents_Datatable_With Single Selection.png
diff --git a/...ternalComponents_Table_Data Is Loading With Previous Data And Is Cancelable.png b/...ternalComponents_Table_Data Is Loading With Previous Data And Is Cancelable.png
diff --git a/...nents_Datatable_internalComponents_Table_Data Is Loading With Previous Data.png b/...nents_Datatable_internalComponents_Table_Data Is Loading With Previous Data.png
diff --git a/...ts_Datatable_internalComponents_Table_Data Is Loading Without Previous Data.png b/...ts_Datatable_internalComponents_Table_Data Is Loading Without Previous Data.png
diff --git a/...pected/components_Datatable_internalComponents_Table_Footer_Data Is Loading.png b/...pected/components_Datatable_internalComponents_Table_Footer_Data Is Loading.png
diff --git a/...shots/expected/components_Datatable_internalComponents_Table_Footer_Default.png b/...shots/expected/components_Datatable_internalComponents_Table_Footer_Default.png
diff --git a/...ted/components_Datatable_internalComponents_Table_Footer_Without Pagination.png b/...ted/components_Datatable_internalComponents_Table_Footer_Without Pagination.png
diff --git a/...shots/expected/components_Datatable_internalComponents_Table_Minimal Config.png b/...shots/expected/components_Datatable_internalComponents_Table_Minimal Config.png
diff --git a/...snapshots/expected/components_Datatable_internalComponents_Table_Playground.png b/...snapshots/expected/components_Datatable_internalComponents_Table_Playground.png
diff --git a/...xpected/components_Datatable_internalComponents_Table_With Custom Page Size.png b/...xpected/components_Datatable_internalComponents_Table_With Custom Page Size.png
diff --git a/...ected/components_Datatable_internalComponents_Table_With Disabled Selection.png b/...ected/components_Datatable_internalComponents_Table_With Disabled Selection.png
diff --git a/...cted/components_Datatable_internalComponents_Table_With Exclusive Selection.png b/...cted/components_Datatable_internalComponents_Table_With Exclusive Selection.png
diff --git a/...mponents_Datatable_internalComponents_Table_With No Data (custom component).png b/...mponents_Datatable_internalComponents_Table_With No Data (custom component).png
diff --git a/...apshots/expected/components_Datatable_internalComponents_Table_With No Data.png b/...apshots/expected/components_Datatable_internalComponents_Table_With No Data.png
diff --git a/...Datatable_internalComponents_Table_With No Matching Data (custom component).png b/...Datatable_internalComponents_Table_With No Matching Data (custom component).png
diff --git a/...xpected/components_Datatable_internalComponents_Table_With No Matching Data.png b/...xpected/components_Datatable_internalComponents_Table_With No Matching Data.png
diff --git a/...ots/expected/components_Datatable_internalComponents_Table_With Row Actions.png b/...ots/expected/components_Datatable_internalComponents_Table_With Row Actions.png
diff --git a/...s/expected/components_Datatable_internalComponents_Table_With Selected Rows.png b/...s/expected/components_Datatable_internalComponents_Table_With Selected Rows.png
diff --git a/...ots/expected/components_Datatable_internalComponents_Table_With Single Page.png b/...ots/expected/components_Datatable_internalComponents_Table_With Single Page.png
diff --git a/...s_Datatable_internalComponents_Table_With Single Selection And Selected Row.png b/...s_Datatable_internalComponents_Table_With Single Selection And Selected Row.png
diff --git a/...xpected/components_Datatable_internalComponents_Table_With Single Selection.png b/...xpected/components_Datatable_internalComponents_Table_With Single Selection.png
diff --git a/...s/expected/components_Datatable_internalComponents_Table_With Sorted Column.png b/...s/expected/components_Datatable_internalComponents_Table_With Sorted Column.png
diff --git a/...hots/expected/components_Datatable_internalComponents_Table_Without Sorting.png b/...hots/expected/components_Datatable_internalComponents_Table_Without Sorting.png
diff --git a/.storybook/image-snapshots/expected/components_Icon_Icons List.png b/.storybook/image-snapshots/expected/components_Icon_Icons List.png
diff --git a/...e-snapshots/expected/components_Table_Data Is Loading Without Previous Data.png b/...e-snapshots/expected/components_Table_Data Is Loading Without Previous Data.png
diff --git a/.storybook/image-snapshots/expected/components_Table_Minimal Config.png b/.storybook/image-snapshots/expected/components_Table_Minimal Config.png
diff --git a/.storybook/image-snapshots/expected/components_Table_With Custom Page Size.png b/.storybook/image-snapshots/expected/components_Table_With Custom Page Size.png
diff --git a/...k/image-snapshots/expected/components_Table_With No Data (custom component).png b/...k/image-snapshots/expected/components_Table_With No Data (custom component).png
diff --git a/.storybook/image-snapshots/expected/components_Table_With No Data.png b/.storybook/image-snapshots/expected/components_Table_With No Data.png
diff --git a/.storybook/image-snapshots/expected/components_Table_With Row Actions.png b/.storybook/image-snapshots/expected/components_Table_With Row Actions.png
diff --git a/.storybook/image-snapshots/expected/components_Table_With Single Page.png b/.storybook/image-snapshots/expected/components_Table_With Single Page.png
diff --git a/.storybook/image-snapshots/expected/components_Table_With Sorted Column.png b/.storybook/image-snapshots/expected/components_Table_With Sorted Column.png
diff --git a/...book/image-snapshots/expected/components_Table_Without Horizontal Scrolling.png b/...book/image-snapshots/expected/components_Table_Without Horizontal Scrolling.png
diff --git a/.storybook/image-snapshots/expected/components_Table_Without Sorting.png b/.storybook/image-snapshots/expected/components_Table_Without Sorting.png
diff --git a/src/components/Datatable/BatchModule/BatchModule.tsx b/src/components/Datatable/BatchModule/BatchModule.tsx
@@ -4,19 +4,18 @@ import { isNonEmptyArray } from 'ramda-adjunct';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import { pxToRem } from '../../../utils';
-import { SpaceSizes } from '../../../theme';
+import { getSpace } from '../../../utils';
 import { SSCIconNames } from '../../../theme/icons/icons.enums';
-import { Inline, Padbox } from '../../layout';
+import { Inline } from '../../layout';
 import { ColumnsControls } from '../components/ColumnsControls';
 import { ControlButton } from '../components/ControlButton';
 import { BatchActions } from './BatchActions';
 import { ElementCounter } from './ElementCounter';
 import { BatchModuleProps } from './BatchModule.types';
 import { DatatableStore } from '../Datatable.store';
 
-const BatchModuleWrapper = styled(Padbox)`
-  min-height: ${pxToRem(64)};
+const BatchModuleWrapper = styled.div`
+  padding: ${getSpace('xs')} ${getSpace('md')};
 `;
 
 const BatchModule: React.FC<BatchModuleProps> = ({
@@ -49,7 +48,7 @@ const BatchModule: React.FC<BatchModuleProps> = ({
   }, []);
 
   return (
-    <BatchModuleWrapper paddingSize={SpaceSizes.md}>
+    <BatchModuleWrapper>
       <Inline align="center" justify="space-between">
         <Inline align="center">
           {isButtonDisplayed && (
@@ -67,7 +66,7 @@ const BatchModule: React.FC<BatchModuleProps> = ({
               }}
             >
               <ControlButton
-                iconName={SSCIconNames.table}
+                iconName={SSCIconNames.columns3}
                 label="Toggle columns"
                 onClick={() => {
                   setIsColumnsActive((prev) => !prev);

diff --git a/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.tsx b/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.tsx
@@ -65,7 +65,7 @@ function ElementCounterWrapper({ children, ...props }) {
 ElementCounterWrapper.displayName = 'ElementCounterWrapper';
 
 const CounterText = styled(Text).attrs(() => ({
-  size: 'h4',
+  size: 'md',
   margin: 'none',
   variant: HeadingVariants.secondary,
 }))`

diff --git a/src/components/Datatable/ControlsModule/ControlsModule.tsx b/src/components/Datatable/ControlsModule/ControlsModule.tsx
@@ -246,7 +246,7 @@ function ControlsModule<D extends Record<string, unknown>>({
                 >
                   {(props) => (
                     <ControlButton
-                      iconName={SSCIconNames.table}
+                      iconName={SSCIconNames.columns3}
                       label="Toggle columns"
                       onClick={() =>
                         handleControlOnClick(
@@ -262,7 +262,7 @@ function ControlsModule<D extends Record<string, unknown>>({
               {shouldShowFiltering && (
                 <ControlButton
                   appliedFilters={appliedFilters}
-                  iconName={SSCIconNames.filter}
+                  iconName={SSCIconNames.filterAlt}
                   // isActive={controlsState[ControlTypes.filters].isActive}
                   label="Filters"
                   onClick={() =>

diff --git a/src/components/Datatable/Datatable.tsx b/src/components/Datatable/Datatable.tsx
@@ -28,8 +28,8 @@ const StyledDatatable = styled(Padbox)`
   flex-direction: column;
   position: relative;
   border: 1px solid ${getColor('neutral.400')};
-  border-radius: ${getRadii('default')};
-  background: ${getColor('neutral.200')};
+  border-radius: ${getRadii('double')};
+  background: ${getColor('neutral.0')};
 `;
 
 const mapSelectedRows = <D,>(defaultSelectedRowIds: IdType<D>[]) =>

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -46,7 +46,7 @@ const NoDataContainer = styled(Padbox)`
 const TableWrapper = styled.div`
   border: 1px solid ${getColor('neutral.400')};
   border-top-width: 0;
-  background: ${getColor('neutral.200')};
+  background: ${getColor('neutral.0')};
   border-radius: ${getRadii('default')};
 `;
 

diff --git a/src/components/_internal/BaseTable/BaseTable.styles.tsx b/src/components/_internal/BaseTable/BaseTable.styles.tsx
@@ -9,6 +9,7 @@ import {
   getFontWeight,
   getFormStyle,
   getRadii,
+  getSpace,
   getToken,
   pxToRem,
 } from '../../../utils';
@@ -30,19 +31,18 @@ export const BaseTableContainer = styled.div`
   overflow-x: auto;
 
   &::-webkit-scrollbar {
-    box-sizing: content-box;
-    outline: 1px solid ${getColor('neutral.400')};
-    height: ${pxToRem(20)};
+    box-sizing: border-box;
+    height: ${pxToRem(24)};
   }
   &::-webkit-scrollbar-thumb {
     border-radius: ${getRadii('round')};
-    background-color: ${getColor('neutral.600')};
-    border: 6px solid ${getColor('neutral.200')};
+    background-color: ${getColor('primary.500')};
+    border: ${getSpace('sm')} solid ${getColor('neutral.0')};
   }
   &::-webkit-scrollbar-track-piece {
     border-radius: ${getRadii('round')};
     background-color: ${getColor('neutral.300')};
-    border: 6px solid ${getColor('neutral.200')};
+    border: ${getSpace('sm')} solid ${getColor('neutral.0')};
   }
   &:focus-visible {
     outline-color: ${getColor('primary.500')};

diff --git a/src/components/_internal/BaseTable/Footer/Footer.tsx b/src/components/_internal/BaseTable/Footer/Footer.tsx
@@ -9,11 +9,11 @@ import { FooterProps } from './Footer.types';
 import GoToPage from './GoToPage';
 import { Pagination } from '../../../Pagination';
 import { SpaceSizes } from '../../../../theme';
+import { PaddingTypes } from '../../../layout/Padbox/Padbox.enums';
 
 const StyledFooter = styled(Padbox)`
   display: flex;
-  flex: 0 0 ${pxToRem(64)};
-  height: ${pxToRem(64)};
+  align-items: center;
 `;
 const LoadingContainer = styled.div`
   padding: ${pxToRem(8, 24, 8, 8)};
@@ -38,6 +38,7 @@ const Footer: React.FC<FooterProps> = ({
       data-testid="footer"
       flexDirection="row"
       paddingSize={SpaceSizes.md}
+      paddingType={PaddingTypes.squish}
     >
       <LoadingContainer>
         {isDataLoading && (

diff --git a/src/components/_internal/BaseTable/Head/Head.tsx b/src/components/_internal/BaseTable/Head/Head.tsx
@@ -23,7 +23,7 @@ const StyledTh = styled.th<{ sticky?: string }>`
   line-height: ${getLineHeight('md')};
   text-align: left;
   padding: ${pxToRem(12, 8)};
-  background-color: ${getColor('neutral.200')};
+  background-color: ${getColor('neutral.0')};
   border-color: ${getColor('neutral.400')};
   border-style: solid;
   border-width: 1px 0 1px 1px;

diff --git a/src/theme/icons/columns-3.ts b/src/theme/icons/columns-3.ts
@@ -0,0 +1,16 @@
+import type {
+  IconDefinition,
+  IconName,
+  IconPrefix,
+} from '@fortawesome/fontawesome-svg-core';
+
+export const width = 18;
+export const height = 14;
+export const unicode = 'e032';
+export const svgPathData =
+  'M16.25 0.625C17.207 0.625 18 1.41797 18 2.375V11.125C18 12.1094 17.207 12.875 16.25 12.875H2.25C1.26562 12.875 0.5 12.1094 0.5 11.125V2.375C0.5 1.41797 1.26562 0.625 2.25 0.625H16.25ZM5.75 2.375H2.25V11.125H5.75V2.375ZM7.5 11.125H11V2.375H7.5V11.125ZM16.25 2.375H12.75V11.125H16.25V2.375Z';
+export const columns3 = {
+  prefix: 'ssc' as IconPrefix,
+  iconName: 'columns-3' as IconName,
+  icon: [width, height, [], unicode, svgPathData],
+} as IconDefinition;
diff --git a/src/theme/icons/filterAlt.ts b/src/theme/icons/filterAlt.ts
@@ -0,0 +1,25 @@
+/*!
+ * Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+
+/* solid - filter */
+
+import type {
+  IconDefinition,
+  IconName,
+  IconPrefix,
+} from '@fortawesome/fontawesome-svg-core';
+
+export const width = 16;
+export const height = 14;
+export const unicode = 'e033';
+export const svgPathData =
+  'M0.5 1.375C0.5 0.910156 0.882812 0.5 1.375 0.5H11.875C12.3398 0.5 12.75 0.910156 12.75 1.375C12.75 1.86719 12.3398 2.25 11.875 2.25H1.375C0.882812 2.25 0.5 1.86719 0.5 1.375ZM2.25 5.75C2.25 5.28516 2.63281 4.875 3.125 4.875H10.125C10.5898 4.875 11 5.28516 11 5.75C11 6.24219 10.5898 6.625 10.125 6.625H3.125C2.63281 6.625 2.25 6.24219 2.25 5.75ZM7.5 11H5.75C5.25781 11 4.875 10.6172 4.875 10.125C4.875 9.66016 5.25781 9.25 5.75 9.25H7.5C7.96484 9.25 8.375 9.66016 8.375 10.125C8.375 10.6172 7.96484 11 7.5 11Z';
+
+export const filterAlt = {
+  prefix: 'ssc' as IconPrefix,
+  iconName: 'filterAlt' as IconName,
+  icon: [width, height, [], unicode, svgPathData],
+} as IconDefinition;
diff --git a/src/theme/icons/icons.enums.ts b/src/theme/icons/icons.enums.ts
@@ -47,6 +47,8 @@ export const SSCIconNames = {
   angleDown: 'angle-down',
   table: 'table',
   infoCircleOutline: 'info-circle-outline',
+  columns3: 'columns-3',
+  filterAlt: 'filterAlt',
 } as const;
 
 export const IconTypes = {

diff --git a/src/theme/icons/index.ts b/src/theme/icons/index.ts
@@ -51,3 +51,5 @@ export { angleUp } from './angleUp';
 export { angleDown } from './angleDown';
 export { table } from './table';
 export { infoCircleOutline } from './infoCircleOutline';
+export { columns3 } from './columns-3';
+export { filterAlt } from './filterAlt';