Remove external/outside margin from components (#9830)

* fix(form): remove fieldset margin * fix(form): remove fileuploader margin * fix(form): remove label margin * fix(notifications): remove external margin * fix(structured-list): remove external margin * chore: put component margin removal behind flag * chore: add v11 flag env variable to sass compilation config Co-authored-by: Josh Black <josh@josh.black>
carbon-design-system · Oct 19, 2021 · 7273119 · 7273119
1 parent 7276911
commit 7273119
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 34 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -57,7 +57,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $link-01;
     cursor: pointer;
     outline: 2px solid transparent;

diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -18,11 +18,15 @@
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $carbon--spacing-07;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -42,7 +46,10 @@
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $text-02;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -125,8 +132,10 @@
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -33,8 +33,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-05;
+    }
+
     color: $inverse-01;
 
     @include carbon--breakpoint(md) {

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -29,14 +29,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $carbon--spacing-05;
-    margin-top: $carbon--spacing-03;
-    margin-right: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-03;
+      margin-right: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $inverse-01;
 
-    &:first-child {
-      margin-top: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $carbon--spacing-05;
+      }
     }
 
     @include carbon--breakpoint(max) {

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
@@ -32,7 +32,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -13,7 +13,7 @@ const customProperties = require('postcss-custom-properties');
 const rtlcss = require('rtlcss');
 
 const {
-  CARBON_ENABLE_V11_RELEASE,
+  CARBON_ENABLE_V11_RELEASE = 'false',
   CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
   CARBON_REACT_STORYBOOK_USE_RTL,
   CARBON_REACT_STORYBOOK_USE_SASS_LOADER,
@@ -69,6 +69,7 @@ module.exports = {
             $feature-flags: (
               ui-shell: true,
               enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+              enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
             );
             ${content}
           `;
@@ -88,6 +89,7 @@ module.exports = {
           $feature-flags: (
             ui-shell: true,
             enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+            enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
           );
         `,
         implementation: require('sass'),

diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
@@ -19,14 +19,15 @@ const FormGroup = ({
   className,
   message,
   messageText,
-  hasMargin,
+  hasMargin, // TODO - remove in v11
   ...other
 }) => {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
   const classNamesLegend = classnames(`${prefix}--label`, [
     enabled ? null : className,
   ]);
+  // TODO - remove `fieldset--no-margin` in v11
   const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
     [`${prefix}--fieldset--no-margin`]: !hasMargin,
   });

diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss
@@ -62,7 +62,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $link-primary;
     cursor: pointer;
     outline: 2px solid transparent;

diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
@@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $spacing-07;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss
@@ -36,8 +36,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {

diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -34,8 +34,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {

diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -32,14 +32,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $spacing-05;
-    margin-top: $spacing-03;
-    margin-right: $spacing-05;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-03;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    &:first-child {
-      margin-top: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $spacing-05;
+      }
     }
 
     @include breakpoint(max) {

diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -36,7 +36,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;