carbon-react 102.18.0 → 102.20.1

package/lib/__internal__/label/label.style.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const LabelStyle = _styledComponents.default.label`
-  color: var(--colorsYin090);
+  color: var(--colorsUtilityYin090);
   display: block;
   font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
@@ -34,7 +34,7 @@ const LabelStyle = _styledComponents.default.label`
   ${({
   disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: var(--colorsYin030);
+      color: var(--colorsUtilityYin030);
     `}
 `;
 LabelStyle.propTypes = {

package/lib/components/action-popover/action-popover.style.d.ts

@@ -1,31 +1,13 @@
 export const Menu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export function MenuItemFactory(button: any): import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const ButtonIcon: React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>;
+export const ButtonIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const MenuItemIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>, any, {}, never>;
+export const MenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
-export const SubMenuItemIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>, any, {}, never>;
+export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-import React from "react";
+import Icon from "../icon";

package/lib/components/action-popover/action-popover.style.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
@@ -19,30 +17,24 @@ var _button = _interopRequireDefault(require("../button/button.style"));
 
 var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
 
+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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Menu = _styledComponents.default.div`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
-  padding: ${({
-  theme
-}) => `${theme.spacing}px 0`};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  padding: var(--spacing100) 0;
+  box-shadow: var(--boxShadow100);
   position: absolute;
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+  background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
-}) => `${theme.zIndex.popover}`};
+}) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
 const StyledMenuItem = _styledComponents.default.div`
@@ -55,9 +47,7 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
   disabled
 }) => disabled ? "not-allowed" : "pointer"};
   box-sizing: border-box;
-  ${({
-  theme
-}) => `padding: 0 ${theme.spacing * 3}px;`}
+  padding: 0 var(--spacing150);
   position: relative;
   line-height: 40px;
   white-space: nowrap;
@@ -67,9 +57,8 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
   border: none;
   width: 100%;
   color: ${({
-  disabled,
-  theme
-}) => disabled ? theme.menu.itemColorDisabled : theme.menu.itemColor};
+  disabled
+}) => disabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin090)"};
   font-size: 14px;
   font-weight: 700;
   justify-content: ${({
@@ -80,16 +69,12 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
     ${({
   disabled
 }) => !disabled && (0, _styledComponents.css)`
-        background-color: ${({
-  theme
-}) => theme.menu.focus};
+        background-color: var(--colorsUtilityMajor025);
       `}
   }
   &:focus {
-    outline: none;
-    box-shadow: inset 0px 0px 0px 2px ${({
-  theme
-}) => theme.colors.focus};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    z-index: 1;
   }
   ${({
   disabled
@@ -103,7 +88,7 @@ const MenuItemFactory = button => (0, _styledComponents.default)(button)`
 }) => disabled && (0, _styledComponents.css)`
       && ${_icon2.default} {
         cursor: not-allowed;
-        color: inherit;
+        color: var(--colorsUtilityYin030);
       }
     `}
 `;
@@ -112,11 +97,9 @@ exports.MenuItemFactory = MenuItemFactory;
 const MenuItemDivider = _styledComponents.default.div.attrs({
   "data-element": "action-popover-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.menu.divider};
-  height: 1px;
-  margin: 9px;
+  background-color: var(--colorsUtilityMajor050);
+  height: var(--borderWidth100);
+  margin: var(--spacing100) var(--spacing150);
 `;
 exports.MenuItemDivider = MenuItemDivider;
 const MenuButton = _styledComponents.default.div`
@@ -127,100 +110,59 @@ const MenuButton = _styledComponents.default.div`
   width: fit-content;
   margin: auto;
   ${_styledSystem.margin}
-  ${({
-  isOpen,
-  theme
-}) => isOpen && `background-color: ${theme.colors.white}`}
 `;
-/**
- * Creates a factory that returns a styled component with a custom
- * theme provider wrapped around it
- * @param {*} themeFn
- */
-
 exports.MenuButton = MenuButton;
+const ButtonIcon = (0, _styledComponents.default)(_icon.default)`
+  color: var(--colorsActionMinor500);
 
-const iconThemeProviderFactory = (Component, themeFn) => (0, _styledComponents.withTheme)(({
-  theme,
-  ...props
-}) => {
-  const color = themeFn(theme.palette);
-  const customTheme = { ...theme,
-    icon: {
-      default: color,
-      defaultHover: color
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: customTheme
-  }, /*#__PURE__*/_react.default.createElement(Component, props));
-});
-
-const ButtonIcon = iconThemeProviderFactory(_icon.default, palette => palette.slate);
+  :hover {
+    color: var(--colorsActionMinor600);
+  }
+`;
 exports.ButtonIcon = ButtonIcon;
 const StyledButtonIcon = _styledComponents.default.div`
-  &:hover,
-  &:focus {
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-  }
-
   &:focus {
-    outline: 2px solid ${({
-  theme
-}) => theme.colors.focus};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }
 `;
 exports.StyledButtonIcon = StyledButtonIcon;
-const MenuItemIcon = (0, _styledComponents.default)(iconThemeProviderFactory(_icon.default, () => "inherit"))`
-  ${({
-  theme,
-  horizontalAlignment
-}) => (0, _styledComponents.css)`
-    ${horizontalAlignment === "right" ? "padding-left" : "padding-right"}: ${theme.spacing}px;
-  `}
+const MenuItemIcon = (0, _styledComponents.default)(_icon.default)`
+  padding: var(--spacing100);
+  color: var(--colorsUtilityYin065);
 `;
 exports.MenuItemIcon = MenuItemIcon;
 const SubMenuItemIcon = (0, _styledComponents.default)(ButtonIcon)`
   ${({
-  theme,
   type
 }) => (0, _styledComponents.css)`
     position: absolute;
-    &,
-    :hover {
-      color: ${theme.colors.border};
-    }
     ${type === "chevron_left" && (0, _styledComponents.css)`
-      left: 0px;
+      left: -2px;
     `}
 
     ${type === "chevron_right" && (0, _styledComponents.css)`
-      right: 0px;
+      right: -5px;
       ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
-        top: ${theme.spacing}px;
+        top: var(--sizing100);
       `}
     `}
   `}
 `;
 exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-    ${_button.default} {
-      padding: 0px ${theme.spacing}px;
-      width: 100%;
-      &:focus {
-        outline-width: 2px;
-      }
+  ${_button.default} {
+    padding: 0px var(--sizing100);
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor600);
 
-      &:hover,
-      &:focus {
-        background-color: ${theme.colors.white};
+      span[color] {
+        color: var(--colorsActionMajor600);
       }
     }
-  `}
+  }
 `;
 exports.MenuButtonOverrideWrapper = MenuButtonOverrideWrapper;

package/lib/components/confirm/confirm.component.js

@@ -82,7 +82,7 @@ const Confirm = ({
     buttonType: confirmButtonType,
     destructive: destructive || confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
-    ml: cancelButtonType === "tertiary" ? "3px" : 2,
+    ml: 2,
     iconType: confirmButtonIconType,
     iconPosition: confirmButtonIconPosition
   }, isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {

package/lib/components/switch/__internal__/switch-slider-panel.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 = _interopRequireDefault(require("../../loader/loader.style"));
 
 var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
@@ -24,11 +22,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const SwitchSliderPanel = _styledComponents.default.div`
   ${({
   isLoading,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     border: 0;
-    color: ${theme.colors.white};
+    color: var(--colorsActionMinorYang100);
     margin: auto;
     margin-top: ${size === "large" ? "12px" : "5px"};
 
@@ -37,20 +34,42 @@ const SwitchSliderPanel = _styledComponents.default.div`
     }
 
     &[type="off"] {
-      color: ${theme.text.color};
+      color: var(--colorsActionMinor500);
       margin-right: 6px;
     }
 
     ${isLoading && (0, _styledComponents.css)`
+      &[type="off"],
+      &[type="on"] {
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 2px 8px;
+      }
+
+      &[type="off"] {
+        ${_loaderSquare.default} {
+          background-color: var(--colorsSemanticNeutral500);
+        }
+      }
+
+      &[type="on"] {
+        ${_loaderSquare.default} {
+          background-color: var(--colorsActionMinorYang100);
+        }
+      }
+
       ${_loader.default} {
          {
-          padding: 0 3px 3px 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
 
           ${_loaderSquare.default} {
-            height: 5px;
-            margin-bottom: 2px;
-            margin-right: 2px;
-            width: 5px;
+            height: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
+            width: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
           }
         }
       }
@@ -59,11 +78,7 @@ const SwitchSliderPanel = _styledComponents.default.div`
 `;
 SwitchSliderPanel.propTypes = {
   isLoading: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-SwitchSliderPanel.defaultProps = {
-  theme: _base.default
+  size: _propTypes.default.string
 };
 var _default = SwitchSliderPanel;
 exports.default = _default;

package/lib/components/switch/__internal__/switch-slider.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 _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
@@ -24,14 +22,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledSwitchSlider = _styledComponents.default.span`
   ${({
   checked,
+  isLoading,
   disabled,
   size,
-  theme,
   error,
-  warning,
-  info
+  warning
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.switch.off};
     display: flex;
     font-size: 12px;
     font-weight: bold;
@@ -44,21 +40,13 @@ const StyledSwitchSlider = _styledComponents.default.span`
     width: 60px;
     z-index: 2;
     border-radius: 90px;
-
-    ${info && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 1px ${theme.colors.info};
-    `}
-    ${warning && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 1px ${theme.colors.warning};
-    `}
-      ${error && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 2px ${theme.colors.error};
-    `}
+    border-style: solid;
+    border-color: var(--colorsActionMinor400);
+    border-width: var(--borderWidth200);
 
     &::before {
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsActionMinor400);
       bottom: 4px;
-      box-shadow: ${theme.shadows.cards};
       content: "";
       height: 16px;
       position: absolute;
@@ -70,28 +58,36 @@ const StyledSwitchSlider = _styledComponents.default.span`
     }
 
     ${checked && `
-      background-color: ${theme.switch.on};
+      background-color: var(--colorsActionMinor500);
+      border-color: var(--colorsActionMinorTransparent);
 
       &::before {
         transform: translateX(36px);
+        background-color: var(--colorsActionMinorYang100);
       }
+
     `}
 
-    ${disabled && (0, _styledComponents.css)`
-      background-color: ${theme.switch.offDisabled};
+    ${disabled && !isLoading && (0, _styledComponents.css)`
+      border-color: var(--colorsActionDisabled600);
 
       &::before {
-        opacity: 0.8;
+        background-color: var(--colorsActionDisabled600);
       }
 
       ${_switchSliderPanel.default} {
-        color: ${theme.switch.disabledFontColor};
+        color: var(--colorsUtilityYin030);
       }
 
       ${checked && `
-        background-color: ${theme.switch.onDisabled};
+        background-color: var(--colorsActionDisabled500);
+        border-color: var(--colorsActionMinorTransparent);
 
-        ${_switchSliderPanel.default} { color: ${theme.colors.white}; }
+        &::before {
+          background-color: var(--colorsActionMinorYang100);
+        }
+
+        ${_switchSliderPanel.default} { color: var(--colorsUtilityYin030); }
       `}
     `}
 
@@ -107,6 +103,20 @@ const StyledSwitchSlider = _styledComponents.default.span`
       }
     `}
 
+    ${isLoading && (0, _styledComponents.css)`
+      &::before {
+        display: none;
+      }
+    `}
+
+    ${warning && !disabled && (0, _styledComponents.css)`
+      border-color: var(--colorsSemanticCaution500);
+    `}
+
+    ${error && !disabled && (0, _styledComponents.css)`
+      border-color: var(--colorsSemanticNegative500);
+    `}
+
     ${_validationIcon.default} {
       position: absolute;
       right: -30px;
@@ -118,10 +128,9 @@ StyledSwitchSlider.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   size: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-StyledSwitchSlider.defaultProps = {
-  theme: _base.default
+  isLoading: _propTypes.default.bool,
+  error: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  warning: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = StyledSwitchSlider;
 exports.default = _default;

package/lib/components/switch/switch.style.js

@@ -35,13 +35,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledSwitch = _styledComponents.default.div`
   ${({
-  checked,
   fieldHelpInline,
   labelInline,
-  labelSpacing,
   reverse,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {
@@ -60,11 +57,7 @@ const StyledSwitch = _styledComponents.default.div`
 
     ${_hiddenCheckableInput.default}:not([disabled]) {
       &:focus + ${_switchSlider.default} {
-        outline: solid 3px ${theme.colors.focus};
-      }
-
-      &:hover + ${_switchSlider.default} {
-        background-color: ${checked ? theme.switch.onHover : theme.switch.offHover};
+        outline: solid 3px var(--colorsSemanticFocus500);
       }
     }
 
@@ -128,10 +121,9 @@ const StyledSwitch = _styledComponents.default.div`
           margin-top: 0;
         }
 
-        ${!fieldHelpInline && `
+        ${!fieldHelpInline && (0, _styledComponents.css)`
           ${_fieldHelp.default} {
             margin-left: 60px;
-            padding-left: ${labelSpacing * theme.spacing}px;
           }
         `}
       `}
@@ -173,10 +165,9 @@ const StyledSwitch = _styledComponents.default.div`
           padding-bottom: 10px;
         }
 
-        ${!fieldHelpInline && reverse && `
+        ${!fieldHelpInline && reverse && (0, _styledComponents.css)`
           ${_fieldHelp.default} {
             margin-left: 78px;
-            padding-left: ${labelSpacing * theme.spacing}px;
           }
         `}
       `}
@@ -188,8 +179,7 @@ StyledSwitch.propTypes = {
   fieldHelpInline: _propTypes.default.bool,
   labelInline: _propTypes.default.bool,
   reverse: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  theme: _propTypes.default.object
+  size: _propTypes.default.string
 };
 StyledSwitch.defaultProps = {
   theme: _base.default

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -61,7 +61,7 @@ const StyledTabsHeaderList = _styledComponents.default.div`
 }) => !extendedLine && (0, _styledComponents.css)`
       width: fit-content;
     `}
-  cursor: pointer;
+  cursor: default;
   list-style: none;
   margin: 0;
   padding: 0;

package/package.json

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