fix(DatatableV2): update column settings appearance

Closes UXD-1641
securityscorecard · Oct 1, 2024 · 7ebfefe · 7ebfefe
1 parent 992033c
commit 7ebfefe
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 108 deletions.
diff --git a/.storybook/image-snapshots/expected/Iconography_List_List.png b/.storybook/image-snapshots/expected/Iconography_List_List.png
diff --git a/...ts_DatatableV2_ColumnSettingsPanel_Disabled Column Hiding In Settings Panel.png b/...ts_DatatableV2_ColumnSettingsPanel_Disabled Column Hiding In Settings Panel.png
diff --git a/...s_DatatableV2_ColumnSettingsPanel_Disabled Column Pinning In Settings Panel.png b/...s_DatatableV2_ColumnSettingsPanel_Disabled Column Pinning In Settings Panel.png
diff --git a/...ed/components_DatatableV2_ColumnSettingsPanel_Initial Column Settings Panel.png b/...ed/components_DatatableV2_ColumnSettingsPanel_Initial Column Settings Panel.png
diff --git a/src/components/DatatableV2/menus/ColumnActionsMenu.tsx b/src/components/DatatableV2/menus/ColumnActionsMenu.tsx
@@ -113,7 +113,7 @@ const ColumnActionsMenu = <D,>({
           <MenuItem
             key="col-action-pin-left"
             className="ds-table-column-actions-menu-item"
-            iconName="thumbstack"
+            iconName="thumbtack"
             isDisabled={column.getIsPinned() === 'left'}
             onClick={() => handlePinColumn('left')}
           >

diff --git a/src/components/DatatableV2/panels/Settings.tsx b/src/components/DatatableV2/panels/Settings.tsx
@@ -11,7 +11,6 @@ import { DatatableInstance } from '../Datatable.types';
 import IndeterminateCheckbox from '../inputs/IndeterminateCheckbox';
 import SettingsItems from './SettingsItems';
 import { DSContext } from '../../../theme/DSProvider/DSProvider';
-import { getButtonSize } from '../../ButtonV2/utils';
 import { useSafeTranslation } from '../../../hooks/useSafeTranslation';
 
 const SettingsRoot = styled.div`
@@ -29,7 +28,6 @@ const SettingsRoot = styled.div`
   z-index: 2;
 
   .ds-table-settings-panel-item {
-    padding-left: 0.5rem;
     border: 1px solid var(--sscds-table-color-border);
 
     &:first-of-type {
@@ -49,6 +47,12 @@ const SettingsRoot = styled.div`
     padding: 0 0.5rem;
     align-items: center;
     justify-content: center;
+
+    input[type='checkbox'] {
+      width: 1.25rem;
+      height: 1.25rem;
+      accent-color: var(--sscds-color-background-action-highlight-default);
+    }
   }
 `;
 
@@ -172,24 +176,22 @@ const Settings = <D,>({ table }: { table: DatatableInstance<D> }) => {
       </Padbox>
       <Padbox
         paddingSize="md"
-        paddingType="squish"
         style={{
           overflow: 'auto',
           position: 'sticky',
           top: datatable?.settingsOffset ?? 0,
         }}
       >
-        <Stack gap="sm">
+        <Stack gap="md">
           <Inline
-            align="flex-end"
-            gap="md"
+            gap="sm"
             stretch="start"
-            style={{ paddingRight: '1rem' }}
+            style={{ paddingRight: 'var(--sscds-space-2x)' }}
           >
             <div>
               <Button
                 size="sm"
-                variant="ghost"
+                variant="subtle"
                 onClick={() => {
                   setColumnPinning(initialState.columnPinning ?? {});
                   setColumnVisibility(initialState.columnVisibility ?? {});
@@ -199,16 +201,11 @@ const Settings = <D,>({ table }: { table: DatatableInstance<D> }) => {
                 {t('sscds|datatable.settings.reset')}
               </Button>
             </div>
-            <Inline gap="sm">
+            <Inline gap="sm" stretch="all">
               {enableHiding && (
-                <Stack gap="sm" justify="center">
-                  <Text variant="secondary">
-                    {t('sscds|datatable.settings.hiding.title')}
-                  </Text>
-                  <div
-                    className="ds-table-checkbox-wrapper"
-                    style={{ height: getButtonSize('sm') }}
-                  >
+                <Stack gap="1x" justify="center">
+                  <Icon name="eye" size="md" hasFixedSize />
+                  <div className="ds-table-checkbox-wrapper">
                     <IndeterminateCheckbox
                       aria-label={
                         getColumnsVisibilityInfo().areAllColumnsVisible
@@ -227,17 +224,9 @@ const Settings = <D,>({ table }: { table: DatatableInstance<D> }) => {
                 </Stack>
               )}
               {enableColumnPinning && (
-                <Stack gap="sm" justify="center">
-                  <Text variant="secondary">
-                    {t('sscds|datatable.settings.pinnig.title')}
-                  </Text>
-                  <div
-                    className="ds-table-checkbox-wrapper"
-                    style={{
-                      height: getButtonSize('sm'),
-                      marginLeft: '0.35rem',
-                    }}
-                  >
+                <Stack gap="1x" justify="center">
+                  <Icon name="thumbtack" size="md" hasFixedSize />
+                  <div className="ds-table-checkbox-wrapper">
                     <IndeterminateCheckbox
                       aria-label={
                         getColumnsPinnabilityInfo().areAllColumnsPinned

diff --git a/src/components/DatatableV2/panels/SettingsItem.tsx b/src/components/DatatableV2/panels/SettingsItem.tsx
@@ -36,8 +36,7 @@ const SettingsItem = <D,>({
     <Padbox
       ref={setNodeRef}
       className="ds-table-settings-panel-item"
-      paddingSize="md"
-      paddingType="squish"
+      paddingSize="sm"
       style={style}
     >
       <Inline
@@ -60,47 +59,49 @@ const SettingsItem = <D,>({
           />
         )}
         <span>{column.columnDef.header}</span>
-        {enableHiding && (
-          <div className="ds-table-checkbox-wrapper">
-            <input
-              aria-label={
-                column.getIsVisible()
-                  ? t('sscds|datatable.settings.hiding.hideColumn', {
-                      columnName: column.columnDef.header,
-                    })
-                  : t('sscds|datatable.settings.hiding.showColumn', {
-                      columnName: column.columnDef.header,
-                    })
-              }
-              checked={column.getIsVisible()}
-              disabled={
-                (!canColumnHide && column.getIsVisible()) ||
-                !column.getCanHide()
-              }
-              type="checkbox"
-              onChange={(e) => column.toggleVisibility(e.target.checked)}
-            />
-          </div>
-        )}
-        {enableColumnPinning && (
-          <div className="ds-table-checkbox-wrapper">
-            <input
-              aria-label={
-                column.getIsPinned() !== false
-                  ? t('sscds|datatable.settings.pinnig.unpinColumn', {
-                      columnName: column.columnDef.header,
-                    })
-                  : t('sscds|datatable.settings.pinnig.pinColumn', {
-                      columnName: column.columnDef.header,
-                    })
-              }
-              checked={column.getIsPinned() !== false}
-              disabled={!column.getCanPin()}
-              type="checkbox"
-              onChange={(e) => column.pin(e.target.checked ? 'left' : false)}
-            />
-          </div>
-        )}
+        <Inline gap="sm" stretch="all">
+          {enableHiding && (
+            <div className="ds-table-checkbox-wrapper">
+              <input
+                aria-label={
+                  column.getIsVisible()
+                    ? t('sscds|datatable.settings.hiding.hideColumn', {
+                        columnName: column.columnDef.header,
+                      })
+                    : t('sscds|datatable.settings.hiding.showColumn', {
+                        columnName: column.columnDef.header,
+                      })
+                }
+                checked={column.getIsVisible()}
+                disabled={
+                  (!canColumnHide && column.getIsVisible()) ||
+                  !column.getCanHide()
+                }
+                type="checkbox"
+                onChange={(e) => column.toggleVisibility(e.target.checked)}
+              />
+            </div>
+          )}
+          {enableColumnPinning && (
+            <div className="ds-table-checkbox-wrapper">
+              <input
+                aria-label={
+                  column.getIsPinned() !== false
+                    ? t('sscds|datatable.settings.pinnig.unpinColumn', {
+                        columnName: column.columnDef.header,
+                      })
+                    : t('sscds|datatable.settings.pinnig.pinColumn', {
+                        columnName: column.columnDef.header,
+                      })
+                }
+                checked={column.getIsPinned() !== false}
+                disabled={!column.getCanPin()}
+                type="checkbox"
+                onChange={(e) => column.pin(e.target.checked ? 'left' : false)}
+              />
+            </div>
+          )}
+        </Inline>
       </Inline>
     </Padbox>
   );

diff --git a/src/locales/cs-CZ.ts b/src/locales/cs-CZ.ts
@@ -71,12 +71,10 @@ const locale = {
   'datatable.settings.title': 'Nastavení sloupců',
   'datatable.settings.close': 'Zavřít nastavení sloupců',
   'datatable.settings.reset': 'Obnovit výchozí',
-  'datatable.settings.hiding.title': 'Zobrazit',
   'datatable.settings.hiding.showAll': 'Zobrazit všechny sloupce',
   'datatable.settings.hiding.hideAll': 'Skrýt všechny sloupce',
   'datatable.settings.hiding.showColumn': 'Zobrazit sloupec {{columnName}}',
   'datatable.settings.hiding.hideColumn': 'Skrýt sloupec {{columnName}}',
-  'datatable.settings.pinnig.title': 'Připnout',
   'datatable.settings.pinnig.pinAll': 'Připnout všechny sloupce',
   'datatable.settings.pinnig.unpinAll': 'Odepnout všechny sloupce',
   'datatable.settings.pinnig.pinColumn': 'Připnout sloupec {{columnName}}',

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -65,12 +65,10 @@ const locale = {
   'datatable.settings.title': 'Column settings',
   'datatable.settings.close': 'Close column settings',
   'datatable.settings.reset': 'Reset to default',
-  'datatable.settings.hiding.title': 'Show',
   'datatable.settings.hiding.showAll': 'Show all columns',
   'datatable.settings.hiding.hideAll': 'Hide all columns',
   'datatable.settings.hiding.showColumn': 'Show {{columnName}} column',
   'datatable.settings.hiding.hideColumn': 'Hide {{columnName}} column',
-  'datatable.settings.pinnig.title': 'Pin',
   'datatable.settings.pinnig.pinAll': 'Pin all columns',
   'datatable.settings.pinnig.unpinAll': 'Unpin all columns',
   'datatable.settings.pinnig.pinColumn': 'Unpin {{columnName}} column',

diff --git a/src/locales/es-ES.ts b/src/locales/es-ES.ts
@@ -66,12 +66,10 @@ const locale = {
   'datatable.settings.title': 'Configuración de columnas',
   'datatable.settings.close': 'Cerrar configuración de columnas',
   'datatable.settings.reset': 'Restablecer a predeterminado',
-  'datatable.settings.hiding.title': 'Mostrar',
   'datatable.settings.hiding.showAll': 'Mostrar todas las columnas',
   'datatable.settings.hiding.hideAll': 'Ocultar todas las columnas',
   'datatable.settings.hiding.showColumn': 'Mostrar columna {{columnName}}',
   'datatable.settings.hiding.hideColumn': 'Ocultar columna {{columnName}}',
-  'datatable.settings.pinnig.title': 'Fijar',
   'datatable.settings.pinnig.pinAll': 'Fijar todas las columnas',
   'datatable.settings.pinnig.unpinAll': 'Desfijar todas las columnas',
   'datatable.settings.pinnig.pinColumn': 'Fijar columna {{columnName}}',

diff --git a/src/locales/ja-JP.ts b/src/locales/ja-JP.ts
@@ -59,12 +59,10 @@ const locale = {
   'datatable.settings.title': '列の設定',
   'datatable.settings.close': '列の設定を閉じる',
   'datatable.settings.reset': 'デフォルトにリセット',
-  'datatable.settings.hiding.title': '表示',
   'datatable.settings.hiding.showAll': '全ての列を表示',
   'datatable.settings.hiding.hideAll': '全ての列を非表示',
   'datatable.settings.hiding.showColumn': '列 {{columnName}} を表示',
   'datatable.settings.hiding.hideColumn': '列 {{columnName}} を非表示',
-  'datatable.settings.pinnig.title': '固定',
   'datatable.settings.pinnig.pinAll': '全ての列を固定',
   'datatable.settings.pinnig.unpinAll': '全ての列の固定を解除',
   'datatable.settings.pinnig.pinColumn': '列 {{columnName}} を固定',

diff --git a/src/locales/pt-BR.ts b/src/locales/pt-BR.ts
@@ -66,12 +66,10 @@ const locale = {
   'datatable.settings.title': 'Configurações de colunas',
   'datatable.settings.close': 'Fechar configurações de colunas',
   'datatable.settings.reset': 'Redefinir para o padrão',
-  'datatable.settings.hiding.title': 'Exibir',
   'datatable.settings.hiding.showAll': 'Exibir todas as colunas',
   'datatable.settings.hiding.hideAll': 'Ocultar todas as colunas',
   'datatable.settings.hiding.showColumn': 'Exibir coluna {{columnName}}',
   'datatable.settings.hiding.hideColumn': 'Ocultar coluna {{columnName}}',
-  'datatable.settings.pinnig.title': 'Fixar',
   'datatable.settings.pinnig.pinAll': 'Fixar todas as colunas',
   'datatable.settings.pinnig.unpinAll': 'Desfixar todas as colunas',
   'datatable.settings.pinnig.pinColumn': 'Fixar coluna {{columnName}}',

diff --git a/src/theme/icons/icons.enums.ts b/src/theme/icons/icons.enums.ts
@@ -40,7 +40,7 @@ export const SSCIconNames = {
   sort: 'sort',
   sortDown: 'sort-down',
   sortUp: 'sort-up',
-  thumbstack: 'thumbstack',
+  thumbtack: 'thumbtack',
   times: 'times',
   upload: 'upload',
   wrench: 'wrench', // custom, does not have FA variant

diff --git a/src/theme/icons/index.ts b/src/theme/icons/index.ts
@@ -44,7 +44,7 @@ export { infoCircleOutline } from './infoCircleOutline';
 export { columns3 } from './columns-3';
 export { backwardStep } from './backwardStep';
 export { gripLines } from './gripLines';
-export { thumbstack } from './thumbstack';
+export { thumbtack } from './thumbtack';
 export { anglesRight } from './anglesRight';
 export { copy } from './copy';
 export { expand } from './expand';

diff --git a/src/theme/icons/thumbstack.ts b/src/theme/icons/thumbstack.ts
diff --git a/src/theme/icons/thumbtack.ts b/src/theme/icons/thumbtack.ts
@@ -0,0 +1,18 @@
+/* regular - thumbtack */
+
+import type {
+  IconDefinition,
+  IconName,
+  IconPrefix,
+} from '@fortawesome/fontawesome-svg-core';
+
+export const width = 384;
+export const height = 512;
+export const unicode = 'e035';
+export const svgPathData =
+  'M 132.375 47.39 L 121.303 191.926 C 120.317 206.186 113.035 218.745 101.151 226.692 C 76.825 243.264 58.33 268.665 50.805 298.743 L 48.855 306.395 L 169.875 306.395 L 169.875 215.728 C 169.807 209.477 172.208 204.146 176.327 200.013 C 180.451 195.917 185.762 193.513 192.047 193.513 C 198.32 193.513 203.57 195.829 207.715 199.962 C 211.808 204.066 214.275 209.344 214.223 215.614 L 214.221 306.395 L 335.24 306.395 L 333.288 298.743 C 325.667 268.666 307.337 243.3 282.994 226.827 C 271.126 218.89 263.787 206.257 262.795 192.081 L 251.909 49.962 C 251.817 48.84 251.814 47.572 251.814 46.364 L 251.814 44.348 L 132.381 44.348 L 132.381 46.364 C 132.381 46.702 132.381 46.961 132.38 47.249 L 132.375 47.39 Z M 30.74 350.741 C 21.216 350.819 12.699 346.619 6.968 339.105 C 1.135 331.594 -0.876 322.284 1.512 313.093 L 7.747 287.933 C 17.968 246.657 42.853 212.579 76.167 190.038 L 76.969 189.497 L 84.3 94.897 L 88.197 44.348 L 54.933 44.348 C 50.773 44.37 47.022 43.265 43.656 41.273 C 36.921 37.342 32.804 30.488 32.804 22.175 C 32.804 15.889 35.209 10.578 39.304 6.456 C 43.44 2.325 48.769 -0.064 55.019 0.002 L 329.189 0.001 C 335.461 -0.052 340.737 2.413 344.841 6.506 C 348.972 10.652 351.291 15.903 351.291 22.175 C 351.291 30.508 347.03 37.404 340.352 41.325 C 336.931 43.351 333.312 44.381 329.089 44.348 L 295.898 44.348 L 299.795 94.902 L 307.025 189.494 L 307.426 189.767 L 307.833 190.045 C 341.144 212.58 366.025 246.759 376.244 287.935 L 382.508 313.184 C 384.891 322.391 382.789 331.672 376.987 339.156 C 371.239 346.705 362.587 350.825 353.174 350.741 L 214.221 350.741 L 214.222 489.899 C 214.275 496.17 211.808 501.447 207.715 505.551 C 203.57 509.681 198.32 512 192.047 512 C 185.762 512 180.451 509.596 176.329 505.501 C 172.194 501.361 169.808 496.037 169.875 489.784 L 169.875 350.741 L 168.867 350.741 L 30.74 350.741 Z';
+export const thumbtack = {
+  prefix: 'ssc' as IconPrefix,
+  iconName: 'thumbtack' as IconName,
+  icon: [width, height, [], unicode, svgPathData],
+} as IconDefinition;