carbon-react 104.52.2 → 104.53.0

package/esm/__spec_helper__/test-utils.d.ts

@@ -1,3 +1,4 @@
+export function getDefaultValue(value: any): any;
 export function assertStyleMatch(styleSpec: any, component: any, opts: any): void;
 export function toCSSCase(str: any): any;
 export function hoverList(wrapper: any): (item: any) => void;

package/esm/__spec_helper__/test-utils.js

@@ -1,5 +1,6 @@
 import { mount } from "enzyme";
 import { sprintf } from "sprintf-js";
+import { space } from "style/themes/base/base-theme.config";
 import { carbonThemeList } from "../style/themes";
 import { mockMatchMedia } from "./mock-match-media";
 
@@ -119,9 +120,19 @@ const widthProps = ["width", "width", "200px"];
 const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
+export const getDefaultValue = value => {
+  const spaceArrayLength = space.length - 1;
+  const parsedValue = +value;
 
-const getDefaultValue = value => {
-  if (typeof value === "number") {
+  if (typeof value === "string" && value > spaceArrayLength) {
+    return `${value}px`;
+  }
+
+  if (parsedValue <= spaceArrayLength) {
+    return space[value];
+  }
+
+  if (parsedValue > spaceArrayLength) {
     return `${value * 8}px`;
   }
 
@@ -130,7 +141,8 @@ const getDefaultValue = value => {
 
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component());
+    const wrapper = mount(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct margins", () => {
       let margin;
@@ -170,7 +182,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       wrapper = mount(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });
@@ -178,7 +190,8 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component());
+    const wrapper = mount(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct paddings", () => {
       let padding;
@@ -218,7 +231,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       wrapper = mount(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });

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

@@ -23,7 +23,7 @@ const calculateWidthValue = props => {
     padding
   } = paddingFn(props);
   const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? HORIZONTAL_PADDING * 2 : paddingValue * 2;
+  return paddingValue === undefined ? HORIZONTAL_PADDING : paddingValue;
 };
 
 const calculateFormSpacingValues = (props, isFormContent) => {
@@ -38,19 +38,22 @@ const calculateFormSpacingValues = (props, isFormContent) => {
   const spacingRightValue = paddingRight ?? padding ?? HORIZONTAL_PADDING;
   const spacingBottomValue = paddingBottom ?? padding ?? CONTENT_BOTTOM_PADDING;
   const spacingLeftValue = paddingLeft ?? padding ?? HORIZONTAL_PADDING;
+
+  const setNegativeValue = value => `calc(-1px * ${value})`;
+
   return {
-    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
-    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    "margin-left": setNegativeValue(spacingLeftValue),
+    "margin-right": setNegativeValue(spacingRightValue),
     ...(isFormContent && {
-      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "margin-top": setNegativeValue(spacingTopValue),
       "padding-top": spacingTopValue,
       "padding-bottom": spacingBottomValue,
       "padding-left": spacingLeftValue,
       "padding-right": spacingRightValue
     }),
     ...(!isFormContent && {
-      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
-      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+      "margin-bottom": setNegativeValue(spacingBottomValue),
+      bottom: setNegativeValue(spacingBottomValue)
     })
   };
 };
@@ -106,7 +109,7 @@ const DialogStyle = styled.div`
   }
 
   ${StyledFormFooter}.sticky {
-    width: calc(100% + ${calculateWidthValue}px);
+    width: calc(100% + (2px * ${calculateWidthValue}));
     ${props => calculateFormSpacingValues(props, false)}
   }
 

package/esm/style/themes/base/base-theme.config.d.ts

@@ -1,8 +1,9 @@
+export const space: string[];
 declare function _default(palette: any): {
     name: string;
     palette: any;
     spacing: number;
-    space: number[];
+    space: string[];
     colors: {
         base: any;
         primary: any;
@@ -336,22 +337,6 @@ declare function _default(palette: any): {
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
         colorsSemanticInfo500: any;
-        spacing000: string;
-        spacing025: string;
-        spacing050: string;
-        spacing075: string;
-        spacing100: string;
-        spacing125: string;
-        spacing150: string;
-        spacing200: string;
-        spacing250: string;
-        spacing300: string;
-        spacing400: string;
-        spacing500: string;
-        spacing600: string;
-        spacing700: string;
-        spacing800: string;
-        spacing900: string;
         fontSizes100: string;
         metaName: string;
         metaPublic: string;
@@ -546,7 +531,23 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing100: string;
+        spacing125: string;
+        spacing150: string;
+        spacing200: string;
+        spacing250: string;
+        spacing300: string;
+        spacing400: string;
+        spacing500: string;
+        spacing600: string;
+        spacing700: string;
+        spacing800: string;
+        spacing900: string;
         spacing1000: string;
+        spacing000: string;
+        spacing025: string;
+        spacing050: string;
+        spacing075: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;

package/esm/style/themes/base/base-theme.config.js

@@ -1,12 +1,13 @@
 import tokens from "@sage/design-tokens/js/base/common";
 import atOpacity from "../../utils/at-opacity";
+export const space = ["var(--spacing000)", "var(--spacing100)", "var(--spacing200)", "var(--spacing300)", "var(--spacing400)", "var(--spacing500)", "var(--spacing600)", "var(--spacing700)", "var(--spacing800)", "var(--spacing900)", "var(--spacing1000)"];
 export default (palette => {
   const baseWithOpacity = atOpacity(palette.productGreen);
   return {
     name: "base",
     palette,
     spacing: 8,
-    space: [0, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80],
+    space,
     colors: {
       // main
       base: palette.productGreen,
@@ -348,32 +349,6 @@ export default (palette => {
         colorsSemanticNegative600: this.colors.destructive.hover,
         colorsSemanticCaution500: this.colors.warning,
         colorsSemanticInfo500: this.colors.info,
-        spacing000: `${this.space[0]}px`,
-        // 0px
-        spacing025: "2px",
-        spacing050: "4px",
-        spacing075: "6px",
-        spacing100: `${this.space[1]}px`,
-        // 8px
-        spacing125: "10px",
-        spacing150: "12px",
-        spacing200: `${this.space[2]}px`,
-        // 16px
-        spacing250: "20px",
-        spacing300: `${this.space[3]}px`,
-        // 24px
-        spacing400: `${this.space[4]}px`,
-        // 32px
-        spacing500: `${this.space[5]}px`,
-        // 40px
-        spacing600: `${this.space[6]}px`,
-        // 48px
-        spacing700: `${this.space[7]}px`,
-        // 56px
-        spacing800: `${this.space[8]}px`,
-        // 64px
-        spacing900: `${this.space[9]}px`,
-        // 72px
         fontSizes100: this.text.size
       };
     }

package/esm/style/themes/base/index.d.ts

@@ -51,7 +51,7 @@ export interface ThemeObject {
   name: string;
   palette: BasePalette;
   spacing: number;
-  space: number[];
+  space: string[];
 
   colors: Colors;
 

package/esm/style/themes/sage/index.d.ts

@@ -374,7 +374,7 @@ declare var _default: {
         whiteOpacity: (opacity: number) => string;
     };
     spacing: number;
-    space: number[];
+    space: string[];
     colors: import("../base").Colors;
     anchorNavigation: {
         divider: string;

package/lib/__spec_helper__/test-utils.d.ts

@@ -1,3 +1,4 @@
+export function getDefaultValue(value: any): any;
 export function assertStyleMatch(styleSpec: any, component: any, opts: any): void;
 export function toCSSCase(str: any): any;
 export function hoverList(wrapper: any): (item: any) => void;

package/lib/__spec_helper__/test-utils.js

@@ -9,12 +9,14 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = void 0;
+exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
 
 var _enzyme = require("enzyme");
 
 var _sprintfJs = require("sprintf-js");
 
+var _baseTheme = require("style/themes/base/base-theme.config");
+
 var _themes = require("../style/themes");
 
 var _mockMatchMedia = require("./mock-match-media");
@@ -159,16 +161,30 @@ const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
 
 const getDefaultValue = value => {
-  if (typeof value === "number") {
+  const spaceArrayLength = _baseTheme.space.length - 1;
+  const parsedValue = +value;
+
+  if (typeof value === "string" && value > spaceArrayLength) {
+    return `${value}px`;
+  }
+
+  if (parsedValue <= spaceArrayLength) {
+    return _baseTheme.space[value];
+  }
+
+  if (parsedValue > spaceArrayLength) {
     return `${value * 8}px`;
   }
 
   return value;
 };
 
+exports.getDefaultValue = getDefaultValue;
+
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component());
+    const wrapper = (0, _enzyme.mount)(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct margins", () => {
       let margin;
@@ -208,7 +224,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       wrapper = (0, _enzyme.mount)(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });
@@ -218,7 +234,8 @@ exports.testStyledSystemMargin = testStyledSystemMargin;
 
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component());
+    const wrapper = (0, _enzyme.mount)(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct paddings", () => {
       let padding;
@@ -258,7 +275,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       wrapper = (0, _enzyme.mount)(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });

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

@@ -43,7 +43,7 @@ const calculateWidthValue = props => {
     padding
   } = (0, _styledSystem.padding)(props);
   const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING : paddingValue;
 };
 
 const calculateFormSpacingValues = (props, isFormContent) => {
@@ -58,19 +58,22 @@ const calculateFormSpacingValues = (props, isFormContent) => {
   const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
   const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
   const spacingLeftValue = paddingLeft ?? padding ?? _dialog.HORIZONTAL_PADDING;
+
+  const setNegativeValue = value => `calc(-1px * ${value})`;
+
   return {
-    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
-    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    "margin-left": setNegativeValue(spacingLeftValue),
+    "margin-right": setNegativeValue(spacingRightValue),
     ...(isFormContent && {
-      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "margin-top": setNegativeValue(spacingTopValue),
       "padding-top": spacingTopValue,
       "padding-bottom": spacingBottomValue,
       "padding-left": spacingLeftValue,
       "padding-right": spacingRightValue
     }),
     ...(!isFormContent && {
-      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
-      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+      "margin-bottom": setNegativeValue(spacingBottomValue),
+      bottom: setNegativeValue(spacingBottomValue)
     })
   };
 };
@@ -126,7 +129,7 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormFooter}.sticky {
-    width: calc(100% + ${calculateWidthValue}px);
+    width: calc(100% + (2px * ${calculateWidthValue}));
     ${props => calculateFormSpacingValues(props, false)}
   }
 

package/lib/style/themes/base/base-theme.config.d.ts

@@ -1,8 +1,9 @@
+export const space: string[];
 declare function _default(palette: any): {
     name: string;
     palette: any;
     spacing: number;
-    space: number[];
+    space: string[];
     colors: {
         base: any;
         primary: any;
@@ -336,22 +337,6 @@ declare function _default(palette: any): {
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
         colorsSemanticInfo500: any;
-        spacing000: string;
-        spacing025: string;
-        spacing050: string;
-        spacing075: string;
-        spacing100: string;
-        spacing125: string;
-        spacing150: string;
-        spacing200: string;
-        spacing250: string;
-        spacing300: string;
-        spacing400: string;
-        spacing500: string;
-        spacing600: string;
-        spacing700: string;
-        spacing800: string;
-        spacing900: string;
         fontSizes100: string;
         metaName: string;
         metaPublic: string;
@@ -546,7 +531,23 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing100: string;
+        spacing125: string;
+        spacing150: string;
+        spacing200: string;
+        spacing250: string;
+        spacing300: string;
+        spacing400: string;
+        spacing500: string;
+        spacing600: string;
+        spacing700: string;
+        spacing800: string;
+        spacing900: string;
         spacing1000: string;
+        spacing000: string;
+        spacing025: string;
+        spacing050: string;
+        spacing075: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;

package/lib/style/themes/base/base-theme.config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.space = void 0;
 
 var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
@@ -11,13 +11,16 @@ var _atOpacity = _interopRequireDefault(require("../../utils/at-opacity"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const space = ["var(--spacing000)", "var(--spacing100)", "var(--spacing200)", "var(--spacing300)", "var(--spacing400)", "var(--spacing500)", "var(--spacing600)", "var(--spacing700)", "var(--spacing800)", "var(--spacing900)", "var(--spacing1000)"];
+exports.space = space;
+
 var _default = palette => {
   const baseWithOpacity = (0, _atOpacity.default)(palette.productGreen);
   return {
     name: "base",
     palette,
     spacing: 8,
-    space: [0, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80],
+    space,
     colors: {
       // main
       base: palette.productGreen,
@@ -359,32 +362,6 @@ var _default = palette => {
         colorsSemanticNegative600: this.colors.destructive.hover,
         colorsSemanticCaution500: this.colors.warning,
         colorsSemanticInfo500: this.colors.info,
-        spacing000: `${this.space[0]}px`,
-        // 0px
-        spacing025: "2px",
-        spacing050: "4px",
-        spacing075: "6px",
-        spacing100: `${this.space[1]}px`,
-        // 8px
-        spacing125: "10px",
-        spacing150: "12px",
-        spacing200: `${this.space[2]}px`,
-        // 16px
-        spacing250: "20px",
-        spacing300: `${this.space[3]}px`,
-        // 24px
-        spacing400: `${this.space[4]}px`,
-        // 32px
-        spacing500: `${this.space[5]}px`,
-        // 40px
-        spacing600: `${this.space[6]}px`,
-        // 48px
-        spacing700: `${this.space[7]}px`,
-        // 56px
-        spacing800: `${this.space[8]}px`,
-        // 64px
-        spacing900: `${this.space[9]}px`,
-        // 72px
         fontSizes100: this.text.size
       };
     }

package/lib/style/themes/base/index.d.ts

@@ -51,7 +51,7 @@ export interface ThemeObject {
   name: string;
   palette: BasePalette;
   spacing: number;
-  space: number[];
+  space: string[];
 
   colors: Colors;
 

package/lib/style/themes/sage/index.d.ts

@@ -374,7 +374,7 @@ declare var _default: {
         whiteOpacity: (opacity: number) => string;
     };
     spacing: number;
-    space: number[];
+    space: string[];
     colors: import("../base").Colors;
     anchorNavigation: {
         divider: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.52.2",
+  "version": "104.53.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {