carbon-react 130.0.0 → 131.0.0

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

@@ -1,11 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
-    /** The text for the fieldsets legend element. */
+    /** The text for the fieldset's legend element. */
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
@@ -13,7 +11,7 @@ export interface FieldsetProps extends MarginProps {
     isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

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

@@ -2,30 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
+import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 export const Fieldset = ({
   children,
-  inline = false,
   legend,
   required,
   isOptional,
   ...rest
 }) => {
   const [ref, setRef] = useState(null);
-  const getLegend = () => {
-    if (!legend) return null;
-    return /*#__PURE__*/React.createElement(LegendContainerStyle, {
-      isRequired: required,
-      isOptional: isOptional,
-      inline: inline,
-      "data-component": "legend-style"
-    }, /*#__PURE__*/React.createElement("legend", {
-      "data-element": "legend"
-    }, legend));
-  };
   const marginProps = useFormSpacing(rest);
   useEffect(() => {
     if (ref && required) {
@@ -40,12 +28,13 @@ export const Fieldset = ({
     }
   }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
     ref: setRef
-  }, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
-    "data-component": "fieldset-style",
-    inline: inline
-  }, getLegend(), /*#__PURE__*/React.createElement(FormSpacingProvider, {
+  }, tagComponent("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/React.createElement(StyledLegend, {
+    "data-element": "legend",
+    isRequired: required,
+    isOptional: isOptional
+  }, legend), /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, children))));
+  }, children)));
 };
 Fieldset.displayName = "Fieldset";
 export default Fieldset;

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

@@ -1,12 +1,9 @@
 export interface StyledFieldsetProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** 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 LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-declare const FieldsetContentStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+export { FieldsetStyle, StyledLegend };

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

@@ -1,8 +1,6 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import FormFieldStyle from "../../__internal__/form-field/form-field.style";
-import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
-import StyledIcon from "../icon/icon.style";
 import baseTheme from "../../style/themes/base";
 import CheckboxStyle from "../checkbox/checkbox.style";
 const FieldsetStyle = styled.fieldset`
@@ -24,58 +22,40 @@ const FieldsetStyle = styled.fieldset`
 FieldsetStyle.defaultProps = {
   theme: baseTheme
 };
-const LegendContainerStyle = styled.div`
-  ${({
-  inline
-}) => inline && `
-  margin-right: 32px;
-  height: 34px !important;
-  `}
+const StyledLegend = styled.legend`
   display: flex;
   align-items: center;
   margin-bottom: 32px;
+  font-size: 20px;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
+  line-height: 24px;
+  margin-right: 4px;
 
