carbon-react 147.5.0 → 147.6.0

package/esm/components/fieldset/fieldset.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
@@ -15,6 +15,9 @@ export const Fieldset = ({
 }) => {
   const [ref, setRef] = useState(null);
   const marginProps = useFormSpacing(rest);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   useEffect(() => {
     if (ref && required) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -22,19 +25,16 @@ export const Fieldset = ({
       });
     }
   }, [ref, required]);
-  return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
-    value: {
-      validationRedesignOptIn: false
-    }
-  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
-    ref: setRef
+  return /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
+    ref: setRef,
+    newValidation: validationRedesignOptIn
   }, tagComponent("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/React.createElement(StyledLegend, {
     "data-element": "legend",
     isRequired: required,
     isOptional: isOptional
-  }, legend), /*#__PURE__*/React.createElement(FormSpacingProvider, {
+  }, legend), validationRedesignOptIn ? children : /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, children)));
+  }, children));
 };
 Fieldset.displayName = "Fieldset";
 export default Fieldset;

package/esm/components/fieldset/fieldset.style.d.ts

@@ -1,9 +1,12 @@
 export interface StyledFieldsetProps {
+    newValidation?: boolean;
+}
+declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
+export interface StyledLegendProps {
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
 }
-declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
 export { FieldsetStyle, StyledLegend };

package/esm/components/fieldset/fieldset.style.js

@@ -9,15 +9,19 @@ const FieldsetStyle = styled.fieldset`
   border: none;
   padding: 0;
 
-  &&&& ${FormFieldStyle} {
-    margin-top: 0;
-    margin-bottom: -1px;
-  }
+  ${({
+  newValidation
+}) => !newValidation && css`
+      &&&& ${FormFieldStyle} {
+        margin-top: 0;
+        margin-bottom: -1px;
+      }
 
-  & ${CheckboxStyle} {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
+      & ${CheckboxStyle} {
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+    `}
 `;
 FieldsetStyle.defaultProps = {
   theme: baseTheme
@@ -25,12 +29,11 @@ FieldsetStyle.defaultProps = {
 const StyledLegend = styled.legend`
   display: flex;
   align-items: center;
-  margin-bottom: 32px;
-  font-size: 20px;
+  margin-bottom: var(--spacing250);
+  font-size: var(--fontSizes400);
   font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   line-height: 24px;
-  margin-right: 4px;
 
   ${({
   isRequired

package/lib/components/fieldset/fieldset.component.js

@@ -24,6 +24,9 @@ const Fieldset = ({
 }) => {
   const [ref, setRef] = (0, _react.useState)(null);
   const marginProps = (0, _useFormSpacing.default)(rest);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
   (0, _react.useEffect)(() => {
     if (ref && required) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -31,19 +34,16 @@ const Fieldset = ({
       });
     }
   }, [ref, required]);
-  return /*#__PURE__*/_react.default.createElement(_newValidation.default.Provider, {
-    value: {
-      validationRedesignOptIn: false
-    }
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({
-    ref: setRef
+  return /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({
+    ref: setRef,
+    newValidation: validationRedesignOptIn
   }, (0, _tags.default)("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
     "data-element": "legend",
     isRequired: required,
     isOptional: isOptional
-  }, legend), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+  }, legend), validationRedesignOptIn ? children : /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: undefined
-  }, children)));
+  }, children));
 };
 exports.Fieldset = Fieldset;
 Fieldset.displayName = "Fieldset";

package/lib/components/fieldset/fieldset.style.d.ts

@@ -1,9 +1,12 @@
 export interface StyledFieldsetProps {
+    newValidation?: boolean;
+}
+declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
+export interface StyledLegendProps {
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
 }
-declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
 export { FieldsetStyle, StyledLegend };

package/lib/components/fieldset/fieldset.style.js

@@ -18,15 +18,19 @@ const FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset
   border: none;
   padding: 0;
 
-  &&&& ${_formField.default} {
-    margin-top: 0;
-    margin-bottom: -1px;
-  }
+  ${({
+  newValidation
+}) => !newValidation && (0, _styledComponents.css)`
+      &&&& ${_formField.default} {
+        margin-top: 0;
+        margin-bottom: -1px;
+      }
 
-  & ${_checkbox.default} {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
+      & ${_checkbox.default} {
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+    `}
 `;
 FieldsetStyle.defaultProps = {
   theme: _base.default
@@ -34,12 +38,11 @@ FieldsetStyle.defaultProps = {
 const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
-  margin-bottom: 32px;
-  font-size: 20px;
+  margin-bottom: var(--spacing250);
+  font-size: var(--fontSizes400);
   font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   line-height: 24px;
-  margin-right: 4px;
 
   ${({
   isRequired

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "147.5.0",
+  "version": "147.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",