diff --git a/changelog.md b/changelog.md index 8358c465cf..a5185d5bb1 100644 --- 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 index 0384fcb180..4312e46a86 100644 --- 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 index 4906797376..1eb04766da 100644 --- 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 index e9098ae505..1c3a0818f5 100644 --- a/uui/components/pickers/DataPickerBody.tsx +++ b/uui/components/pickers/DataPickerBody.tsx @@ -76,7 +76,7 @@ export class DataPickerBody extends PickerBodyBase { return ( <> {this.showSearch() && ( -
+
(props: DataPickerCellProps = (props) => { const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : ''; return ( - - + +
{title} - +
props.close?.() } diff --git a/uui/components/pickers/DataPickerRow.tsx b/uui/components/pickers/DataPickerRow.tsx index 6dfab9b5de..b5777093a6 100644 --- a/uui/components/pickers/DataPickerRow.tsx +++ b/uui/components/pickers/DataPickerRow.tsx @@ -37,7 +37,7 @@ export class DataPickerRow extends React.Component ); diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx index cb68f27a49..11a0112353 100644 --- 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({ highlightSearchMatches = true, ...pr 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 index a18e13ec58..434d210e88 100644 --- a/uui/components/pickers/PickerItem.tsx +++ b/uui/components/pickers/PickerItem.tsx @@ -57,7 +57,7 @@ export function PickerItem(props: PickerItemProps) { const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle; return ( - + extends IEditable, DataSourceListProps, DataTableColumnsConfigOptions, Pick { +interface DataTableCoreProps extends IEditable, DataSourceListProps, DataTableColumnsConfigOptions, Pick { /** Callback to get rows that will be rendered in table */ getRows?(): DataRowProps[]; diff --git a/uui/settings.ts b/uui/settings.ts index e43c90bdec..bc056fbceb 100644 --- a/uui/settings.ts +++ b/uui/settings.ts @@ -651,7 +651,6 @@ interface PickerInputSizes { itemVerticalPaddingMap: Sizes['size'], string>; selectIconMap: Sizes['size'], string>; footerSwitchMap: Sizes['size'], SwitchProps['size']>; - mobileHeaderTitleSize: TextProps['size']; mobileFooterLinkButton: LinkButtonProps['size']; mobileRow: DataPickerRowProps['size']; mobileSearchInput: SearchInputProps['size']; @@ -727,7 +726,6 @@ const pickerInputSettings: PickerInputSettings = { 42: '24', 48: '24', }, - mobileHeaderTitleSize: '48', mobileFooterLinkButton: '48', mobileRow: '48', mobileSearchInput: '48',