carbon-react 110.0.4 → 110.1.0

package/esm/components/sidebar/sidebar.component.js

@@ -2,27 +2,29 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Modal from "../modal";
-import SidebarStyle from "./sidebar.style";
+import StyledSidebar from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
 import Box from "../box";
-import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
-  disableEscKey,
-  enableBackgroundUI,
+  disableEscKey = false,
+  enableBackgroundUI = false,
   header,
-  position,
-  size,
+  position = "right",
+  size = "medium",
   children,
   onCancel,
   role = "dialog",
@@ -52,7 +54,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": rest["data-element"],
     "data-role": rest["data-role"]
   };
-  const sidebar = /*#__PURE__*/React.createElement(SidebarStyle, {
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -65,14 +67,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     role: role
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: titleId
-  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, {
+  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
-    p: 4,
-    pt: "27px",
+    pt: "var(--spacing300)",
+    pb: "var(--spacing400)",
+    px: "var(--spacing400)"
+  }, filterStyledSystemPaddingProps(rest), {
     scrollVariant: "light",
     overflow: "auto",
     flex: "1"
-  }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+  }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }
@@ -90,6 +94,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   }, sidebar));
 });
 Sidebar.propTypes = {
+  /** Styled system padding props to apply to Sidebar content */
+  ...paddingPropTypes,
+
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
 
@@ -115,10 +122,10 @@ Sidebar.propTypes = {
   enableBackgroundUI: PropTypes.bool,
 
   /** Sets the position of sidebar, either left or right. */
-  position: PropTypes.oneOf(SIDEBAR_ALIGNMENTS),
+  position: PropTypes.oneOf(["left", "right"]),
 
   /** Sets the size of the sidebar when open. */
-  size: PropTypes.oneOf(SIDEBAR_SIZES),
+  size: PropTypes.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
 
   /** Node that will be used as sidebar header. */
   header: PropTypes.node,
@@ -131,9 +138,4 @@ Sidebar.propTypes = {
     current: PropTypes.any
   }))
 };
-Sidebar.defaultProps = {
-  position: "right",
-  size: "medium",
-  enableBackgroundUI: false
-};
 export default Sidebar;

package/esm/components/sidebar/sidebar.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PaddingProps } from "styled-system";
 
 export interface SidebarContextProps {
   isInSidebar: boolean;
 }
-export interface SidebarProps {
+export interface SidebarProps extends PaddingProps {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby"?: string;
   /**

package/esm/components/sidebar/sidebar.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
-const SidebarStyle = styled.div`
+const StyledSidebar = styled.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
@@ -42,7 +42,7 @@ const SidebarStyle = styled.div`
     `}
   `}
 `;
-SidebarStyle.defaultProps = {
+StyledSidebar.defaultProps = {
   theme: baseTheme
 };
-export default SidebarStyle;
+export default StyledSidebar;

package/lib/components/sidebar/sidebar.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar.style"));
@@ -23,12 +25,12 @@ var _sidebarHeader = _interopRequireDefault(require("./__internal__/sidebar-head
 
 var _box = _interopRequireDefault(require("../box"));
 
-var _sidebar2 = require("./sidebar.config");
-
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _utils = require("../../style/utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -37,6 +39,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
+
 const SidebarContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.SidebarContext = SidebarContext;
@@ -46,11 +50,11 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
-  disableEscKey,
-  enableBackgroundUI,
+  disableEscKey = false,
+  enableBackgroundUI = false,
   header,
-  position,
-  size,
+  position = "right",
+  size = "medium",
   children,
   onCancel,
   role = "dialog",
@@ -94,14 +98,16 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     role: role
   }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
     id: titleId
-  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",
-    p: 4,
-    pt: "27px",
+    pt: "var(--spacing300)",
+    pb: "var(--spacing400)",
+    px: "var(--spacing400)"
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
     scrollVariant: "light",
     overflow: "auto",
     flex: "1"
-  }, /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
+  }), /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }
@@ -121,6 +127,9 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 Sidebar.propTypes = {
+  /** Styled system padding props to apply to Sidebar content */
+  ...paddingPropTypes,
+
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": _propTypes.default.string,
 
@@ -146,10 +155,10 @@ Sidebar.propTypes = {
   enableBackgroundUI: _propTypes.default.bool,
 
   /** Sets the position of sidebar, either left or right. */
-  position: _propTypes.default.oneOf(_sidebar2.SIDEBAR_ALIGNMENTS),
+  position: _propTypes.default.oneOf(["left", "right"]),
 
   /** Sets the size of the sidebar when open. */
-  size: _propTypes.default.oneOf(_sidebar2.SIDEBAR_SIZES),
+  size: _propTypes.default.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
 
   /** Node that will be used as sidebar header. */
   header: _propTypes.default.node,
@@ -162,10 +171,5 @@ Sidebar.propTypes = {
     current: _propTypes.default.any
   }))
 };
-Sidebar.defaultProps = {
-  position: "right",
-  size: "medium",
-  enableBackgroundUI: false
-};
 var _default = Sidebar;
 exports.default = _default;

package/lib/components/sidebar/sidebar.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PaddingProps } from "styled-system";
 
 export interface SidebarContextProps {
   isInSidebar: boolean;
 }
-export interface SidebarProps {
+export interface SidebarProps extends PaddingProps {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby"?: string;
   /**

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

@@ -19,7 +19,7 @@ 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 SidebarStyle = _styledComponents.default.div`
+const StyledSidebar = _styledComponents.default.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
@@ -59,8 +59,8 @@ const SidebarStyle = _styledComponents.default.div`
     `}
   `}
 `;
-SidebarStyle.defaultProps = {
+StyledSidebar.defaultProps = {
   theme: _base.default
 };
-var _default = SidebarStyle;
+var _default = StyledSidebar;
 exports.default = _default;

package/package.json

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