carbon-react 111.8.4 → 111.8.5

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

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { padding as paddingFn } from "styled-system";
 import baseTheme from "../../style/themes/base";
+import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
 import { StyledForm, StyledFormFooter, StyledFormContent } from "../form/form.style";
 import { StyledHeaderContent, StyledHeading, StyledHeadingTitle } from "../heading/heading.style";
 import StyledIconButton from "../icon-button/icon-button.style";
@@ -16,48 +17,6 @@ const dialogSizes = {
   "extra-large": "1080px"
 };
 
-const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight,
-    padding
-  } = paddingFn(props);
-  const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? HORIZONTAL_PADDING : paddingValue;
-};
-
-const calculateFormSpacingValues = (props, isFormContent) => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    padding
-  } = paddingFn(props);
-  const spacingTopValue = paddingTop ?? padding ?? CONTENT_TOP_PADDING;
-  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": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent && {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    }),
-    ...(!isFormContent && {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      bottom: setNegativeValue(spacingBottomValue)
-    })
-  };
-};
-
 const calculatePaddingTopInnerContent = ({
   py,
   p
@@ -103,7 +62,7 @@ const StyledDialog = styled.div`
   }
 
   ${StyledFormFooter}.sticky {
-    width: calc(100% + (2px * ${calculateWidthValue}));
+    ${calculateWidthValue};
     ${props => calculateFormSpacingValues(props, false)}
   }
 

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

@@ -126,23 +126,6 @@ export const StyledForm = styled.form`
 
       ${isInSidebar && css`
         min-height: 100%;
-        ${StyledFormContent}.sticky {
-          padding-right: var(--spacing400);
-          padding-left: var(--spacing400);
-          padding-top: 27px;
-          margin-right: calc(-1 * var(--spacing400));
-          margin-left: calc(-1 * var(--spacing400));
-          margin-top: -27px;
-        }
-
-        ${StyledFormFooter}.sticky {
-          margin-left: calc(-1 * var(--spacing400));
-          margin-bottom: calc(-1 * var(--spacing400));
-          width: calc(100% + var(--spacing800));
-          padding-left: var(--spacing400);
-          padding-right: var(--spacing400);
-          bottom: -32px;
-        }
       `}
     `}
 `;

package/esm/components/link-preview/__internal__/placeholder.component.d.ts

@@ -0,0 +1,2 @@
+export default Placeholder;
+declare function Placeholder(): JSX.Element;

package/esm/components/link-preview/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./link-preview";
-export * from "./link-preview";
+export { default } from "./link-preview.component";
+export type { LinkPreviewProps } from "./link-preview.component";

package/esm/components/link-preview/link-preview.component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+interface ImageShape {
+    /** The url string to be passed to image src */
+    url: string;
+    /** The string to be passed to image alt */
+    alt?: string;
+}
+export interface LinkPreviewProps {
+    /** Used to set the root element to either an anchor link or div container */
+    as?: "a" | "div";
+    /** The description to be displayed */
+    description?: string;
+    /** The config for the image to be displayed */
+    image?: ImageShape;
+    /** Flag to trigger the loading animation */
+    isLoading?: boolean;
+    /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
+    onClose?: (url?: string) => void;
+    /** The title to be displayed */
+    title?: string;
+    /** The url string to be displayed and to serve as the link's src */
+    url?: string;
+}
+export declare const LinkPreview: {
+    ({ as, description, image, isLoading, onClose, title, url, ...rest }: LinkPreviewProps): JSX.Element;
+    displayName: string;
+};
+export default LinkPreview;

package/esm/components/link-preview/link-preview.component.js

@@ -40,13 +40,15 @@ const LinkPreview = ({
     return url;
   };
 
+  const linkProps = canRenderAsLink ? {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {};
   return /*#__PURE__*/React.createElement(StyledLinkPreview, _extends({
     as: loadingState ? "div" : as,
-    tabIndex: loadingState || as === "div" ? -1 : 0,
-    href: canRenderAsLink ? url : undefined,
-    target: canRenderAsLink ? "_blank" : undefined,
-    rel: canRenderAsLink ? "noopener noreferrer" : undefined
-  }, rest), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
+    tabIndex: loadingState || as === "div" ? -1 : 0
+  }, linkProps, rest), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
     isLoading: loadingState
   }, /*#__PURE__*/React.createElement(Preview, {
     loading: loadingState,
@@ -60,32 +62,17 @@ const LinkPreview = ({
 };
 
 LinkPreview.propTypes = {
-  /** Used to set the root element to either am anchor link or div container */
-  as: PropTypes.oneOf(["a", "div"]),
-
-  /** The description to be displayed */
-  description: PropTypes.string,
-
-  /** The config for the image to be displayed */
-  image: PropTypes.shape({
-    /** The url string to be passed to image src */
-    url: PropTypes.string.isRequired,
-
-    /** The string to be passed to image alt */
-    alt: PropTypes.string
+  "as": PropTypes.oneOf(["a", "div"]),
+  "description": PropTypes.string,
+  "image": PropTypes.shape({
+    "alt": PropTypes.string,
+    "url": PropTypes.string.isRequired
   }),
-
-  /** Flag to trigger the loading animation */
-  isLoading: PropTypes.bool,
-
-  /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
-  onClose: PropTypes.func,
-
-  /** The title to be displayed */
-  title: PropTypes.string,
-
-  /** The url string to be displayed and to serve as the link's src */
-  url: PropTypes.string
+  "isLoading": PropTypes.bool,
+  "onClose": PropTypes.func,
+  "title": PropTypes.string,
+  "url": PropTypes.string
 };
+export { LinkPreview };
 LinkPreview.displayName = "LinkPreview";
 export default LinkPreview;

package/esm/components/link-preview/link-preview.style.d.ts

@@ -0,0 +1,11 @@
+declare const StyledLinkPreview: import("styled-components").StyledComponent<"a", any, {
+    as?: "a" | "div" | undefined;
+}, never>;
+declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPreviewWrapper: import("styled-components").StyledComponent<"div", any, {
+    isLoading: boolean;
+}, never>;
+declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledUrl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl, };

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

@@ -65,7 +65,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": rest["data-element"],
     "data-role": rest["data-role"]
   };
-  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
     "aria-modal": !enableBackgroundUI && (topModal === null || topModal === void 0 ? void 0 : topModal.contains(sidebarRef.current)),
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -76,7 +76,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
+  }, filterStyledSystemPaddingProps(rest)), header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: headerId
   }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",

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

@@ -9,3 +9,7 @@ export declare const SIDEBAR_SIZES_CSS: {
 };
 export declare const SIDEBAR_SIZES: string[];
 export declare const SIDEBAR_ALIGNMENTS: string[];
+export declare const SIDEBAR_TOP_SPACING = "27px";
+export declare const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+export declare const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+export declare const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/esm/components/sidebar/sidebar.config.js

@@ -8,4 +8,8 @@ export const SIDEBAR_SIZES_CSS = {
   "extra-large": "814px"
 };
 export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-export const SIDEBAR_ALIGNMENTS = ["left", "right"];
+export const SIDEBAR_ALIGNMENTS = ["left", "right"];
+export const SIDEBAR_TOP_SPACING = "27px";
+export const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+export const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+export const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

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

@@ -1,8 +1,9 @@
+import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
 declare type StyledSidebarProps = {
     onCancel?: SidebarProps["onCancel"];
     position?: SidebarProps["position"];
     size?: SidebarProps["size"];
 };
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export default StyledSidebar;

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

@@ -1,6 +1,8 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
+import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
+import { StyledFormContent, StyledFormFooter } from "../form/form.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
 const StyledSidebar = styled.div`
   // prevents outline being added in safari
@@ -8,6 +10,15 @@ const StyledSidebar = styled.div`
     outline: none;
   }
 
+  ${StyledFormContent} {
+    ${props => calculateFormSpacingValues(props, true, "sidebar")}
+  }
+
+  ${StyledFormFooter}.sticky {
+    ${calculateWidthValue}
+    ${props => calculateFormSpacingValues(props, false, "sidebar")}
+  }
+
   ${({
   onCancel,
   position,

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

@@ -0,0 +1,19 @@
+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;
+} | {
+    "margin-bottom": string;
+    "padding-left": string | undefined;
+    "padding-right": string | undefined;
+    "margin-left": string;
+    "margin-right": string;
+};
+export {};

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

@@ -0,0 +1,99 @@
+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),
+      "padding-left": isSidebar ? SIDEBAR_LEFT_PADDING : undefined,
+      "padding-right": isSidebar ? SIDEBAR_RIGHT_PADDING : undefined
+    })
+  };
+};

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

