Skip to content

[LG-5863] fix(NumberInput): align styles with design #3453

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
tsck merged 7 commits into from
Jan 13, 2026
Merged

[LG-5863] fix(NumberInput): align styles with design #3453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1b6f8f2
refactor(NumberInput): stop enforcing uppercase on values
tsck Jan 9, 2026
59b72e7
fix(select): add state, size, errorMessage, and successMessage props …
tsck Jan 9, 2026
ddacc40
changeset
tsck Jan 9, 2026
ccfb6b2
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-5863/…
tsck Jan 9, 2026
baa52f9
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-5863/…
tsck Jan 12, 2026
a2e44b0
Update version bump to minor
tsck Jan 13, 2026
095dcbc
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-5863/…
tsck Jan 13, 2026
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
5 changes: 5 additions & 0 deletions .changeset/fruity-candles-march.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/number-input': minor
---

Removes all caps value enforcement and updates font weights so that they're uniform across sizes
10 changes: 5 additions & 5 deletions packages/number-input/src/NumberInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ import { NumberInput, NumberInputProps } from '.';

const unitOptions = [
{
displayName: 'Hours',
displayName: 'Hour(s)',
value: 'hours',
},
{
displayName: 'Days',
displayName: 'Day(s)',
value: 'days',
},
{
displayName: 'Months',
displayName: 'Month(s)',
value: 'months',
},
{
displayName: 'Astronomical units',
displayName: 'Astronomical unit(s)',
value: 'au',
},
];
Expand Down Expand Up @@ -140,7 +140,7 @@ const Template: StoryFn<StoryNumberInputProps> = (
{...rest}
ref={inputRef}
value={value}
unit={unitOptions.length ? unit : unitProp}
unit={unitOptions.length ? unit : ((unitProp ?? 'one') as string)}
Copy link
Copy Markdown
Collaborator Author

@tsck tsck Jan 9, 2026

Choose a reason for hiding this comment

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

Drive-by to fix type error

unitOptions={unitOptions}
onSelectChange={handleSelectChange}
onChange={handleChange}
Expand Down
3 changes: 2 additions & 1 deletion packages/number-input/src/NumberInput/NumberInput.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { color, spacing } from '@leafygreen-ui/tokens';
import { color, fontWeights, spacing } from '@leafygreen-ui/tokens';

import { Size } from './NumberInput.types';

Expand Down Expand Up @@ -37,6 +37,7 @@ export const wrapperGapStyles = css`

export const unitBaseStyles = css`
align-self: center;
font-weight: ${fontWeights.semiBold};
`;

export const getUnitThemeStyles = (theme: Theme) => css`
Expand Down
6 changes: 3 additions & 3 deletions packages/number-input/src/NumberInput/NumberInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useIdAllocator } from '@leafygreen-ui/hooks';
import LeafyGreenProvider, {
useDarkMode,
} from '@leafygreen-ui/leafygreen-provider';
import { Description, Label, Overline } from '@leafygreen-ui/typography';
import { Body, Description, Label } from '@leafygreen-ui/typography';

import { Input } from '../Input';
import { UnitSelect } from '../UnitSelect';
Expand Down Expand Up @@ -123,13 +123,13 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
{...rest}
/>
{renderUnitOnly && (
<Overline
<Body
className={cx(unitBaseStyles, getUnitThemeStyles(theme), {
[getUnitDisabledStyles(theme)]: disabled,
})}
>
{unit}
</Overline>
</Body>
)}
{renderSelectOnly && (
<UnitSelect
Expand Down
4 changes: 3 additions & 1 deletion packages/number-input/src/UnitSelect/UnitSelect.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { color, typeScales } from '@leafygreen-ui/tokens';
import { color, fontWeights, typeScales } from '@leafygreen-ui/tokens';

export const wrapperBaseStyles = css`
margin-left: -1px;
Expand All @@ -25,6 +25,8 @@ export const selectStyles = css`

button {
font-size: ${typeScales.body1.fontSize}px;
font-weight: ${fontWeights.semiBold};
line-height: ${typeScales.body1.lineHeight}px;
text-transform: none;
}
`;
5 changes: 0 additions & 5 deletions packages/number-input/src/UnitSelectButton/UnitSelectButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import { menuButtonTextClassName } from '@leafygreen-ui/select';
import { focusRing, Size, spacing } from '@leafygreen-ui/tokens';

export const wrapperStyles = css`
Expand All @@ -11,10 +10,6 @@ export const wrapperStyles = css`
export const baseStyles = css`
border-top-left-radius: 0;
border-bottom-left-radius: 0;

.${menuButtonTextClassName} {
text-transform: uppercase;
}
`;

export const themeStyles: Record<Theme, string> = {
Expand Down
13 changes: 13 additions & 0 deletions packages/select/src/Select.stories.tsx
View file
Open in desktop
Copy link
Copy Markdown
Collaborator Author

@tsck tsck Jan 9, 2026

Choose a reason for hiding this comment

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

Drive-by fix to improve prop selection

Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,18 @@ const meta: StoryMetaType<typeof Select> = {
darkMode: false,
children: childrenArray,
renderMode: RenderMode.TopLayer,
state: State.None,
size: Size.Default,
errorMessage: 'This is an error message',
successMessage: 'This is a success message',
},
argTypes: {
placeholder: { control: 'text' },
disabled: { control: 'boolean' },
label: { control: 'text' },
description: { control: 'text' },
defaultValue: { control: 'text' },
successMessage: { control: 'text' },
errorMessage: { control: 'text' },
allowDeselect: { control: 'boolean' },
open: {
Expand All @@ -132,6 +137,14 @@ const meta: StoryMetaType<typeof Select> = {
'Callback function called when the open state should change. Required when open prop is provided.',
},
darkMode: storybookArgTypes.darkMode,
size: {
control: 'select',
options: Object.values(Size),
},
state: {
control: 'select',
options: Object.values(State),
},
},
};
export default meta;
Expand Down
Loading