From d8517dd5bc405bf78c84ed238dfc0c7352700a95 Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Thu, 20 Jun 2024 12:12:37 -0300 Subject: [PATCH 1/8] fix(@clayui/picker): LPD-28522 Add option to add auto width --- packages/clay-core/src/picker/Picker.tsx | 27 +++++++++++++++--------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index 56ef742c74..214e5784b3 100644 --- a/packages/clay-core/src/picker/Picker.tsx +++ b/packages/clay-core/src/picker/Picker.tsx @@ -127,9 +127,9 @@ export type Props = { selectedKey?: React.Key; /** - * Sets the fixed width of the panel. + * Sets the width of the panel. */ - width?: number; + width?: number | string; /** * Sets the className for the React.Portal Menu element. @@ -382,6 +382,20 @@ export function Picker | string | number>({ ); } + const getComponentWidth = () => { + if (typeof width === 'string' && width === 'auto') { + return width; + } + + if (typeof width === 'number' && width > 160) { + return `${width}px`; + } + + const clientWidth = triggerRef?.current?.clientWidth || 0; + + return clientWidth > 160 ? `${clientWidth}px` : '160px'; + }; + return ( <> @@ -537,14 +551,7 @@ export function Picker | string | number>({ role="presentation" style={{ maxWidth: 'none', - width: `${ - typeof width === 'number' - ? width - : (triggerRef.current?.clientWidth || 0) > - 160 - ? triggerRef.current?.clientWidth - : 160 - }px`, + width: getComponentWidth(), }} > {UNSAFE_behavior === 'secondary' && From e11d87bc98247fe0fe40c2202313f2b25d17295d Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Thu, 20 Jun 2024 12:13:54 -0300 Subject: [PATCH 2/8] fix(@clayui/picker): LPD-28522 Update picker stories and test config --- jest.config.js | 4 ++-- packages/clay-core/stories/Picker.stories.tsx | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 930cc70d72..21d563bcb9 100644 --- a/jest.config.js +++ b/jest.config.js @@ -58,8 +58,8 @@ module.exports = { './packages/clay-core/src/picker/': { branches: 59, functions: 66, - lines: 77, - statements: 77, + lines: 76, + statements: 76, }, './packages/clay-core/src/tree-view/': { branches: 56, diff --git a/packages/clay-core/stories/Picker.stories.tsx b/packages/clay-core/stories/Picker.stories.tsx index 150e9c6cbf..02a3db9eb7 100644 --- a/packages/clay-core/stories/Picker.stories.tsx +++ b/packages/clay-core/stories/Picker.stories.tsx @@ -303,6 +303,27 @@ export const Width = () => { + +
+ + + + + + + + + + +
); }; From 2f97b9b7a56e688f015461a989fd287cee3110c2 Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Fri, 21 Jun 2024 09:26:27 -0300 Subject: [PATCH 3/8] fix(@clayui/picker): LPD-28522 Add min width and change function logic --- packages/clay-core/src/picker/Picker.tsx | 26 +++++++++++------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index 214e5784b3..6062908e1d 100644 --- a/packages/clay-core/src/picker/Picker.tsx +++ b/packages/clay-core/src/picker/Picker.tsx @@ -129,7 +129,7 @@ export type Props = { /** * Sets the width of the panel. */ - width?: number | string; + width?: number; /** * Sets the className for the React.Portal Menu element. @@ -382,19 +382,16 @@ export function Picker | string | number>({ ); } - const getComponentWidth = () => { - if (typeof width === 'string' && width === 'auto') { - return width; - } - - if (typeof width === 'number' && width > 160) { - return `${width}px`; - } + const clientWidth = triggerRef.current?.clientWidth; + let menuMinWidth = '160px'; + let menuWidth = 'auto'; - const clientWidth = triggerRef?.current?.clientWidth || 0; - - return clientWidth > 160 ? `${clientWidth}px` : '160px'; - }; + if (typeof width === 'number') { + menuMinWidth = `${clientWidth || 0}px`; + menuWidth = `${width}px`; + } else if ((clientWidth || 0) > 160) { + menuMinWidth = `${clientWidth}px`; + } return ( <> @@ -551,7 +548,8 @@ export function Picker | string | number>({ role="presentation" style={{ maxWidth: 'none', - width: getComponentWidth(), + minWidth: menuMinWidth, + width: menuWidth, }} > {UNSAFE_behavior === 'secondary' && From 9985cc51209dde65faef5fc4e10bccbbd83dda54 Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Fri, 21 Jun 2024 09:26:52 -0300 Subject: [PATCH 4/8] fix(@clayui/picker): LPD-28522 Update snapshot --- .../src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap index b16b155866..a69b3db22d 100644 --- a/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap +++ b/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap @@ -134,7 +134,7 @@ exports[`Picker basic rendering renders open component by default 1`] = `