Merge pull request #2515 from epam/fix/2479-columns-config-improvements

[DataTable]: ColumnsConfigurationModal improvements
epam · Oct 1, 2024 · 3537aa1 · 3537aa1
2 parents 7391f3f + 6f5bff8
commit 3537aa1
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 45 deletions.
diff --git a/changelog.md b/changelog.md
@@ -2,6 +2,7 @@
 
 **What's New**
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+* [DataTable]: - `ColumnsConfigurationModal` - updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
 
 **What's Fixed**
 

diff --git a/uui/components/layout/FlexItems/FlexRow.module.scss b/uui/components/layout/FlexItems/FlexRow.module.scss
@@ -22,7 +22,10 @@
     // If we have an "border-box" value here, an size-24 row with a bottom border, will have 23px min-height.
     box-sizing: content-box;
     background-color: var(--uui-flex-row-bg);
-    min-height: var(--uui-flex-row-size);
+
+    &[class*='uui-size-'] {
+        min-height: var(--uui-flex-row-size);
+    }
 
     &.border-top {
         border-top: var(--uui-flex-row-border);

diff --git a/uui/components/overlays/Modals.tsx b/uui/components/overlays/Modals.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
-import { withMods, ModalFooterCoreProps, ModalWindowProps as uuiModalWindowProps, ModalBlockerProps, ModalHeaderCoreProps } from '@epam/uui-core';
+import {
+    withMods, ModalFooterCoreProps, ModalWindowProps as uuiModalWindowProps, ModalBlockerProps, ModalHeaderCoreProps, isMobile,
+} from '@epam/uui-core';
 import { ModalBlocker as uuiModalBlocker, ModalWindow as uuiModalWindow } from '@epam/uui-components';
 import { FlexRow, FlexSpacer, RowMods, FlexCell, FlexRowProps } from '../layout';
 import { IconButton } from '../buttons';
 import { Text } from '../typography';
-import { isMobile } from '@epam/uui-core';
+import { settings } from '../../settings';
+
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/navigation-close-outline.svg';
+
 import css from './Modals.module.scss';
 
 export const ModalBlocker = withMods<ModalBlockerProps, ModalBlockerProps>(uuiModalBlocker, () => [css.modalBlocker]);
@@ -36,15 +40,9 @@ export const ModalWindow = withMods<uuiModalWindowProps, ModalWindowProps>(
     uuiModalWindow,
     () => [css.root, css.modal],
     (props) => {
-        const normalize = (d: number | string | undefined): string | undefined => {
-            if (typeof d === 'number') {
-                return `${d}px`;
-            }
-            return d;
-        };
-        const width = normalize(props.width) || '420px';
-        const height = normalize(props.height) || 'auto';
-        const maxHeight = isMobile() ? '100dvh' : (normalize(props.maxHeight) || '80dvh');
+        const width = props.width || settings.sizes.modal.window.defaults.width;
+        const height = props.height || 'auto';
+        const maxHeight = isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
         return {
             style: {
                 ...props.style,

diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
       Object {
         "height": "auto",
         "maxHeight": "80dvh",
-        "width": "420px",
+        "width": 420,
       }
     }
   >
@@ -207,7 +207,7 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
       Object {
         "height": "auto",
         "maxHeight": "80dvh",
-        "width": "420px",
+        "width": 420,
       }
     }
   >

diff --git a/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap
@@ -20,9 +20,9 @@ exports[`Modals should be rendered correctly with many props 1`] = `
     role="dialog"
     style={
       Object {
-        "height": "300px",
+        "height": 300,
         "maxHeight": "80dvh",
-        "width": "300px",
+        "width": 300,
       }
     }
   >
@@ -114,7 +114,7 @@ exports[`Modals should be rendered correctly with minimum props 1`] = `
       Object {
         "height": "auto",
         "maxHeight": "80dvh",
-        "width": "420px",
+        "width": "420",
       }
     }
   >

diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
@@ -20,9 +20,9 @@ exports[`PickerModal should be rendered correctly 1`] = `
     role="dialog"
     style={
       Object {
-        "height": "700px",
+        "height": 700,
         "maxHeight": "80dvh",
-        "width": "600px",
+        "width": 600,
       }
     }
   >
@@ -465,9 +465,9 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
     role="dialog"
     style={
       Object {
-        "height": "700px",
+        "height": 700,
         "maxHeight": "80dvh",
-        "width": "600px",
+        "width": 600,
       }
     }
   >

diff --git a/uui/components/tables/columnsConfigurationModal/ColumnRow.module.scss b/uui/components/tables/columnsConfigurationModal/ColumnRow.module.scss
@@ -6,17 +6,25 @@
     box-sizing: border-box;
     touch-action: auto;
     column-gap: var(--uui-horizontal-gap);
-    padding: 0 var(--uui-dt-columns_config_modal-padding);
+    padding: var(--uui-vertical-padding) var(--uui-dt-columns_config_modal-padding);
+
+    .pin-icon-button {
+        min-height: auto;
+        column-gap: var(--uui-dt-columns_config_modal-pin_icon_button-column-gap);
+        padding-top: var(--uui-vertical-padding);
+        padding-bottom: var(--uui-vertical-padding);
+    }
 
     &.not-pinned:not(:hover):not(:focus-within) {
         .pin-icon-button {
             visibility: hidden;
-            column-gap: var(--uui-dt-columns_config_modal-pin_icon_button-column-gap);
         }
     }
 
-    .grow {
+    .checkbox {
         flex-grow: 1;
+        padding-top: var(--uui-vertical-padding);
+        padding-bottom: var(--uui-vertical-padding);
     }
 
     &:hover {
@@ -26,6 +34,8 @@
     .drag-handle {
         opacity: 1;
         touch-action: none;
+        padding-top: var(--uui-vertical-padding);
+        padding-bottom: var(--uui-vertical-padding);
 
         &.dnd-disabled {
             opacity: 0.3;

diff --git a/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx b/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { cx, DataColumnProps, DndActor, DndActorRenderParams, uuiDndState } from '@epam/uui-core';
-import { FlexRow, FlexRowProps } from '../../layout';
+import { FlexRow } from '../../layout';
 import { Checkbox } from '../../inputs';
 import { DropMarker } from '../../dnd';
 import { DragHandle, ColumnsConfigurationRowProps } from '@epam/uui-components';
 import { PinIconButton } from './PinIconButton';
 import { ReactComponent as DragIndicatorIcon } from '@epam/assets/icons/common/action-drag_indicator-18.svg';
-import { settings } from '../../../settings';
 
 import css from './ColumnRow.module.scss';
 
@@ -34,10 +33,11 @@ export const ColumnRow = React.memo(function ColumnRow(props: ColumnRowProps<any
 
         return (
             <FlexRow
-                size={ settings.sizes.dataTable.columnsConfigurationModal.columnRow as FlexRowProps['size'] }
+                size={ null }
                 cx={ wrapperClasses }
                 ref={ dndActorParams.ref }
                 rawProps={ { ...restEventHandlers } }
+                alignItems="top"
             >
                 <DragHandle
                     dragHandleIcon={ DragIndicatorIcon }
@@ -50,11 +50,11 @@ export const ColumnRow = React.memo(function ColumnRow(props: ColumnRowProps<any
                     label={ props.renderItem ? props.renderItem(props.column) : column.caption }
                     value={ isVisible }
                     onValueChange={ toggleVisibility }
-                    isDisabled={ column.isAlwaysVisible }
-                    cx={ css.grow }
+                    isReadonly={ column.isAlwaysVisible }
+                    cx={ css.checkbox }
                 />
                 <FlexRow
-                    size={ settings.sizes.dataTable.columnsConfigurationModal.columnRow as FlexRowProps['size'] }
+                    size={ null }
                     cx={ css.pinIconButton }
                 >
                     <PinIconButton pinPosition={ pinPosition } canUnpin={ !isPinnedAlways } onTogglePin={ togglePin } />

diff --git a/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.module.scss b/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.module.scss
@@ -4,7 +4,7 @@
     --uui-dt-columns_config_modal-padding: 24px;
     --uui-dt-columns_config_modal-horizontal-gap: 6px;
     --uui-dt-columns_config_modal-search_area-min-height: 42px;
-    --uui-dt-columns_config_modal-pin_icon_button-column-gap: 12px;
+    --uui-dt-columns_config_modal-pin_icon_button-column-gap: 6px;
     //
     --uui-dt-columns_config_modal-group_title-font-size: 14px;
     --uui-dt-columns_config_modal-group_title-line-height: 18px;

diff --git a/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx b/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx
@@ -111,7 +111,7 @@ export function ColumnsConfigurationModal<TItem, TId, TFilter>(props: ColumnsCon
 
     return (
         <ModalBlocker { ...modalProps }>
-            <ModalWindow cx={ css.root } height="95dvh" maxHeight="95dvh">
+            <ModalWindow cx={ css.root } height="95dvh" maxHeight="95dvh" width={ settings.sizes.dataTable.columnsConfigurationModal.width }>
                 <ModalHeader title={ i18n.configureColumnsTitle } onClose={ close } />
                 <FlexRow
                     borderBottom={ true }

diff --git a/...columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap b/...columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
       Object {
         "height": "95dvh",
         "maxHeight": "95dvh",
-        "width": "420px",
+        "width": "560",
       }
     }
   >
@@ -244,7 +244,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                 }
               >
                 <div
-                  className="uui-flex-row root uui-size-30 rowWrapper container align-items-center"
+                  className="uui-flex-row root rowWrapper container align-items-top"
                   onPointerEnter={[Function]}
                   onPointerLeave={[Function]}
                   onPointerMove={[Function]}
@@ -270,17 +270,16 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                     </div>
                   </div>
                   <label
-                    className="container uui-checkbox-container root uui-size-18 mode-form uui-color-primary grow uui-disabled"
+                    className="container uui-checkbox-container root uui-size-18 mode-form uui-color-primary checkbox uui-readonly"
                   >
                     <div
                       className="uui-checkbox uui-checked"
                     >
                       <input
                         aria-checked={true}
-                        aria-disabled={true}
+                        aria-readonly={true}
                         checked={true}
-                        disabled={true}
-                        onChange={[Function]}
+                        readOnly={true}
                         tabIndex={-1}
                         type="checkbox"
                       />
@@ -300,7 +299,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                     </div>
                   </label>
                   <div
-                    className="uui-flex-row root uui-size-30 pinIconButton container align-items-center"
+                    className="uui-flex-row root pinIconButton container align-items-center"
                     style={
                       Object {
                         "columnGap": undefined,
@@ -326,7 +325,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                   </div>
                 </div>
                 <div
-                  className="uui-flex-row root uui-size-30 rowWrapper container align-items-center"
+                  className="uui-flex-row root rowWrapper container align-items-top"
                   onPointerEnter={[Function]}
                   onPointerLeave={[Function]}
                   onPointerMove={[Function]}
@@ -352,17 +351,16 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                     </div>
                   </div>
                   <label
-                    className="container uui-checkbox-container root uui-size-18 mode-form uui-color-primary grow uui-disabled"
+                    className="container uui-checkbox-container root uui-size-18 mode-form uui-color-primary checkbox uui-readonly"
                   >
                     <div
                       className="uui-checkbox uui-checked"
                     >
                       <input
                         aria-checked={true}
-                        aria-disabled={true}
+                        aria-readonly={true}
                         checked={true}
-                        disabled={true}
-                        onChange={[Function]}
+                        readOnly={true}
                         tabIndex={-1}
                         type="checkbox"
                       />
@@ -382,7 +380,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                     </div>
                   </label>
                   <div
-                    className="uui-flex-row root uui-size-30 pinIconButton container align-items-center"
+                    className="uui-flex-row root pinIconButton container align-items-center"
                     style={
                       Object {
                         "columnGap": undefined,

diff --git a/uui/settings.ts b/uui/settings.ts
@@ -260,6 +260,14 @@ export const settings: Settings = {
                 countIndicator: '18',
                 subgroupIcon: '18',
                 search: '30',
+                width: '560',
+            },
+        },
+        modal: {
+            window: {
+                defaults: {
+                    width: '420',
+                },
             },
         },
     },

diff --git a/uui/settings.types.ts b/uui/settings.types.ts
@@ -176,6 +176,7 @@ interface DataTableColumnsConfigurationModal {
     countIndicator: string;
     subgroupIcon: string;
     search: string;
+    width: string;
 }
 
 interface FiltersPanelPickerBodySizes {
@@ -214,6 +215,18 @@ interface DataTableSizes {
     body: DataTableBodySizes;
 }
 
+interface ModalWindowDefaultSizes {
+    width: string;
+}
+
+interface ModalWindowSizes {
+    defaults: ModalWindowDefaultSizes;
+}
+
+interface ModalSizes {
+    window: ModalWindowSizes;
+}
+
 interface SizesSettings {
     defaults: DefaultSizes;
     tag: TagSizes;
@@ -224,6 +237,7 @@ interface SizesSettings {
     labeledInput: LabeledInputSizes;
     badge: BadgeSizes;
     dataTable: DataTableSizes;
+    modal: ModalSizes;
 }
 
 export interface Settings {