carbon-react 111.1.0 → 111.3.0

package/esm/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -10,6 +10,7 @@ const StyledFullScreenHeading = styled.div`
 }) => hasContent && css`
       border-bottom: 1px solid var(--colorsUtilityMajor050);
     `}
+  background-color: var(--colorsUtilityYang100);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;

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

@@ -1,8 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -13,6 +16,12 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     boxSizing?: BoxSizing;
     /** Allows a tabindex to be specified */
     tabIndex?: number | string;
+    /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    gap?: Gap;
+    /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    columnGap?: Gap;
+    /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    rowGap?: Gap;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/esm/components/box/box.component.js

@@ -3,11 +3,13 @@ import { space, layout, flexbox, position } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
+const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
   ${position}
+
   ${({
   color,
   bg,
@@ -48,6 +50,25 @@ const Box = styled.div`
 }) => boxSizing && css`
       box-sizing: ${boxSizing};
     `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex") && css`
+      ${gap !== undefined && css`
+        gap: ${boxConfig.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && css`
+        column-gap: ${boxConfig.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && css`
+        row-gap: ${boxConfig.gap(rowGap)};
+      `}
+    `};
 `;
 Box.defaultProps = {
   theme: BaseTheme

package/esm/components/box/box.config.d.ts

@@ -7,5 +7,6 @@ declare const _default: {
         thumb: string;
         track: string;
     };
+    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/esm/components/box/box.config.js

@@ -1,3 +1,4 @@
+import { space } from "../../style/themes/base/base-theme.config";
 export default {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -6,5 +7,12 @@ export default {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
+  },
+  gap: gapValue => {
+    if (typeof gapValue === "number") {
+      return space[gapValue];
+    }
+
+    return gapValue;
   }
 };

package/esm/components/dialog/dialog.style.js

@@ -120,6 +120,7 @@ const StyledDialog = styled.div`
   }
 `;
 const StyledDialogTitle = styled.div`
+  background-color: var(--colorsUtilityYang100);
   padding: 23px ${HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -478,6 +478,7 @@ DismissibleBox.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "columnGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "flex": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
@@ -712,6 +713,7 @@ DismissibleBox.propTypes = {
     "valueOf": PropTypes.func.isRequired
   })]),
   "flexWrap": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), PropTypes.arrayOf(PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), PropTypes.object]),
+  "gap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "hasBorderLeftHighlight": PropTypes.bool,
   "height": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
@@ -2152,6 +2154,7 @@ DismissibleBox.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "rowGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "scrollVariant": PropTypes.oneOf(["dark", "light"]),
   "size": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 const SidebarHeaderStyle = styled.div`
-  background-color: var(--colorsUtilityMajor025);
+  background-color: var(--colorsUtilityYang100);
   box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;

package/lib/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -24,6 +24,7 @@ const StyledFullScreenHeading = _styledComponents.default.div`
 }) => hasContent && (0, _styledComponents.css)`
       border-bottom: 1px solid var(--colorsUtilityMajor050);
     `}
+  background-color: var(--colorsUtilityYang100);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;

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

@@ -1,8 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -13,6 +16,12 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     boxSizing?: BoxSizing;
     /** Allows a tabindex to be specified */
     tabIndex?: number | string;
+    /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    gap?: Gap;
+    /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    columnGap?: Gap;
+    /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    rowGap?: Gap;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/lib/components/box/box.component.js

@@ -21,11 +21,13 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
   ${_styledSystem.position}
+
   ${({
   color,
   bg,
@@ -66,6 +68,25 @@ const Box = _styledComponents.default.div`
 }) => boxSizing && (0, _styledComponents.css)`
       box-sizing: ${boxSizing};
     `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex") && (0, _styledComponents.css)`
+      ${gap !== undefined && (0, _styledComponents.css)`
+        gap: ${_box.default.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && (0, _styledComponents.css)`
+        column-gap: ${_box.default.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && (0, _styledComponents.css)`
+        row-gap: ${_box.default.gap(rowGap)};
+      `}
+    `};
 `;
 Box.defaultProps = {
   theme: _base.default

package/lib/components/box/box.config.d.ts

@@ -7,5 +7,6 @@ declare const _default: {
         thumb: string;
         track: string;
     };
+    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/lib/components/box/box.config.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _baseTheme = require("../../style/themes/base/base-theme.config");
+
 var _default = {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -12,6 +15,13 @@ var _default = {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
+  },
+  gap: gapValue => {
+    if (typeof gapValue === "number") {
+      return _baseTheme.space[gapValue];
+    }
+
+    return gapValue;
   }
 };
 exports.default = _default;

package/lib/components/dialog/dialog.style.js

@@ -141,6 +141,7 @@ const StyledDialog = _styledComponents.default.div`
 `;
 exports.StyledDialog = StyledDialog;
 const StyledDialogTitle = _styledComponents.default.div`
+  background-color: var(--colorsUtilityYang100);
   padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -492,6 +492,7 @@ DismissibleBox.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "columnGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "flex": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
@@ -726,6 +727,7 @@ DismissibleBox.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   })]),
   "flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
+  "gap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "hasBorderLeftHighlight": _propTypes.default.bool,
   "height": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
@@ -2166,6 +2168,7 @@ DismissibleBox.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "rowGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "scrollVariant": _propTypes.default.oneOf(["dark", "light"]),
   "size": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const SidebarHeaderStyle = _styledComponents.default.div`
-  background-color: var(--colorsUtilityMajor025);
+  background-color: var(--colorsUtilityYang100);
   box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;

package/package.json

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