fix(form): restore label margin, remove margin from FormLabel only

carbon-design-system · Nov 2, 2021 · 9abc47f · 9abc47f
1 parent fe9428a
commit 9abc47f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -46,16 +46,20 @@
     @include type-style('label-01');
 
     display: inline-block;
-    @if not feature-flag-enabled('enable-v11-release') {
-      margin-bottom: $carbon--spacing-03;
-    }
+    margin-bottom: $carbon--spacing-03;
 
     color: $text-02;
     font-weight: $input-label-weight;
     line-height: 1rem;
     vertical-align: baseline;
   }
 
+  @if feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--label {
+      margin-bottom: 0;
+    }
+  }
+
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
     // When tooltip trigger is put in form label the trigger button should fit in the size of label
     // https://github.com/IBM/carbon-components-react/issues/115

diff --git a/packages/react/src/components/FormLabel/FormLabel.js b/packages/react/src/components/FormLabel/FormLabel.js
@@ -9,10 +9,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 const FormLabel = ({ className, children, id, ...other }) => {
   const prefix = usePrefix();
-  const classNames = classnames(`${prefix}--label`, className);
+  const classNames = classnames(
+    {
+      [`${prefix}--label`]: !FeatureFlags.enabled('enable-v11-release'),
+      [`${prefix}--label--no-margin`]: FeatureFlags.enabled(
+        'enable-v11-release'
+      ),
+    },
+    className
+  );
 
   return (
     <label htmlFor={id} className={classNames} {...other}>