carbon-react 102.6.1 → 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/loader/loader-square.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _loader = require("./loader.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,18 +57,17 @@ const getDimentions = size => {
 
 const StyledLoaderSquare = _styledComponents.default.div`
   ${({
-  theme,
   size,
   isInsideButton,
   isActive
 }) => (0, _styledComponents.css)`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
-    background-color: ${theme.colors.primary};
+    background-color: var(--colorsActionMajor500);
     display: inline-block;
     ${getDimentions(size)}
 
     ${isInsideButton && (0, _styledComponents.css)`
-      background-color: ${isActive ? theme.colors.white : theme.colors.border};
+      background-color: ${isActive ? "var(--colorsYang100)" : "var(--colorsSemanticNeutral500)"};
     `}
 
     &:nth-of-type(1) {
@@ -88,7 +85,6 @@ const StyledLoaderSquare = _styledComponents.default.div`
   `}
 `;
 StyledLoaderSquare.defaultProps = {
-  theme: _base.default,
   size: "small",
   isInsideButton: false,
   isActive: true

package/lib/components/loader-bar/loader-bar.style.js

@@ -40,24 +40,22 @@ const innerBarAnimation = (0, _styledComponents.keyframes)`
 `;
 const StyledLoaderBar = _styledComponents.default.div`
   ${({
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     display: inline-block;
     height: ${getHeight(size)};
     width: 100%;
-    background-color: ${theme.colors.loadingBarBackground};
+    background-color: var(--colorsActionMajor150);
     overflow: hidden;
     position: relative;
   `}
 `;
 const InnerBar = _styledComponents.default.div`
   ${({
-  theme,
   size
 }) => (0, _styledComponents.css)`
     position: absolute;
-    background-color: ${theme.colors.primary};
+    background-color: var(--colorsActionMajor500);
     width: ${INNER_BAR_LENGTH};
     height: ${getHeight(size)};
     animation: 2s ${innerBarAnimation} linear 0s infinite normal none running;
@@ -82,11 +80,9 @@ StyledLoader.defaultProps = {
   theme: _base.default
 };
 StyledLoaderBar.defaultProps = {
-  theme: _base.default,
   size: "medium"
 };
 InnerBar.defaultProps = {
-  theme: _base.default,
   size: "medium"
 };
 StyledLoaderBar.propTypes = {

package/lib/components/message/message-content/message-content.style.js

@@ -14,6 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const MessageContentStyle = _styledComponents.default.div`
   padding: 15px 50px 15px 20px;
   white-space: pre-wrap;
+  flex: 1;
 
   .carbon-content__title {
     margin-bottom: 2px;

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/lib/components/textarea/textarea.component.js

@@ -194,6 +194,7 @@ const Textarea = ({
     "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
+    value: value,
     ref: inputRef,
     maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
     onChange: onChange,

package/lib/style/themes/aegean/aegean-theme.config.js

@@ -31,7 +31,8 @@ var _default = palette => {
     get compatibility() {
       return {
         colorsActionMajor500: this.colors.primary,
-        colorsActionMajor600: this.colors.secondary
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionMajor150: this.colors.loadingBarBackground
       };
     }
 

package/lib/style/themes/base/base-theme.config.js

@@ -343,6 +343,7 @@ var _default = palette => {
 
     get compatibility() {
       return { ..._common.default,
+        colorsActionMajor150: this.colors.loadingBarBackground,
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
         colorsActionDisabled500: this.disabled.background,

package/lib/style/themes/mint/mint-theme.config.js

@@ -25,7 +25,8 @@ var _default = palette => {
     get compatibility() {
       return {
         colorsActionMajor500: this.colors.primary,
-        colorsActionMajor600: this.colors.secondary
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionMajor150: this.colors.loadingBarBackground
       };
     }
 

package/package.json

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