carbon-react 119.4.2 → 119.5.0

package/esm/components/button-bar/button-bar.style.js

@@ -1,10 +1,15 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import BaseTheme from "../../style/themes/base";
+import StyledButton from "../button/button.style";
 import StyledIcon from "../icon/icon.style";
+import StyledIconButton from "../icon-button/icon-button.style";
+const commonHoverStyles = `
+  background-color: var(--colorsActionMajor600);
+  border-color: var(--colorsActionMajor600);
+`;
 const StyledButtonBar = styled.div`
   ${space}
-
   ${_ref => {
   let {
     fullWidth,
@@ -26,17 +31,14 @@ const StyledButtonBar = styled.div`
 
     button {
       margin: 0;
-      border: 2px solid var(--colorsActionMajor500);
 
       :not(:first-child):not(:last-child) {
         border-radius: var(--borderRadius000);
       }
-
       :first-child:not(:last-child) {
         border-top-right-radius: var(--borderRadius000);
         border-bottom-right-radius: var(--borderRadius000);
       }
-
       :last-child:not(:first-child) {
         border-top-left-radius: var(--borderRadius000);
         border-bottom-left-radius: var(--borderRadius000);
@@ -53,7 +55,6 @@ const StyledButtonBar = styled.div`
       &:focus {
         position: relative;
         z-index: 2;
-        border-right-color: var(--colorsActionMajor500);
       }
 
       &:hover {
@@ -63,7 +64,9 @@ const StyledButtonBar = styled.div`
         & + button {
           border-left-color: var(--colorsActionMajor600);
         }
+
         & ${StyledIcon} {
+          ${commonHoverStyles}
           color: white;
         }
       }
@@ -72,6 +75,41 @@ const StyledButtonBar = styled.div`
         color: var(--colorsActionMajor500);
       }
     }
+
+    [data-component="button"] {
+      :hover {
+        ${commonHoverStyles}
+        & + ${StyledButton} {
+          border-left-color: var(--colorsActionMajor600);
+        }
+      }
+    }
+
+    [data-component="button-minor"] {
+      & ${StyledIcon} {
+        color: var(--colorsActionMinor500);
+      }
+    }
+
+    [data-component="button-minor"] {
+      :hover {
+        color: var(--colorsActionMinorYang100);
+        background-color: var(--colorsActionMinor500);
+        border-color: var(--colorsActionMinor500);
+
+        & + ${StyledButton} {
+          border-left-color: var(--colorsActionMinor500);
+        }
+      }
+    }
+
+    ${StyledIconButton} {
+      border: 2px solid var(--colorsActionMajor500);
+
+      :focus {
+        border-right-color: var(--colorsActionMajor500);
+      }
+    }
   `;
 }}
 `;

package/esm/components/button-minor/button-minor.component.d.ts

@@ -5,7 +5,7 @@ export interface ButtonMinorProps extends ButtonProps {
     isInPassword?: boolean;
 }
 export declare const ButtonMinor: {
-    ({ buttonType, size, isInPassword, ...rest }: ButtonMinorProps): React.JSX.Element;
+    ({ buttonType: buttonTypeProp, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonMinor;

package/esm/components/button-minor/button-minor.component.js

@@ -1,18 +1,32 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledButtonMinor from "./button-minor.style";
+import { ButtonBarContext } from "../button-bar/button-bar.component";
 export const ButtonMinor = _ref => {
   let {
-    buttonType = "secondary",
-    size = "medium",
-    isInPassword,
+    buttonType: buttonTypeProp = "secondary",
+    size: sizeProp = "medium",
+    iconPosition: iconPositionProp = "before",
+    fullWidth: fullWidthProp = false,
     ...rest
   } = _ref;
+  const {
+    buttonType: buttonTypeContext,
+    size: sizeContext,
+    iconPosition: iconPositionContext,
+    fullWidth: fullWidthContext
+  } = useContext(ButtonBarContext);
+  const buttonType = buttonTypeContext || buttonTypeProp;
+  const size = sizeContext || sizeProp;
+  const iconPosition = iconPositionContext || iconPositionProp;
+  const fullWidth = fullWidthContext || fullWidthProp;
   return /*#__PURE__*/React.createElement(StyledButtonMinor, _extends({
+    "data-component": "button-minor",
     size: size,
-    buttonType: buttonType,
-    isInPassword: isInPassword
+    fullWidth: fullWidth,
+    iconPosition: iconPosition,
+    buttonType: buttonType
   }, rest));
 };
 ButtonMinor.displayName = "ButtonMinor";

package/esm/components/button-minor/button-minor.style.js

@@ -92,7 +92,7 @@ const StyledButtonMinor = styled(Button)`
   } = _ref4;
   return css`
     ${size === "small" && `
-      min-height: 32px;
+      min-height: var(--sizing400);
       padding: var(--spacing000) var(--spacing100) var(--spacing000)
         var(--spacing100);
     `}

package/esm/components/icon/icon-config.js

@@ -12,10 +12,10 @@ const dlsConfig = {
     circle: "50%"
   },
   iconSize: {
-    small: "20px",
-    medium: "24px",
-    large: "32px",
-    "extra-large": "48px"
+    small: "var(--sizing250)",
+    medium: "var(--sizing300)",
+    large: "var(--sizing400)",
+    "extra-large": "var(--sizing600)"
   }
 };
 export const ICON_TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];

package/lib/components/button-bar/button-bar.style.js

@@ -7,13 +7,18 @@ exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _button = _interopRequireDefault(require("../button/button.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
+var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 commonHoverStyles = `
+  background-color: var(--colorsActionMajor600);
+  border-color: var(--colorsActionMajor600);
+`;
 const StyledButtonBar = _styledComponents.default.div`
   ${_styledSystem.space}