-  legend {
-    font-size: 20px;
-    font-weight: var(--fontWeights700);
-    color: var(--colorsUtilityYin090);
-    line-height: 24px;
-    margin-right: 4px;
-
-    ${({
+  ${({
   isRequired
 }) => isRequired && css`
-        ::after {
-          content: "*";
-          line-height: 24px;
-          color: var(--colorsSemanticNegative500);
-          font-weight: var(--fontWeights700);
-          margin-left: var(--spacing100);
-          position: relative;
-          top: 1px;
-          left: -4px;
-        }
-      `}
+      ::after {
+        content: "*";
+        line-height: 24px;
+        color: var(--colorsSemanticNegative500);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
 
-    ${({
+  ${({
   isOptional
 }) => isOptional && css`
-        ::after {
-          content: "(optional)";
-          color: var(--colorsUtilityYin055);
-          font-weight: var(--fontWeights400);
-          margin-left: var(--spacing050);
-        }
-      `}
-  }
-
-  ${ValidationIconStyle} ${StyledIcon}:focus {
-    outline: 2px solid #ffb500;
-  }
-`;
-const FieldsetContentStyle = styled.div`
-  ${({
-  inline
-}) => inline && "display: flex;"}
+      ::after {
+        content: "(optional)";
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+      }
+    `}
 `;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+export { FieldsetStyle, StyledLegend };

package/esm/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -38,8 +38,8 @@ export const TileSelectGroup = ({
     legend: legend
   }, tagComponent("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, filterStyledSystemMarginProps(rest)), description ? /*#__PURE__*/React.createElement(StyledGroupDescription, {
+  }, filterStyledSystemMarginProps(rest)), description && /*#__PURE__*/React.createElement(StyledGroupDescription, {
     "data-element": "tile-select-group-description"
-  }, description) : null, /*#__PURE__*/React.createElement("div", null, tiles));
+  }, description), tiles);
 };
 export default TileSelectGroup;

package/esm/components/tile-select/tile-select.component.js

@@ -105,7 +105,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/React.createElement(StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
+  }, titleAdornment && /*#__PURE__*/React.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
   }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
     accordionExpanded: accordionExpanded

package/esm/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/esm/components/tile-select/tile-select.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import Fieldset from "../fieldset";
 import { Input } from "../../__internal__/input";
-import { LegendContainerStyle } from "../fieldset/fieldset.style";
+import { StyledLegend } from "../fieldset/fieldset.style";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 import addFocusStyling from "../../style/utils/add-focus-styling";
@@ -166,13 +166,11 @@ const StyledDeselectWrapper = styled.div`
 const StyledTileSelectFieldset = styled(Fieldset)`
   ${margin}
 
-  ${LegendContainerStyle} {
+  ${StyledLegend} {
     margin-bottom: 16px;
-    legend {
-      font-size: 16px;
-      line-height: 16px;
-      margin-left: -2px;
-    }
+    font-size: 16px;
+    line-height: 16px;
+    margin-left: -2px;
   }
   ${({
   multiSelect

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

@@ -1,11 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
-    /** The text for the fieldsets legend element. */
+    /** The text for the fieldset's legend element. */
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
@@ -13,7 +11,7 @@ export interface FieldsetProps extends MarginProps {
     isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

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

@@ -17,24 +17,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Fieldset = ({
   children,
-  inline = false,
   legend,
   required,
   isOptional,
   ...rest
 }) => {
   const [ref, setRef] = (0, _react.useState)(null);
-  const getLegend = () => {
-    if (!legend) return null;
-    return /*#__PURE__*/_react.default.createElement(_fieldset.LegendContainerStyle, {
-      isRequired: required,
-      isOptional: isOptional,
-      inline: inline,
-      "data-component": "legend-style"
-    }, /*#__PURE__*/_react.default.createElement("legend", {
-      "data-element": "legend"
-    }, legend));
-  };
   const marginProps = (0, _useFormSpacing.default)(rest);
   (0, _react.useEffect)(() => {
     if (ref && required) {
@@ -49,12 +37,13 @@ const Fieldset = ({
     }
   }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({
     ref: setRef
-  }, (0, _tags.default)("fieldset", rest), rest, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
-    "data-component": "fieldset-style",
-    inline: inline
-  }, getLegend(), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+  }, (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, {
     marginBottom: undefined
-  }, children))));
+  }, children)));
 };
 exports.Fieldset = Fieldset;
 Fieldset.displayName = "Fieldset";

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

@@ -1,12 +1,9 @@
 export interface StyledFieldsetProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** 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 LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-declare const FieldsetContentStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+export { FieldsetStyle, StyledLegend };

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

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LegendContainerStyle = exports.FieldsetStyle = exports.FieldsetContentStyle = void 0;
+exports.StyledLegend = exports.FieldsetStyle = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
-var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
-var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _checkbox = _interopRequireDefault(require("../checkbox/checkbox.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,57 +31,39 @@ const FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset
 FieldsetStyle.defaultProps = {
   theme: _base.default
 };
-const LegendContainerStyle = exports.LegendContainerStyle = _styledComponents.default.div`
-  ${({
-  inline
-}) => inline && `
-  margin-right: 32px;
-  height: 34px !important;
-  `}
+const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
   margin-bottom: 32px;
+  font-size: 20px;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
+  line-height: 24px;
+  margin-right: 4px;
 
-  legend {
-    font-size: 20px;
-    font-weight: var(--fontWeights700);
-    color: var(--colorsUtilityYin090);
-    line-height: 24px;
-    margin-right: 4px;
-
-    ${({
+  ${({
   isRequired
 }) => isRequired && (0, _styledComponents.css)`
-        ::after {
-          content: "*";
-          line-height: 24px;
-          color: var(--colorsSemanticNegative500);
-          font-weight: var(--fontWeights700);
-          margin-left: var(--spacing100);
-          position: relative;
-          top: 1px;
-          left: -4px;
-        }
-      `}
+      ::after {
+        content: "*";
+        line-height: 24px;
+        color: var(--colorsSemanticNegative500);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
 
-    ${({
+  ${({
   isOptional
 }) => isOptional && (0, _styledComponents.css)`
-        ::after {
-          content: "(optional)";
-          color: var(--colorsUtilityYin055);
-          font-weight: var(--fontWeights400);
-          margin-left: var(--spacing050);
-        }
-      `}
-  }
-
-  ${_validationIcon.default} ${_icon.default}:focus {
-    outline: 2px solid #ffb500;
-  }
-`;
-const FieldsetContentStyle = exports.FieldsetContentStyle = _styledComponents.default.div`
-  ${({
-  inline
-}) => inline && "display: flex;"}
+      ::after {
+        content: "(optional)";
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+      }
+    `}
 `;

package/lib/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -45,9 +45,9 @@ const TileSelectGroup = ({
     legend: legend
   }, (0, _tags.default)("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description ? /*#__PURE__*/_react.default.createElement(_tileSelect.StyledGroupDescription, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledGroupDescription, {
     "data-element": "tile-select-group-description"
-  }, description) : null, /*#__PURE__*/_react.default.createElement("div", null, tiles));
+  }, description), tiles);
 };
 exports.TileSelectGroup = TileSelectGroup;
 var _default = exports.default = TileSelectGroup;

package/lib/components/tile-select/tile-select.component.js

@@ -114,7 +114,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
+  }, titleAdornment && /*#__PURE__*/_react.default.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
   }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
     accordionExpanded: accordionExpanded

package/lib/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/lib/components/tile-select/tile-select.style.js

@@ -175,13 +175,11 @@ const StyledDeselectWrapper = exports.StyledDeselectWrapper = _styledComponents.
 const StyledTileSelectFieldset = exports.StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.default)`
   ${_styledSystem.margin}
 
-  ${_fieldset2.LegendContainerStyle} {
+  ${_fieldset2.StyledLegend} {
     margin-bottom: 16px;
-    legend {
-      font-size: 16px;
-      line-height: 16px;
-      margin-left: -2px;
-    }
+    font-size: 16px;
+    line-height: 16px;
+    margin-left: -2px;
   }
   ${({
   multiSelect

package/package.json

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