Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
76cd29a
feat(Intput): increment/decrement reset buttons focus stylings
krisantrobus May 22, 2024
39ba2a7
feat(Input): updating the changeset to include core patch
krisantrobus May 22, 2024
520967f
feat(Input): lint fix
krisantrobus May 22, 2024
9cf682c
feat(Input): destructure prop
krisantrobus May 23, 2024
6b817ed
chore(Input): use box shaow instead of border
krisantrobus May 23, 2024
75f75db
Merge branch 'main' of github.com:twilio-labs/paste into input/reset-…
krisantrobus May 24, 2024
be939a0
Merge branch 'main' of github.com:twilio-labs/paste into input/reset-…
krisantrobus May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/wise-suns-serve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
14 changes: 13 additions & 1 deletion packages/paste-core/components/input/src/DecrementButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ 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>(
Expand All @@ -22,8 +25,17 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
size="reset"
type="button"
borderRadius="borderRadius20"
backgroundColor="colorBackground"
backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: very much non-blocking but when using another prop, in most cases we add it to the list of destructured props on line 17 so that we can use variant rather than props.variant (especially if we're already destructuring other specific props in the component)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great suggestion 🙏 I'll make a change and push it up before we merge

marginRight="space30"
_focus={{
borderRadius: "borderRadius20",
borderWidth: "borderWidth10",
borderStyle: "solid",
borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
}}
borderWidth="borderWidth10"
borderStyle="solid"
borderColor="transparent"
Copy link
Collaborator Author

@krisantrobus krisantrobus May 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to add a border to the buttons and make it transparent. After changing the _focus style I saw the icons would move slightly due to the border changing for one and not the other. Issue shown in the video:
https://github.com/twilio-labs/paste/assets/55083528/c99f3ecd-1f9e-4b0b-93a0-98066daf7409

Copy link
Member

@serifluous serifluous May 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh ok yeah i was wondering about the use of border colors here & how you got it to work.

This solution works just as well, but you could also use shadows instead. We have shadow border tokens (shadowBorderInverseStrong and shadowBorderPrimary) to account for this.

I have no like...eng perspective on which solution is better, so I'll rely on @nkrantz here for that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok nvm I do have an opinion. Just realized it adds an extra 1px gray border all around the buttons.

todo: Let's use the shadow border tokens instead.

Copy link
Collaborator Author

@krisantrobus krisantrobus May 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added boxShadow instead of border and that resolved all the spacing issues. Thank you! 🙇

>
<ChevronDownIcon
decorative={false}
Expand Down
14 changes: 13 additions & 1 deletion packages/paste-core/components/input/src/IncrementButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ 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>(
Expand All @@ -22,8 +25,17 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
size="reset"
type="button"
borderRadius="borderRadius20"
backgroundColor="colorBackground"
backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
marginRight="space30"
_focus={{
borderRadius: "borderRadius20",
borderWidth: "borderWidth10",
borderStyle: "solid",
borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
}}
borderWidth="borderWidth10"
borderStyle="solid"
borderColor="transparent"
>
<ChevronUpIcon
decorative={false}
Expand Down
2 changes: 2 additions & 0 deletions packages/paste-core/components/input/src/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`} />
Expand All @@ -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`} />
Expand Down
26 changes: 26 additions & 0 deletions packages/paste-core/components/input/stories/input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,6 +713,32 @@ export const DefaultNumberInput = (): React.ReactNode => {

DefaultNumberInput.storyName = "Number Input - Controlled";

export const DefaultNumberInverseInput = (): React.ReactNode => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: new story for this missed use case 👏

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");
Expand Down
Loading