Update increment/decrement icon colors for NumberInput (#224)

* chore(NumberInput): update default stepper trigger icon colors * ci(changesets): add changeset for NumberInput changes * refactor(NumberInput): update divider color for stepper on disabled state * fix(NumberInput): remove unnecessary disabled prob to fix tests
animareflection · Jan 23, 2024 · 9aec3c8 · 9aec3c8 · github-actions · Jan 23, 2024
1 parent ae57729
commit 9aec3c8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/.changeset/kind-elephants-wave.md b/.changeset/kind-elephants-wave.md
@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Update default `Icon` color for increment and decrement triggers in `NumberInput`
diff --git a/src/components/core/NumberInput/NumberInput.recipe.ts b/src/components/core/NumberInput/NumberInput.recipe.ts
@@ -18,7 +18,7 @@ const stepperTriggerStyles = {
   h: "100%",
   color: {
     base: "fg.default",
-    _disabled: "fg.muted",
+    _disabled: "fg.disabled",
   },
   borderRadius: "sm",
 };

diff --git a/src/components/core/NumberInput/NumberInput.tsx b/src/components/core/NumberInput/NumberInput.tsx
@@ -92,15 +92,21 @@ const NumberInput = ({
           </PrimitiveNumberInputAddon>
         )}
         {stepper && (
-          <PrimitiveNumberInputControl>
+          <PrimitiveNumberInputControl className="group">
             <PrimitiveNumberInputDecrementTrigger>
-              <Icon>
+              <Icon color="inherit">
                 <FiMinus />
               </Icon>
             </PrimitiveNumberInputDecrementTrigger>
-            <panda.div w="1px" h="75%" mx={0.5} my="auto" bgColor="gray.600" />
+            <panda.div
+              w="1px"
+              h="75%"
+              mx={0.5}
+              my="auto"
+              bgColor={{ base: "fg.default", _groupDisabled: "fg.disabled" }}
+            />
             <PrimitiveNumberInputIncrementTrigger>
-              <Icon>
+              <Icon color="inherit">
                 <FiPlus />
               </Icon>
             </PrimitiveNumberInputIncrementTrigger>