carbon-react 102.7.3 → 102.9.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/date-range/date-range.component.js

@@ -89,7 +89,7 @@ const DateRange = ({
       ...localeData
     }),
     rawValue: _date2.default.formatValue({
-      value: getStartDate() || (!isControlled ? today : ""),
+      value: getStartDate() || (startDateProps.allowEmptyValue ? "" : today),
       ...localeData
     })
   });
@@ -99,7 +99,7 @@ const DateRange = ({
       ...localeData
     }),
     rawValue: _date2.default.formatValue({
-      value: getEndDate() || (!isControlled ? today : ""),
+      value: getEndDate() || (endDateProps.allowEmptyValue ? "" : today),
       ...localeData
     })
   });
@@ -110,7 +110,7 @@ const DateRange = ({
         ...localeData
       }),
       rawValue: _date2.default.formatValue({
-        value: getStartDate() || today,
+        value: getStartDate() || (startDateProps.allowEmptyValue ? "" : today),
         ...localeData
       })
     });
@@ -120,11 +120,11 @@ const DateRange = ({
         ...localeData
       }),
       rawValue: _date2.default.formatValue({
-        value: getEndDate() || today,
+        value: getEndDate() || (endDateProps.allowEmptyValue ? "" : today),
         ...localeData
       })
     });
-  }, [getEndDate, getStartDate, localeData, today]);
+  }, [getEndDate, getStartDate, endDateProps, startDateProps, localeData, today]);
 
   function usePrevious(arg) {
     const ref = (0, _react.useRef)();

package/lib/components/icon/icon.style.js

@@ -75,8 +75,8 @@ const StyledIcon = _styledComponents.default.span`
 
   try {
     if (disabled) {
-      finalColor = theme.icon.disabled;
-      finalHoverColor = theme.icon.disabled;
+      finalColor = "var(--colorsYin030)";
+      finalHoverColor = "var(--colorsYin030)";
     } else if (typeof color === "string" && color.startsWith("var")) {
       finalColor = color;
       finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
@@ -90,8 +90,8 @@ const StyledIcon = _styledComponents.default.span`
       finalColor = renderedColor;
       finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
     } else {
-      finalColor = theme.icon.default;
-      finalHoverColor = theme.icon.defaultHover;
+      finalColor = "var(--colorsYin065)";
+      finalHoverColor = "var(--colorsYin090)";
     }
 
     if (bg) {
@@ -104,8 +104,8 @@ const StyledIcon = _styledComponents.default.span`
       bgColor = backgroundColor;
       bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
     } else if (disabled) {
-      bgColor = theme.icon.disabled;
-      bgHoverColor = theme.icon.disabled;
+      bgColor = "var(--colorsYin030)";
+      bgHoverColor = "var(--colorsYin030)";
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";
@@ -159,7 +159,7 @@ const StyledIcon = _styledComponents.default.span`
 
       ${hasTooltip && `
         :focus {
-          outline: 2px solid ${theme.colors.focus};
+          outline: 2px solid var(--colorsSemanticFocus500);
         }
       `}
 

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.3",
+  "version": "102.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -145,7 +145,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.80.0",
+    "@sage/design-tokens": "^1.87.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",