From abd2e46f94a08e600b9e850a7bdfe49940984af1 Mon Sep 17 00:00:00 2001 From: Yaroslav Kuznietsov Date: Mon, 4 Dec 2023 17:10:58 +0200 Subject: [PATCH 1/4] [PickerInput]: fixed missing width on dropdown container. --- uui-components/src/overlays/DropdownContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/uui-components/src/overlays/DropdownContainer.tsx b/uui-components/src/overlays/DropdownContainer.tsx index 6df785fa7b..eb4fdb73e0 100644 --- a/uui-components/src/overlays/DropdownContainer.tsx +++ b/uui-components/src/overlays/DropdownContainer.tsx @@ -79,7 +79,7 @@ export const DropdownContainer = React.forwardRef((props: DropdownContainerProps forwardedRef={ !focusLock && ref as React.ForwardedRef } cx={ cx(uuiElement.dropdownBody, uuiMarkers.lockFocus, props.cx) } style={ { - ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth, + ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth, width: props.width, } } rawProps={ { tabIndex: -1, ...props.rawProps } } > From c5e81da9846a9a5b2bafb2315fd511a936183184 Mon Sep 17 00:00:00 2001 From: Yaroslav Kuznietsov Date: Mon, 4 Dec 2023 17:36:19 +0200 Subject: [PATCH 2/4] [PickerInput]: fixed missing max-width on dropdown container and fixed snapshots. --- uui-components/src/overlays/DropdownContainer.tsx | 2 +- .../__tests__/__snapshots__/DropdownContainer.test.tsx.snap | 2 +- .../pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap | 2 +- .../__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/uui-components/src/overlays/DropdownContainer.tsx b/uui-components/src/overlays/DropdownContainer.tsx index eb4fdb73e0..c068e63902 100644 --- a/uui-components/src/overlays/DropdownContainer.tsx +++ b/uui-components/src/overlays/DropdownContainer.tsx @@ -79,7 +79,7 @@ export const DropdownContainer = React.forwardRef((props: DropdownContainerProps forwardedRef={ !focusLock && ref as React.ForwardedRef } cx={ cx(uuiElement.dropdownBody, uuiMarkers.lockFocus, props.cx) } style={ { - ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth, width: props.width, + ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth ?? props.width, } } rawProps={ { tabIndex: -1, ...props.rawProps } } > diff --git a/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap index 02213785c0..fafa1ebafc 100644 --- a/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap +++ b/uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap @@ -26,7 +26,7 @@ exports[`DropdownContainer should be rendered correctly 2`] = ` className="uui-dropdown-body -lock-focus root vPadding-18 padding-24 container" style={ Object { - "maxWidth": undefined, + "maxWidth": 300, "minHeight": 600, "minWidth": 300, } diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap index 5fac7da06c..3cc315f531 100644 --- a/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap +++ b/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap @@ -42,7 +42,7 @@ exports[`PickerInput should open body 1`] = ` >
Date: Wed, 6 Dec 2023 13:20:25 +0200 Subject: [PATCH 3/4] [PickerInput]: updated changelog. --- changelog.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/changelog.md b/changelog.md index cd48b2f6f3..e95ff32e28 100644 --- a/changelog.md +++ b/changelog.md @@ -4,12 +4,14 @@ **What's Fixed** * [Button]: fixed `rawProps` typings for `data-*` attributes +* [PickerInput]: Fixed picker input body responsiveness. + * `DropdownContainer` `width` property affects `maxWidth` if `maxWidth` is not provided. # 5.4.1 - 30.11.2023 **What's New** * [uui.epam.com](https://uui.epam.com/) site now fully support theming. You can choose preferred theme in app main menu. -* [Tag]: +* [Tag]: * rework according to the new design. Added new colors and new `solid` & `outline` mods; * [Breaking change]: for loveship package, changed default `size` from `18px` to `36px`. * Upload new icons pack @@ -24,7 +26,7 @@ **What's Fixed** * [Calendar]: fixed disabled days text color -* [Text]: +* [Text]: * fixed font-weight prop in skins. * fixed color values for semantic colors(info, warning, error, success) and for skin colors * [TextPlaceholder]: improved animation @@ -39,29 +41,29 @@ * A lot of components styles tweaks according to the design changes. * You can read more about Themes here - https://uui.epam.com/documents?id=themes -* New EPAM brand 'Electric' Theme and `@epam/electric` package. To start using Electric theme you need: +* New EPAM brand 'Electric' Theme and `@epam/electric` package. To start using Electric theme you need: * Add `@epam/electric` package to your project * Add `import '@epam/electric/styles.css'` to the root of your application * Add `import '@epam/assets/css/theme/theme_electric.css'` to the root of your application * Add `uui-theme-electric` class to the html body node * Import all necessary components from `@epam/electric` package. * Added Dark theme for Loveship. To start using Dark Loveship theme you need to: - * Add `import '@epam/assets/css/theme/theme_loveship_dark.css';` to the root of your application + * Add `import '@epam/assets/css/theme/theme_loveship_dark.css';` to the root of your application * Add `uui-theme-loveship_dark` class to the html body node. -* [Fonts]: Added `Source Sans Pro` font, which properly works with css `font-weight` and `font-style` rules. +* [Fonts]: Added `Source Sans Pro` font, which properly works with css `font-weight` and `font-style` rules. You can replace usages `Sans Semibold` font with `Source Sans Pro` and `font-weight: 600`, `Sans Italic` with `Source Sans Pro` and `font-style: italic` etc. We also keep old font-faces and variables for backward compatibility. It's recommended to move to the new approach, since old one will be deprecated in feature. * [skinContext]: removed skinContext from `UuiContexts`, it's not needed to provide it to the uui services, just remove its usage. * [Typography]: removed typography mixins. Now typography applies via css classes. If you use mixins, replace it by adding `.uui-typography` class on the same node. * [StatusIndicator]: added new `StatusIndicator` component. * [CountIndicator]: added new `CountIndicator` component. -* [Badge] : +* [Badge] : * [Breaking change]: removed fill "white" and "none" modes, use `fill="outline"` + color instead them. * [Breaking change]:removed fill "transparent", use `StatusIndicator` component instead. * [Badge]: deprecated fill "semitransparent", it will be removed in future releases. Use `fill="outline'` instead. * [LabeledInput]: * added `sidenote` and `footnote` props - * added `maxLength` and `charCounter` props. You can use them for cases when you need to show a counter which indicates the limit of symbols in input. + * added `maxLength` and `charCounter` props. You can use them for cases when you need to show a counter which indicates the limit of symbols in input. * added possibility to provide `validationMessage` as react node * [TextArea][Breaking Change]: removed `maxLength` prop, use LabeledInput with `maxLength` and `charCounter={ true }` props instead. * [CheckBox, PickerList, RichTextView, Switch, TabButton, VerticalTabButton, ScrollBars]: removed `theme` prop. Use Theming approach instead. @@ -74,7 +76,7 @@ * [PickerInput]: set `overflow: hidden;` on open for mobile * [DataTable]: fix columns reorder when there are hidden columns * [TextArea and TextInput]: fix `maxLength` for Android -* [DataTable]: fixed column order after pin action +* [DataTable]: fixed column order after pin action * [PickerInput]: Disable select all button if list are empty, and it has no selection * [DataTable]: added `role=table` * [SlateEditor]: fixed image caption appearance after upload From d75e31449875787283d211a366f2a17a0a8ace20 Mon Sep 17 00:00:00 2001 From: Aleksey Manetov Date: Wed, 6 Dec 2023 15:59:56 +0100 Subject: [PATCH 4/4] fixed maxWidth for table column filters --- uui-components/src/overlays/DropdownContainer.tsx | 4 ++-- uui/components/filters/FilterPickerBody.tsx | 2 ++ uui/components/pickers/DataPickerBody.tsx | 3 ++- uui/components/pickers/MobileDropdownWrapper.tsx | 9 ++++----- .../__tests__/__snapshots__/DataPickerBody.test.tsx.snap | 3 +++ .../__tests__/__snapshots__/PickerModal.test.tsx.snap | 2 ++ .../tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx | 2 +- .../__snapshots__/ColumnHeaderDropdown.test.tsx.snap | 4 ++-- 8 files changed, 18 insertions(+), 11 deletions(-) diff --git a/uui-components/src/overlays/DropdownContainer.tsx b/uui-components/src/overlays/DropdownContainer.tsx index c068e63902..15f47f1beb 100644 --- a/uui-components/src/overlays/DropdownContainer.tsx +++ b/uui-components/src/overlays/DropdownContainer.tsx @@ -16,8 +16,8 @@ export interface DropdownContainerProps IDropdownBodyProps { /** Defines width in 'px' or 'auto'. If 'auto' provided, will be used width of the content. */ width?: number | 'auto'; - /** Defines maximum width in 'px'. */ - maxWidth?: number; + /** Defines maximum width in 'px'. If 'auto' provided, will be used width of the content. */ + maxWidth?: number | 'auto'; /** Defines height in 'px'. */ height?: number; /** If true, arrow tip will be shown diff --git a/uui/components/filters/FilterPickerBody.tsx b/uui/components/filters/FilterPickerBody.tsx index ecef352ad2..d1e17e8dc7 100644 --- a/uui/components/filters/FilterPickerBody.tsx +++ b/uui/components/filters/FilterPickerBody.tsx @@ -51,6 +51,7 @@ export function FilterPickerBody(props: FilterPickerBodyProps, rows: DataRowProps[]) => { const renderedDataRows = rows.map((props) => renderRow(props)); const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight; + const maxWidth = isMobile() ? undefined : 360; return ( <> @@ -59,6 +60,7 @@ export function FilterPickerBody(props: FilterPickerBodyProps diff --git a/uui/components/pickers/DataPickerBody.tsx b/uui/components/pickers/DataPickerBody.tsx index b31ed1e638..47737ad85d 100644 --- a/uui/components/pickers/DataPickerBody.tsx +++ b/uui/components/pickers/DataPickerBody.tsx @@ -15,6 +15,7 @@ export interface DataPickerBodyProps extends PickerBodyBaseProps { editMode?: 'dropdown' | 'modal'; searchSize?: ControlSize; selectionMode?: 'single' | 'multi'; + maxWidth?: number; } export class DataPickerBody extends PickerBodyBase { @@ -51,7 +52,7 @@ export class DataPickerBody extends PickerBodyBase {
)} - + { this.props.rowsCount > 0 ? ( ): void; focusLock?: boolean; - width?: number; + width?: number | 'auto'; + maxWidth?: number | 'auto'; } export const MobileDropdownWrapper: React.FC = (props) => { const isMobileView = isMobile(); + const maxWidth = isMobileView ? 'auto' : props.maxWidth; return ( {isMobileView && } diff --git a/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap index 134edb9c06..06496e9984 100644 --- a/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap +++ b/uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap @@ -53,6 +53,7 @@ Array [ Object { "columnGap": undefined, "maxHeight": 800, + "maxWidth": undefined, "rowGap": undefined, } } @@ -154,6 +155,7 @@ exports[`DataPickerBody should be rendered with minimum props 1`] = ` Object { "columnGap": undefined, "maxHeight": undefined, + "maxWidth": undefined, "rowGap": undefined, } } @@ -187,6 +189,7 @@ exports[`DataPickerBody should be rendered without rows 1`] = ` Object { "columnGap": undefined, "maxHeight": undefined, + "maxWidth": undefined, "rowGap": undefined, } } diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap index 5800bda26a..7acbd54f8f 100644 --- a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap +++ b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap @@ -131,6 +131,7 @@ exports[`PickerModal should be rendered correctly 1`] = ` Object { "columnGap": undefined, "maxHeight": undefined, + "maxWidth": undefined, "rowGap": undefined, } } @@ -524,6 +525,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = ` Object { "columnGap": undefined, "maxHeight": undefined, + "maxWidth": undefined, "rowGap": undefined, } } diff --git a/uui/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx b/uui/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx index 63f063c457..16ab1d0ee3 100644 --- a/uui/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx +++ b/uui/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx @@ -31,7 +31,7 @@ const ColumnHeaderDropdownImpl: React.FC = (props) => ( - + {props.isSortable && } {props.renderFilter(dropdownProps)} diff --git a/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap b/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap index bb1e8c5ead..69c592b237 100644 --- a/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap +++ b/uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap @@ -39,9 +39,9 @@ Array [ className="uui-dropdown-body -lock-focus root container container" style={ Object { - "maxWidth": 280, + "maxWidth": "auto", "minHeight": undefined, - "minWidth": 280, + "minWidth": 360, } } tabIndex={-1}