Add affix support on Select component (#29)

syntatis · Dec 16, 2024 · 674fc3b · 674fc3b
1 parent 0d512e0
commit 674fc3b
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 21 deletions.
diff --git a/packages/kubrick/src/Select/Select.stories.tsx b/packages/kubrick/src/Select/Select.stories.tsx
@@ -152,4 +152,23 @@ export const WithDescriptionBeforeInput: Story = {
 	render: Default.render,
 };
 
+export const WithAfffix: Story = {
+	args: {
+		'aria-label': 'Frequency',
+		description: 'Select the frequency for the site.',
+		label: '',
+		prefix: 'Frequency:',
+		suffix: 'Hz',
+	},
+	render(props) {
+		return (
+			<Select {...props}>
+				<Option value="80">80</Option>
+				<Option value="90">90</Option>
+				<Option value="100">100</Option>
+			</Select>
+		);
+	},
+};
+
 export default meta;
diff --git a/packages/kubrick/src/Select/Select.tsx b/packages/kubrick/src/Select/Select.tsx
@@ -33,7 +33,15 @@ interface SelectProps
 	descriptionArea?: 'after-input' | 'before-input';
 	label?: ReactNode;
 	name: string;
+	/**
+	 * Content or element to dis before the input.
+	 */
+	prefix?: ReactNode;
 	selectedItem?: string;
+	/**
+	 * Content or element to display after the input.
+	 */
+	suffix?: ReactNode;
 }
 
 function determineKey(props: OptionProps) {
@@ -84,7 +92,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 			isRequired,
 			label,
 			name,
+			prefix,
 			selectedItem,
+			suffix,
 		} = props;
 		const ref = useObjectRef(forwardedRef);
 		const { clsx, componentProps, rootProps } = useProps('Select', props);
@@ -144,30 +154,57 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 						:	''}
 					</label>
 				)}
-				<select
-					{...filterDOMProps(componentProps, { labelable: true })}
-					aria-describedby={selectProps['aria-describedby']}
-					aria-invalid={isInvalid || undefined}
-					aria-labelledby={selectProps['aria-labelledby']}
+				<div
 					className={clsx({
-						classNames: {
-							[classes.input]: true,
-						},
-						prefixedNames: 'input',
+						classNames: classes.inputWrapper,
+						prefixedNames: 'input-wrapper',
 					})}
-					disabled={isDisabled}
-					id={selectProps.id}
-					name={name}
-					onBlur={selectProps.onBlur}
-					onChange={(e) => state.setSelectedKey(e.target.value)}
-					onFocus={selectProps.onFocus}
-					ref={ref}
-					required={componentProps.isRequired}
-					tabIndex={componentProps.excludeFromTabOrder ? -1 : undefined}
-					value={state.selectedKey !== null ? state.selectedKey : undefined}
 				>
-					{children}
-				</select>
+					{prefix && (
+						<div
+							className={clsx({
+								classNames: classes.prefix,
+								prefixedNames: 'prefix',
+							})}
+						>
+							{prefix}
+						</div>
+					)}
+					<select
+						{...filterDOMProps(componentProps, { labelable: true })}
+						aria-describedby={selectProps['aria-describedby']}
+						aria-invalid={isInvalid || undefined}
+						aria-labelledby={selectProps['aria-labelledby']}
+						className={clsx({
+							classNames: {
+								[classes.input]: true,
+							},
+							prefixedNames: 'input',
+						})}
+						disabled={isDisabled}
+						id={selectProps.id}
+						name={name}
+						onBlur={selectProps.onBlur}
+						onChange={(e) => state.setSelectedKey(e.target.value)}
+						onFocus={selectProps.onFocus}
+						ref={ref}
+						required={componentProps.isRequired}
+						tabIndex={componentProps.excludeFromTabOrder ? -1 : undefined}
+						value={state.selectedKey !== null ? state.selectedKey : undefined}
+					>
+						{children}
+					</select>
+					{suffix && (
+						<div
+							className={clsx({
+								classNames: classes.suffix,
+								prefixedNames: 'suffix',
+							})}
+						>
+							{suffix}
+						</div>
+					)}
+				</div>
 				{errorMessageList.length >= 1 && (
 					<div
 						{...errorMessageProps}