feat(comp): remove useStyles from Select (#1484)

marigold-ui · Nov 29, 2021 · 24367e6 · 24367e6
1 parent 1bb6f32
commit 24367e6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/.changeset/wild-mirrors-speak.md b/.changeset/wild-mirrors-speak.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+feat(comp): remove useStyles from Select
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
@@ -11,7 +11,7 @@ import { SingleSelection } from '@react-types/shared';
 
 import { ComponentProps } from '@marigold/types';
 import { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import { ResponsiveStyleValue } from '@marigold/system';
 
 import { Box } from '../Box';
 import { Label } from '../Label';
@@ -44,17 +44,6 @@ export const Select = ({
   const overlayTriggerState = useOverlayTriggerState({});
   const triggerRef = useRef<HTMLElement>() as RefObject<HTMLElement>;
   const overlayRef = useRef<HTMLDivElement>();
-  const iconClassName = useStyles({
-    css: { fill: disabled ? 'disabled' : 'text' },
-  });
-  const popoverClassName = useStyles({
-    css: {
-      width: width
-        ? width
-        : triggerRef.current && triggerRef.current.offsetWidth + 'px',
-    },
-  });
-  const errorClassName = useStyles({ css: { color: 'error' } });
 
   // Get props for the overlay
   const { overlayProps } = useOverlayTrigger(
@@ -94,7 +83,7 @@ export const Select = ({
             {required ? (
               <Box as="span" display="inline-flex" alignItems="center">
                 {props.label}
-                <Required size={16} className={errorClassName} />
+                <Box as={Required} size={16} css={{ color: 'error' }} />
               </Box>
             ) : (
               props.label
@@ -133,26 +122,39 @@ export const Select = ({
           {state.selectedItem ? state.selectedItem.rendered : placeholder}
         </Box>
         {state.isOpen && !disabled ? (
-          <ArrowUp size={16} className={iconClassName} />
+          <Box
+            as={ArrowUp}
+            size={16}
+            css={{ fill: disabled ? 'disabled' : 'text' }}
+          />
         ) : (
-          <ArrowDown size={16} className={iconClassName} />
+          <Box
+            as={ArrowDown}
+            size={16}
+            css={{ fill: disabled ? 'disabled' : 'text' }}
+          />
         )}
       </Box>
       {state.isOpen && !disabled && (
-        <Popover
+        <Box
+          as={Popover}
           {...overlayProps}
           {...positionProps}
-          className={popoverClassName}
+          css={{
+            width: width
+              ? width
+              : triggerRef.current && triggerRef.current.offsetWidth + 'px',
+          }}
           ref={overlayRef as Ref<HTMLDivElement>}
           isOpen={state.isOpen}
           onClose={state.close}
         >
           <ListBox error={error} {...menuProps} state={state} />
-        </Popover>
+        </Box>
       )}
       {error && errorMessage && (
         <Box as="span" display="inline-flex" alignItems="center">
-          <Exclamation size={16} className={errorClassName} />
+          <Box as={Exclamation} size={16} css={{ color: 'error' }} />
           <ValidationMessage>{errorMessage}</ValidationMessage>
         </Box>
       )}