From c37d3d466c5b9ec35e109ffc43f14be04b7a96dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Tue, 23 Apr 2024 14:39:39 -0500 Subject: [PATCH 1/8] feat(@clayui/core): adds new width API for the picker --- packages/clay-core/src/picker/Picker.tsx | 15 +++++++++++++++ .../clay-css/src/scss/variables/_dropdowns.scss | 1 + 2 files changed, 16 insertions(+) diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index bfe117d346..753c9bc96d 100644 --- a/packages/clay-core/src/picker/Picker.tsx +++ b/packages/clay-core/src/picker/Picker.tsx @@ -126,6 +126,11 @@ export type Props = { */ selectedKey?: React.Key; + /** + * Flag to define the panel width behavior. + */ + width?: 'flexible' | 'fixed'; + /** * Sets the className for the React.Portal Menu element. */ @@ -163,6 +168,7 @@ export function Picker | string | number>({ onSelectionChange, placeholder = 'Select an option', selectedKey: externalSelectedKey, + width = 'fixed', ...otherProps }: Props) { const [active, setActive] = useControlledState({ @@ -529,6 +535,15 @@ export function Picker | string | number>({ )} ref={menuRef} role="presentation" + style={ + width === 'flexible' && + (triggerRef.current?.clientWidth || 0) > 160 + ? { + maxWidth: 'none', + width: `${triggerRef.current?.clientWidth}px`, + } + : {} + } > {UNSAFE_behavior === 'secondary' && (isArrowVisible === 'top' || diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss index 6b2e643016..c90e9f22fd 100644 --- a/packages/clay-css/src/scss/variables/_dropdowns.scss +++ b/packages/clay-css/src/scss/variables/_dropdowns.scss @@ -943,6 +943,7 @@ $dropdown-menu-palette: () !default; $dropdown-menu-palette: map-deep-merge( ( '.dropdown-menu-select.dropdown-menu': ( + min-width: 160px, dropdown-header: ( padding-bottom: 0.375rem, padding-left: 1.75rem, From fa59afcb7de70efa6ca658b10770ceca3f2ec249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Tue, 23 Apr 2024 14:41:48 -0500 Subject: [PATCH 2/8] chore(@clayui/core): update picker stories --- packages/clay-core/stories/Picker.stories.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/clay-core/stories/Picker.stories.tsx b/packages/clay-core/stories/Picker.stories.tsx index 79f25b50aa..fffa99afb9 100644 --- a/packages/clay-core/stories/Picker.stories.tsx +++ b/packages/clay-core/stories/Picker.stories.tsx @@ -225,3 +225,45 @@ export const CustomGroup = () => { ); }; + +export const Width = ({width}: {width: 'fixed' | 'flexible'}) => { + const pickerId = useId(); + const labelId = useId(); + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +}; + +Width.args = { + width: 'flexible', +}; + +Width.argTypes = { + width: { + control: {type: 'select'}, + options: ['fixed', 'flexible'], + }, +}; From 460c337047341da3e1beb427cc7be4d933413a38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Wed, 24 Apr 2024 16:02:55 -0500 Subject: [PATCH 3/8] docs(@clayui/core): adds flexible width documentation for Picker --- packages/clay-core/docs/picker.js | 47 ++++++++++++++++++++++++++++++ packages/clay-core/docs/picker.mdx | 6 ++++ 2 files changed, 53 insertions(+) diff --git a/packages/clay-core/docs/picker.js b/packages/clay-core/docs/picker.js index 875ab23f22..0665abc9f0 100644 --- a/packages/clay-core/docs/picker.js +++ b/packages/clay-core/docs/picker.js @@ -13,6 +13,52 @@ import Layout from '@clayui/layout'; import {useId} from '@clayui/shared'; import React from 'react'; +const PickerWidthExample = () => { + const imports = `import {Option, Picker} from '@clayui/core'; +import Form from '@clayui/form'; +import React from 'react';`; + + const code = `const CustomWidth = () => { + return ( +
+ + + + {(item) => } + + +
+ ); +}; + +render()`; + + return ( + + ); +}; + const exampleImports = `import {Option, Picker} from '@clayui/core'; import Form from '@clayui/form'; import React from 'react';`; @@ -262,6 +308,7 @@ const PickerGroupExample = () => { ); }; export { + PickerWidthExample, PickerExample, PickerGroupExample, PickerTriggerExample, diff --git a/packages/clay-core/docs/picker.mdx b/packages/clay-core/docs/picker.mdx index ca7350b096..33e252e124 100644 --- a/packages/clay-core/docs/picker.mdx +++ b/packages/clay-core/docs/picker.mdx @@ -7,6 +7,7 @@ storybookPath: 'design-system-components-picker' --- import { + PickerWidthExample, PickerExample, PickerGroupExample, PickerTriggerExample, @@ -26,6 +27,7 @@ import { - [Custom Trigger](#custom-trigger) - [Custom Options](#custom-options) - [Group](#group) +- [Flexibe width](#flexibe-width) - [Hybrid component](#hybrid-component) @@ -153,6 +155,10 @@ The composition allows you to customize the component or add new features. See s +## Flexibe width + + + ## Hybrid component Native select for mobile devices offers a better experience compared to Picker in some cases. The Picker offers the possibility to render using the native selector of the browser of the device when it is detected that it is on a mobile device, by default this property is disabled but it can be enabled by setting the `native` property to `true`. From 17681fb2ab356237a10cff11a0cc5ba82eb6720a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Fri, 26 Apr 2024 12:49:22 -0500 Subject: [PATCH 4/8] feat(@clayui/core): changes the API behavior to only define the width --- packages/clay-core/docs/picker.js | 29 +++-- packages/clay-core/src/picker/Picker.tsx | 30 ++--- packages/clay-core/stories/Picker.stories.tsx | 107 ++++++++++++------ .../src/scss/variables/_dropdowns.scss | 1 - 4 files changed, 102 insertions(+), 65 deletions(-) diff --git a/packages/clay-core/docs/picker.js b/packages/clay-core/docs/picker.js index 0665abc9f0..3997d385de 100644 --- a/packages/clay-core/docs/picker.js +++ b/packages/clay-core/docs/picker.js @@ -20,30 +20,27 @@ import React from 'react';`; const code = `const CustomWidth = () => { return ( -
+
{(item) => } diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index 753c9bc96d..3b3f60f468 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; /** - * Flag to define the panel width behavior. + * Flag to define the panel width. */ - width?: 'flexible' | 'fixed'; + width?: number; /** * Sets the className for the React.Portal Menu element. @@ -168,7 +168,7 @@ export function Picker | string | number>({ onSelectionChange, placeholder = 'Select an option', selectedKey: externalSelectedKey, - width = 'fixed', + width, ...otherProps }: Props) { const [active, setActive] = useControlledState({ @@ -527,23 +527,25 @@ export function Picker | string | number>({ >
160 - ? { - maxWidth: 'none', - width: `${triggerRef.current?.clientWidth}px`, - } - : {} - } + style={{ + maxWidth: 'none', + width: `${ + typeof width === 'number' + ? width + : (triggerRef.current?.clientWidth || 0) > + 160 + ? triggerRef.current?.clientWidth + : 160 + }px`, + }} > {UNSAFE_behavior === 'secondary' && (isArrowVisible === 'top' || diff --git a/packages/clay-core/stories/Picker.stories.tsx b/packages/clay-core/stories/Picker.stories.tsx index fffa99afb9..150e9c6cbf 100644 --- a/packages/clay-core/stories/Picker.stories.tsx +++ b/packages/clay-core/stories/Picker.stories.tsx @@ -226,44 +226,83 @@ export const CustomGroup = () => { ); }; -export const Width = ({width}: {width: 'fixed' | 'flexible'}) => { +export const Width = () => { const pickerId = useId(); const labelId = useId(); return ( -
- - - - - - - - - - - - - - - - - -
- ); -}; + <> +
+ + + + + + + + + + + + + + + + + +
-Width.args = { - width: 'flexible', -}; +
+ + + + + + + + + + + + + + + + + +
-Width.argTypes = { - width: { - control: {type: 'select'}, - options: ['fixed', 'flexible'], - }, +
+ + + + + + + + + + +
+ + ); }; diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss index c90e9f22fd..6b2e643016 100644 --- a/packages/clay-css/src/scss/variables/_dropdowns.scss +++ b/packages/clay-css/src/scss/variables/_dropdowns.scss @@ -943,7 +943,6 @@ $dropdown-menu-palette: () !default; $dropdown-menu-palette: map-deep-merge( ( '.dropdown-menu-select.dropdown-menu': ( - min-width: 160px, dropdown-header: ( padding-bottom: 0.375rem, padding-left: 1.75rem, From 29db93528b53ea72bab6dc29b8df730dbb480ffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Fri, 26 Apr 2024 12:50:05 -0500 Subject: [PATCH 5/8] chore(@clayui/date-picker): updates the size of the year picker --- packages/clay-date-picker/src/DateNavigation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clay-date-picker/src/DateNavigation.tsx b/packages/clay-date-picker/src/DateNavigation.tsx index df122dc971..efa40dff38 100644 --- a/packages/clay-date-picker/src/DateNavigation.tsx +++ b/packages/clay-date-picker/src/DateNavigation.tsx @@ -109,6 +109,7 @@ const ClayDatePickerDateNavigation = ({ ) } selectedKey={String(currentMonth.getFullYear())} + width={85} > {(item) => (