carbon-react 126.7.1 → 126.9.0

package/esm/components/time/time.style.js

@@ -10,7 +10,7 @@ export const StyledHintText = styled.div`
     content: " ";
   }
 
-  margin-top: 0px;
+  margin-top: var(--spacing000);
   margin-bottom: var(--spacing150);
   color: ${({
   isDisabled

package/lib/__internal__/input/input-presentation.component.d.ts

@@ -25,10 +25,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     hasIcon?: boolean;
     /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
     borderRadius?: BorderRadiusType | BorderRadiusType[];
+    /** Renders with transparent borders. This will not effect focus styling or validation borders  */
+    hideBorders?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, hideBorders, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/lib/__internal__/input/input-presentation.component.js

@@ -19,6 +19,7 @@ const InputPresentation = ({
   disabled,
   error,
   hasIcon,
+  hideBorders = false,
   info,
   inputWidth,
   maxWidth,
@@ -68,7 +69,8 @@ const InputPresentation = ({
     info: info,
     validationRedesignOptIn: validationRedesignOptIn,
     hasIcon: hasIcon,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    hideBorders: hideBorders
   }, children));
 };
 InputPresentation.propTypes = {
@@ -78,6 +80,7 @@ InputPresentation.propTypes = {
   "disabled": _propTypes.default.bool,
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "hasIcon": _propTypes.default.bool,
+  "hideBorders": _propTypes.default.bool,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inputWidth": _propTypes.default.number,
   "maxWidth": _propTypes.default.string,

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__internal__/input/input-presentation.style.js

@@ -53,7 +53,9 @@ function stylingForValidations({
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
-  border: 1px solid var(--colorsUtilityMajor300);
+  ${({
+  hideBorders
+}) => hideBorders ? `border: 1px solid transparent;` : `border: 1px solid var(--colorsUtilityMajor300);`}
   box-sizing: border-box;
   cursor: text;
   display: flex;
@@ -85,10 +87,11 @@ const InputPresentationStyle = _styledComponents.default.div`
     `}
 
   ${({
-  disabled
+  disabled,
+  hideBorders
 }) => disabled && (0, _styledComponents.css)`
       background: var(--colorsUtilityDisabled400);
-      border-color: var(--colorsUtilityDisabled600);
+      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityDisabled600)`};
       cursor: not-allowed;
     `}
 
