From 24367e63477a2345b856302115bb59d931da1ba4 Mon Sep 17 00:00:00 2001
From: Timo Zehnle <59875255+ti10le@users.noreply.github.com>
Date: Mon, 29 Nov 2021 13:57:36 +0100
Subject: [PATCH] feat(comp): remove useStyles from Select (#1484)

---
 .changeset/wild-mirrors-speak.md          |  5 +++
 packages/components/src/Select/Select.tsx | 40 ++++++++++++-----------
 2 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/wild-mirrors-speak.md

diff --git a/.changeset/wild-mirrors-speak.md b/.changeset/wild-mirrors-speak.md
new file mode 100644
index 0000000000..a8fe5564e9
--- /dev/null
+++ 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
index cd9c44efde..2cd40e3280 100755
--- 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>
       )}