Merge pull request #5658 from matuzalemsteles/issue-5267

docs(clayui.com): adds compositing examples to Picker
liferay · Aug 4, 2023 · c940e7f · c940e7f
2 parents d3d90de + aa1896e
commit c940e7f
Show file tree

Hide file tree

Showing 2 changed files with 241 additions and 3 deletions.
diff --git a/packages/clay-core/docs/picker.js b/packages/clay-core/docs/picker.js
@@ -4,8 +4,13 @@
  */
 
 import Editor from '$clayui.com/src/components/Editor';
-import {Option, Picker} from '@clayui/core';
+import {Option, Picker, Text} from '@clayui/core';
+import DropDown from '@clayui/drop-down';
 import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import Label from '@clayui/label';
+import Layout from '@clayui/layout';
+import {useId} from '@clayui/shared';
 import React from 'react';
 
 const exampleImports = `import {Option, Picker} from '@clayui/core';
@@ -53,4 +58,212 @@ const PickerExample = () => {
 	return <Editor code={exampleCode} imports={exampleImports} scope={scope} />;
 };
 
-export {PickerExample};
+const exampleTriggerImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import React from 'react';`;
+
+const exampleTriggerCode = `const Trigger = React.forwardRef(({children, ...otherProps}, ref) => (
+	<div ref={ref} {...otherProps} tabIndex={0}>
+		<Icon className="mr-2" symbol="user" />
+		{children}
+	</div>
+));
+
+const CustomTrigger = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Choose a user
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					as={Trigger}
+					id={pickerId}
+					items={['Liam', 'Noah', 'Oliver']}
+				>
+					{(item) => <Option key={item}>{item}</Option>}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomTrigger />)`;
+
+const PickerTriggerExample = () => {
+	const scope = {Form, Icon, Option, Picker, React, useId};
+
+	return (
+		<Editor
+			code={exampleTriggerCode}
+			imports={exampleTriggerImports}
+			scope={scope}
+		/>
+	);
+};
+
+const exampleOptionsImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import React from 'react';`;
+
+const exampleOptionsCode = `const CustomOptions = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Choose a user
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					id={pickerId}
+					items={['Liam', 'Noah', 'Oliver']}
+				>
+					{(item) => (
+						<Option
+							key={item}
+							textValue={item}
+						>
+							<Layout.ContentRow>
+								<Layout.ContentCol expand>
+									<Text
+										size={3}
+										weight="semi-bold"
+									>
+										{item}
+									</Text>
+									<Text
+										aria-hidden
+										color="secondary"
+										size={2}
+									>
+										Description
+									</Text>
+								</Layout.ContentCol>
+								<Layout.ContentCol>
+									<Label
+										aria-hidden
+										displayType="success"
+									>
+										Active
+									</Label>
+								</Layout.ContentCol>
+							</Layout.ContentRow>
+						</Option>
+					)}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomOptions />)`;
+
+const PickerOptionsxample = () => {
+	const scope = {
+		Form,
+		Icon,
+		Label,
+		Layout,
+		Option,
+		Picker,
+		React,
+		Text,
+		useId,
+	};
+
+	return (
+		<Editor
+			code={exampleOptionsCode}
+			imports={exampleOptionsImports}
+			scope={scope}
+		/>
+	);
+};
+
+const exampleGroupImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import React from 'react';`;
+
+const exampleGroupCode = `const Trigger = React.forwardRef(({children, ...otherProps}, ref) => (
+	<div ref={ref} {...otherProps} tabIndex={0}>
+		<Icon className="mr-2" symbol="user" />
+		{children}
+	</div>
+));
+
+const CustomTrigger = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Select an option
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					id={pickerId}
+					items={[
+						{
+							items: [
+								{label: 'Apple', value: '1'},
+								{label: 'Banana', value: '2'},
+								{label: 'Mangos', value: '3'},
+							],
+							label: 'Fruit',
+						},
+						{
+							items: [
+								{label: 'Onions', value: '4'},
+								{label: 'abc', value: '5'},
+								{label: 'def', value: '6'},
+							],
+							label: 'Vegetable',
+						},
+					]}
+				>
+					{(group) => (
+						<DropDown.Group
+							header={group.label}
+							items={group.items}
+						>
+							{(item) => (
+								<Option key={item.value}>{item.label}</Option>
+							)}
+						</DropDown.Group>
+					)}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomTrigger />)`;
+
+const PickerGroupExample = () => {
+	const scope = {DropDown, Form, Option, Picker, React, useId};
+
+	return (
+		<Editor
+			code={exampleGroupCode}
+			imports={exampleGroupImports}
+			scope={scope}
+		/>
+	);
+};
+export {
+	PickerExample,
+	PickerGroupExample,
+	PickerTriggerExample,
+	PickerOptionsxample,
+};
diff --git a/packages/clay-core/docs/picker.mdx b/packages/clay-core/docs/picker.mdx
@@ -6,7 +6,12 @@ packageStatus: 'Beta'
 storybookPath: 'design-system-components-picker'
 ---
 
-import {PickerExample} from '$packages/clay-core/docs/picker';
+import {
+	PickerExample,
+	PickerGroupExample,
+	PickerTriggerExample,
+	PickerOptionsxample,
+} from '$packages/clay-core/docs/picker';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
@@ -17,6 +22,10 @@ import {PickerExample} from '$packages/clay-core/docs/picker';
     -   [Static](#static)
     -   [Dynamic](#dynamic)
 -   [Controlled and Uncontrolled component](#controlled-and-uncontrolled-component)
+-   [Composition](#composition)
+    -   [Custom Trigger](#custom-trigger)
+    -   [Custom Options](#custom-options)
+    -   [Group](#group)
 -   [Hybrid component](#hybrid-component)
 
 </div>
@@ -128,6 +137,22 @@ function Example() {
 }
 ```
 
+## Composition
+
+The composition allows you to customize the component or add new features. See some examples:
+
+### Custom Trigger
+
+<PickerTriggerExample />
+
+### Custom Options
+
+<PickerOptionsxample />
+
+### Group
+
+<PickerGroupExample />
+
 ## 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`.