Merge pull request #5803 from pat270/LPD-22854

docs(clayui.com): Move input-group to own section
liferay · Apr 17, 2024 · 81634b7 · 81634b7
2 parents 5198e84 + 5f6b077
commit 81634b7
Show file tree

Hide file tree

Showing 7 changed files with 1,243 additions and 1,152 deletions.
diff --git a/packages/clay-form/docs/input-group.mdx b/packages/clay-form/docs/input-group.mdx
@@ -0,0 +1,50 @@
+---
+title: 'Input Group'
+description: 'A Text Input with added elements that provide a more complex input structure.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/input-group/'
+packageNpm: '@clayui/form'
+navigationParent: 'docs/components/form.html'
+storybookPath: 'design-system-components-inputgroup'
+---
+
+import {
+	FormInputGroupConnected,
+	FormInputGroupMixed,
+	FormInputGroupSeparated,
+	FormInputGroupStacked,
+} from '$packages/clay-form/docs/input';
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Separated](#separated)
+-   [Connected](#connected)
+-   [Mixed](#mixed)
+-   [Stacked](#stacked)
+
+</div>
+</div>
+
+If you want to create groups of inputs, use `<ClayInput.Group>`, `<ClayInput.GroupInsetItem>`, `<ClayInput.GroupItem>` and `<ClayInput.GroupText>`.
+
+### Separated
+
+Wrap each item in a `<ClayInput.Group>` with `<ClayInput.GroupItem>`. If you want to make an item shrink to fit, use the `shrink` property.
+
+<FormInputGroupSeparated />
+
+### Connected
+
+For creating a connected input group, use `prepend` property for each `<ClayInput.GroupItem>` and for the last `<ClayInput.GroupItem>` use the property `append`.
+
+<FormInputGroupConnected />
+
+### Mixed
+
+<FormInputGroupMixed />
+
+### Stacked
+
+For creating a stack of the items inside a item group, use `stacked` property in the `<ClayInput.Group>` and use `shrink` property for using in screens sizes less than 576px.
+
+<FormInputGroupStacked />
diff --git a/packages/clay-form/docs/input.js b/packages/clay-form/docs/input.js
@@ -9,6 +9,7 @@ import ClayForm, {ClayInput} from '@clayui/form';
 import React from 'react';
 
 const formInputGroupImports = `import ClayForm, {ClayInput} from '@clayui/form';
+import ClayButton from '@clayui/button';
 `;
 
 const formInputCode = `const Component = () => {
@@ -69,31 +70,26 @@ const formInputGroupSeparatedCode = `const Component = () => {
 			<ClayForm.Group>
 				<ClayInput.Group>
 					<ClayInput.GroupItem shrink>
-						<ClayInput.GroupText>
-							{'@'}
-						</ClayInput.GroupText>
+						<ClayButton displayType="secondary" type="submit">Search</ClayButton>
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem>
-						<ClayInput placeholder="Username" type="text" />
+						<ClayInput placeholder="Search Query" type="text" />
 					</ClayInput.GroupItem>
 				</ClayInput.Group>
 			</ClayForm.Group>
 			<ClayForm.Group>
 				<ClayInput.Group>
-					<ClayInput.GroupItem>
-						<ClayInput placeholder="Email" type="text" />
-					</ClayInput.GroupItem>
 					<ClayInput.GroupItem shrink>
 						<ClayInput.GroupText>
-							{'@'}
+							{'$'}
 						</ClayInput.GroupText>
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem>
-						<ClayInput placeholder="liferay" type="text" />
+						<ClayInput placeholder="5,000" type="text" />
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem shrink>
 						<ClayInput.GroupText>
-							{'.com'}
+							{'.00'}
 						</ClayInput.GroupText>
 					</ClayInput.GroupItem>
 				</ClayInput.Group>
@@ -106,6 +102,7 @@ render(<Component />)`;
 
 const FormInputGroupSeparated = () => {
 	const scope = {
+		ClayButton,
 		ClayForm,
 		ClayInput,
 	};
@@ -125,12 +122,10 @@ const formInputGroupConnectedCode = `const Component = () => {
 			<ClayForm.Group>
 				<ClayInput.Group>
 					<ClayInput.GroupItem shrink prepend>
-						<ClayInput.GroupText>
-							{'@'}
-						</ClayInput.GroupText>
+						<ClayButton displayType="secondary" type="submit">Search</ClayButton>
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem append>
-						<ClayInput placeholder="Username" type="text" />
+						<ClayInput placeholder="Search Query" type="text" />
 					</ClayInput.GroupItem>
 				</ClayInput.Group>
 			</ClayForm.Group>
@@ -139,17 +134,26 @@ const formInputGroupConnectedCode = `const Component = () => {
 					<ClayInput.GroupItem prepend>
 						<ClayInput placeholder="Email" type="text" />
 					</ClayInput.GroupItem>
+					<ClayInput.GroupItem append shrink>
+						<ClayInput.GroupText>
+							{'@liferay.com'}
+						</ClayInput.GroupText>
+					</ClayInput.GroupItem>
+				</ClayInput.Group>
+			</ClayForm.Group>
+			<ClayForm.Group>
+				<ClayInput.Group>
 					<ClayInput.GroupItem shrink prepend>
 						<ClayInput.GroupText>
-							{'@'}
+							{'$'}
 						</ClayInput.GroupText>
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem prepend>
-						<ClayInput placeholder="liferay" type="text" />
+						<ClayInput placeholder="5,000" type="text" />
 					</ClayInput.GroupItem>
 					<ClayInput.GroupItem append shrink>
 						<ClayInput.GroupText>
-							{'.com'}
+							{'.00'}
 						</ClayInput.GroupText>
 					</ClayInput.GroupItem>
 				</ClayInput.Group>
@@ -162,6 +166,7 @@ render(<Component />)`;
 
 const FormInputGroupConnected = () => {
 	const scope = {
+		ClayButton,
 		ClayForm,
 		ClayInput,
 	};
@@ -217,10 +222,55 @@ const FormInputGroupMixed = () => {
 	);
 };
 
+const formInputGroupStackedCode = `const Component = () => {
+	return (
+		<>
+			<ClayForm.Group>
+				<ClayInput.Group stacked>
+					<ClayInput.GroupItem prepend>
+						<ClayInput placeholder="Email" type="text" />
+					</ClayInput.GroupItem>
+					<ClayInput.GroupItem shrink prepend>
+						<ClayInput.GroupText>
+							{'@'}
+						</ClayInput.GroupText>
+					</ClayInput.GroupItem>
+					<ClayInput.GroupItem prepend>
+						<ClayInput placeholder="liferay" type="text" />
+					</ClayInput.GroupItem>
+					<ClayInput.GroupItem append shrink>
+						<ClayInput.GroupText>
+							{'.com'}
+						</ClayInput.GroupText>
+					</ClayInput.GroupItem>
+				</ClayInput.Group>
+			</ClayForm.Group>
+		</>
+	);
+}
+
+render(<Component />)`;
+
+const FormInputGroupStacked = () => {
+	const scope = {
+		ClayForm,
+		ClayInput,
+	};
+
+	return (
+		<Editor
+			code={formInputGroupStackedCode}
+			imports={formInputGroupImports}
+			scope={scope}
+		/>
+	);
+};
+
 export {
 	FormInput,
 	FormInputGroupConnected,
 	FormInputGroupMixed,
 	FormInputGroupSeparated,
+	FormInputGroupStacked,
 	FormInputTextArea,
 };
diff --git a/packages/clay-form/docs/input.mdx b/packages/clay-form/docs/input.mdx
@@ -7,24 +7,13 @@ navigationParent: 'docs/components/form.html'
 storybookPath: 'design-system-components-input'
 ---
 
-import {
-	FormInput,
-	FormInputGroupConnected,
-	FormInputGroupMixed,
-	FormInputGroupSeparated,
-	FormInputTextArea,
-} from '$packages/clay-form/docs/input';
+import {FormInput, FormInputTextArea} from '$packages/clay-form/docs/input';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
 -   [Basic Usage](#basic-usage)
 -   [Using another elements as an input](#using-another-elements-as-an-input)
--   [Groups](#groups)
-    -   [Separated](#separated)
-    -   [Connected](#connected)
-    -   [Mixed](#mixed)
-    -   [Stacked](#stacked)
 
 </div>
 </div>
@@ -40,27 +29,3 @@ import {
 If you want to use another component instead of input for enter text typed things, you can just pass this tag to `component` property, like the example below:
 
 <FormInputTextArea />
-
-### Groups
-
-If you want to create groups of inputs, use `<ClayInput.Group>`, `<ClayInput.GroupInsetItem>`, `<ClayInput.GroupItem>` and `<ClayInput.GroupText>`.
-
-#### Separated
-
-Wrap each item in a `<ClayInput.Group>` with `<ClayInput.GroupItem>`. If you want to make an item shrink to fit, use `shrink` property.
-
-<FormInputGroupSeparated />
-
-#### Connected
-
-For creating a connected input group, use `prepend` property for each `<ClayInput.GroupItem>` and for the last `<ClayInput.GroupItem>` use the property `append`.
-
-<FormInputGroupConnected />
-
-#### Mixed
-
-<FormInputGroupMixed />
-
-#### Stacked
-
-For creating a stack of the items inside a item group, use `stacked` property in the `<ClayInput.Group>` and use `shrink` property for using in screens sizes less than 576px.