Skip to content

Commit

Permalink
fix: playGround story issue in NumberInput (#17389)
Browse files Browse the repository at this point in the history
* refactor: updated type for value

* fix: passed props dunamically via args

* fix: args updated

* chore: args test

* chore: test with default vals

* Update PlayGround story

* chore: clean up

* fix: playground story updated

* added NumberInputSkeleton story back

---------

Co-authored-by: Gururaj J <[email protected]>
  • Loading branch information
2nikhiltom and Gururajj77 authored Sep 12, 2024
1 parent 47618cc commit fdb31d9
Showing 1 changed file with 33 additions and 35 deletions.
68 changes: 33 additions & 35 deletions packages/react/src/components/NumberInput/NumberInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,26 +81,38 @@ export const withAILabel = () => (
/>
</div>
);
export const Skeleton = () => <NumberInputSkeleton />;
export const Playground = ({ ...args }) => {
const [value, setValue] = React.useState(50);

const handleChange = (event, { value }) => {
setValue(value);
};

export const Playground = (args) => {
// const { numberInputArrowTranslationIds, ...rest } = props();
return (
<NumberInput
id="carbon-number"
id="playground-number-input"
min={-100}
max={100}
value={50}
value={value}
label="NumberInput label"
helperText="Optional helper text."
invalidText="Number is not valid"
onChange={handleChange}
{...args}
/>
);
};

Playground.args = {
step: 1,
disabled: false,
invalid: false,
invalidText: 'Number is not valid',
helperText: 'Optional helper text.',
warn: false,
warnText:
'Warning message that is really long can wrap to more lines but should not be excessively long.',
size: 'md',
};

Playground.argTypes = {
Expand All @@ -109,52 +121,38 @@ Playground.argTypes = {
disable: true,
},
},
defaultValue: {
min: { control: { type: 'number' } },
max: { control: { type: 'number' } },
step: { control: { type: 'number' } },
disabled: { control: { type: 'boolean' } },
invalid: { control: { type: 'boolean' } },
invalidText: { control: { type: 'text' } },
warn: { control: { type: 'boolean' } },
warnText: { control: { type: 'text' } },
size: {
options: ['sm', 'md', 'lg'],
control: { type: 'select' },
},
label: { control: { type: 'text' } },
helperText: { control: { type: 'text' } },
id: {
table: {
disable: true,
},
},
helperText: {
control: { type: 'text' },
},
id: {
defaultValue: {
table: {
disable: true,
},
},
invalidText: {
control: { type: 'text' },
},
label: {
control: { type: 'text' },
},
light: {
table: {
disable: true,
},
},
onChange: {
action: 'onChange',
},
onClick: {
action: 'onClick',
},
onKeyUp: {
action: 'onKeyUp',
},
translateWithId: {
table: {
disable: true,
},
},
value: {
control: { type: 'text' },
},
warnText: {
control: {
type: 'text',
},
},
};

export const Skeleton = () => <NumberInputSkeleton />;

0 comments on commit fdb31d9

Please sign in to comment.