From d8cdf61e2adae0366a5284673ceb5f7834ef2d86 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Fri, 23 Apr 2021 08:49:55 -0500 Subject: [PATCH 1/4] fix(Modal): content spacing styles --- .../src/components/modal/_modal.scss | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss index 84f810175461..441ca05f10d0 100644 --- a/packages/components/src/components/modal/_modal.scss +++ b/packages/components/src/components/modal/_modal.scss @@ -93,9 +93,9 @@ height: auto; max-height: 90%; - .#{$prefix}--modal-header, - .#{$prefix}--modal-content, - .#{$prefix}--modal-content__regular-content { + .#{$prefix}--modal-header p, + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content p { padding-right: 20%; } @@ -131,18 +131,24 @@ } .#{$prefix}--modal-container--xs { - .#{$prefix}--modal-header { + .#{$prefix}--modal-header p { padding-right: $carbon--spacing-09; } - .#{$prefix}--modal-content, - .#{$prefix}--modal-content__regular-content, + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content p, .#{$prefix}--modal-content--with-form { padding-right: $spacing-05; } @include carbon--breakpoint(md) { width: 48%; + + .#{$prefix}--modal-header p, + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content p { + padding-right: $carbon--spacing-05; + } } @include carbon--breakpoint(lg) { @@ -178,9 +184,9 @@ @include carbon--breakpoint(xlg) { width: 36%; - .#{$prefix}--modal-header, - .#{$prefix}--modal-content, - .#{$prefix}--modal-content__regular-content { + .#{$prefix}--modal-header p, + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content p { padding-right: 20%; } @@ -205,9 +211,9 @@ @include carbon--breakpoint(md) { width: 96%; - .#{$prefix}--modal-header, - .#{$prefix}--modal-content, - .#{$prefix}--modal-content__regular-content { + .#{$prefix}--modal-header p, + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content p { padding-right: 20%; } From 063091822b40024b06eb35696501002b18d8408f Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Thu, 29 Apr 2021 15:30:45 -0500 Subject: [PATCH 2/4] chore: deprecate hasForm --- packages/react/src/components/Modal/Modal.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index c76745f2ebfe..fccaee443531 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -64,10 +64,13 @@ export default class Modal extends Component { ), /** - * Provide whether the modal content has a form element. - * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class. + * Deprecated: Used to determine whether the modal content has a form element to adjust spacing, + * but now spacing styles account for all types of elements */ - hasForm: PropTypes.bool, + hasForm: deprecate( + PropTypes.bool, + `\nThe prop \`hasForm\` for Modal has been deprecated, as the feature of \`hasForm\` runs by default.` + ), /** * Specify whether the modal contains scrolling content From 637cd71958f5c900654032c60f09978c2deb4507 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Thu, 29 Apr 2021 15:34:03 -0500 Subject: [PATCH 3/4] chore: add deprecation comments --- packages/components/src/components/modal/_modal.scss | 1 + packages/react/src/components/Modal/Modal.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss index ecac75cbc7fc..9d4d5711cb79 100644 --- a/packages/components/src/components/modal/_modal.scss +++ b/packages/components/src/components/modal/_modal.scss @@ -133,6 +133,7 @@ .#{$prefix}--modal-content p, .#{$prefix}--modal-content__regular-content p, + //TO-DO: remove all instances of --modal-content--with-form in v11 since hasForm prop has been deprecated .#{$prefix}--modal-content--with-form { padding-right: $spacing-05; } diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index fccaee443531..f10f1586cccf 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -389,7 +389,7 @@ export default class Modal extends Component { }); const contentClasses = classNames(`${prefix}--modal-content`, { - [`${prefix}--modal-content--with-form`]: hasForm, + [`${prefix}--modal-content--with-form`]: hasForm, //TO-DO: delete this line in v11 since hasForm is deprecated [`${prefix}--modal-scroll-content`]: hasScrollingContent, }); From ae95e9002a783d66101938b161e34020d0e88588 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Thu, 29 Apr 2021 16:17:55 -0500 Subject: [PATCH 4/4] chore: update test --- .../react/__tests__/__snapshots__/PublicAPI-test.js.snap | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a950eceeeec8..adf662a34f1d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3342,9 +3342,7 @@ Map { "type": "bool", }, "focusTrap": [Function], - "hasForm": Object { - "type": "bool", - }, + "hasForm": [Function], "hasScrollingContent": Object { "type": "bool", }, @@ -4661,7 +4659,6 @@ Map { "flags": Map { "enable-css-custom-properties" => false, "enable-use-controlled-state-with-value" => false, - "enable-css-grid" => false, "enable-2021-release" => false, }, }, @@ -4669,7 +4666,6 @@ Map { "flags": Map { "enable-css-custom-properties" => false, "enable-use-controlled-state-with-value" => false, - "enable-css-grid" => false, "enable-2021-release" => false, }, },