Skip to content

Commit f99daf8

Browse files
bruugeybruugey
authored
LG-5106: Update unit prop type (#2834)
* unit * updates readme * fix ts error * with proper warning * add one more type test
1 parent 30a9d55 commit f99daf8

File tree

5 files changed

+44
-24
lines changed

5 files changed

+44
-24
lines changed

‎.changeset/itchy-coats-pretend.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/number-input': patch
3+
---
4+
5+
`unit` prop now accepts `React.ReactNode` when select input is not used

‎packages/number-input/README.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,25 @@ or
6262

6363
## Properties
6464

65-
| Prop | Type | Description | Default |
66-
| ----------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
67-
| `id` | `string` | id associated with the number input. | |
68-
| `label` | `React.ReactNode` | Label shown above the number input. | |
69-
| `description` | `string` | Text shown above the number input but below the label; gives more details about the requirements for the input. | |
70-
| `value` | `string` | The controlled value of the number input. | |
71-
| `disabled` | `boolean` | Disables the component. | `false` |
72-
| `placeholder` | `string` | The placeholder text shown in the input field before the user begins typing. | |
73-
| `size` | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Determines the size of the input. | `default` |
74-
| `state` | `'none'`\| `'error'` | Describes the state of the TextInput element before and after the input has been validated | `'none'` |
75-
| `errorMessage` | `string` | Error message that appears below the input. Renders only if `state='error'`. | `'This input needs your attention'` |
76-
| `successMessage` | `string` | Success message that appears below the input. Renders only if `state='valid'`. | `'Success'` |
77-
| `unit` | `string` | The string unit that appears to the right of the input if using a single unit. </br> </br>Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input. | `default` |
78-
| `unitOptions` | `Array<{displayName: string; value: string}>` | The options that appear in the select element attached to the right of the input. | `default` |
79-
| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. |
80-
| `onBlur` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | |
81-
| `onSelectChange` | `(unit: {displayName: string; value: string}) => void` | A change handler triggered when the unit is changed. |
82-
| `className` | `string` | ClassName for the component. | |
83-
| `inputClassName` | `string` | ClassName for the input component. | |
84-
| `selectClassName` | `string` | ClassName for the select component. | |
85-
| `darkMode` | `boolean` | Render the component in dark mode. | `false` |
86-
| ... | native `input` attributes | Any other props will be spread on the root `input` element | |
65+
| Prop | Type | Description | Default |
66+
| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- |
67+
| `id` | `string` | id associated with the number input. | |
68+
| `label` | `React.ReactNode` | Label shown above the number input. | |
69+
| `description` | `string` | Text shown above the number input but below the label; gives more details about the requirements for the input. | |
70+
| `value` | `string` | The controlled value of the number input. | |
71+
| `disabled` | `boolean` | Disables the component. | `false` |
72+
| `placeholder` | `string` | The placeholder text shown in the input field before the user begins typing. | |
73+
| `size` | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Determines the size of the input. | `default` |
74+
| `state` | `'none'`\| `'error'` | Describes the state of the TextInput element before and after the input has been validated | `'none'` |
75+
| `errorMessage` | `string` | Error message that appears below the input. Renders only if `state='error'`. | `'This input needs your attention'` |
76+
| `successMessage` | `string` | Success message that appears below the input. Renders only if `state='valid'`. | `'Success'` |
77+
| `unit` | `React.ReactNode` \| `string` | The content that appears to the right of the input if using a single unit. </br> </br>Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input. | `default` |
78+
| `unitOptions` | `Array<{displayName: string; value: string}>` | The options that appear in the select element attached to the right of the input. | `default` |
79+
| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. |
80+
| `onBlur` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | |
81+
| `onSelectChange` | `(unit: {displayName: string; value: string}) => void` | A change handler triggered when the unit is changed. |
82+
| `className` | `string` | ClassName for the component. | |
83+
| `inputClassName` | `string` | ClassName for the input component. | |
84+
| `selectClassName` | `string` | ClassName for the select component. | |
85+
| `darkMode` | `boolean` | Render the component in dark mode. | `false` |
86+
| ... | native `input` attributes | Any other props will be spread on the root `input` element | |

‎packages/number-input/src/NumberInput/NumberInput.spec.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,15 @@ describe('packages/number-input', () => {
384384
onSelectChange={() => {}}
385385
label={label}
386386
/>
387+
388+
{/* @ts-expect-error - unit must be a string with unitOptions */}
389+
<NumberInput
390+
unitOptions={selectProps.unitOptions}
391+
onSelectChange={() => {}}
392+
label={label}
393+
unit={<span>div</span>}
394+
/>
395+
387396
<NumberInput
388397
unit={unitProps.unit}
389398
unitOptions={selectProps.unitOptions}

‎packages/number-input/src/NumberInput/NumberInput.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,12 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
6363
const renderUnitOnly = hasUnit && !hasSelectOptions;
6464
const renderSelectOnly = hasUnit && hasSelectOptions && !!isUnitInOptions;
6565

66+
if (typeof unit !== 'string' && hasSelectOptions) {
67+
console.warn(
68+
'`unit` prop must be a string when `unitOptions` prop is provided',
69+
);
70+
}
71+
6672
const formFieldFeedbackProps = {
6773
disabled,
6874
errorMessage,
@@ -126,7 +132,7 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
126132
<UnitSelect
127133
id={selectId}
128134
disabled={disabled}
129-
unit={unit}
135+
unit={unit as string}
130136
unitOptions={unitOptions}
131137
onChange={onSelectChange}
132138
size={size}

‎packages/number-input/src/NumberInput/NumberInput.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export interface WithoutUnitSelectProps {
6767
* Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input.
6868
*
6969
*/
70-
unit?: string;
70+
unit?: React.ReactNode;
7171

7272
/**
7373
* The options that appear in the select element attached to the right of the input.

0 commit comments

Comments
 (0)