diff --git a/.changeset/fruity-candles-march.md b/.changeset/fruity-candles-march.md new file mode 100644 index 0000000000..ce379fe17d --- /dev/null +++ b/.changeset/fruity-candles-march.md @@ -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 diff --git a/packages/number-input/src/NumberInput.stories.tsx b/packages/number-input/src/NumberInput.stories.tsx index 2d37f851d6..6a2e09192e 100644 --- a/packages/number-input/src/NumberInput.stories.tsx +++ b/packages/number-input/src/NumberInput.stories.tsx @@ -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', }, ]; @@ -140,7 +140,7 @@ const Template: StoryFn = ( {...rest} ref={inputRef} value={value} - unit={unitOptions.length ? unit : unitProp} + unit={unitOptions.length ? unit : ((unitProp ?? 'one') as string)} unitOptions={unitOptions} onSelectChange={handleSelectChange} onChange={handleChange} diff --git a/packages/number-input/src/NumberInput/NumberInput.styles.ts b/packages/number-input/src/NumberInput/NumberInput.styles.ts index ed26c6a189..3830441e3e 100644 --- a/packages/number-input/src/NumberInput/NumberInput.styles.ts +++ b/packages/number-input/src/NumberInput/NumberInput.styles.ts @@ -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'; @@ -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` diff --git a/packages/number-input/src/NumberInput/NumberInput.tsx b/packages/number-input/src/NumberInput/NumberInput.tsx index db2e56b0d3..06008df772 100644 --- a/packages/number-input/src/NumberInput/NumberInput.tsx +++ b/packages/number-input/src/NumberInput/NumberInput.tsx @@ -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'; @@ -123,13 +123,13 @@ export const NumberInput = React.forwardRef( {...rest} /> {renderUnitOnly && ( - {unit} - + )} {renderSelectOnly && ( = { diff --git a/packages/select/src/Select.stories.tsx b/packages/select/src/Select.stories.tsx index 1480a5ecd1..d048cfc297 100644 --- a/packages/select/src/Select.stories.tsx +++ b/packages/select/src/Select.stories.tsx @@ -112,6 +112,10 @@ const meta: StoryMetaType = { 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' }, @@ -119,6 +123,7 @@ const meta: StoryMetaType = { label: { control: 'text' }, description: { control: 'text' }, defaultValue: { control: 'text' }, + successMessage: { control: 'text' }, errorMessage: { control: 'text' }, allowDeselect: { control: 'boolean' }, open: { @@ -132,6 +137,14 @@ const meta: StoryMetaType = { '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;