carbon-react 102.13.2 → 102.16.1

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -1,7 +1,6 @@
 export const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default InputPresentationStyle;
 declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, {
-    theme: any;
     error: any;
     warning: any;
     info: any;

package/lib/__internal__/input/input-presentation.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 _inputSizes = _interopRequireDefault(require("./input-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,9 +28,7 @@ exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
   background: #fff;
-  border: 1px solid ${({
-  theme
-}) => theme.colors.border};
+  border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;
   display: flex;
@@ -50,21 +46,19 @@ const InputPresentationStyle = _styledComponents.default.div`
 }) => _inputSizes.default[size].horizontalPadding};
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      background: ${theme.disabled.input};
-      border-color: ${theme.disabled.border};
+      background: var(--colorsUtilityDisabled400);
+      border-color: var(--colorsUtilityDisabled600);
       cursor: not-allowed;
     `}
 
   ${({
   hasFocus,
-  theme,
   disabled
 }) => hasFocus && !disabled && (0, _styledComponents.css)`
-      && {
-        outline: 3px solid ${theme.colors.focus};
+      & {
+        outline: 3px solid var(--colorsSemanticFocus500);
         z-index: 2;
       }
     `}
@@ -72,11 +66,10 @@ const InputPresentationStyle = _styledComponents.default.div`
   ${stylingForValidations}
 
   ${({
-  readOnly,
-  theme
+  readOnly
 }) => readOnly && (0, _styledComponents.css)`
-      background-color: ${theme.readOnly.textboxBackground};
-      border-color: ${theme.readOnly.textboxBorder};
+      background-color: var(--colorsUtilityReadOnly400);
+      border-color: var(--colorsUtilityReadOnly600);
     `}
 
   ${({
@@ -92,7 +85,6 @@ const InputPresentationStyle = _styledComponents.default.div`
 `;
 
 function stylingForValidations({
-  theme,
   error,
   warning,
   info,
@@ -105,11 +97,11 @@ function stylingForValidations({
   }
 
   if (error) {
-    validationColor = theme.colors.error;
+    validationColor = "var(--colorsSemanticNegative500)";
   } else if (warning) {
-    validationColor = theme.colors.warning;
+    validationColor = "var(--colorsSemanticCaution500)";
   } else if (info) {
-    validationColor = theme.colors.info;
+    validationColor = "var(--colorsSemanticInfo500)";
   } else {
     return "";
   }
@@ -122,8 +114,7 @@ function stylingForValidations({
 }
 
 InputPresentationStyle.defaultProps = {
-  size: "medium",
-  theme: _base.default
+  size: "medium"
 };
 InputPresentationStyle.propTypes = {
   align: _propTypes.default.string,

package/lib/__internal__/input/input-sizes.style.d.ts

@@ -1,34 +1,19 @@
 declare namespace _default {
     namespace small {
         const height: string;
-        const verticalPadding: string;
         const horizontalPadding: string;
-        const tooltipVerticalOffset: number;
-        const tooltipHorizontalOffset: number;
     }
     namespace medium {
         const height_1: string;
         export { height_1 as height };
-        const verticalPadding_1: string;
-        export { verticalPadding_1 as verticalPadding };
         const horizontalPadding_1: string;
         export { horizontalPadding_1 as horizontalPadding };
-        const tooltipVerticalOffset_1: number;
-        export { tooltipVerticalOffset_1 as tooltipVerticalOffset };
-        const tooltipHorizontalOffset_1: number;
-        export { tooltipHorizontalOffset_1 as tooltipHorizontalOffset };
     }
     namespace large {
         const height_2: string;
         export { height_2 as height };
-        const verticalPadding_2: string;
-        export { verticalPadding_2 as verticalPadding };
         const horizontalPadding_2: string;
         export { horizontalPadding_2 as horizontalPadding };
-        const tooltipVerticalOffset_2: number;
-        export { tooltipVerticalOffset_2 as tooltipVerticalOffset };
-        const tooltipHorizontalOffset_2: number;
-        export { tooltipHorizontalOffset_2 as tooltipHorizontalOffset };
     }
 }
 export default _default;

package/lib/__internal__/input/input-sizes.style.js

@@ -6,25 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   small: {
-    height: "32px",
-    verticalPadding: "7px",
-    horizontalPadding: "8px",
-    tooltipVerticalOffset: 3,
-    tooltipHorizontalOffset: 1
+    height: "var(--sizing400)",
+    horizontalPadding: "var(--spacing100)"
   },
   medium: {
-    height: "40px",
-    verticalPadding: "12px",
-    horizontalPadding: "11px",
-    tooltipVerticalOffset: 6,
-    tooltipHorizontalOffset: 4
+    height: "var(--sizing500)",
+    horizontalPadding: "var(--spacing150)"
   },
   large: {
-    height: "48px",
-    verticalPadding: "15px",
-    horizontalPadding: "13px",
-    tooltipVerticalOffset: 10,
-    tooltipHorizontalOffset: 6
+    height: "var(--sizing600)",
+    horizontalPadding: "var(--spacing200)"
   }
 };
 exports.default = _default;

package/lib/__internal__/input/input.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"));
-
 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; }
@@ -20,13 +18,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledInput = _styledComponents.default.input`
   background: transparent;
   border: none;
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsUtilityYin090);
   flex-grow: 1;
-  font-size: ${({
-  theme
-}) => theme.text.size};
+  font-size: var(--fontSizes100);
   outline: none;
   padding: 0;
   margin: 0;
@@ -44,29 +38,22 @@ const StyledInput = _styledComponents.default.input`
     `}
 
   &::placeholder {
-    color: ${({
-  theme
-}) => theme.text.placeholder};
+    color: var(--colorsUtilityYin030);
   }
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: ${theme.disabled.disabled};
+      color: var(--colorsUtilityYin030);
       cursor: not-allowed;
     `}
 
   ${({
-  readOnly,
-  theme
+  readOnly
 }) => readOnly && (0, _styledComponents.css)`
