carbon-react 111.15.0 → 111.17.0

package/esm/components/form/form.component.js

@@ -21,6 +21,7 @@ const Form = ({
   noValidate = true,
   height,
   fullWidthButtons = false,
+  footerPadding = {},
   ...rest
 }) => {
   const {
@@ -31,7 +32,9 @@ const Form = ({
   } = useContext(ModalContext);
   const formRef = useRef(null);
   const formFooterRef = useRef(null);
+  const hasPadding = !!Object.keys(footerPadding).length;
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
+  const classNames = `${stickyFooter ? "sticky" : ""} ${hasPadding ? "padded" : ""}`.trimEnd();
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -47,28 +50,28 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
-  }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
-    className: stickyFooter ? "sticky" : "",
+    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     fullWidthButtons: fullWidthButtons
-  }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+  }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     fullWidthButtons: fullWidthButtons
   }, leftSideButtons), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     fullWidthButtons: fullWidthButtons
@@ -84,6 +87,162 @@ Form.propTypes = {
   "children": PropTypes.node,
   "errorCount": PropTypes.number,
   "fieldSpacing": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7]),
+  "footerPadding": PropTypes.shape({
+    "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])
+  }),
   "fullWidthButtons": PropTypes.bool,
   "height": PropTypes.string,
   "leftSideButtons": PropTypes.node,

package/esm/components/form/form.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { space } from "styled-system";
+import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import { StyledFieldset } from "../../__internal__/fieldset/fieldset.style";
 import StyledButton from "../button/button.style";
@@ -56,7 +56,12 @@ export const StyledFormFooter = styled.div`
       align-items: stretch;
     `}
   `}
+
+  ${padding}
 `;
+StyledFormFooter.defaultProps = {
+  theme: baseTheme
+};
 
 const formBottomMargins = fieldSpacing => ({
   0: "var(--spacing000)",

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

@@ -1,11 +1,12 @@
 import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ModalContextProps {
     isInModal?: boolean;
     isAnimationComplete?: boolean;
     triggerRefocusFlag?: boolean;
 }
 export declare const ModalContext: React.Context<ModalContextProps>;
-export interface ModalProps {
+export interface ModalProps extends TagProps {
     /** Custom class name  */
     className?: string;
     /** Modal content */

package/esm/components/modal/modal.component.js

@@ -100,6 +100,9 @@ Modal.propTypes = {
   "ariaRole": PropTypes.string,
   "children": PropTypes.node,
   "className": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "disableClose": PropTypes.bool,
   "disableEscKey": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,9 +1,15 @@
 import React from "react";
-interface SidebarHeaderProps {
+import { PaddingProps } from "styled-system";
+export interface SidebarHeaderProps extends PaddingProps {
     /** This component supports children. */
     children?: React.ReactNode;
     /** A custom id. */
     id: string;
+    /** Close icon button to be rendered */
+    closeIcon?: React.ReactNode;
 }
-declare const SidebarHeader: ({ children, id }: SidebarHeaderProps) => JSX.Element;
+declare const SidebarHeader: {
+    ({ children, id, closeIcon, ...rest }: SidebarHeaderProps): JSX.Element;
+    displayName: string;
+};
 export default SidebarHeader;

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

@@ -1,17 +1,179 @@
+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); }
+
 import React from "react";
 import PropTypes from "prop-types";
-import SidebarHeaderStyle from "./sidebar-header.style";
+import StyledSidebarHeader from "./sidebar-header.style";
 
 const SidebarHeader = ({
   children,
-  id
-}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, {
+  id,
+  closeIcon,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledSidebarHeader, _extends({
+  hasClose: !!closeIcon,
   id: id,
-  "data-component": "sidebar-header"
-}, children);
+  "data-component": "sidebar-header",
+  p: "27px 32px 32px"
+}, rest), children, closeIcon);
 
 SidebarHeader.propTypes = {
   "children": PropTypes.node,
-  "id": PropTypes.string.isRequired
+  "closeIcon": PropTypes.node,
+  "id": PropTypes.string.isRequired,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
+SidebarHeader.displayName = "SidebarHeader";
 export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -1,2 +1,4 @@
-declare const SidebarHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default SidebarHeaderStyle;
+declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    hasClose?: boolean | undefined;
+}, never>;
+export default StyledSidebarHeader;

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

@@ -1,11 +1,31 @@
-import styled from "styled-components";
-const SidebarHeaderStyle = styled.div`
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import { baseTheme } from "../../../../style/themes";
+import StyledIconButton from "../../../icon-button/icon-button.style";
+const StyledSidebarHeader = styled.div`
   background-color: var(--colorsUtilityYang100);
   box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
   box-sizing: border-box;
   width: 100%;
   color: var(--colorsActionMinorYin090);
   transition: all 0.2s ease;
-  padding: 27px 32px 32px 32px;
+
+  ${padding}
+
+  ${({
+  hasClose
+}) => hasClose && css`
+      display: flex;
+      justify-content: space-between;
+
+      > ${StyledIconButton}:first-of-type {
+        position: absolute;
+        z-index: 1;
+        right: 25px;
+      }
+    `}
 `;
-export default SidebarHeaderStyle;
+StyledSidebarHeader.defaultProps = {
+  theme: baseTheme
+};
+export default StyledSidebarHeader;

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

@@ -53,6 +53,8 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps {
     focusableContainers?: CustomRefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
+    /** Padding to be set on the Sidebar header */
+    headerPadding?: PaddingProps;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;