diff --git a/packages/clay-core/docs/picker.js b/packages/clay-core/docs/picker.js index 875ab23f22..3997d385de 100644 --- a/packages/clay-core/docs/picker.js +++ b/packages/clay-core/docs/picker.js @@ -13,6 +13,49 @@ 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 +305,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..a6f59d2621 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 +## Flexible 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`. diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx index bfe117d346..56ef742c74 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; + /** + * Sets the fixed width of the panel. + */ + width?: number; + /** * 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, ...otherProps }: Props) { const [active, setActive] = useControlledState({ @@ -521,14 +527,25 @@ export function Picker | string | number>({ >
+ 160 + ? triggerRef.current?.clientWidth + : 160 + }px`, + }} > {UNSAFE_behavior === 'secondary' && (isArrowVisible === 'top' || 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 301fc7759e..b16b155866 100644 --- a/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap +++ b/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap @@ -132,9 +132,9 @@ exports[`Picker basic rendering renders open component by default 1`] = `
); }; + +export const Width = () => { + const pickerId = useId(); + const labelId = useId(); + + return ( + <> +
+ + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + +
+ + ); +}; 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) => (