docs(@clayui/core): adds flexible width documentation for Picker

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 (
+		<div style={{width: '240px'}}>
+			<Form.Group>
+				<label htmlFor="picker" id="picker-label">
+					Choose a fruit
+				</label>
+				<Picker
+					width="flexible"
+					aria-labelledby="picker-label"
+					id="picker"
+					items={[
+						'Apple',
+						'Banana',
+						'Mangos',
+						'Blueberry',
+						'Boysenberry',
+						'Cherry',
+						'Cranberry',
+						'Eggplant',
+						'Fig',
+						'Grape',
+						'Guava',
+						'Huckleberry',
+					]}
+					placeholder="Select a fruit"
+				>
+					{(item) => <Option key={item}>{item}</Option>}
+				</Picker>
+			</Form.Group>
+		</div>
+	);
+};
+
+render(<CustomWidth />)`;
+
+	return (
+		<Editor code={code} imports={imports} scope={{Form, Option, Picker}} />
+	);
+};
+
 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,

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)
 
 </div>
@@ -153,6 +155,10 @@ The composition allows you to customize the component or add new features. See s
 
 <PickerGroupExample />
 
+## Flexibe width
+
+<PickerWidthExample />
+
 ## 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`.