@@ -105,10 +108,11 @@ const InputPresentationStyle = _styledComponents.default.div`
   ${stylingForValidations}
 
   ${({
-  readOnly
+  readOnly,
+  hideBorders
 }) => readOnly && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityReadOnly400);
-      border-color: var(--colorsUtilityReadOnly600);
+      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityReadOnly600)`};
     `}
 
   ${({

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

@@ -18,17 +18,19 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     "aria-label"?: string;
     /** Text for the visible label of the button group. */
     label?: string;
-    /** Text for the label's help tooltip. */
+    /** [Legacy] Text for the label's help tooltip. */
     labelHelp?: React.ReactNode;
-    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: React.ReactNode;
     /** The percentage width of the ButtonToggleGroup. */
     inputWidth?: number | string;
-    /** The text for the field help. */
+    /** [Legacy] The text for the field help. */
     fieldHelp?: string;
-    /** Sets the field help to inline. */
+    /** [Legacy] Sets the field help to inline. */
     fieldHelpInline?: boolean;
-    /** Sets the label to be inline. */
+    /** [Legacy] Sets the label to be inline. */
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
@@ -38,10 +40,12 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
     value?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
+    /** Allow buttons within the group to be deselected when already selected, leaving no selected button */
     allowDeselect?: boolean;
+    /** Disable all user interaction. */
+    disabled?: boolean;
     /**
      * @private @ignore
      * Set a class on the component
@@ -56,12 +60,13 @@ declare type ButtonToggleGroupContextType = {
     name?: string;
     allowDeselect?: boolean;
     isInGroup: boolean;
+    isDisabled?: boolean;
     firstButton?: HTMLButtonElement;
     childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -16,6 +16,7 @@ var _tooltipProvider = require("../../../__internal__/tooltip-provider");
 var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _carbonProvider = require("../../carbon-provider/carbon-provider.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,7 +28,8 @@ const ButtonToggleGroupContext = exports.ButtonToggleGroupContext = /*#__PURE__*
   handleKeyDown: /* istanbul ignore next */() => {},
   pressedButtonValue: undefined,
   allowDeselect: false,
-  isInGroup: false
+  isInGroup: false,
+  isDisabled: false
 });
 const ButtonToggleGroup = ({
   children,
@@ -37,6 +39,7 @@ const ButtonToggleGroup = ({
   label,
   labelHelp,
   labelSpacing,
+  inputHint,
   inputWidth,
   fullWidth,
   labelInline,
@@ -50,6 +53,7 @@ const ButtonToggleGroup = ({
   helpAriaLabel,
   id,
   allowDeselect,
+  disabled,
   className,
   ...props
 }) => {
@@ -68,6 +72,10 @@ const ButtonToggleGroup = ({
     _logger.default.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
       since the component can no longer be used in an uncontrolled fashion.`);
   }
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const onButtonClick = buttonValue => {
     let newValue = buttonValue;
     const currentValue = value || pressedButtonValue;
@@ -121,18 +129,19 @@ const ButtonToggleGroup = ({
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
     label: label,
-    labelHelp: labelHelp,
+    labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    fieldHelp: fieldHelp,
-    fieldHelpInline: fieldHelpInline,
-    labelInline: labelInline,
-    labelWidth: labelWidth,
+    fieldHelp: computeLabelPropValues(fieldHelp),
+    fieldHelpInline: computeLabelPropValues(fieldHelpInline),
+    labelInline: computeLabelPropValues(labelInline),
+    labelWidth: computeLabelPropValues(labelWidth),
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     id: id,
-    labelAs: "span"
+    labelAs: "span",
+    disabled: disabled
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(ButtonToggleGroupContext.Provider, {
     value: {
       onButtonClick,
@@ -142,10 +151,13 @@ const ButtonToggleGroup = ({
       name,
       allowDeselect,
       isInGroup: true,
+      isDisabled: disabled,
       firstButton,
       childButtonCallbackRef
     }
-  }, /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledButtonToggleGroupWrapper, {
+  }, inputHint && /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledHintText, {
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledButtonToggleGroupWrapper, {
     labelInline: labelInline,
     ref: wrapperRef
   }, /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({}, label ? {
@@ -159,9 +171,9 @@ const ButtonToggleGroup = ({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    id: id
-  }, (0, _utils.filterStyledSystemMarginProps)(props), {
-    className: className
+    id: id,
+    className: className,
+    disabled: disabled
   }), children))))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";

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

@@ -1,6 +1,9 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">;
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled">;
 declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
-export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
+export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+}, never>;
 export default StyledButtonToggleGroup;

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

@@ -3,28 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledButtonToggleGroupWrapper = void 0;
+exports.default = exports.StyledHintText = exports.StyledButtonToggleGroupWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
 var _buttonToggle = require("../button-toggle.style");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledButtonToggleGroupWrapper = exports.StyledButtonToggleGroupWrapper = _styledComponents.default.div`
-  ${({
-  labelInline
-}) => labelInline && (0, _styledComponents.css)`
-      display: flex;
-    `}
-`;
 const StyledButtonToggleGroup = _styledComponents.default.div`
   ${_styledSystem.margin}
 
   display: flex;
+  box-shadow: inset 0px 0px 0px 1px var(--colorsActionMinor500);
+  border-radius: var(--borderRadius100);
+  padding: 4px;
+  gap: 4px;
+  width: fit-content;
+  height: fit-content;
+  flex-wrap: wrap;
+
+  ${({
+  disabled
+}) => disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+      box-shadow: inset 0px 0px 0px 1px var(--colorsActionDisabled600);
+    `}
 
   ${({
   fullWidth
 }) => fullWidth && (0, _styledComponents.css)`
+      width: 100%;
       ${_buttonToggle.StyledButtonToggle} {
         width: 100%;
       }
@@ -39,6 +47,28 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       width: ${`${inputWidth}%`};
     `}
 `;
+const StyledButtonToggleGroupWrapper = exports.StyledButtonToggleGroupWrapper = _styledComponents.default.div`
+  ${({
+  labelInline
+}) => labelInline && (0, _styledComponents.css)`
+      display: flex;
+      ${StyledButtonToggleGroup} {
+        flex-wrap: nowrap;
+      }
+    `}
+`;
+const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: var(--spacing000);
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;
 StyledButtonToggleGroup.defaultProps = {
   theme: _themes.baseTheme
 };

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

@@ -15,7 +15,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Remove spacing from between buttons. */
+    /** DEPRECATED: Remove spacing from between buttons. */
     grouped?: boolean;
     /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
     name?: string;

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

@@ -20,6 +20,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 let deprecateCheckedWarnTriggered = false;
 let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateGroupedWarnTriggered = false;
 const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -50,6 +51,10 @@ const ButtonToggle = ({
     _logger.default.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
       since the component can no longer be used in an uncontrolled fashion.`);
   }
+  if (grouped && !deprecateGroupedWarnTriggered) {
+    deprecateGroupedWarnTriggered = true;
+    _logger.default.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
+  }
   const pressedPropValue = pressed === undefined ? checked : pressed;
   const buttonRef = (0, _react.useRef)(null);
   const {
@@ -66,6 +71,7 @@ const ButtonToggle = ({
     name: groupName,
     allowDeselect,
     isInGroup,
+    isDisabled,
     firstButton,
     childButtonCallbackRef
   } = (0, _react.useContext)(_buttonToggleGroup.ButtonToggleGroupContext);
@@ -138,7 +144,7 @@ const ButtonToggle = ({
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,
     "data-element": "button-toggle-button",
-    disabled: disabled,
+    disabled: disabled || isDisabled,
     id: inputGuid.current,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

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

@@ -26,7 +26,7 @@ export interface StyledButtonToggleProps {
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
     grouped?: boolean;
-    /** set this to true to allow the button to be deselected when already selected */
+    /** Allow button to be deselected when already selected */
     allowDeselect?: boolean;
 }
 declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, StyledButtonToggleProps, never>;

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

@@ -12,9 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const heightConfig = exports.heightConfig = {
-  small: 32,
-  medium: 40,
-  large: 48
+  small: 24,
+  medium: 32,
+  large: 40
 };
 const fontSizeConfig = exports.fontSizeConfig = {
   small: 14,
@@ -22,17 +22,17 @@ const fontSizeConfig = exports.fontSizeConfig = {
   large: 16
 };
 const paddingConfig = exports.paddingConfig = {
-  small: 16,
-  medium: 24,
-  large: 32
+  small: 8,
+  medium: 8,
+  large: 12
 };
 const heightLargeIconConfig = {
-  small: 80,
-  medium: 96,
-  large: 112
+  small: 72,
+  medium: 88,
+  large: 120
 };
 const paddingLargeIconConfig = {
-  small: 32,
+  small: 24,
   medium: 40,
   large: 48
 };
@@ -55,6 +55,17 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
   box-sizing: border-box;
   max-width: 100%;
 
+  font-weight: 700;
+  background-color: transparent;
+  cursor: pointer;
+  text-align: start;
+  color: var(--colorsActionMinor500);
+  border: none;
+
+  ${_icon.default} {
+    color: var(--colorsActionMinor500);
+  }
+
   ${({
   size
 }) => (0, _styledComponents.css)`
@@ -62,14 +73,17 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
   `}
-  font-weight: 700;
-  background-color: transparent;
-  cursor: pointer;
-  text-align: start;
-  color: inherit;
-
-  border: 1px solid var(--colorsActionMinor500);
 
+  ${({
+  buttonIcon,
+  buttonIconSize,
+  size
+}) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
+      height: ${heightLargeIconConfig[size]}px;
+      padding: 0 ${paddingLargeIconConfig[size]}px;
+      flex-direction: column;
+    `}  
+    
   &:focus {
     ${({
   theme
@@ -77,9 +91,22 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
     z-index: 100;
   }
 
+  &:not(:disabled):hover {
+    background-color: var(--colorsActionMinor600);
+    color: var(--colorsActionMinorYang100);
+    ${_icon.default} {
+      color: var(--colorsActionMinorYang100);
+    }
+  }
+
   &[aria-pressed="true"] {
-    background-color: var(--colorsActionMinor300);
-    color: var(--colorsActionMinor600);
+    background-color: var(--colorsActionMinor850);
+    color: var(--colorsActionMinorYang100);
+
+    ${_icon.default} {
+      color: var(--colorsActionMinorYang100);
+    }
+
     ${({
   allowDeselect
 }) => !allowDeselect && (0, _styledComponents.css)`
@@ -87,72 +114,26 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
       `}
   }
 
-  ${_icon.default} {
-    width: 16px;
-    height: 16px;
-    color: var(--colorsActionMinor500);
-  }
-
-  ${({
-  buttonIcon,
-  buttonIconSize,
-  size
-}) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
-      height: ${heightLargeIconConfig[size]}px;
-      padding: 0 ${paddingLargeIconConfig[size]}px;
-      flex-direction: column;
-    `}
   ${({
   disabled
 }) => disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+
       & {
-        border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
         ${_icon.default} {
           color: var(--colorsActionMinorYin030);
         }
       }
-      cursor: not-allowed;
-    `}
-
-      & ${_icon.default} {
-    color: var(--colorsActionMinor500);
-    :not([aria-pressed="true"]):not(:disabled):hover {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
-
-  color: var(--colorsActionMinor500);
-
-  &[aria-pressed="true"]:not(:hover) {
-    box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
-    background-color: transparent;
-    :focus {
-      box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500),
-        0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),
-        0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
-    }
-  }
 
-  :not([aria-pressed="true"]):not(:disabled):hover {
-    color: var(--colorsActionMinorYang100);
-    background-color: var(--colorsActionMinor600);
-    ${_icon.default} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
-
-  &:not(:disabled):hover {
-    background-color: var(--colorsActionMinor600);
-    color: var(--colorsActionMinorYang100);
-
-    ${_icon.default} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
+      &[aria-pressed="true"] {
+        cursor: not-allowed;
+        background-color: var(--colorsActionMinorYin030);
+      }
+    `}
 `;
 const iconFontSizes = {
-  smallIcon: 16,
+  smallIcon: 20,
   largeIcon: 32
 };
 const StyledButtonToggleIcon = exports.StyledButtonToggleIcon = _styledComponents.default.div`
@@ -216,10 +197,6 @@ const StyledButtonToggleWrapper = exports.StyledButtonToggleWrapper = _styledCom
       `}
     `}
 
-  &:not(:first-of-type) {
-    margin-left: 8px;
-  }
-
   ${({
   grouped
 }) => grouped && (0, _styledComponents.css)`

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

@@ -99,6 +99,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     warning?: boolean | string;
     /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
     borderRadius?: BorderRadiusType | BorderRadiusType[];
+    /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
+    hideBorders?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };

package/lib/components/textarea/textarea.component.js

@@ -68,6 +68,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   helpAriaLabel,
   inputRef,
   borderRadius,
+  hideBorders = false,
   ...rest
 }, ref) => {
   const {
@@ -173,7 +174,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     error: error,
     warning: warning,
     info: info,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    hideBorders: hideBorders
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
@@ -344,6 +346,7 @@ Textarea.propTypes = {
   "height": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "helpAriaLabel": _propTypes.default.string,
   "hidden": _propTypes.default.bool,
+  "hideBorders": _propTypes.default.bool,
   "id": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,

package/lib/components/time/__internal__/time-toggle/time-toggle.component.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
 var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
-var _timeToggle = _interopRequireDefault(require("./time-toggle.style"));
 var _buttonToggle = require("../../../button-toggle");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,25 +35,21 @@ const Toggle = ({
       onChange(selectedButtonValue);
     }
   }, [toggleValue, onChange]);
-  return /*#__PURE__*/_react.default.createElement(_timeToggle.default, _extends({}, wrapperProps, {
+  return /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggleGroup, _extends({}, wrapperProps, {
     "data-component": "time-button-toggle-group",
-    m: "0px 0px 0px 8px",
+    m: "0px 0px 0px 16px",
     id: internalId.current,
     onChange: handleChange,
     value: toggleValue,
     disabled: disabled
   }), /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggle, _extends({}, amToggleProps, {
     "data-component": "am-button-toggle",
-    grouped: true,
     value: "AM",
-    size: size,
-    disabled: disabled
+    size: size
   }), amText), /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggle, _extends({}, pmToggleProps, {
     "data-component": "pm-button-toggle",
-    grouped: true,
     value: "PM",
-    size: size,
-    disabled: disabled
+    size: size
   }), pmText));
 };
 Toggle.displayName = "Toggle";