From df2429d1dfbf0a2d916d7cf7523cc39301a231a3 Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Thu, 9 Mar 2023 02:12:54 -0600 Subject: [PATCH 1/7] feat(radio-button): add validation props --- .../RadioButton/RadioButton.stories.js | 45 ++++++++++++- .../RadioButtonGroup/RadioButtonGroup.js | 64 ++++++++++++++++++- .../radio-button/_radio-button.scss | 44 +++++++++++++ 3 files changed, 151 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index d821f2f2ccdc..7bb928a0bdda 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -30,12 +30,55 @@ export default { type: 'boolean', }, }, + helperText: { + description: + 'Provide text that is used alongside the control label for additional help', + control: { + type: 'text', + }, + defaultValue: 'Helper text', + }, + invalid: { + description: 'Specify whether the RadioButtonGroup is invalid', + control: { + type: 'boolean', + }, + }, + invalidText: { + description: + 'Provide the text that is displayed when the control is in an invalid state', + control: { + type: 'text', + }, + defaultValue: 'Invalid selection', + }, + orientation: { + description: 'Provide how radio buttons should be displayed', + control: 'select', + options: ['horizontal', 'vertical'], + }, + warn: { + description: 'Specify whether the control is currently in warning state', + control: { + type: 'boolean', + }, + defaultValue: false, + }, + warnText: { + description: + 'Provide the text that is displayed when the control is in warning state', + control: { + type: 'text', + }, + defaultValue: 'Please notice the warning', + }, }, }; export const Default = () => { return ( @@ -65,7 +108,7 @@ export const Skeleton = () => { export const Playground = (args) => { return ( - + {helperText} + ) : null; return (
{legendText && ( @@ -96,6 +116,23 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup( )} {getRadioButtons()}
+
+ {!readOnly && invalid && ( + <> + +
{invalidText}
+ + )} + {showWarning && ( + <> + +
{warnText}
+ + )} + {showHelper && helper} +
); }); @@ -121,6 +158,21 @@ RadioButtonGroup.propTypes = { */ disabled: PropTypes.bool, + /** + * Provide text that is used alongside the control label for additional help + */ + helperText: PropTypes.node, + + /** + * Specify whether the control is currently invalid + */ + invalid: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText: PropTypes.node, + /** * Provide where label text should be placed */ @@ -157,6 +209,16 @@ RadioButtonGroup.propTypes = { * Specify the value that is currently selected in the group */ valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + /** + * Specify whether the control is currently in warning state + */ + warn: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText: PropTypes.node, }; export default RadioButtonGroup; diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 83acd98e98b8..c6b05e306a7d 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -153,6 +153,50 @@ $radio-border-width: 1px !default; user-select: text; } + // invalid + warn + .#{$prefix}--radio-button-group--invalid + .#{$prefix}--radio-button + + .#{$prefix}--radio-button__label + .#{$prefix}--radio-button__appearance { + border-color: $support-error; + } + + .#{$prefix}--checkbox__validation-msg { + display: flex; + align-items: flex-end; + } + + .#{$prefix}--checkbox__invalid-icon { + margin: 0 rem(1px) 0 rem(3px); + fill: $support-error; + } + + .#{$prefix}--checkbox__invalid-icon--warning { + fill: $support-warning; + } + + .#{$prefix}--checkbox__invalid-icon--warning path:first-of-type { + fill: #000000; + } + + .#{$prefix}--radio-button-group--invalid + + .#{$prefix}--checkbox__validation-msg + .#{$prefix}--form-requirement, + .#{$prefix}--radio-button-group--warning + + .#{$prefix}--checkbox__validation-msg + .#{$prefix}--form-requirement { + display: block; + overflow: visible; + max-height: 100%; + margin-left: $spacing-03; + } + + .#{$prefix}--radio-button-group--invalid + + .#{$prefix}--checkbox__validation-msg + .#{$prefix}--form-requirement { + color: $text-error; + } + // Focus .#{$prefix}--radio-button:focus From cb05be82b61e57aef7d4991747f802cc2b8994e3 Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Thu, 9 Mar 2023 02:25:03 -0600 Subject: [PATCH 2/7] chore(radiobutton): update spacing --- .../react/src/components/RadioButton/RadioButton.stories.js | 3 +-- .../styles/scss/components/radio-button/_radio-button.scss | 6 ++++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index 7bb928a0bdda..e20b7ad77b54 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -78,7 +78,6 @@ export default { export const Default = () => { return ( @@ -108,7 +107,7 @@ export const Skeleton = () => { export const Playground = (args) => { return ( - + Date: Thu, 9 Mar 2023 14:16:28 -0600 Subject: [PATCH 3/7] chore(radio-button): update snapshots --- .../__snapshots__/PublicAPI-test.js.snap | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 827e196a0f4a..d33b50ef8d8c 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5912,6 +5912,15 @@ Map { "disabled": Object { "type": "bool", }, + "helperText": Object { + "type": "node", + }, + "invalid": Object { + "type": "bool", + }, + "invalidText": Object { + "type": "node", + }, "labelPosition": Object { "args": Array [ Array [ @@ -5956,6 +5965,12 @@ Map { ], "type": "oneOfType", }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "node", + }, }, "render": [Function], }, From 4db237201f646f09fdd569fc055de8eafadf87c9 Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Mon, 13 Mar 2023 12:46:07 -0500 Subject: [PATCH 4/7] chore(radio-button): fix css and argtypes --- .../RadioButton/RadioButton.stories.js | 101 +++++++++--------- .../radio-button/_radio-button.scss | 9 +- 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index e20b7ad77b54..e395863a40e4 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -23,56 +23,6 @@ export default { page: mdx, }, }, - argTypes: { - readOnly: { - description: 'Specify whether the RadioButtonGroup is read-only', - control: { - type: 'boolean', - }, - }, - helperText: { - description: - 'Provide text that is used alongside the control label for additional help', - control: { - type: 'text', - }, - defaultValue: 'Helper text', - }, - invalid: { - description: 'Specify whether the RadioButtonGroup is invalid', - control: { - type: 'boolean', - }, - }, - invalidText: { - description: - 'Provide the text that is displayed when the control is in an invalid state', - control: { - type: 'text', - }, - defaultValue: 'Invalid selection', - }, - orientation: { - description: 'Provide how radio buttons should be displayed', - control: 'select', - options: ['horizontal', 'vertical'], - }, - warn: { - description: 'Specify whether the control is currently in warning state', - control: { - type: 'boolean', - }, - defaultValue: false, - }, - warnText: { - description: - 'Provide the text that is displayed when the control is in warning state', - control: { - type: 'text', - }, - defaultValue: 'Please notice the warning', - }, - }, }; export const Default = () => { @@ -126,3 +76,54 @@ export const Playground = (args) => { ); }; + +Playground.argTypes = { + readOnly: { + description: 'Specify whether the RadioButtonGroup is read-only', + control: { + type: 'boolean', + }, + }, + helperText: { + description: + 'Provide text that is used alongside the control label for additional help', + control: { + type: 'text', + }, + defaultValue: 'Helper text', + }, + invalid: { + description: 'Specify whether the RadioButtonGroup is invalid', + control: { + type: 'boolean', + }, + }, + invalidText: { + description: + 'Provide the text that is displayed when the control is in an invalid state', + control: { + type: 'text', + }, + defaultValue: 'Invalid selection', + }, + orientation: { + description: 'Provide how radio buttons should be displayed', + control: 'select', + options: ['horizontal', 'vertical'], + }, + warn: { + description: 'Specify whether the control is currently in warning state', + control: { + type: 'boolean', + }, + defaultValue: false, + }, + warnText: { + description: + 'Provide the text that is displayed when the control is in warning state', + control: { + type: 'text', + }, + defaultValue: 'Please notice the warning', + }, +}; diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 0285f5d3a641..809d73bbffb9 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -162,7 +162,7 @@ $radio-border-width: 1px !default; } .#{$prefix}--checkbox__validation-msg { - display: flex; + display: none; align-items: flex-end; margin-top: $spacing-03; } @@ -184,6 +184,13 @@ $radio-border-width: 1px !default; margin-top: 0; } + .#{$prefix}--radio-button-group--invalid + + .#{$prefix}--checkbox__validation-msg, + .#{$prefix}--radio-button-group--warning + + .#{$prefix}--checkbox__validation-msg { + display: flex; + } + .#{$prefix}--radio-button-group--invalid + .#{$prefix}--checkbox__validation-msg .#{$prefix}--form-requirement, From 2eba1f1e44ecdefe52c7277c30a42a6bd71e5091 Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Wed, 22 Mar 2023 10:23:19 -0500 Subject: [PATCH 5/7] chore(radio-button): update classnames --- .../RadioButtonGroup/RadioButtonGroup.js | 6 +++--- .../radio-button/_radio-button.scss | 20 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js index 7c644eab7ab3..758caa2105b5 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js @@ -116,17 +116,17 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup( )} {getRadioButtons()} -
+
{!readOnly && invalid && ( <> - +
{invalidText}
)} {showWarning && ( <>
{warnText}
diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 809d73bbffb9..574679542eaa 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -161,41 +161,41 @@ $radio-border-width: 1px !default; border-color: $support-error; } - .#{$prefix}--checkbox__validation-msg { + .#{$prefix}--radio-button__validation-msg { display: none; align-items: flex-end; margin-top: $spacing-03; } - .#{$prefix}--checkbox__invalid-icon { + .#{$prefix}--radio-button__invalid-icon { margin: 0 rem(1px) 0 rem(3px); fill: $support-error; } - .#{$prefix}--checkbox__invalid-icon--warning { + .#{$prefix}--radio-button__invalid-icon--warning { fill: $support-warning; } - .#{$prefix}--checkbox__invalid-icon--warning path:first-of-type { + .#{$prefix}--radio-button__invalid-icon--warning path:first-of-type { fill: #000000; } - .#{$prefix}--checkbox__validation-msg .#{$prefix}--form__helper-text { + .#{$prefix}--radio-button__validation-msg .#{$prefix}--form__helper-text { margin-top: 0; } .#{$prefix}--radio-button-group--invalid - + .#{$prefix}--checkbox__validation-msg, + + .#{$prefix}--radio-button__validation-msg, .#{$prefix}--radio-button-group--warning - + .#{$prefix}--checkbox__validation-msg { + + .#{$prefix}--radio-button__validation-msg { display: flex; } .#{$prefix}--radio-button-group--invalid - + .#{$prefix}--checkbox__validation-msg + + .#{$prefix}--radio-button__validation-msg .#{$prefix}--form-requirement, .#{$prefix}--radio-button-group--warning - + .#{$prefix}--checkbox__validation-msg + + .#{$prefix}--radio-button__validation-msg .#{$prefix}--form-requirement { display: block; overflow: visible; @@ -205,7 +205,7 @@ $radio-border-width: 1px !default; } .#{$prefix}--radio-button-group--invalid - + .#{$prefix}--checkbox__validation-msg + + .#{$prefix}--radio-button__validation-msg .#{$prefix}--form-requirement { color: $text-error; } From f12b0091b8e8d369ca4ad9ec06f99b7bbc806325 Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Wed, 22 Mar 2023 16:03:17 -0500 Subject: [PATCH 6/7] Update RadioButtonGroup.js --- .../react/src/components/RadioButtonGroup/RadioButtonGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js index 758caa2105b5..cfa6ef983b17 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js @@ -119,7 +119,7 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
{!readOnly && invalid && ( <> - +
{invalidText}
)} From 0b30868643c3c99a5100f3f33ba1948caa97ee0f Mon Sep 17 00:00:00 2001 From: Alessandra Davila Date: Wed, 22 Mar 2023 18:43:04 -0500 Subject: [PATCH 7/7] chore(radio-button): yarn format --- .../react/src/components/RadioButtonGroup/RadioButtonGroup.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js index cfa6ef983b17..fd72c9c5e6c7 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js @@ -119,7 +119,9 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
{!readOnly && invalid && ( <> - +
{invalidText}
)}