From fdb31d98779d9243e47dde0aca833b5993af6379 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Thu, 12 Sep 2024 21:10:27 +0530
Subject: [PATCH] fix: playGround story issue in NumberInput (#17389)
* 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 <89023023+Gururajj77@users.noreply.github.com>
---
.../NumberInput/NumberInput.stories.js | 68 +++++++++----------
1 file changed, 33 insertions(+), 35 deletions(-)
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index e01818e66ca2..f43f094982dc 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -81,26 +81,38 @@ export const withAILabel = () => (
/>
);
+export const Skeleton = () => ;
+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 (
);
};
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 = {
@@ -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 = () => ;