@@ -11,6 +11,8 @@ var _styledSystem = require("styled-system");
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _formStyleUtils = require("../../style/utils/form-style-utils");
+
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
@@ -36,48 +38,6 @@ const dialogSizes = {
   "extra-large": "1080px"
 };
 
-const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight,
-    padding
-  } = (0, _styledSystem.padding)(props);
-  const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING : paddingValue;
-};
-
-const calculateFormSpacingValues = (props, isFormContent) => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    padding
-  } = (0, _styledSystem.padding)(props);
-  const spacingTopValue = paddingTop ?? padding ?? _dialog.CONTENT_TOP_PADDING;
-  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": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent && {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    }),
-    ...(!isFormContent && {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      bottom: setNegativeValue(spacingBottomValue)
-    })
-  };
-};
-
 const calculatePaddingTopInnerContent = ({
   py,
   p
@@ -119,12 +79,12 @@ const StyledDialog = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    ${props => calculateFormSpacingValues(props, true)}
+    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, true)}
   }
 
   ${_form.StyledFormFooter}.sticky {
-    width: calc(100% + (2px * ${calculateWidthValue}));
-    ${props => calculateFormSpacingValues(props, false)}
+    ${_formStyleUtils.calculateWidthValue};
+    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, false)}
   }
 
   > ${_iconButton.default} {

package/lib/components/form/form.style.js

@@ -151,23 +151,6 @@ const StyledForm = _styledComponents.default.form`
 
       ${isInSidebar && (0, _styledComponents.css)`
         min-height: 100%;
-        ${StyledFormContent}.sticky {
-          padding-right: var(--spacing400);
-          padding-left: var(--spacing400);
-          padding-top: 27px;
-          margin-right: calc(-1 * var(--spacing400));
-          margin-left: calc(-1 * var(--spacing400));
-          margin-top: -27px;
-        }
-
-        ${StyledFormFooter}.sticky {
-          margin-left: calc(-1 * var(--spacing400));
-          margin-bottom: calc(-1 * var(--spacing400));
-          width: calc(100% + var(--spacing800));
-          padding-left: var(--spacing400);
-          padding-right: var(--spacing400);
-          bottom: -32px;
-        }
       `}
     `}
 `;

package/lib/components/link-preview/__internal__/placeholder.component.d.ts

@@ -0,0 +1,2 @@
+export default Placeholder;
+declare function Placeholder(): JSX.Element;

package/lib/components/link-preview/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./link-preview";
-export * from "./link-preview";
+export { default } from "./link-preview.component";
+export type { LinkPreviewProps } from "./link-preview.component";

package/lib/components/link-preview/link-preview.component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+interface ImageShape {
+    /** The url string to be passed to image src */
+    url: string;
+    /** The string to be passed to image alt */
+    alt?: string;
+}
+export interface LinkPreviewProps {
+    /** Used to set the root element to either an anchor link or div container */
+    as?: "a" | "div";
+    /** The description to be displayed */
+    description?: string;
+    /** The config for the image to be displayed */
+    image?: ImageShape;
+    /** Flag to trigger the loading animation */
+    isLoading?: boolean;
+    /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
+    onClose?: (url?: string) => void;
+    /** The title to be displayed */
+    title?: string;
+    /** The url string to be displayed and to serve as the link's src */
+    url?: string;
+}
+export declare const LinkPreview: {
+    ({ as, description, image, isLoading, onClose, title, url, ...rest }: LinkPreviewProps): JSX.Element;
+    displayName: string;
+};
+export default LinkPreview;

package/lib/components/link-preview/link-preview.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.LinkPreview = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -57,13 +57,15 @@ const LinkPreview = ({
     return url;
   };
 
+  const linkProps = canRenderAsLink ? {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {};
   return /*#__PURE__*/_react.default.createElement(_linkPreview.StyledLinkPreview, _extends({
     as: loadingState ? "div" : as,
-    tabIndex: loadingState || as === "div" ? -1 : 0,
-    href: canRenderAsLink ? url : undefined,
-    target: canRenderAsLink ? "_blank" : undefined,
-    rel: canRenderAsLink ? "noopener noreferrer" : undefined
-  }, rest), imageProps().src ? /*#__PURE__*/_react.default.createElement(_image.default, imageProps()) : /*#__PURE__*/_react.default.createElement(_placeholder.default, null), /*#__PURE__*/_react.default.createElement(_linkPreview.StyledPreviewWrapper, {
+    tabIndex: loadingState || as === "div" ? -1 : 0
+  }, linkProps, rest), imageProps().src ? /*#__PURE__*/_react.default.createElement(_image.default, imageProps()) : /*#__PURE__*/_react.default.createElement(_placeholder.default, null), /*#__PURE__*/_react.default.createElement(_linkPreview.StyledPreviewWrapper, {
     isLoading: loadingState
   }, /*#__PURE__*/_react.default.createElement(_preview.default, {
     loading: loadingState,
@@ -76,33 +78,18 @@ const LinkPreview = ({
   }))));
 };
 
+exports.LinkPreview = LinkPreview;
 LinkPreview.propTypes = {
-  /** Used to set the root element to either am anchor link or div container */
-  as: _propTypes.default.oneOf(["a", "div"]),
-
-  /** The description to be displayed */
-  description: _propTypes.default.string,
-
-  /** The config for the image to be displayed */
-  image: _propTypes.default.shape({
-    /** The url string to be passed to image src */
-    url: _propTypes.default.string.isRequired,
-
-    /** The string to be passed to image alt */
-    alt: _propTypes.default.string
+  "as": _propTypes.default.oneOf(["a", "div"]),
+  "description": _propTypes.default.string,
+  "image": _propTypes.default.shape({
+    "alt": _propTypes.default.string,
+    "url": _propTypes.default.string.isRequired
   }),
-
-  /** Flag to trigger the loading animation */
-  isLoading: _propTypes.default.bool,
-
-  /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
-  onClose: _propTypes.default.func,
-
-  /** The title to be displayed */
-  title: _propTypes.default.string,
-
-  /** The url string to be displayed and to serve as the link's src */
-  url: _propTypes.default.string
+  "isLoading": _propTypes.default.bool,
+  "onClose": _propTypes.default.func,
+  "title": _propTypes.default.string,
+  "url": _propTypes.default.string
 };
 LinkPreview.displayName = "LinkPreview";
 var _default = LinkPreview;

package/lib/components/link-preview/link-preview.style.d.ts

@@ -0,0 +1,11 @@
+declare const StyledLinkPreview: import("styled-components").StyledComponent<"a", any, {
+    as?: "a" | "div" | undefined;
+}, never>;
+declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPreviewWrapper: import("styled-components").StyledComponent<"div", any, {
+    isLoading: boolean;
+}, never>;
+declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledUrl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl, };

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

@@ -95,7 +95,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": rest["data-role"]
   };
 
-  const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, {
+  const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, _extends({
     "aria-modal": !enableBackgroundUI && (topModal === null || topModal === void 0 ? void 0 : topModal.contains(sidebarRef.current)),
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -106,7 +106,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
     id: headerId
   }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",

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

@@ -9,3 +9,7 @@ export declare const SIDEBAR_SIZES_CSS: {
 };
 export declare const SIDEBAR_SIZES: string[];
 export declare const SIDEBAR_ALIGNMENTS: string[];
+export declare const SIDEBAR_TOP_SPACING = "27px";
+export declare const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+export declare const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+export declare const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/lib/components/sidebar/sidebar.config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIDEBAR_ALIGNMENTS = exports.SIDEBAR_SIZES = exports.SIDEBAR_SIZES_CSS = void 0;
+exports.SIDEBAR_RIGHT_PADDING = exports.SIDEBAR_LEFT_PADDING = exports.SIDEBAR_BOTTOM_SPACING = exports.SIDEBAR_TOP_SPACING = exports.SIDEBAR_ALIGNMENTS = exports.SIDEBAR_SIZES = exports.SIDEBAR_SIZES_CSS = void 0;
 const SIDEBAR_SIZES_CSS = {
   "extra-small": "214px",
   small: "314px",
@@ -17,4 +17,12 @@ exports.SIDEBAR_SIZES_CSS = SIDEBAR_SIZES_CSS;
 const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.SIDEBAR_SIZES = SIDEBAR_SIZES;
 const SIDEBAR_ALIGNMENTS = ["left", "right"];
-exports.SIDEBAR_ALIGNMENTS = SIDEBAR_ALIGNMENTS;
+exports.SIDEBAR_ALIGNMENTS = SIDEBAR_ALIGNMENTS;
+const SIDEBAR_TOP_SPACING = "27px";
+exports.SIDEBAR_TOP_SPACING = SIDEBAR_TOP_SPACING;
+const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
+exports.SIDEBAR_BOTTOM_SPACING = SIDEBAR_BOTTOM_SPACING;
+const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
+exports.SIDEBAR_LEFT_PADDING = SIDEBAR_LEFT_PADDING;
+const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";
+exports.SIDEBAR_RIGHT_PADDING = SIDEBAR_RIGHT_PADDING;

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

@@ -1,8 +1,9 @@
+import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
 declare type StyledSidebarProps = {
     onCancel?: SidebarProps["onCancel"];
     position?: SidebarProps["position"];
     size?: SidebarProps["size"];
 };
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export default StyledSidebar;

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

@@ -11,6 +11,10 @@ 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");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,6 +29,15 @@ const StyledSidebar = _styledComponents.default.div`
     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,

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