-
   ${_ref => {
   let {
     fullWidth,
@@ -35,17 +40,14 @@ const StyledButtonBar = _styledComponents.default.div`
 
     button {
       margin: 0;
-      border: 2px solid var(--colorsActionMajor500);
 
       :not(:first-child):not(:last-child) {
         border-radius: var(--borderRadius000);
       }
-
       :first-child:not(:last-child) {
         border-top-right-radius: var(--borderRadius000);
         border-bottom-right-radius: var(--borderRadius000);
       }
-
       :last-child:not(:first-child) {
         border-top-left-radius: var(--borderRadius000);
         border-bottom-left-radius: var(--borderRadius000);
@@ -62,7 +64,6 @@ const StyledButtonBar = _styledComponents.default.div`
       &:focus {
         position: relative;
         z-index: 2;
-        border-right-color: var(--colorsActionMajor500);
       }
 
       &:hover {
@@ -72,7 +73,9 @@ const StyledButtonBar = _styledComponents.default.div`
         & + button {
           border-left-color: var(--colorsActionMajor600);
         }
+
         & ${_icon.default} {
+          ${commonHoverStyles}
           color: white;
         }
       }
@@ -81,6 +84,41 @@ const StyledButtonBar = _styledComponents.default.div`
         color: var(--colorsActionMajor500);
       }
     }
+
+    [data-component="button"] {
+      :hover {
+        ${commonHoverStyles}
+        & + ${_button.default} {
+          border-left-color: var(--colorsActionMajor600);
+        }
+      }
+    }
+
+    [data-component="button-minor"] {
+      & ${_icon.default} {
+        color: var(--colorsActionMinor500);
+      }
+    }
+
+    [data-component="button-minor"] {
+      :hover {
+        color: var(--colorsActionMinorYang100);
+        background-color: var(--colorsActionMinor500);
+        border-color: var(--colorsActionMinor500);
+
+        & + ${_button.default} {
+          border-left-color: var(--colorsActionMinor500);
+        }
+      }
+    }
+
+    ${_iconButton.default} {
+      border: 2px solid var(--colorsActionMajor500);
+
+      :focus {
+        border-right-color: var(--colorsActionMajor500);
+      }
+    }
   `;
 }}
 `;

package/lib/components/button-minor/button-minor.component.d.ts

@@ -5,7 +5,7 @@ export interface ButtonMinorProps extends ButtonProps {
     isInPassword?: boolean;
 }
 export declare const ButtonMinor: {
-    ({ buttonType, size, isInPassword, ...rest }: ButtonMinorProps): React.JSX.Element;
+    ({ buttonType: buttonTypeProp, size: sizeProp, iconPosition: iconPositionProp, fullWidth: fullWidthProp, ...rest }: ButtonMinorProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonMinor;

package/lib/components/button-minor/button-minor.component.js

@@ -4,22 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ButtonMinor = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _buttonMinor = _interopRequireDefault(require("./button-minor.style"));
+var _buttonBar = require("../button-bar/button-bar.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const ButtonMinor = _ref => {
   let {
-    buttonType = "secondary",
-    size = "medium",
-    isInPassword,
+    buttonType: buttonTypeProp = "secondary",
+    size: sizeProp = "medium",
+    iconPosition: iconPositionProp = "before",
+    fullWidth: fullWidthProp = false,
     ...rest
   } = _ref;
+  const {
+    buttonType: buttonTypeContext,
+    size: sizeContext,
+    iconPosition: iconPositionContext,
+    fullWidth: fullWidthContext
+  } = (0, _react.useContext)(_buttonBar.ButtonBarContext);
+  const buttonType = buttonTypeContext || buttonTypeProp;
+  const size = sizeContext || sizeProp;
+  const iconPosition = iconPositionContext || iconPositionProp;
+  const fullWidth = fullWidthContext || fullWidthProp;
   return /*#__PURE__*/_react.default.createElement(_buttonMinor.default, _extends({
+    "data-component": "button-minor",
     size: size,
-    buttonType: buttonType,
-    isInPassword: isInPassword
+    fullWidth: fullWidth,
+    iconPosition: iconPosition,
+    buttonType: buttonType
   }, rest));
 };
 exports.ButtonMinor = ButtonMinor;

package/lib/components/button-minor/button-minor.style.js

@@ -101,7 +101,7 @@ const StyledButtonMinor = (0, _styledComponents.default)(_button.default)`
   } = _ref4;
   return (0, _styledComponents.css)`
     ${size === "small" && `
-      min-height: 32px;
+      min-height: var(--sizing400);
       padding: var(--spacing000) var(--spacing100) var(--spacing000)
         var(--spacing100);
     `}

package/lib/components/icon/icon-config.js

@@ -18,10 +18,10 @@ const dlsConfig = {
     circle: "50%"
   },
   iconSize: {
-    small: "20px",
-    medium: "24px",
-    large: "32px",
-    "extra-large": "48px"
+    small: "var(--sizing250)",
+    medium: "var(--sizing300)",
+    large: "var(--sizing400)",
+    "extra-large": "var(--sizing600)"
   }
 };
 const ICON_TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.4.2",
+  "version": "119.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",