carbon-react 144.0.0 → 144.1.0

package/lib/components/sidebar/sidebar.style.js

@@ -3,32 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledSidebarContent = exports.StyledSidebar = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
 var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
-var _formStyleUtils = require("../../style/utils/form-style-utils");
-var _form = require("../form/form.style");
 var _sidebar = require("./sidebar.config");
+var _form = require("../form/form.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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 StyledSidebar = _styledComponents.default.div`
+const StyledSidebar = exports.StyledSidebar = _styledComponents.default.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
   }
 
-  ${_form.StyledFormContent} {
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, true, "sidebar")}
-  }
-
-  ${_form.StyledFormFooter}.sticky {
-    ${_formStyleUtils.calculateWidthValue}
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, false, "sidebar")}
-  }
-
   ${({
   onCancel,
   position,
@@ -67,7 +58,29 @@ const StyledSidebar = _styledComponents.default.div`
     `}
   `}
 `;
+const StyledSidebarContent = exports.StyledSidebarContent = _styledComponents.default.div`
+  box-sizing: border-box;
+  display: block;
+  overflow-y: auto;
+  flex-grow: 1;
+
+  padding: var(--spacing300) var(--spacing400) var(--spacing400);
+  ${_styledSystem.padding}
+
+  &:has(${_form.StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
+
+    ${_form.StyledForm}.sticky {
+      ${_form.StyledFormContent} {
+        padding: var(--spacing300) var(--spacing400) var(--spacing400);
+        ${_styledSystem.padding}
+      }
+    }
+  }
+`;
 StyledSidebar.defaultProps = {
   theme: _base.default
-};
-var _default = exports.default = StyledSidebar;
+};

package/lib/components/typography/typography.style.js

@@ -64,23 +64,27 @@ const getLineHeight = variant => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":

package/package.json

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

package/esm/style/utils/form-style-utils.d.ts

@@ -1,21 +0,0 @@
-import { PaddingProps } from "styled-system";
-declare type ContainerComponent = "dialog" | "sidebar";
-export declare const calculateWidthValue: (props: PaddingProps) => string;
-export declare const calculateFormSpacingValues: (props: PaddingProps, isFormContent: boolean, containerComponent?: ContainerComponent) => {
-    "margin-top": string;
-    "padding-top": string;
-    "padding-bottom": string | undefined;
-    "padding-left": string;
-    "padding-right": string;
-    "margin-left": string;
-    "margin-right": string;
-} | {
-    ":not(.padded)"?: {
-        "padding-left": string;
-        "padding-right": string;
-    } | undefined;
-    "margin-bottom": string;
-    "margin-left": string;
-    "margin-right": string;
-};
-export {};

package/esm/style/utils/form-style-utils.js

@@ -1,92 +0,0 @@
-import { padding as paddingFn } from "styled-system";
-import { HORIZONTAL_PADDING, CONTENT_TOP_PADDING, CONTENT_BOTTOM_PADDING } from "../../components/dialog/dialog.config";
-import { SIDEBAR_TOP_SPACING, SIDEBAR_BOTTOM_SPACING, SIDEBAR_LEFT_PADDING, SIDEBAR_RIGHT_PADDING } from "../../components/sidebar/sidebar.config";
-const parsePadding = paddingString => {
-  const paddingValues = paddingString.split(/\s+/);
-  let paddingTop, paddingBottom, paddingLeft, paddingRight;
-  switch (paddingValues.length) {
-    case 1:
-      {
-        const [value] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [value, value, value, value];
-        break;
-      }
-    case 2:
-      {
-        const [vertical, horizontal] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [vertical, horizontal, vertical, horizontal];
-        break;
-      }
-    case 3:
-      {
-        const [top, horizontal, bottom] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [top, horizontal, bottom, horizontal];
-        break;
-      }
-    case 4:
-      {
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = paddingValues;
-        break;
-      }
-    /* istanbul ignore next */
-    default:
-      break;
-  }
-  return {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-};
-const calculatePadding = props => {
-  const {
-    padding,
-    ...individualPaddingProperties
-  } = paddingFn(props);
-  const result = padding ? parsePadding(padding) : {};
-  Object.assign(result, individualPaddingProperties);
-  return result;
-};
-export const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const paddingValue = `(${paddingLeft ?? `${HORIZONTAL_PADDING}px`} + ${paddingRight ?? `${HORIZONTAL_PADDING}px`})`;
-  return `width: calc(100% + ${paddingValue});`;
-};
-export const calculateFormSpacingValues = (props, isFormContent, containerComponent = "dialog") => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const isSidebar = containerComponent === "sidebar";
-  const spacingTopValue = paddingTop ?? (isSidebar ? SIDEBAR_TOP_SPACING : `${CONTENT_TOP_PADDING}px`);
-  const spacingRightValue = paddingRight ?? `${HORIZONTAL_PADDING}px`;
-  const spacingBottomValue = paddingBottom ?? (isSidebar ? SIDEBAR_BOTTOM_SPACING : `${CONTENT_BOTTOM_PADDING}px`);
-  const spacingLeftValue = paddingLeft ?? `${HORIZONTAL_PADDING}px`;
-  const setNegativeValue = value => `calc(-1 * ${value})`;
-  return {
-    "margin-left": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent ? {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": isSidebar ? undefined : spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    } : {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      ...(isSidebar && {
-        // if footer already has custom padding do not set
-        ":not(.padded)": {
-          "padding-left": SIDEBAR_LEFT_PADDING,
-          "padding-right": SIDEBAR_RIGHT_PADDING
-        }
-      })
-    })
-  };
-};

