carbon-react 104.29.0 → 104.30.0

package/lib/components/form/__internal__/form-summary.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 _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
 var _button = _interopRequireDefault(require("../../button/button.style"));
@@ -31,10 +29,9 @@ const StyledFormSummary = _styledComponents.default.div`
   white-space: nowrap;
 
   ${({
-  showSummary,
-  theme
+  showSummary
 }) => showSummary && (0, _styledComponents.css)`
-      background-color: ${theme.form.invalid};
+      background-color: var(--colorsUtilityMajor025);
     `}
 
   ${_button.default} {
@@ -57,46 +54,34 @@ const StyledInternalSummary = _styledComponents.default.div`
     margin-right: 16px;
   }
   ${({
-  type,
-  theme
+  type
 }) => type === "warnings" && (0, _styledComponents.css)`
-      color: ${theme.colors.warning};
+      color: var(--colorsSemanticCaution650);
     `}
   ${({
-  type,
-  theme
+  type
 }) => type === "errors" && (0, _styledComponents.css)`
-      color: ${theme.colors.error};
+      color: var(--colorsSemanticNegative600);
     `}
 
   ${_icon.default} {
     margin-right: 4px;
     ${({
-  type,
-  theme
+  type
 }) => type === "warnings" && (0, _styledComponents.css)`
-        color: ${theme.colors.warning};
+        color: var(--colorsSemanticCaution650);
       `}
     ${({
-  type,
-  theme
+  type
 }) => type === "errors" && (0, _styledComponents.css)`
-        color: ${theme.colors.error};
+        color: var(--colorsSemanticNegative600);
       `}
   }
 `;
 exports.StyledInternalSummary = StyledInternalSummary;
 StyledFormSummary.propTypes = {
-  theme: _propTypes.default.object,
   showSummary: _propTypes.default.bool
 };
-StyledFormSummary.defaultProps = {
-  theme: _base.default
-};
 StyledInternalSummary.propTypes = {
-  theme: _propTypes.default.object,
   type: _propTypes.default.oneOf(["errors", "warnings"])
-};
-StyledInternalSummary.defaultProps = {
-  theme: _base.default
 };

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

@@ -55,15 +55,14 @@ const StyledFormFooter = _styledComponents.default.div`
     `}
 
   ${({
-  stickyFooter,
-  theme
+  stickyFooter
 }) => (0, _styledComponents.css)`
     ${!stickyFooter && (0, _styledComponents.css)`
       margin-top: 48px;
     `}
 
     ${stickyFooter && (0, _styledComponents.css)`
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.05);
       box-sizing: border-box;
       padding: 16px 32px;
@@ -75,6 +74,17 @@ const StyledFormFooter = _styledComponents.default.div`
   `}
 `;
 exports.StyledFormFooter = StyledFormFooter;
+
+const formBottomMargins = fieldSpacing => ({
+  0: "var(--spacing000)",
+  1: "var(--spacing100)",
+  2: "var(--spacing200)",
+  3: "var(--spacing300)",
+  4: "var(--spacing400)",
+  5: "var(--spacing500)",
+  7: "var(--spacing700)"
+})[fieldSpacing];
+
 const StyledForm = _styledComponents.default.form`
   ${_styledSystem.space}
 
@@ -84,24 +94,26 @@ const StyledForm = _styledComponents.default.form`
       height: ${height};
     `}
 
-  & ${_formField.default}, ${_fieldset.StyledFieldset}, ${_fieldset2.FieldsetStyle}, > ${_button.default} {
-    margin-top: 0;
-    margin-bottom: ${({
-  fieldSpacing,
-  theme
-}) => theme.spacing * fieldSpacing}px;
-  }
-
-  ${_inlineInputs.default} {
-    ${_formField.default} {
-      margin-bottom: 0;
-    }
+  ${({
+  fieldSpacing
+}) => (0, _styledComponents.css)`
+      &
+        ${_formField.default},
+        ${_fieldset.StyledFieldset},
+        ${_fieldset2.FieldsetStyle},
+        > ${_button.default} {
+        margin-top: 0;
+        margin-bottom: ${formBottomMargins(fieldSpacing)};
+      }
+
+      ${_inlineInputs.default} {
+        ${_formField.default} {
+          margin-bottom: 0;
+        }
 
-    margin-bottom: ${({
-  fieldSpacing,
-  theme
-}) => theme.spacing * fieldSpacing}px;
-  }
+        margin-bottom: ${formBottomMargins(fieldSpacing)};
+      }
+    `}  
 
   ${_search.default} ${_formField.default} {
     margin-bottom: 0px;
@@ -109,8 +121,7 @@ const StyledForm = _styledComponents.default.form`
 
   ${({
   stickyFooter,
-  isInSidebar,
-  theme
+  isInSidebar
 }) => stickyFooter && (0, _styledComponents.css)`
       display: flex;
       flex-direction: column;
@@ -119,20 +130,20 @@ const StyledForm = _styledComponents.default.form`
       ${isInSidebar && (0, _styledComponents.css)`
         min-height: 100%;
         ${StyledFormContent}.sticky {
-          padding-right: ${theme.space[4]}px;
-          padding-left: ${theme.space[4]}px;
+          padding-right: var(--spacing400);
+          padding-left: var(--spacing400);
           padding-top: 27px;
-          margin-right: -${theme.space[4]}px;
-          margin-left: -${theme.space[4]}px;
+          margin-right: calc(-1 * var(--spacing400));
+          margin-left: calc(-1 * var(--spacing400));
           margin-top: -27px;
         }
 
         ${StyledFormFooter}.sticky {
-          margin-left: -${theme.space[4]}px;
-          margin-bottom: -${theme.space[4]}px;
-          width: calc(100% + ${2 * theme.space[4]}px);
-          padding-left: ${theme.space[4]}px;
-          padding-right: ${theme.space[4]}px;
+          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;
         }
       `}
@@ -179,10 +190,6 @@ StyledRightButtons.propTypes = {
   buttonAlignment: _propTypes.default.oneOf(_form.FORM_BUTTON_ALIGNMENTS)
 };
 StyledFormFooter.propTypes = {
-  theme: _propTypes.default.object,
   buttonAlignment: _propTypes.default.oneOf(_form.FORM_BUTTON_ALIGNMENTS),
   stickyFooter: _propTypes.default.bool
-};
-StyledFormFooter.defaultProps = {
-  theme: _base.default
 };

package/lib/style/themes/base/base-theme.config.d.ts

@@ -121,9 +121,6 @@ declare function _default(palette: any): {
             searchIconHover: any;
         };
     };
-    form: {
-        invalid: any;
-    };
     card: {
         footerBackground: any;
         footerBorder: any;

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

@@ -140,9 +140,6 @@ var _default = palette => {
         searchIconHover: palette.slateTint(75)
       }
     },
-    form: {
-      invalid: palette.slateTint(95)
-    },
     card: {
       footerBackground: palette.slateTint(95),
       footerBorder: palette.slateTint(80)

package/package.json

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