carbon-react 102.7.2 → 102.7.3

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

@@ -74,7 +74,6 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    height: calc(100vh - 210px);
     padding-right: ${HORIZONTAL_PADDING}px;
     padding-left: ${HORIZONTAL_PADDING}px;
     padding-top: 20px;

package/lib/components/dialog-full-screen/content.style.js

@@ -18,37 +18,31 @@ const StyledContent = _styledComponents.default.div`
   padding: 0 16px;
   flex: 1;
 
-  ${({
-  headingHeight
-}) => (0, _styledComponents.css)`
-    ${_form.StyledFormContent}.sticky {
-      height: calc(100vh - ${headingHeight + 72}px);
-
-      padding-right: 16px;
-      padding-left: 16px;
-      margin-right: -16px;
-      margin-left: -16px;
+  ${_form.StyledFormContent}.sticky {
+    padding-right: 16px;
+    padding-left: 16px;
+    margin-right: -16px;
+    margin-left: -16px;
 
-      @media screen and (min-width: 600px) {
-        padding-right: 24px;
-        padding-left: 24px;
-        margin-right: -24px;
-        margin-left: -24px;
-      }
-      @media screen and (min-width: 960px) {
-        padding-right: 32px;
-        padding-left: 32px;
-        margin-right: -32px;
-        margin-left: -32px;
-      }
-      @media screen and (min-width: 1260px) {
-        padding-right: 40px;
-        padding-left: 40px;
-        margin-right: -40px;
-        margin-left: -40px;
-      }
+    @media screen and (min-width: 600px) {
+      padding-right: 24px;
+      padding-left: 24px;
+      margin-right: -24px;
+      margin-left: -24px;
     }
-  `}
+    @media screen and (min-width: 960px) {
+      padding-right: 32px;
+      padding-left: 32px;
+      margin-right: -32px;
+      margin-left: -32px;
+    }
+    @media screen and (min-width: 1260px) {
+      padding-right: 40px;
+      padding-left: 40px;
+      margin-right: -40px;
+      margin-left: -40px;
+    }
+  }
 
   ${_form.StyledFormFooter}.sticky {
     padding: 16px;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -25,8 +25,6 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
-
 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; }
@@ -54,18 +52,6 @@ const DialogFullScreen = ({
 }) => {
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
-  const [headingHeight, setHeadingHeight] = (0, _react.useState)(101);
-
-  const updateheadingHeight = () => {
-    setHeadingHeight(headingRef.current.offsetHeight);
-  };
-
-  (0, _react.useEffect)(() => {
-    if (open && headingRef.current) {
-      updateheadingHeight();
-    }
-  }, [open]);
-  (0, _useResizeObserver.default)(headingRef, updateheadingHeight, !headingRef.current);
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -111,8 +97,7 @@ const DialogFullScreen = ({
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
-    disableContentPadding: disableContentPadding,
-    headingHeight: headingHeight
+    disableContentPadding: disableContentPadding
   }, children), closeIcon())));
 };
 

package/lib/components/dialog-full-screen/dialog-full-screen.style.js

@@ -17,6 +17,8 @@ var _fullScreenHeading = _interopRequireDefault(require("../../__internal__/full
 
 var _heading = require("../heading/heading.style");
 
+var _form = require("../form/form.style");
+
 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; }
@@ -38,6 +40,10 @@ const StyledDialogFullScreen = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
 
+  ${_form.StyledForm} {
+    min-height: 100%;
+  }
+
   ${_heading.StyledHeaderContent} {
     align-items: baseline;
   }

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

@@ -39,7 +39,7 @@ const StyledFormContent = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     ${stickyFooter && (0, _styledComponents.css)`
       overflow-y: auto;
-      height: calc(100vh - 72px);
+      flex: 1;
     `}
   `}
 `;
@@ -69,6 +69,8 @@ const StyledFormFooter = _styledComponents.default.div`
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
+      position: sticky;
+      bottom: 0;
     `}
   `}
 `;
@@ -112,10 +114,11 @@ const StyledForm = _styledComponents.default.form`
 }) => stickyFooter && (0, _styledComponents.css)`
       display: flex;
       flex-direction: column;
+      position: relative;
 
       ${isInSidebar && (0, _styledComponents.css)`
+        min-height: 100%;
         ${StyledFormContent}.sticky {
-          height: calc(100vh - 184px);
           padding-right: ${theme.space[4]}px;
           padding-left: ${theme.space[4]}px;
           padding-top: 27px;
@@ -130,6 +133,7 @@ const StyledForm = _styledComponents.default.form`
           width: calc(100% + ${2 * theme.space[4]}px);
           padding-left: ${theme.space[4]}px;
           padding-right: ${theme.space[4]}px;
+          bottom: -32px;
         }
       `}
     `}

package/lib/components/pages/page/page.component.js

@@ -15,7 +15,7 @@ var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/
 
 var _fullScreenHeading = _interopRequireDefault(require("../../../__internal__/full-screen-heading"));
 
-var _appWrapper = _interopRequireDefault(require("../../app-wrapper"));
+var _box = _interopRequireDefault(require("../../box"));
 
 var _page = require("./page.style");
 
@@ -41,7 +41,13 @@ const Page = ({
     hasContent: title
   }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, {
     "data-element": "carbon-page-content"
-  }, /*#__PURE__*/_react.default.createElement(_appWrapper.default, null, children))));
+  }, /*#__PURE__*/_react.default.createElement(_box.default, {
+    boxSizing: "border-box",
+    maxWidth: "100%",
+    minWidth: "auto",
+    margin: "0 auto",
+    padding: "4px 0px"
+  }, children))));
 };
 
 Page.propTypes = {

package/lib/components/pages/pages.style.js

@@ -18,12 +18,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const PagesContent = _styledComponents.default.div`
   border: none;
 
-  .carbon-app-wrapper {
-    min-width: auto;
-    max-width: 100%;
-    padding: 4px 0 0 0;
-  }
-
   ${_heading.StyledHeading} {
     padding-left: 45px;
     margin-bottom: 34px;

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

@@ -80,7 +80,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     p: 4,
     pt: "27px",
     scrollVariant: "light",
-    overflow: "auto"
+    overflow: "auto",
+    flex: "1"
   }, /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true

package/package.json

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