chore(Input): increment/decrement reset buttons focus stylings (#3917)

* feat(Intput): increment/decrement reset buttons focus stylings * feat(Input): updating the changeset to include core patch * feat(Input): lint fix * feat(Input): destructure prop * chore(Input): use box shaow instead of border
twilio-labs · May 28, 2024 · 825dc39 · 825dc39
1 parent b6146db
commit 825dc39
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 4 deletions.
diff --git a/.changeset/wise-suns-serve.md b/.changeset/wise-suns-serve.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/input": patch
+"@twilio-paste/core": patch
+---
+
+[Input] updated focus stylings on increment/decrement buttons for number input type on both default and inverse variants
diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -4,15 +4,18 @@ import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
+import { InputVariants } from "./Input";
+
 export interface DecrementButtonProps extends HTMLPasteProps<"button"> {
   i18nStepDownLabel?: string;
   element?: BoxProps["element"];
   // Button component restricts tabIndex values
   tabIndex?: ButtonProps["tabIndex"];
+  variant?: InputVariants;
 }
 
 export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButtonProps>(
-  ({ i18nStepDownLabel = "step value down", element, ...props }, ref) => {
+  ({ i18nStepDownLabel = "step value down", element, variant, ...props }, ref) => {
     return (
       <Button
         {...props}
@@ -22,8 +25,11 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
+        }}
       >
         <ChevronDownIcon
           decorative={false}

diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -4,15 +4,18 @@ import { ChevronUpIcon } from "@twilio-paste/icons/esm/ChevronUpIcon";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
+import { InputVariants } from "./Input";
+
 export interface IncrementButtonProps extends HTMLPasteProps<"button"> {
   i18nStepUpLabel?: string;
   element?: BoxProps["element"];
   // Button component restricts tabIndex values
   tabIndex?: ButtonProps["tabIndex"];
+  variant?: InputVariants;
 }
 
 export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButtonProps>(
-  ({ i18nStepUpLabel = "step value up", element, ...props }, ref) => {
+  ({ i18nStepUpLabel = "step value up", element, variant, ...props }, ref) => {
     return (
       <Button
         {...props}
@@ -22,8 +25,11 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
+        }}
       >
         <ChevronUpIcon
           decorative={false}

diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx
@@ -333,6 +333,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   internalRef.current?.focus();
                 }}
                 i18nStepUpLabel={i18nStepUpLabel}
+                variant={variant}
               />
             ) : (
               <Box height="12px" width="12px" element={`${element}_INCREMENT_PLACEHOLDER`} />
@@ -347,6 +348,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   internalRef.current?.focus();
                 }}
                 i18nStepDownLabel={i18nStepDownLabel}
+                variant={variant}
               />
             ) : (
               <Box height="12px" width="12px" element={`${element}_DECREMENT_PLACEHOLDER`} />

diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx
@@ -713,6 +713,32 @@ export const DefaultNumberInput = (): React.ReactNode => {
 
 DefaultNumberInput.storyName = "Number Input - Controlled";
 
+export const DefaultNumberInverseInput = (): React.ReactNode => {
+  const uid = useUID();
+  const [value, setValue] = React.useState("0");
+  return (
+    <Box backgroundColor="colorBackgroundBodyInverse" padding="space60">
+      <Label htmlFor={uid} variant="inverse">
+        Label
+      </Label>
+      <Input
+        id={uid}
+        type="number"
+        max="50"
+        min="-50"
+        step={5}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        variant="inverse"
+      />
+    </Box>
+  );
+};
+
+DefaultNumberInverseInput.storyName = "Number Input - Inverse Controlled";
+
 export const TestNumberInput = (): React.ReactNode => {
   const uid = useUID();
   const [value, setValue] = React.useState("5");