carbon-react 147.5.0 → 147.7.0

package/esm/components/confirm/confirm.component.js

@@ -85,6 +85,7 @@ export const Confirm = ({
     "data-element": "confirm",
     ...confirmButtonDataProps
   })), isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
+    "data-role": "confirm-loader",
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

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/esm/components/loader/loader.component.d.ts

@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
 export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
     /** Toggle between the default variant and gradient variant */
     variant?: string;
-    /** Specify a custom accessible name for the Loader component */
+    /**
+     * Specify a custom accessible name for the Loader component
+     * @deprecated - use `loaderLabel` prop instead
+     */
     "aria-label"?: string;
+    /**
+     * Specify a custom accessible label for the Loader.
+     * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
+     */
+    loaderLabel?: string;
 }
-export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/esm/components/loader/loader.component.js

@@ -7,14 +7,22 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
+import Typography from "../typography";
+import Logger from "../../__internal__/utils/logger";
+let deprecateAriaLabelWarnTriggered = false;
 export const Loader = ({
   variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
   isActive = true,
+  loaderLabel,
   ...rest
 }) => {
+  if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
+    deprecateAriaLabelWarnTriggered = true;
+    Logger.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
+  }
   const l = useLocale();
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const loaderSquareProps = {
@@ -25,13 +33,14 @@ export const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({
-    "aria-label": ariaLabel || l.loader.loading(),
-    role: "progressbar"
-  }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
+  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
-  }, loaderSquareProps)))));
+  }, loaderSquareProps))), /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderLabel || ariaLabel || l.loader.loading())));
 };
 export default Loader;

package/esm/components/select/__internal__/select-list/select-list.component.js

@@ -405,7 +405,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
+  }, /*#__PURE__*/React.createElement(Loader, {
+    "data-role": "select-list-loader"
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",

package/esm/components/switch/__internal__/switch-slider.component.js

@@ -49,7 +49,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, _extends({
+    "data-role": "switch-slider-loader"
+  }, loaderProps)) : panelContent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
     size: size,
     "aria-hidden": true

package/lib/components/confirm/confirm.component.js

@@ -94,6 +94,7 @@ const Confirm = ({
     "data-element": "confirm",
     ...confirmButtonDataProps
   })), isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": "confirm-loader",
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

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/lib/components/loader/loader.component.d.ts

@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
 export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
     /** Toggle between the default variant and gradient variant */
     variant?: string;
-    /** Specify a custom accessible name for the Loader component */
+    /**
+     * Specify a custom accessible name for the Loader component
+     * @deprecated - use `loaderLabel` prop instead
+     */
     "aria-label"?: string;
+    /**
+     * Specify a custom accessible label for the Loader.
+     * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
+     */
+    loaderLabel?: string;
 }
-export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/lib/components/loader/loader.component.js

@@ -12,16 +12,24 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _loader = _interopRequireDefault(require("./loader.style"));
 var _loaderSquare = _interopRequireDefault(require("./loader-square.style"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
+let deprecateAriaLabelWarnTriggered = false;
 const Loader = ({
   variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
   isActive = true,
+  loaderLabel,
   ...rest
 }) => {
+  if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
+    deprecateAriaLabelWarnTriggered = true;
+    _logger.default.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
+  }
   const l = (0, _useLocale.default)();
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const loaderSquareProps = {
@@ -32,14 +40,15 @@ const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
-    "aria-label": ariaLabel || l.loader.loading(),
-    role: "progressbar"
-  }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
-  }, loaderSquareProps)))));
+  }, loaderSquareProps))), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderLabel || ariaLabel || l.loader.loading())));
 };
 exports.Loader = Loader;
 var _default = exports.default = Loader;

package/lib/components/select/__internal__/select-list/select-list.component.js

@@ -414,7 +414,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": "select-list-loader"
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -56,7 +56,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+    "data-role": "switch-slider-loader"
+  }, loaderProps)) : panelContent);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {
     size: size,
     "aria-hidden": true

package/package.json

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