carbon-react 102.7.1 → 102.8.0

package/lib/components/checkbox/checkbox.style.js

@@ -47,8 +47,7 @@ const CheckboxStyle = _styledComponents.default.div`
   inputWidth,
   reverse,
   size,
-  adaptiveSpacingSmallScreen,
-  theme
+  adaptiveSpacingSmallScreen
 }) => (0, _styledComponents.css)`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
 
@@ -61,13 +60,13 @@ const CheckboxStyle = _styledComponents.default.div`
     }
 
     svg {
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       ${!disabled && (0, _styledComponents.css)`
-        border: 1px solid ${theme.colors.border};
+        border: 1px solid var(--colorsUtilityMajor300);
 
-        ${info && `border: 1px solid ${theme.colors.info};`}
-        ${warning && `border: 1px solid ${theme.colors.warning};`}
-        ${error && `border: 2px solid ${theme.colors.error};`}
+        ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
+        ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
+        ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
       `}
     }
 
@@ -91,7 +90,7 @@ const CheckboxStyle = _styledComponents.default.div`
     ${_hiddenCheckableInput.default}:not([disabled]) {
       &:focus + ${_checkableInputSvgWrapper.default},
       &:hover + ${_checkableInputSvgWrapper.default} {
-        box-shadow: 0 0 0 3px ${theme.colors.focus};
+        box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
       }
     }
 
@@ -103,7 +102,7 @@ const CheckboxStyle = _styledComponents.default.div`
     ${_fieldHelp.default} {
       margin-left: 16px;
       margin-top: 0;
-      padding-left: ${labelSpacing * theme.spacing}px;
+      padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     }
 
     ${_validationIcon.default} {
@@ -126,7 +125,7 @@ const CheckboxStyle = _styledComponents.default.div`
 
       ${_fieldHelp.default} {
         margin-left: 24px;
-        padding-left: ${labelSpacing * theme.spacing}px;
+        padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
       }
 
       ${fieldHelpInline && (0, _styledComponents.css)`
@@ -137,21 +136,21 @@ const CheckboxStyle = _styledComponents.default.div`
     `}
 
     ${_hiddenCheckableInput.default}:checked ~ ${_checkableInputSvgWrapper.default} svg path {
-      fill: ${theme.checkable.checked};
+      fill: var(--colorsUtilityYin090);
     }
 
     ${disabled && (0, _styledComponents.css)`
       svg {
-        background-color: ${theme.disabled.input};
-        border: 1px solid ${theme.disabled.border};
+        background-color: var(--colorsUtilityDisabled400);
+        border: 1px solid var(--colorsUtilityDisabled600);
       }
 
       svg path {
-        fill: ${theme.disabled.input};
+        fill: var(--colorsUtilityDisabled400);
       }
 
       ${_hiddenCheckableInput.default}:checked ~ ${_checkableInputSvgWrapper.default} svg path {
-        fill: ${theme.disabled.border};
+        fill: var(--colorsUtilityYin030);
       }
 
       ${_checkableInputSvgWrapper.default} {
@@ -211,7 +210,10 @@ CheckboxStyle.propTypes = {
   info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
   fieldHelpInline: _propTypes.default.bool,
   inputWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  size: _propTypes.default.string
+  size: _propTypes.default.string,
+  labelSpacing: _propTypes.default.oneOf([1, 2]),
+  reverse: _propTypes.default.bool,
+  adaptiveSpacingSmallScreen: _propTypes.default.bool
 };
 const StyledCheckboxGroup = _styledComponents.default.div`
   display: flex;
@@ -249,8 +251,8 @@ const StyledCheckboxGroup = _styledComponents.default.div`
     `}
 `;
 exports.StyledCheckboxGroup = StyledCheckboxGroup;
-StyledCheckboxGroup.defaultProps = {
-  theme: _base.default
+StyledCheckboxGroup.propTypes = {
+  legendInline: _propTypes.default.bool
 };
 var _default = CheckboxStyle;
 exports.default = _default;

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/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/split-button/split-button.component.js

@@ -183,7 +183,8 @@ const SplitButton = ({
       "aria-expanded": showAdditionalButtons,
       "aria-label": "Show more",
       "data-element": "toggle-button",
-      key: "toggle-button"
+      key: "toggle-button",
+      type: "button"
     }, toggleButtonProps()), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
       bgSize: "extra-small",

package/package.json

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