-
Notifications
You must be signed in to change notification settings - Fork 115
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(input): update input type=number (#3312)
* feat(box): add style props for use in the number input component * chore(date-picker, time-picker): add missing deps * feat(utils): add useMergeRefs util * feat(input): update number input and add number nudger buttons * chore(codemods): changeset * chore(input): add more number logic * chore: fix utils changeset * fix: uncontrolled number input decrement and increment * test: add tests for the number input * docs: number input docs * chore: pr feedback --------- Co-authored-by: Si Taggart <[email protected]>
- Loading branch information
Showing
20 changed files
with
779 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@twilio-paste/codemods': patch | ||
--- | ||
|
||
[Codemods] add new export to utils package |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@twilio-paste/utils': minor | ||
'@twilio-paste/core': minor | ||
--- | ||
|
||
[Utils] Add useMergeRefs util (previously removed because it was unused) for use in the input package. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
'@twilio-paste/date-picker': patch | ||
'@twilio-paste/time-picker': patch | ||
'@twilio-paste/core': patch | ||
--- | ||
|
||
[Date Picker, Time Picker] add missing dependencies to package.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@twilio-paste/box': minor | ||
'@twilio-paste/core': minor | ||
--- | ||
|
||
[Box] Add PseudoPropStyles **webkit_inner_spin_button and **webkit_outer_spin_button and CustomStyleProp -moz-appearance to Box Primitive Style Props for use in the Input package for hiding native components from all browsers. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@twilio-paste/input': minor | ||
'@twilio-paste/core': minor | ||
--- | ||
|
||
[Input] Adjust type="number" Input to use native HTML element, add custom styling and functionality. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
packages/paste-core/components/input/src/DecrementButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import * as React from 'react'; | ||
import type {BoxProps} from '@twilio-paste/box'; | ||
import {Button} from '@twilio-paste/button'; | ||
import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; | ||
|
||
export interface DecrementButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
i18nStepDownLabel?: string; | ||
element?: BoxProps['element']; | ||
} | ||
|
||
export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButtonProps>( | ||
({i18nStepDownLabel = 'step value down', element, ...props}, ref) => { | ||
return ( | ||
<Button | ||
{...props} | ||
ref={ref} | ||
element={`${element}_DECREMENT_BUTTON`} | ||
variant="reset" | ||
size="reset" | ||
type="button" | ||
// @ts-expect-error remove when Reset Button types extends BoxProps | ||
borderRadius="borderRadius20" | ||
backgroundColor="colorBackground" | ||
marginRight="space30" | ||
> | ||
<ChevronDownIcon | ||
decorative={false} | ||
title={i18nStepDownLabel} | ||
size="sizeIcon05" | ||
element={`${element}_DECREMENT_ICON`} | ||
/> | ||
</Button> | ||
); | ||
} | ||
); | ||
DecrementButton.displayName = 'Decrement'; |
36 changes: 36 additions & 0 deletions
36
packages/paste-core/components/input/src/IncrementButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import * as React from 'react'; | ||
import type {BoxProps} from '@twilio-paste/box'; | ||
import {Button} from '@twilio-paste/button'; | ||
import {ChevronUpIcon} from '@twilio-paste/icons/esm/ChevronUpIcon'; | ||
|
||
export interface IncrementButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
i18nStepUpLabel?: string; | ||
element?: BoxProps['element']; | ||
} | ||
|
||
export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButtonProps>( | ||
({i18nStepUpLabel = 'step value up', element, ...props}, ref) => { | ||
return ( | ||
<Button | ||
{...props} | ||
ref={ref} | ||
element={`${element}_INCREMENT_BUTTON`} | ||
variant="reset" | ||
size="reset" | ||
type="button" | ||
// @ts-expect-error remove when Reset Button types extends BoxProps | ||
borderRadius="borderRadius20" | ||
backgroundColor="colorBackground" | ||
marginRight="space30" | ||
> | ||
<ChevronUpIcon | ||
decorative={false} | ||
title={i18nStepUpLabel} | ||
size="sizeIcon05" | ||
element={`${element}_INCREMENT_ICON`} | ||
/> | ||
</Button> | ||
); | ||
} | ||
); | ||
IncrementButton.displayName = 'Increment'; |
Oops, something went wrong.