From 5c71aa7f0ca029bdd78dbea6078dc93712f1530e Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Mon, 27 May 2024 18:27:28 +0530 Subject: [PATCH 1/7] feat(16486): adds horizontal variant in CheckboxGroup --- .../__snapshots__/PublicAPI-test.js.snap | 9 +++++++++ .../components/Checkbox/Checkbox.stories.js | 10 ++++++++++ .../CheckboxGroup/CheckboxGroup-test.js | 13 ++++++++++++ .../components/CheckboxGroup/CheckboxGroup.js | 8 ++++++++ .../scss/components/checkbox/_checkbox.scss | 20 +++++++++++++++++++ 5 files changed, 60 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 3fb61718ecb1..94fb3a79a572 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -544,6 +544,15 @@ Map { "isRequired": true, "type": "node", }, + "orientation": Object { + "args": Array [ + Array [ + "horizontal", + "vertical", + ], + ], + "type": "oneOf", + }, "readOnly": Object { "type": "bool", }, diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js index 17d0cc2559ad..8e3940b0eb49 100644 --- a/packages/react/src/components/Checkbox/Checkbox.stories.js +++ b/packages/react/src/components/Checkbox/Checkbox.stories.js @@ -43,6 +43,16 @@ export const Default = () => { ); }; +export const Horizontal = () => { + return ( + + + + + + ); +}; + export const Single = () => { return ( <> diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js index 46b0f6c7d439..3426a611efe3 100644 --- a/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js +++ b/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js @@ -161,4 +161,17 @@ describe('CheckboxGroup', () => { expect(container.firstChild).toHaveClass(`${prefix}--checkbox-group--slug`); }); + it('should render checkboxes horizontally', () => { + const { container } = render( + + + + + + ); + + expect(container.firstChild).toHaveClass( + `${prefix}--checkbox-group--horizontal` + ); + }); }); diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js index 5c94d70fea6c..bc2ab4160171 100644 --- a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js +++ b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js @@ -26,6 +26,7 @@ function CheckboxGroup({ warn, warnText, slug, + orientation = 'vertical', ...rest }) { const prefix = usePrefix(); @@ -46,6 +47,7 @@ function CheckboxGroup({ ) : null; const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, { + [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal', [`${prefix}--checkbox-group--readonly`]: readOnly, [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid, [`${prefix}--checkbox-group--warning`]: showWarning, @@ -67,6 +69,7 @@ function CheckboxGroup({ data-invalid={invalid ? true : undefined} aria-labelledby={rest['aria-labelledby'] || legendId} aria-readonly={readOnly} + orientation="vertical" aria-describedby={!invalid && !warn && helper ? helperId : undefined} {...rest}> Date: Tue, 28 May 2024 15:09:37 +0530 Subject: [PATCH 2/7] feat(16486): add prop to playground & styles on validation messages --- .../react/src/components/Checkbox/Checkbox.stories.js | 10 +++++++++- .../styles/scss/components/checkbox/_checkbox.scss | 11 ++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js index 8e3940b0eb49..c556daff677b 100644 --- a/packages/react/src/components/Checkbox/Checkbox.stories.js +++ b/packages/react/src/components/Checkbox/Checkbox.stories.js @@ -45,7 +45,10 @@ export const Default = () => { export const Horizontal = () => { return ( - + @@ -196,4 +199,9 @@ Playground.argTypes = { disable: true, }, }, + orientation: { + description: 'Provide how checkbox should be displayed', + control: 'select', + options: ['horizontal', 'vertical'], + }, }; diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 523c995a2dbe..9a2196fc6c58 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -388,6 +388,7 @@ // horizontal checkbox group .#{$prefix}--checkbox-group--horizontal { + position: relative; display: flex; flex-direction: row; justify-content: flex-start; @@ -400,9 +401,17 @@ margin-inline-end: $spacing-05; } } - + .#{$prefix}--checkbox-label-text { + padding-inline-start: $spacing-03; + } .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { margin-block-start: 0; } + .#{$prefix}--checkbox-group__validation-msg, + .#{$prefix}--form__helper-text { + position: absolute; + inset-block-end: -($spacing-02 + $spacing-05); + inset-inline-start: 0; + } } } From 41fa9991f107781068a8b43913f0e89e10563747 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 28 May 2024 10:08:01 -0500 Subject: [PATCH 3/7] Update packages/react/src/components/CheckboxGroup/CheckboxGroup.js --- packages/react/src/components/CheckboxGroup/CheckboxGroup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js index bc2ab4160171..68d587e3a789 100644 --- a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js +++ b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js @@ -138,7 +138,7 @@ CheckboxGroup.propTypes = { legendText: PropTypes.node.isRequired, /** - * Provide where checkbox should be placed + * Provide the orientation for how the checkbox should be displayed */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), From 380dd13fc0146168c93d8e6896b83f6e7d19dca8 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 28 May 2024 10:09:01 -0500 Subject: [PATCH 4/7] Update packages/styles/scss/components/checkbox/_checkbox.scss --- packages/styles/scss/components/checkbox/_checkbox.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 9a2196fc6c58..dfece1b82b72 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -401,12 +401,15 @@ margin-inline-end: $spacing-05; } } + .#{$prefix}--checkbox-label-text { padding-inline-start: $spacing-03; } + .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { margin-block-start: 0; } + .#{$prefix}--checkbox-group__validation-msg, .#{$prefix}--form__helper-text { position: absolute; From 045a490f7ae599f59eb1f482ad457dc5beef947b Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 28 May 2024 10:21:42 -0500 Subject: [PATCH 5/7] Update packages/styles/scss/components/checkbox/_checkbox.scss --- packages/styles/scss/components/checkbox/_checkbox.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index dfece1b82b72..27845d58b00a 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -410,11 +410,4 @@ margin-block-start: 0; } - .#{$prefix}--checkbox-group__validation-msg, - .#{$prefix}--form__helper-text { - position: absolute; - inset-block-end: -($spacing-02 + $spacing-05); - inset-inline-start: 0; - } - } } From 4d623757fb57444534b7d09f37fc312e05011e25 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 28 May 2024 10:22:18 -0500 Subject: [PATCH 6/7] Update packages/styles/scss/components/checkbox/_checkbox.scss --- packages/styles/scss/components/checkbox/_checkbox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 27845d58b00a..2c46eb7a22ad 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -409,5 +409,5 @@ .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { margin-block-start: 0; } - +} } From 473250b88c236eae33451f0ab3aa9e46cc743143 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar Date: Tue, 28 May 2024 21:44:50 +0530 Subject: [PATCH 7/7] fix: updates flex styles --- packages/styles/scss/components/checkbox/_checkbox.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 2c46eb7a22ad..65e4e2b821f4 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -390,7 +390,7 @@ .#{$prefix}--checkbox-group--horizontal { position: relative; display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: flex-start; .#{$prefix}--form-item { @@ -409,5 +409,5 @@ .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { margin-block-start: 0; } -} + } }