From 825dc39a36170a6975a7a150fe82665aa3c531af Mon Sep 17 00:00:00 2001
From: krisantrobus <55083528+krisantrobus@users.noreply.github.com>
Date: Tue, 28 May 2024 12:38:28 -0500
Subject: [PATCH] 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
---
 .changeset/wise-suns-serve.md                 |  6 +++++
 .../components/input/src/DecrementButton.tsx  | 10 +++++--
 .../components/input/src/IncrementButton.tsx  | 10 +++++--
 .../paste-core/components/input/src/Input.tsx |  2 ++
 .../input/stories/input.stories.tsx           | 26 +++++++++++++++++++
 5 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/wise-suns-serve.md

diff --git a/.changeset/wise-suns-serve.md b/.changeset/wise-suns-serve.md
new file mode 100644
index 0000000000..e208741aab
--- /dev/null
+++ 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
index 50b53e6e8c..2391091844 100644
--- 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
index 75d258fb43..5acbc2dec3 100644
--- 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
index c8638b73e4..b63f91cdca 100644
--- 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
index 57b6e2f10c..cbe1bcbe89 100644
--- 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");