[Breaking change]: reworked vertical padding props for ModalHeader, M…

…odalFooter. Added global classes to PickerInput.
epam · Mar 5, 2025 · 32a09f5 · 32a09f5
1 parent b3faccf
commit 32a09f5
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 24 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,7 +1,8 @@
 # 5.xx.x - xx.xx.2025
 **What's New**
 * [FlexRow][Breaking Change]: all logic moved from `@epam/uui-components` to `@epam/uui`, export from `@epam/uui-components` removed. Component refactored to CSS variables approach. `alignItems`, `justifyContent` props aligned with CSS.
-
+* [ModalHeader][Breaking Change]: vertical padding props changed behavior to use direct size of padding instead divided by 2. Type changed from `'12' | '18' | '24' | '36' | '48'` to `'6' | '9' | '12' | '18' | '24'`.
+* [ModalFooter][Breaking Change]: vertical padding props changed behavior to use direct size of padding instead divided by 2. Type changed from `'12' | '18' | '24' | '36' | '48'` to `'6' | '9' | '12' | '18' | '24'`.
 
 **What's Fixed**
 * [Text]: use .uui-typography-inline instead of .uui-typography class to not conflict with Text internal styles

diff --git a/uui/components/overlays/Modals.module.scss b/uui/components/overlays/Modals.module.scss
@@ -66,11 +66,11 @@
 
     --uui-modals-footer-column-gap: 12px;
     --uui-modals-footer-padding: 24px;
-    --uui-modals-footer-vertical-padding: 24px;
+    --uui-modals-footer-vertical-padding: 12px;
     //
     border-bottom-left-radius: var(--uui-modals-border-radius);
     border-bottom-right-radius: var(--uui-modals-border-radius);
