fix: Fixes Select and AutoSuggest input heights (#913)

autoguru-au · Jun 28, 2023 · fec5365 · fec5365
1 parent 6527e11
commit fec5365
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/.changeset/old-walls-study.md b/.changeset/old-walls-study.md
@@ -0,0 +1,6 @@
+---
+'@autoguru/overdrive': patch
+---
+
+Select Input: Get heights aligned with other inputs
+AutoSuggest Input: Get heights aligned with other inputs
diff --git a/packages/overdrive/lib/components/AutoSuggest/AutoSuggest.css.ts b/packages/overdrive/lib/components/AutoSuggest/AutoSuggest.css.ts
@@ -53,6 +53,10 @@ export const suggestionList = {
 	}),
 };
 
+export const inputPrimitive = style({
+	marginTop: `calc(-1 * ${vars.border.width['1']})`,
+	marginBottom: `calc(-1 * ${vars.border.width['1']})`,
+});
 export const input = style({
 	position: 'sticky',
 	top: 0,

diff --git a/packages/overdrive/lib/components/AutoSuggest/AutoSuggest.tsx b/packages/overdrive/lib/components/AutoSuggest/AutoSuggest.tsx
@@ -635,17 +635,17 @@ const SuggestionsList = <PayloadType extends unknown>({
 
 const AutoSuggestInputPrimitive = withEnhancedInput(
 	({
-		field,
-		eventHandlers,
-		validation,
-		suffixed,
-		prefixed,
-		isLoading,
-		fieldIcon = ChevronDownIcon,
-		isFocused,
-		className,
-		size,
-		...rest
+		 field: { className: fieldClassName, ...field },
+		 eventHandlers,
+		 validation,
+		 suffixed,
+		 prefixed,
+		 isLoading,
+		 fieldIcon = ChevronDownIcon,
+		 isFocused,
+		 className,
+		 size,
+		 ...rest
 	}) => {
 		let focusTimeout;
 		const ref = useRef<HTMLInputElement>(null);
@@ -717,6 +717,7 @@ const AutoSuggestInputPrimitive = withEnhancedInput(
 					autoCapitalize="none"
 					spellCheck="false"
 					autoComplete="off"
+					className={[fieldClassName, styles.inputPrimitive]}
 					{...rest}
 					type="search"
 				/>

diff --git a/packages/overdrive/lib/components/SelectInput/SelectInput.css.ts b/packages/overdrive/lib/components/SelectInput/SelectInput.css.ts
@@ -2,7 +2,10 @@ import { style } from '@vanilla-extract/css';
 
 import { themeContractVars as vars } from '../../themes/theme.css';
 
-export const input = style({});
+export const input = style({
+	marginTop: `calc(-1 * ${vars.border.width['1']})`,
+	marginBottom: `calc(-1 * ${vars.border.width['1']})`,
+});
 export const paddedInput = style({
 	selectors: {
 		[`${input}&`]: {