Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomiks
atomiks committed Mar 22, 2024
1 parent 1b54557 commit 4aa63f6
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 26 deletions.
26 changes: 22 additions & 4 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ function Styles() {
.NumberField-label {
cursor: unset;
color: ${grey[800]};
}
.NumberField-Group {
Expand All @@ -87,10 +88,11 @@ function Styles() {
border-radius: 0.25rem;
border: 1px solid ${grey[300]};
border-color: ${grey[300]};
overflow: hidden;
}
.NumberField-Group:focus-within {
outline: 2px solid ${blue[200]};
outline: 2px solid ${blue[100]};
border-color: ${blue[400]};
}
Expand Down Expand Up @@ -123,7 +125,6 @@ function Styles() {
.NumberField-Button {
position: relative;
border: none;
border-radius: 0.25rem;
font-weight: bold;
transition-property: background-color, border-color, color;
transition-duration: 100ms;
Expand All @@ -137,12 +138,21 @@ function Styles() {
font-family: math;
}
.NumberField-Button:hover {
.NumberField-Button:not([disabled]):hover {
background-color: ${grey[100]};
border-color: ${grey[200]};
color: ${grey[800]};
}
.NumberField-Button:not([disabled]):active {
background-color: ${grey[200]};
}
.Button[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.NumberField-Decrement {
border-right: 1px solid ${grey[200]};
border-top-right-radius: 0;
Expand Down Expand Up @@ -186,18 +196,26 @@ function Styles() {
}
.dark .NumberField-Button:hover {
background-color: ${grey[700]};
background-color: ${grey[800]};
border-color: ${grey[700]};
color: ${grey[200]};
}
.dark .NumberField-Button:active {
background-color: ${grey[700]};
}
.dark .NumberField-Decrement {
border-right-color: ${grey[700]};
}
.dark .NumberField-Increment {
border-left-color: ${grey[700]};
}
.dark .NumberField-label {
color: ${grey[300]};
}
`}
</style>
);
Expand Down
26 changes: 22 additions & 4 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ function Styles() {
.NumberField-label {
cursor: unset;
color: ${grey[800]};
}
.NumberField-Group {
Expand All @@ -87,10 +88,11 @@ function Styles() {
border-radius: 0.25rem;
border: 1px solid ${grey[300]};
border-color: ${grey[300]};
overflow: hidden;
}
.NumberField-Group:focus-within {
outline: 2px solid ${blue[200]};
outline: 2px solid ${blue[100]};
border-color: ${blue[400]};
}
Expand Down Expand Up @@ -123,7 +125,6 @@ function Styles() {
.NumberField-Button {
position: relative;
border: none;
border-radius: 0.25rem;
font-weight: bold;
transition-property: background-color, border-color, color;
transition-duration: 100ms;
Expand All @@ -137,12 +138,21 @@ function Styles() {
font-family: math;
}
.NumberField-Button:hover {
.NumberField-Button:not([disabled]):hover {
background-color: ${grey[100]};
border-color: ${grey[200]};
color: ${grey[800]};
}
.NumberField-Button:not([disabled]):active {
background-color: ${grey[200]};
}
.Button[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.NumberField-Decrement {
border-right: 1px solid ${grey[200]};
border-top-right-radius: 0;
Expand Down Expand Up @@ -186,18 +196,26 @@ function Styles() {
}
.dark .NumberField-Button:hover {
background-color: ${grey[700]};
background-color: ${grey[800]};
border-color: ${grey[700]};
color: ${grey[200]};
}
.dark .NumberField-Button:active {
background-color: ${grey[700]};
}
.dark .NumberField-Decrement {
border-right-color: ${grey[700]};
}
.dark .NumberField-Increment {
border-left-color: ${grey[700]};
}
.dark .NumberField-label {
color: ${grey[300]};
}
`}
</style>
);
Expand Down
19 changes: 15 additions & 4 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export default function UnstyledNumberFieldIntroduction() {
/>
</svg>
</NumberFieldVirtualCursor>
<label htmlFor={id} style={{ cursor: 'unset' }}>
<label
htmlFor={id}
style={{ cursor: 'unset', color: isDarkMode ? grey[300] : grey[800] }}
>
Amount
</label>
</NumberFieldScrubArea>
Expand Down Expand Up @@ -79,9 +82,10 @@ const NumberFieldGroup = styled(BaseNumberField.Group)`
border-radius: 0.25rem;
border: 1px solid ${grey[300]};
border-color: ${grey[300]};
overflow: hidden;
&:focus-within {
outline: 2px solid ${blue[200]};
outline: 2px solid ${blue[100]};
border-color: ${blue[400]};
}
Expand Down Expand Up @@ -140,7 +144,6 @@ const NumberFieldInput = styled(BaseNumberField.Input)`
const buttonStyles = css`
position: relative;
border: none;
border-radius: 0.25rem;
font-weight: bold;
transition-property: background-color, border-color, color;
transition-duration: 100ms;
Expand All @@ -159,6 +162,10 @@ const buttonStyles = css`
color: ${grey[800]};
}
&:active:not([disabled]) {
background-color: ${grey[200]};
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
Expand All @@ -170,11 +177,15 @@ const buttonStyles = css`
border-color: ${grey[700]};
&:hover:not([disabled]) {
background-color: ${grey[700]};
background-color: ${grey[800]};
border-color: ${grey[700]};
color: ${grey[200]};
}
&:active:not([disabled]) {
background-color: ${grey[700]};
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
Expand Down
19 changes: 15 additions & 4 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export default function UnstyledNumberFieldIntroduction() {
/>
</svg>
</NumberFieldVirtualCursor>
<label htmlFor={id} style={{ cursor: 'unset' }}>
<label
htmlFor={id}
style={{ cursor: 'unset', color: isDarkMode ? grey[300] : grey[800] }}
>
Amount
</label>
</NumberFieldScrubArea>
Expand Down Expand Up @@ -79,9 +82,10 @@ const NumberFieldGroup = styled(BaseNumberField.Group)`
border-radius: 0.25rem;
border: 1px solid ${grey[300]};
border-color: ${grey[300]};
overflow: hidden;
&:focus-within {
outline: 2px solid ${blue[200]};
outline: 2px solid ${blue[100]};
border-color: ${blue[400]};
}
Expand Down Expand Up @@ -140,7 +144,6 @@ const NumberFieldInput = styled(BaseNumberField.Input)`
const buttonStyles = css`
position: relative;
border: none;
border-radius: 0.25rem;
font-weight: bold;
transition-property: background-color, border-color, color;
transition-duration: 100ms;
Expand All @@ -159,6 +162,10 @@ const buttonStyles = css`
color: ${grey[800]};
}
&:active:not([disabled]) {
background-color: ${grey[200]};
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
Expand All @@ -170,11 +177,15 @@ const buttonStyles = css`
border-color: ${grey[700]};
&:hover:not([disabled]) {
background-color: ${grey[700]};
background-color: ${grey[800]};
border-color: ${grey[700]};
color: ${grey[200]};
}
&:active:not([disabled]) {
background-color: ${grey[700]};
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
Expand Down
12 changes: 9 additions & 3 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ export default function NumberFieldIntroduction() {
/>
</svg>
</NumberFieldVirtualCursor>
<label htmlFor={id} className="cursor-[unset]">
<label
htmlFor={id}
className="cursor-[unset] text-gray-700 dark:text-gray-300"
>
Amount
</label>
</NumberFieldScrubArea>
Expand All @@ -66,6 +69,7 @@ const NumberFieldGroup = React.forwardRef(function NumberFieldGroup(props, ref)
className={(state) =>
classNames(
'flex items-center mt-1 rounded border border-solid border-gray-300 dark:border-gray-700',
'overflow-hidden',
'focus-within:ring-2 focus-within:ring-blue-200 focus-within:border-blue-500 dark:focus-within:ring-blue-500/50 dark:focus-within:border-blue-400/80',
state.disabled && 'opacity-40 cursor-not-allowed',
typeof props.className === 'function'
Expand Down Expand Up @@ -170,15 +174,17 @@ NumberFieldInput.propTypes = {

const buttonStyles = classNames(
'font-[math]',
'relative border-none rounded font-bold',
'relative border-none font-bold',
'transition-colors duration-100',
'px-3 flex-1 self-stretch font-inherit',
'bg-gray-50 dark:bg-gray-800',
'text-gray-700 dark:text-gray-300',
'border border-gray-200 dark:border-gray-700 m-0',
'hover:bg-gray-100 dark:hover:bg-gray-700',
'hover:bg-gray-100',
'hover:border-gray-100 dark:hover:border-gray-600',
'hover:text-gray-900 dark:hover:text-gray-200',
'active:bg-gray-200 dark:active:bg-gray-700',
'disabled:opacity-40 disabled:cursor-not-allowed',
);

const NumberFieldDecrement = React.forwardRef(
Expand Down
12 changes: 9 additions & 3 deletions docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,10 @@ export default function NumberFieldIntroduction() {
/>
</svg>
</NumberFieldVirtualCursor>
<label htmlFor={id} className="cursor-[unset]">
<label
htmlFor={id}
className="cursor-[unset] text-gray-700 dark:text-gray-300"
>
Amount
</label>
</NumberFieldScrubArea>
Expand Down Expand Up @@ -79,6 +82,7 @@ const NumberFieldGroup = React.forwardRef(function NumberFieldGroup(
className={(state) =>
classNames(
'flex items-center mt-1 rounded border border-solid border-gray-300 dark:border-gray-700',
'overflow-hidden',
'focus-within:ring-2 focus-within:ring-blue-200 focus-within:border-blue-500 dark:focus-within:ring-blue-500/50 dark:focus-within:border-blue-400/80',
state.disabled && 'opacity-40 cursor-not-allowed',
typeof props.className === 'function'
Expand Down Expand Up @@ -160,15 +164,17 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(

const buttonStyles = classNames(
'font-[math]',
'relative border-none rounded font-bold',
'relative border-none font-bold',
'transition-colors duration-100',
'px-3 flex-1 self-stretch font-inherit',
'bg-gray-50 dark:bg-gray-800',
'text-gray-700 dark:text-gray-300',
'border border-gray-200 dark:border-gray-700 m-0',
'hover:bg-gray-100 dark:hover:bg-gray-700',
'hover:bg-gray-100',
'hover:border-gray-100 dark:hover:border-gray-600',
'hover:text-gray-900 dark:hover:text-gray-200',
'active:bg-gray-200 dark:active:bg-gray-700',
'disabled:opacity-40 disabled:cursor-not-allowed',
);

const NumberFieldDecrement = React.forwardRef(function NumberFieldDecrement(
Expand Down
6 changes: 3 additions & 3 deletions packages/mui-base/src/NumberField/NumberField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,15 +309,15 @@ describe('<NumberField />', () => {
const input = screen.getByRole('textbox');
fireEvent.keyDown(window, { shiftKey: true });
fireEvent.pointerDown(screen.getByLabelText('Increase'));
expect(input).to.have.value('15');
expect(input).to.have.value('20');
});

it('should decrement the value by the default `largeStep` prop of 10 while holding Shift', () => {
render(<NumberField defaultValue={5} />);
render(<NumberField defaultValue={6} />);
const input = screen.getByRole('textbox');
fireEvent.keyDown(window, { shiftKey: true });
fireEvent.pointerDown(screen.getByLabelText('Decrease'));
expect(input).to.have.value('-5');
expect(input).to.have.value('0');
});

it('should use explicit `largeStep` value if provided while holding Shift', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-base/src/useNumberField/useNumberField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export function useNumberField(params: NumberFieldProps): UseNumberFieldReturnVa
return;
}

const dValue = scrubDirection === 'vertical' ? dy : dx;
const dValue = scrubDirection === 'vertical' ? -dy : dx;
increment(dValue * (isHoldingShiftRef.current ? largeStep : step));
}

Expand Down

0 comments on commit 4aa63f6

Please sign in to comment.