-    padding: calc(var(--uui-modals-footer-vertical-padding) / 2) var(--uui-modals-footer-padding);
+    padding: var(--uui-modals-footer-vertical-padding) var(--uui-modals-footer-padding);
     column-gap: var(--uui-modals-footer-column-gap);
 
     @media (max-width: 720px) {
@@ -88,11 +88,11 @@
 
     --uui-modals-header-column-gap: 12px;
     --uui-modals-header-padding: 24px;
-    --uui-modals-header-vertical-padding: 36px;
+    --uui-modals-header-vertical-padding: 18px;
     //
     border-top-left-radius: var(--uui-modals-border-radius);
     border-top-right-radius: var(--uui-modals-border-radius);
-    padding: calc(var(--uui-modals-header-vertical-padding) / 2) var(--uui-modals-header-padding);
+    padding: var(--uui-modals-header-vertical-padding) var(--uui-modals-header-padding);
     column-gap: var(--uui-modals-header-column-gap);
 
     &.border-bottom {

diff --git a/uui/components/overlays/Modals.tsx b/uui/components/overlays/Modals.tsx
@@ -64,7 +64,7 @@ export interface ModalHeaderMods {
     /** Defines horizontal row padding */
     padding?: '6' | '12' | '18' | '24';
     /** Defines vertical row padding */
-    vPadding?: '12' | '18' | '24' | '36' | '48';
+    vPadding?: '6' | '9' | '12' | '18' | '24';
     /** Pass true, to enable row bottom border */
     borderBottom?: boolean;
 }
@@ -116,7 +116,7 @@ export interface ModalFooterMods {
     /** Defines horizontal row padding */
     padding?: '6' | '12' | '18' | '24';
     /** Defines vertical row padding */
-    vPadding?: '12' | '18' | '24' | '36' | '48';
+    vPadding?: '6' | '9' | '12' | '18' | '24';
     /** Pass true, to enable row top border */
     borderTop?: boolean;
 }

diff --git a/uui/components/pickers/DataPickerBody.tsx b/uui/components/pickers/DataPickerBody.tsx
@@ -76,7 +76,7 @@ export class DataPickerBody extends PickerBodyBase<DataPickerBodyProps> {
         return (
             <>
                 {this.showSearch() && (
-                    <div key="search" className={ css.searchWrapper }>
+                    <div key="search" className={ cx(css.searchWrapper, 'uui-picker_input-body-search') }>
                         <FlexCell grow={ 1 }>
                             <SearchInput
                                 ref={ this.searchRef }

diff --git a/uui/components/pickers/DataPickerCell.tsx b/uui/components/pickers/DataPickerCell.tsx
@@ -70,6 +70,7 @@ export function DataPickerCell<TItem, TId>(props: DataPickerCellProps<TItem, TId
             cx={ [
                 css.root,
                 props.cx,
+                'uui-picker_input-cell',
                 'data-picker-cell',
                 props.size && `uui-size-${props.size}`,
                 css[`align-widgets-${props.alignActions || 'top'}`],

diff --git a/uui/components/pickers/DataPickerHeader.module.scss b/uui/components/pickers/DataPickerHeader.module.scss
@@ -1,6 +1,13 @@
 .header {
-    --uui-data-picker-header-close-icon-padding: 24px;
+    --uui-data-picker-header-title: var(--uui-text-primary);
+    --uui-data-picker-header-title-font: var(--uui-font);
+    --uui-data-picker-header-title-font-style: normal;
+    --uui-data-picker-header-title-font-size: 16px;
+    --uui-data-picker-header-title-line-height: 24px;
     --uui-data-picker-header-title-font-weight: 600;
+    --uui-data-picker-header-title-vertical-pading: 12px;
+
+    --uui-data-picker-header-close-icon-padding: 24px;
     //
     display: none;
     justify-content: center;
@@ -11,7 +18,14 @@
     }
 
     .title {
-        --uui-text-font-weight: var(--uui-data-picker-header-title-font-weight);
+        color: var(--uui-data-picker-header-title);
+        font-family: var(--uui-data-picker-header-title-font);
+        font-size: var(--uui-data-picker-header-title-font-size);
+        line-height: var(--uui-data-picker-header-title-line-height);
+        font-style: var(--uui-data-picker-header-title-font-style);
+        font-weight: var(--uui-data-picker-header-title-font-weight);
+        padding-bottom: var(--uui-data-picker-header-title-vertical-pading);
+        padding-top: var(--uui-data-picker-header-title-vertical-pading);
     }
 }
 

diff --git a/uui/components/pickers/DataPickerHeader.tsx b/uui/components/pickers/DataPickerHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Text } from '../typography';
 import { IconButton } from '../buttons';
 import { FlexRow } from '../layout';
 import { settings } from '../../settings';
@@ -15,13 +14,10 @@ const DataPickerHeaderImpl: React.FC<DataPickerHeaderProps> = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
 
     return (
-        <FlexRow alignItems="center" borderBottom cx={ css.header }>
-            <Text
-                size={ settings.pickerInput.sizes.body.mobileHeaderTitleSize }
-                cx={ css.title }
-            >
+        <FlexRow alignItems="center" borderBottom cx={ [css.header, 'uui-picker_input-body-header'] }>
+            <div className={ css.title }>
                 {title}
-            </Text>
+            </div>
             <IconButton
                 icon={ settings.pickerInput.icons.body.pickerBodyMobileHeaderCloseIcon }
                 onClick={ () => props.close?.() }

diff --git a/uui/components/pickers/DataPickerRow.tsx b/uui/components/pickers/DataPickerRow.tsx
@@ -37,7 +37,7 @@ export class DataPickerRow<TItem, TId> extends React.Component<DataPickerRowProp
         return (
             <UUIDataPickerRow
                 { ...this.props }
-                cx={ [css.pickerRow, this.props.cx] }
+                cx={ [css.pickerRow, 'uui-picker_input-row', this.props.cx] }
                 renderContent={ this.renderContent }
             />
         );

diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
@@ -4,7 +4,7 @@ import {
     PickerInputElement, isMobile, Overwrite, PickerInputBaseProps,
 } from '@epam/uui-core';
 import { PickerTogglerRenderItemParams, PickerBodyBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
-import { Dropdown } from '../overlays/Dropdown';
+import { Dropdown } from '../overlays';
 import { PickerModal } from './PickerModal';
 import { PickerToggler, PickerTogglerMods } from './PickerToggler';
 import { PickerBodyMobileView } from './PickerBodyMobileView';
@@ -173,7 +173,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
             <PickerBodyMobileView
                 title={ props.entityName }
                 onClose={ () => toggleBodyOpening(false) }
-                cx={ [props.bodyCx] }
+                cx={ [props.bodyCx, 'uui-picker_input-body-wrapper'] }
                 onKeyDown={ bodyProps.onKeyDown }
                 width={ bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth }
                 focusLock={ getSearchPosition() === 'body' }

diff --git a/uui/components/pickers/PickerItem.tsx b/uui/components/pickers/PickerItem.tsx
@@ -57,7 +57,7 @@ export function PickerItem<TItem, TId>(props: PickerItemProps<TItem, TId>) {
     const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
 
     return (
-        <FlexCell width="auto" cx={ [css.root, 'uui-typography', cx] }>
+        <FlexCell width="auto" cx={ [css.root, 'uui-picker_input-item', 'uui-typography', cx] }>
             <FlexRow
                 size={ itemSize }
                 cx={ [isMultiline && css.multiline, css.columnGap] }

diff --git a/uui/components/tables/DataTable.tsx b/uui/components/tables/DataTable.tsx
@@ -20,7 +20,7 @@ import { settings } from '../../settings';
 import './variables.scss';
 import css from './DataTable.module.scss';
 
-export interface DataTableCoreProps<TItem, TId, TFilter = any> extends IEditable<DataTableState>, DataSourceListProps, DataTableColumnsConfigOptions, Pick<VirtualListProps, 'onScroll'> {
+interface DataTableCoreProps<TItem, TId, TFilter = any> extends IEditable<DataTableState>, DataSourceListProps, DataTableColumnsConfigOptions, Pick<VirtualListProps, 'onScroll'> {
     /** Callback to get rows that will be rendered in table */
     getRows?(): DataRowProps<TItem, TId>[];
 

diff --git a/uui/settings.ts b/uui/settings.ts
@@ -651,7 +651,6 @@ interface PickerInputSizes {
         itemVerticalPaddingMap: Sizes<PickerItemProps<unknown, unknown>['size'], string>;
         selectIconMap: Sizes<DataPickerCellProps<unknown, unknown>['size'], string>;
         footerSwitchMap: Sizes<DataPickerFooterProps<unknown, unknown>['size'], SwitchProps['size']>;
-        mobileHeaderTitleSize: TextProps['size'];
         mobileFooterLinkButton: LinkButtonProps['size'];
         mobileRow: DataPickerRowProps<unknown, unknown>['size'];
         mobileSearchInput: SearchInputProps['size'];
@@ -727,7 +726,6 @@ const pickerInputSettings: PickerInputSettings = {
                 42: '24',
                 48: '24',
             },
-            mobileHeaderTitleSize: '48',
             mobileFooterLinkButton: '48',
             mobileRow: '48',
             mobileSearchInput: '48',