Merge pull request #5801 from pat270/LPD-17804

chore(@clayui/form): add regular size to input storybook and make it …
liferay · May 30, 2024 · 9b9a1b0 · 9b9a1b0
2 parents 1d1ba0c + af300c8
commit 9b9a1b0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/clay-button/src/Button.tsx b/packages/clay-button/src/Button.tsx
@@ -69,7 +69,7 @@ export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	/**
 	 * Determines the size of a button.
 	 */
-	size?: 'xs' | 'sm';
+	size?: 'xs' | 'regular' | 'sm';
 
 	/**
 	 * Indicates button should be a small variant.
@@ -96,7 +96,7 @@ const ClayButton = React.forwardRef<HTMLButtonElement, IProps>(
 			monospaced,
 			outline,
 			rounded,
-			size,
+			size = 'regular',
 			small,
 			translucent,
 			type = 'button',
@@ -133,15 +133,15 @@ const ClayButton = React.forwardRef<HTMLButtonElement, IProps>(
 					'btn-block': block,
 					'btn-monospaced': monospaced,
 					'btn-outline-borderless': borderless,
-					'btn-sm': small && !size,
+					'btn-sm': small && (!size || size === 'regular'),
 					'btn-translucent': translucent,
 					'clay-dark': dark,
 					[`btn-${displayType}`]:
 						displayType && !outline && !borderless,
 					[`btn-outline-${displayType}`]:
 						displayType && (outline || borderless),
 					'rounded-pill': rounded,
-					[`btn-${size}`]: size,
+					[`btn-${size}`]: size && size !== 'regular',
 				})}
 				ref={ref}
 				type={type}

diff --git a/packages/clay-form/src/Input.tsx b/packages/clay-form/src/Input.tsx
@@ -174,7 +174,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	/**
 	 * Selects the height of the input.
 	 */
-	sizing?: 'lg' | 'sm';
+	sizing?: 'lg' | 'regular' | 'sm';
 }
 
 const ClayInput = React.forwardRef<HTMLInputElement, IProps>(
@@ -184,7 +184,7 @@ const ClayInput = React.forwardRef<HTMLInputElement, IProps>(
 			component: Component = 'input',
 			insetAfter,
 			insetBefore,
-			sizing,
+			sizing = 'regular',
 			type = 'text',
 			...otherProps
 		}: IProps,
@@ -193,7 +193,7 @@ const ClayInput = React.forwardRef<HTMLInputElement, IProps>(
 		<Component
 			{...otherProps}
 			className={classNames('form-control', className, {
-				[`form-control-${sizing}`]: sizing,
+				[`form-control-${sizing}`]: sizing && sizing !== 'regular',
 				['input-group-inset']: insetAfter || insetBefore,
 				['input-group-inset-after']: insetAfter,
 				['input-group-inset-before']: insetBefore,

diff --git a/packages/clay-form/stories/Input.stories.tsx b/packages/clay-form/stories/Input.stories.tsx
@@ -12,7 +12,7 @@ export default {
 	argTypes: {
 		sizing: {
 			control: {type: 'select'},
-			options: ['lg', 'sm'],
+			options: ['lg', 'regular', 'sm'],
 		},
 	},
 	title: 'Design System/Components/Input',
@@ -27,7 +27,7 @@ export const Default = (args: any) => (
 				id="basicInputText"
 				placeholder="Insert your name here"
 				readOnly={args.readOnly}
-				sizing={args.sizing}
+				sizing={args.sizing === 'regular' ? null : args.sizing}
 				type="text"
 			/>
 		</ClayForm.Group>
@@ -37,7 +37,7 @@ export const Default = (args: any) => (
 Default.args = {
 	disabled: false,
 	readOnly: false,
-	sizing: undefined,
+	sizing: 'regular',
 };
 
 export const InputFeedback = () => (