-      color: ${theme.readOnly.textboxText};
+      color: var(--colorsActionMinorYin090);
     `}
 `;
-StyledInput.defaultProps = {
-  theme: _base.default
-};
 StyledInput.propTypes = {
   disabled: _propTypes.default.bool
 };

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -39,8 +39,8 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   ${({
   size
 }) => (0, _styledComponents.css)`
-    margin-right: -${_inputSizes.default[size].horizontalPadding};
-    margin-left: -${_inputSizes.default[size].horizontalPadding};
+    margin-right: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
+    margin-left: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
     width: ${_inputSizes.default[size].height};
   `}
 

package/lib/components/card/card-column/card-column.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledCardColumn = _styledComponents.default.div`
@@ -20,12 +18,10 @@ const StyledCardColumn = _styledComponents.default.div`
 }) => align};
 `;
 StyledCardColumn.propTypes = {
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-  theme: _propTypes.default.object
+  align: _propTypes.default.oneOf(["center", "left", "right"])
 };
 StyledCardColumn.defaultProps = {
-  align: "center",
-  theme: _base.default
+  align: "center"
 };
 var _default = StyledCardColumn;
 exports.default = _default;

package/lib/components/card/card-footer/card-footer.style.js

@@ -38,11 +38,10 @@ const StyledCardFooter = _styledComponents.default.div`
 
   ${({
   spacing,
-  theme,
   variant
 }) => (0, _styledComponents.css)`
-    background-color: ${variant === "transparent" ? "transparent" : theme.card.footerBackground};
-    border-top: ${theme.card.footerBorder};
+    background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
+    border-top: var(--colorsUtilityMajor100);
     border-top-width: 1px;
     border-top-style: solid;
     font-size: 14px;

package/lib/components/card/card-row/card-row.style.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
 
-var _card = require("../card.config");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledCardRow = _styledComponents.default.div`
@@ -22,7 +20,7 @@ const StyledCardRow = _styledComponents.default.div`
   display: flex;
 `;
 StyledCardRow.propTypes = {
-  spacing: _propTypes.default.oneOf(_card.CARD_SIZES)
+  theme: _propTypes.default.object
 };
 StyledCardRow.defaultProps = {
   theme: _base.default

package/lib/components/card/card.style.js

@@ -31,13 +31,12 @@ const StyledCard = _styledComponents.default.div`
   cardWidth,
   interactive,
   draggable,
-  spacing,
-  theme
+  spacing
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
+    background-color: var(--colorsUtilityYang100);
     border: none;
-    box-shadow: ${theme.shadows.cards};
-    color: ${theme.text.color};
+    box-shadow: var(--boxShadow050);
+    color: var(--colorsUtilityYin090);
     margin: 25px;
     padding: ${paddingSizes[spacing]};
     transition: all 0.3s ease-in-out;
@@ -51,7 +50,7 @@ const StyledCard = _styledComponents.default.div`
 
       :hover,
       :focus {
-        box-shadow: ${theme.shadows.depth1};
+        box-shadow: var(--boxShadow100);
       }
     `}
 
@@ -59,11 +58,6 @@ const StyledCard = _styledComponents.default.div`
       cursor: move;
     `}
 
-    /* Fix for IE specific box-shadow display */
-    @media all and (-ms-high-contrast: none) {
-      box-shadow: ${theme.shadows.cardsIE};
-    }
-
     ::-moz-focus-inner {
       border: 0;
     }
@@ -75,7 +69,6 @@ StyledCard.defaultProps = {
   theme: _base.default
 };
 StyledCard.propTypes = {
-  border: _propTypes.default.bool,
   cardWidth: _propTypes.default.string,
   interactive: _propTypes.default.bool,
   draggable: _propTypes.default.bool,

package/lib/components/drawer/drawer.component.js

@@ -55,21 +55,8 @@ const Drawer = ({
   const isControlled = (0, _react.useRef)(expanded !== undefined);
   const [isOpening, setIsOpening] = (0, _react.useState)(false);
   const [isClosing, setIsClosing] = (0, _react.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(isControlled.current ? expanded : defaultExpanded);
   const timer = (0, _react.useRef)();
-  (0, _react.useEffect)(() => {
-    const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
-    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
-
-    if (expanded !== undefined) {
-      setIsExpanded(expanded);
-    }
-  }, [expanded]);
-  (0, _react.useEffect)(() => {
-    return function cleanup() {
-      clearTimeout(timer.current);
-    };
-  }, []);
   const getAnimationDuration = (0, _react.useCallback)(() => {
     if (animationDuration.indexOf("ms") !== -1) {
       const animationTime = animationDuration.substring(0, animationDuration.length - 2);
@@ -101,6 +88,33 @@ const Drawer = ({
       }, timeout);
     }
   }, [getAnimationDuration, isExpanded]);
+
+  function usePrevious(arg) {
+    const ref = (0, _react.useRef)();
+    (0, _react.useEffect)(() => {
+      ref.current = arg;
+    });
+    return ref.current;
+  }
+
+  const previousValue = usePrevious(expanded);
+  (0, _react.useEffect)(() => {
+    const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
+    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
+
+    if (isControlled.current && previousValue !== expanded) {
+      setIsExpanded(expanded);
+
+      if (!showControls && ![expanded, previousValue].includes(undefined)) {
+        toggleAnimation();
+      }
+    }
+  }, [expanded, toggleAnimation, previousValue, showControls]);
+  (0, _react.useEffect)(() => {
+    return function cleanup() {
+      clearTimeout(timer.current);
+    };
+  }, []);
   const toggleDrawer = (0, _react.useCallback)(ev => {
     setIsExpanded(!isExpanded);
     if (onChange) onChange(ev, !isExpanded);

package/lib/components/pill/pill.style.config.d.ts

@@ -1,26 +1,31 @@
-declare function _default(theme: any): {
+declare function _default(): {
     status: {
         neutral: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         negative: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         warning: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         positive: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
     };
     tag: {
         primary: {
-            varietyColor: any;
-            buttonFocus: any;
+            varietyColor: string;
+            buttonFocus: string;
+            content: string;
         };
     };
 };

package/lib/components/pill/pill.style.config.js

@@ -5,39 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  colors,
-  pill
-} = _base.default;
-
-var _default = theme => {
+var _default = () => {
   return {
     status: {
       neutral: {
-        varietyColor: pill.neutral,
-        buttonFocus: pill.neutralBackgroundFocus
+        varietyColor: "var(--colorsSemanticNeutral500)",
+        buttonFocus: "var(--colorsSemanticNeutral600)",
+        content: "var(--colorsSemanticNeutralYang100)"
       },
       negative: {
-        varietyColor: colors.error,
-        buttonFocus: pill.errorButtonFocus
+        varietyColor: "var(--colorsSemanticNegative500)",
+        buttonFocus: "var(--colorsSemanticNegative600)",
+        content: "var(--colorsSemanticNegativeYang100)"
       },
       warning: {
-        varietyColor: pill.warning,
-        buttonFocus: pill.warningButtonFocus
+        varietyColor: "var(--colorsSemanticCaution400)",
+        buttonFocus: "var(--colorsSemanticCaution600)",
+        content: "var(--colorsSemanticCautionYin090)"
       },
       positive: {
-        varietyColor: colors.secondary,
-        buttonFocus: colors.tertiary
+        varietyColor: "var(--colorsSemanticPositive500)",
+        buttonFocus: "var(--colorsSemanticPositive600)",
+        content: "var(--colorsSemanticPositiveYang100)"
       }
     },
     tag: {
       primary: {
-        varietyColor: theme.colors.primary,
-        buttonFocus: theme.colors.secondary
+        varietyColor: "var(--colorsActionMajor500)",
+        buttonFocus: "var(--colorsActionMajor600)",
+        content: "var(--colorsActionMajorYang100)"
       }
     }
   };

package/lib/components/pill/pill.style.js

@@ -49,10 +49,6 @@ const PillStyle = _styledComponents.default.span`
   size
 }) => {
   const isStatus = pillRole === "status";
-  const {
-    colors,
-    text
-  } = _themes.baseTheme;
   const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
@@ -62,16 +58,17 @@ const PillStyle = _styledComponents.default.span`
     if (borderColor) {
       pillColor = (0, _color.toColor)(theme, borderColor);
       buttonFocusColor = (0, _polished.shade)(0.2, pillColor);
+      contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,
-        buttonFocus
+        buttonFocus,
+        content
       } = (0, _pillStyle.default)(theme)[pillRole][variety];
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
+      contentColor = content;
     }
-
-    contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, text.color).AAA ? text.color : colors.white;
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);
@@ -90,10 +87,14 @@ const PillStyle = _styledComponents.default.span`
       border: 2px solid ${pillColor};
       height: auto;
       white-space: nowrap;
+      color: ${contentColor};
 
       ${inFill && (0, _styledComponents.css)`
         background-color: ${pillColor};
-        color: ${contentColor};
+      `}
+
+      ${!inFill && (0, _styledComponents.css)`
+        color: var(--colorsUtilityYin090);
       `}
 
       ${size === "S" && (0, _styledComponents.css)`
@@ -134,21 +135,9 @@ const PillStyle = _styledComponents.default.span`
           margin: 0;
           line-height: 16px;
 
-          ${inFill && (0, _styledComponents.css)`
-            color: ${contentColor};
-            ${_icon.default} {
-              color: ${contentColor};
-            }
-          `}
-
-          ${!inFill && (0, _styledComponents.css)`
-            background-color: transparent;
-            color: ${text.color};
-          `}
-
           &:focus {
             outline: none;
-            box-shadow: 0 0 0 3px ${colors.focus};
+            box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
             & {
               color: ${contentColor};
@@ -175,12 +164,19 @@ const PillStyle = _styledComponents.default.span`
             padding: 0 4px;
             height: unset;
             width: unset;
+            color: ${contentColor};
 
             &:hover,
             &:focus {
               color: ${contentColor};
             }
           }
+
+          ${!inFill && (0, _styledComponents.css)`
+            ${_icon.default} {
+              color: var(--colorsUtilityYin090);
+            }
+          `}
         }
 
         ${size === "S" && (0, _styledComponents.css)`
@@ -293,7 +289,10 @@ PillStyle.propTypes = {
   inFill: _propTypes.default.bool,
   colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
   isDeletable: _propTypes.default.func,
-  size: _propTypes.default.oneOf(["S", "M", "L", "XL"])
+  size: _propTypes.default.oneOf(["S", "M", "L", "XL"]),
+  pillRole: _propTypes.default.oneOf(["tag", "status"]),
+  borderColor: _propTypes.default.string,
+  theme: _propTypes.default.object
 };
 var _default = PillStyle;
 exports.default = _default;

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

@@ -361,7 +361,6 @@ declare function _default(palette: any): {
         colorsActionMajor600: any;
         colorsActionDisabled500: any;
         colorsSemanticFocus500: any;
-        colorsSemanticPositive500: any;
         colorsSemanticNegative500: any;
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
@@ -471,6 +470,7 @@ declare function _default(palette: any): {
         colorsSemanticNeutralYang100: string;
         colorsSemanticFocus250: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
         colorsSemanticPositiveYin030: string;

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

@@ -384,7 +384,6 @@ var _default = palette => {
         colorsActionMajor600: this.colors.secondary,
         colorsActionDisabled500: this.disabled.background,
         colorsSemanticFocus500: this.colors.focus,
-        colorsSemanticPositive500: this.colors.success,
         colorsSemanticNegative500: this.colors.error,
         colorsSemanticNegative600: this.colors.destructive.hover,
         colorsSemanticCaution500: this.colors.warning,

package/package.json

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