package/lib/style/utils/form-style-utils.d.ts

@@ -1,21 +0,0 @@
-import { PaddingProps } from "styled-system";
-declare type ContainerComponent = "dialog" | "sidebar";
-export declare const calculateWidthValue: (props: PaddingProps) => string;
-export declare const calculateFormSpacingValues: (props: PaddingProps, isFormContent: boolean, containerComponent?: ContainerComponent) => {
-    "margin-top": string;
-    "padding-top": string;
-    "padding-bottom": string | undefined;
-    "padding-left": string;
-    "padding-right": string;
-    "margin-left": string;
-    "margin-right": string;
-} | {
-    ":not(.padded)"?: {
-        "padding-left": string;
-        "padding-right": string;
-    } | undefined;
-    "margin-bottom": string;
-    "margin-left": string;
-    "margin-right": string;
-};
-export {};

package/lib/style/utils/form-style-utils.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calculateWidthValue = exports.calculateFormSpacingValues = void 0;
-var _styledSystem = require("styled-system");
-var _dialog = require("../../components/dialog/dialog.config");
-var _sidebar = require("../../components/sidebar/sidebar.config");
-const parsePadding = paddingString => {
-  const paddingValues = paddingString.split(/\s+/);
-  let paddingTop, paddingBottom, paddingLeft, paddingRight;
-  switch (paddingValues.length) {
-    case 1:
-      {
-        const [value] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [value, value, value, value];
-        break;
-      }
-    case 2:
-      {
-        const [vertical, horizontal] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [vertical, horizontal, vertical, horizontal];
-        break;
-      }
-    case 3:
-      {
-        const [top, horizontal, bottom] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [top, horizontal, bottom, horizontal];
-        break;
-      }
-    case 4:
-      {
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = paddingValues;
-        break;
-      }
-    /* istanbul ignore next */
-    default:
-      break;
-  }
-  return {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-};
-const calculatePadding = props => {
-  const {
-    padding,
-    ...individualPaddingProperties
-  } = (0, _styledSystem.padding)(props);
-  const result = padding ? parsePadding(padding) : {};
-  Object.assign(result, individualPaddingProperties);
-  return result;
-};
-const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const paddingValue = `(${paddingLeft ?? `${_dialog.HORIZONTAL_PADDING}px`} + ${paddingRight ?? `${_dialog.HORIZONTAL_PADDING}px`})`;
-  return `width: calc(100% + ${paddingValue});`;
-};
-exports.calculateWidthValue = calculateWidthValue;
-const calculateFormSpacingValues = (props, isFormContent, containerComponent = "dialog") => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const isSidebar = containerComponent === "sidebar";
-  const spacingTopValue = paddingTop ?? (isSidebar ? _sidebar.SIDEBAR_TOP_SPACING : `${_dialog.CONTENT_TOP_PADDING}px`);
-  const spacingRightValue = paddingRight ?? `${_dialog.HORIZONTAL_PADDING}px`;
-  const spacingBottomValue = paddingBottom ?? (isSidebar ? _sidebar.SIDEBAR_BOTTOM_SPACING : `${_dialog.CONTENT_BOTTOM_PADDING}px`);
-  const spacingLeftValue = paddingLeft ?? `${_dialog.HORIZONTAL_PADDING}px`;
-  const setNegativeValue = value => `calc(-1 * ${value})`;
-  return {
-    "margin-left": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent ? {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": isSidebar ? undefined : spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    } : {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      ...(isSidebar && {
-        // if footer already has custom padding do not set
-        ":not(.padded)": {
-          "padding-left": _sidebar.SIDEBAR_LEFT_PADDING,
-          "padding-right": _sidebar.SIDEBAR_RIGHT_PADDING
-        }
-      })
-    })
-  };
-};
-exports.calculateFormSpacingValues = calculateFormSpacingValues;