carbon-react 111.13.2 → 111.14.0

package/esm/components/button-toggle-group/button-toggle-group.component.d.ts

@@ -27,6 +27,8 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
     /** The alignment for the text in the label. */
     labelAlign?: "left" | "right";
     /** Callback triggered by blur event on the input. */
@@ -39,7 +41,7 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     helpAriaLabel?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle-group/button-toggle-group.component.js

@@ -23,6 +23,7 @@ const ButtonToggleGroup = ({
   labelHelp,
   labelSpacing,
   inputWidth,
+  fullWidth,
   fieldHelp,
   fieldHelpInline,
   labelInline,
@@ -69,7 +70,8 @@ const ButtonToggleGroup = ({
   }, validationProps, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
     "aria-label": label,
     role: "radiogroup",
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    fullWidth: fullWidth
   }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
     name: name,
     onBlur: onBlur,
@@ -88,6 +90,7 @@ ButtonToggleGroup.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "fieldHelp": PropTypes.string,
   "fieldHelpInline": PropTypes.bool,
+  "fullWidth": PropTypes.bool,
   "helpAriaLabel": PropTypes.string,
   "id": PropTypes.string.isRequired,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/esm/components/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,4 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 import { ValidationProps } from "../../__internal__/validations";
-declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">, never>;
 export default StyledButtonToggleGroup;

package/esm/components/button-toggle-group/button-toggle-group.style.js

@@ -1,9 +1,20 @@
 import styled, { css } from "styled-components";
-import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
+import { StyledButtonToggleLabel, StyledButtonToggle } from "../button-toggle/button-toggle.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
 const StyledButtonToggleGroup = styled.div`
   display: flex;
 
+  ${({
+  fullWidth
+}) => fullWidth && css`
+      ${StyledButtonToggleLabel} {
+        width: 100%;
+      }
+      ${StyledButtonToggle} {
+        flex: auto;
+      }
+    `};
+
   ${({
   inputWidth
 }) => inputWidth && css`

package/lib/components/button-toggle-group/button-toggle-group.component.d.ts

@@ -27,6 +27,8 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
+    /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
+    fullWidth?: boolean;
     /** The alignment for the text in the label. */
     labelAlign?: "left" | "right";
     /** Callback triggered by blur event on the input. */
@@ -39,7 +41,7 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, Ta
     helpAriaLabel?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
+    ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -46,6 +46,7 @@ const ButtonToggleGroup = ({
   labelHelp,
   labelSpacing,
   inputWidth,
+  fullWidth,
   fieldHelp,
   fieldHelpInline,
   labelInline,
@@ -93,7 +94,8 @@ const ButtonToggleGroup = ({
   }, validationProps, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({
     "aria-label": label,
     role: "radiogroup",
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    fullWidth: fullWidth
   }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
     name: name,
     onBlur: onBlur,
@@ -112,6 +114,7 @@ ButtonToggleGroup.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "fieldHelp": _propTypes.default.string,
   "fieldHelpInline": _propTypes.default.bool,
+  "fullWidth": _propTypes.default.bool,
   "helpAriaLabel": _propTypes.default.string,
   "id": _propTypes.default.string.isRequired,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package/lib/components/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,4 +1,4 @@
 import { ButtonToggleGroupProps } from ".";
 import { ValidationProps } from "../../__internal__/validations";
-declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
+declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">, never>;
 export default StyledButtonToggleGroup;

package/lib/components/button-toggle-group/button-toggle-group.style.js

@@ -20,6 +20,17 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledButtonToggleGroup = _styledComponents.default.div`
   display: flex;
 
+  ${({
+  fullWidth
+}) => fullWidth && (0, _styledComponents.css)`
+      ${_buttonToggle.StyledButtonToggleLabel} {
+        width: 100%;
+      }
+      ${_buttonToggle.StyledButtonToggle} {
+        flex: auto;
+      }
+    `};
+
   ${({
   inputWidth
 }) => inputWidth && (0, _styledComponents.css)`

package/package.json

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