From b331f4315b1e9bab0826ed15d4284a9fb74fef84 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Mon, 9 Sep 2024 18:22:35 +0530 Subject: [PATCH 1/9] refactor: updated type for value --- .../react/src/components/NumberInput/NumberInput.stories.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index e01818e66ca2..fe49a71a72ab 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -12,6 +12,7 @@ import Button from '../Button'; import { AILabel, AILabelContent, AILabelActions } from '../AILabel'; import { IconButton } from '../IconButton'; import { View, FolderOpen, Folders } from '@carbon/icons-react'; +import { number } from 'prop-types'; export default { title: 'Components/NumberInput', @@ -148,7 +149,7 @@ Playground.argTypes = { }, }, value: { - control: { type: 'text' }, + control: { type: `number` }, }, warnText: { control: { From e4ffc9f448ddbfea618f03a1c1792229fc692c89 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Mon, 9 Sep 2024 18:55:03 +0530 Subject: [PATCH 2/9] fix: passed props dunamically via args --- .../NumberInput/NumberInput.stories.js | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index fe49a71a72ab..cf9bca424288 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -85,23 +85,18 @@ export const withAILabel = () => ( export const Playground = (args) => { // const { numberInputArrowTranslationIds, ...rest } = props(); - return ( - - ); + return ; }; Playground.args = { warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', + value: 50, + min: -100, + max: 100, + label: 'NumberInput label', + helperText: 'Optional helper text.', + invalidText: 'Number is not valid', }; Playground.argTypes = { @@ -151,6 +146,12 @@ Playground.argTypes = { value: { control: { type: `number` }, }, + min: { + control: { type: 'number' }, + }, + max: { + control: { type: 'number' }, + }, warnText: { control: { type: 'text', From af9258058392e4b7dd2483c4376ca14baa78dd36 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Tue, 10 Sep 2024 00:49:17 +0530 Subject: [PATCH 3/9] fix: args updated --- .../NumberInput/NumberInput.stories.js | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index cf9bca424288..7596278754f4 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -83,35 +83,50 @@ export const withAILabel = () => ( ); -export const Playground = (args) => { - // const { numberInputArrowTranslationIds, ...rest } = props(); - return ; -}; +export const Playground = (args) => ( +
+ +
+); Playground.args = { - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', - value: 50, min: -100, max: 100, + value: 50, + step: 1, + invalid: false, + invalidText: 'Error message goes here', + disabled: false, label: 'NumberInput label', helperText: 'Optional helper text.', - invalidText: 'Number is not valid', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + size: 'md', }; - Playground.argTypes = { className: { - table: { - disable: true, - }, + control: { type: 'text' }, }, defaultValue: { table: { disable: true, }, }, - helperText: { - control: { type: 'text' }, + min: { + control: { type: 'number' }, + }, + max: { + control: { type: 'number' }, + }, + value: { + control: { type: 'number' }, + }, + step: { + control: { type: 'number' }, + }, + invalid: { + control: { type: 'boolean' }, }, id: { table: { @@ -121,6 +136,9 @@ Playground.argTypes = { invalidText: { control: { type: 'text' }, }, + disabled: { + control: { type: 'boolean' }, + }, label: { control: { type: 'text' }, }, @@ -129,34 +147,31 @@ Playground.argTypes = { disable: true, }, }, + helperText: { + control: { type: 'text' }, + }, + warn: { + control: { type: 'boolean' }, + }, + warnText: { + control: { type: 'text' }, + }, + size: { + options: ['sm', 'md', 'lg', 'xl'], + control: { type: 'select' }, + }, onChange: { action: 'onChange', }, onClick: { action: 'onClick', }, - onKeyUp: { - action: 'onKeyUp', - }, translateWithId: { table: { disable: true, }, }, - value: { - control: { type: `number` }, - }, - min: { - control: { type: 'number' }, - }, - max: { - control: { type: 'number' }, - }, - warnText: { - control: { - type: 'text', - }, + onKeyUp: { + action: 'onKeyUp', }, }; - -export const Skeleton = () => ; From 33de43677cba5b7b1553a4cca27d7eee168c656d Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Tue, 10 Sep 2024 13:25:41 +0530 Subject: [PATCH 4/9] chore: args test --- .../NumberInput/NumberInput.stories.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 7596278754f4..6bdda8b9f5c2 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -175,3 +175,61 @@ Playground.argTypes = { action: 'onKeyUp', }, }; + +export const Playground2 = ({ ...args }) => { + const [value, setValue] = React.useState(50); + + const handleChange = (event, { value }) => { + setValue(value); + }; + + return ( + + ); +}; + +Playground2.args = { + step: 1, + disabled: false, + invalid: false, + invalidText: 'Error message goes here', + warn: false, + warnText: 'Warning message goes here', + size: 'md', +}; + +Playground2.argTypes = { + 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, + }, + }, + light: { + table: { + disable: true, + }, + }, +}; From 60361822aa46c133cea76782d4a621aa1df3578c Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Tue, 10 Sep 2024 13:53:03 +0530 Subject: [PATCH 5/9] chore: test with default vals --- .../NumberInput/NumberInput.stories.js | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 6bdda8b9f5c2..7d86413311d5 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -233,3 +233,57 @@ Playground2.argTypes = { }, }, }; + +export const Playground3 = ({ ...args }) => { + return ( + + ); +}; + +Playground3.args = { + step: 1, + disabled: false, + invalid: false, + invalidText: 'Error message goes here', + warn: false, + warnText: 'Warning message goes here', + size: 'md', + value: 50, +}; + +Playground3.argTypes = { + 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, + }, + }, + light: { + table: { + disable: true, + }, + }, + onChange: { + action: 'onChange', + }, +}; From 19917f7a938a66d84c3b5984d11c53b79b41c211 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:06:56 +0530 Subject: [PATCH 6/9] Update PlayGround story --- .../NumberInput/NumberInput.stories.js | 153 +----------------- 1 file changed, 3 insertions(+), 150 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 7d86413311d5..61f85ba5be4c 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -83,100 +83,7 @@ export const withAILabel = () => ( ); -export const Playground = (args) => ( -
- -
-); - -Playground.args = { - min: -100, - max: 100, - value: 50, - step: 1, - invalid: false, - invalidText: 'Error message goes here', - disabled: false, - label: 'NumberInput label', - 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 = { - className: { - control: { type: 'text' }, - }, - defaultValue: { - table: { - disable: true, - }, - }, - min: { - control: { type: 'number' }, - }, - max: { - control: { type: 'number' }, - }, - value: { - control: { type: 'number' }, - }, - step: { - control: { type: 'number' }, - }, - invalid: { - control: { type: 'boolean' }, - }, - id: { - table: { - disable: true, - }, - }, - invalidText: { - control: { type: 'text' }, - }, - disabled: { - control: { type: 'boolean' }, - }, - label: { - control: { type: 'text' }, - }, - light: { - table: { - disable: true, - }, - }, - helperText: { - control: { type: 'text' }, - }, - warn: { - control: { type: 'boolean' }, - }, - warnText: { - control: { type: 'text' }, - }, - size: { - options: ['sm', 'md', 'lg', 'xl'], - control: { type: 'select' }, - }, - onChange: { - action: 'onChange', - }, - onClick: { - action: 'onClick', - }, - translateWithId: { - table: { - disable: true, - }, - }, - onKeyUp: { - action: 'onKeyUp', - }, -}; - -export const Playground2 = ({ ...args }) => { +export const Playground = ({ ...args }) => { const [value, setValue] = React.useState(50); const handleChange = (event, { value }) => { @@ -197,57 +104,7 @@ export const Playground2 = ({ ...args }) => { ); }; -Playground2.args = { - step: 1, - disabled: false, - invalid: false, - invalidText: 'Error message goes here', - warn: false, - warnText: 'Warning message goes here', - size: 'md', -}; - -Playground2.argTypes = { - 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, - }, - }, - light: { - table: { - disable: true, - }, - }, -}; - -export const Playground3 = ({ ...args }) => { - return ( - - ); -}; - -Playground3.args = { +Playground.args = { step: 1, disabled: false, invalid: false, @@ -255,10 +112,9 @@ Playground3.args = { warn: false, warnText: 'Warning message goes here', size: 'md', - value: 50, }; -Playground3.argTypes = { +Playground.argTypes = { min: { control: { type: 'number' } }, max: { control: { type: 'number' } }, step: { control: { type: 'number' } }, @@ -283,7 +139,4 @@ Playground3.argTypes = { disable: true, }, }, - onChange: { - action: 'onChange', - }, }; From d5b30b5f6f60ca55892854ff0e349315853c5e42 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:41:01 +0530 Subject: [PATCH 7/9] chore: clean up --- packages/react/src/components/NumberInput/NumberInput.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 61f85ba5be4c..e0d46ff32d15 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -12,7 +12,6 @@ import Button from '../Button'; import { AILabel, AILabelContent, AILabelActions } from '../AILabel'; import { IconButton } from '../IconButton'; import { View, FolderOpen, Folders } from '@carbon/icons-react'; -import { number } from 'prop-types'; export default { title: 'Components/NumberInput', From d72fac981967cc99a55dd2993f38039c9b2b79d2 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Tue, 10 Sep 2024 18:22:54 +0530 Subject: [PATCH 8/9] fix: playground story updated --- .../NumberInput/NumberInput.stories.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index e0d46ff32d15..1d039cdaa7bc 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -107,13 +107,20 @@ Playground.args = { step: 1, disabled: false, invalid: false, - invalidText: 'Error message goes here', + invalidText: 'Number is not valid', + helperText: 'Optional helper text.', warn: false, - warnText: 'Warning message goes here', + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', size: 'md', }; Playground.argTypes = { + className: { + table: { + disable: true, + }, + }, min: { control: { type: 'number' } }, max: { control: { type: 'number' } }, step: { control: { type: 'number' } }, @@ -133,9 +140,19 @@ Playground.argTypes = { disable: true, }, }, + defaultValue: { + table: { + disable: true, + }, + }, light: { table: { disable: true, }, }, + translateWithId: { + table: { + disable: true, + }, + }, }; From 15925357a5bf1bd4755a22c151b4f9d3282ee7f2 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Tue, 10 Sep 2024 18:38:48 +0530 Subject: [PATCH 9/9] added NumberInputSkeleton story back --- .../react/src/components/NumberInput/NumberInput.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 1d039cdaa7bc..f43f094982dc 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -81,7 +81,7 @@ export const withAILabel = () => ( /> ); - +export const Skeleton = () => ; export const Playground = ({ ...args }) => { const [value, setValue] = React.useState(50);