@@ -0,0 +1,19 @@
+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;
+} | {
+    "margin-bottom": string;
+    "padding-left": string | undefined;
+    "padding-right": string | undefined;
+    "margin-left": string;
+    "margin-right": string;
+};
+export {};

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateFormSpacingValues = exports.calculateWidthValue = 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),
+      "padding-left": isSidebar ? _sidebar.SIDEBAR_LEFT_PADDING : undefined,
+      "padding-right": isSidebar ? _sidebar.SIDEBAR_RIGHT_PADDING : undefined
+    })
+  };
+};
+
+exports.calculateFormSpacingValues = calculateFormSpacingValues;

package/package.json

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

package/esm/components/link-preview/link-preview.d.ts

@@ -1,24 +0,0 @@
-interface ImageShape {
-  /** The url string to be passed to image src */
-  url: string;
-  /** The string to be passed to image alt */
-  alt?: string;
-}
-
-export interface LinkPreviewProps {
-  description?: string;
-  /** The config for the image to be displayed */
-  image?: ImageShape;
-  /** Flag to trigger the loading animation */
-  isLoading?: boolean;
-  /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
-  onClose?: (url: string) => void;
-  /** The title to be displayed */
-  title?: string;
-  /** The url string to be displayed and to serve as the link's src */
-  url?: string;
-}
-
-declare function LinkPreview(props: LinkPreviewProps): JSX.Element;
-
-export default LinkPreview;

package/lib/components/link-preview/link-preview.d.ts

@@ -1,24 +0,0 @@
-interface ImageShape {
-  /** The url string to be passed to image src */
-  url: string;
-  /** The string to be passed to image alt */
-  alt?: string;
-}
-
-export interface LinkPreviewProps {
-  description?: string;
-  /** The config for the image to be displayed */
-  image?: ImageShape;
-  /** Flag to trigger the loading animation */
-  isLoading?: boolean;
-  /** The callback to handle the deleting of a Preview, to hide the close button do not set this prop */
-  onClose?: (url: string) => void;
-  /** The title to be displayed */
-  title?: string;
-  /** The url string to be displayed and to serve as the link's src */
-  url?: string;
-}
-
-declare function LinkPreview(props: LinkPreviewProps): JSX.Element;
-
-export default LinkPreview;