fix(ui): item indicator vertical alignment in Select

input-output-hk · May 3, 2024 · 1994bb1 · 1994bb1
1 parent f031579
commit 1994bb1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/ui/src/design-system/select/select-item/select-item-indicator.component.tsx b/packages/ui/src/design-system/select/select-item/select-item-indicator.component.tsx
@@ -3,12 +3,14 @@ import React, { forwardRef } from 'react';
 import { ReactComponent as CheckIcon } from '@lace/icons/dist/CheckComponent';
 import * as Select from '@radix-ui/react-select';
 
+import * as cx from './select-item-indicator.css';
+
 /**
  * https://www.radix-ui.com/primitives/docs/components/select#itemindicator
  */
 export const ItemIndicator = forwardRef<HTMLSpanElement>(
   ({}, forwardReference) => (
-    <Select.ItemIndicator ref={forwardReference}>
+    <Select.ItemIndicator ref={forwardReference} className={cx.indicator}>
       <CheckIcon />
     </Select.ItemIndicator>
   ),

diff --git a/packages/ui/src/design-system/select/select-item/select-item-indicator.css.ts b/packages/ui/src/design-system/select/select-item/select-item-indicator.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const indicator = style({
+  display: 'inline-flex',
+  flexShrink: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+});