carbon-react 102.4.6 → 102.7.0

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

@@ -19,140 +19,127 @@ function makeColors(color) {
   `;
 }
 
-var _default = ({
-  colors,
-  disabled
-}, isDisabled, destructive) => ({
+var _default = (isDisabled, destructive) => ({
   primary: `
-    background: ${colors.primary};
+    background: var(--colorsActionMajor500);
     border-color: transparent;
-    color: ${colors.white};
+    ${makeColors("var(--colorsActionMajorYang100)")};
     &:hover {
-      background: ${colors.secondary};
+      background: var(--colorsActionMajor600);
     }
 
     ${isDisabled ? `
-    background: ${disabled.button};
-    color: ${disabled.text};
+    background: var(--colorsActionDisabled500);
+    ${makeColors("var(--colorsYin030)")};
     &:hover {
-      background: ${disabled.button};
-      border-color: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
     }
   ` : ""}
 
-    ${destructive ? `background: ${colors.error};
-    border-color: transparent;
-    color: ${colors.white};
+    ${destructive ? `background: var(--colorsSemanticNegative500);
+    ${makeColors("var(--colorsSemanticNegativeYang100)")};
     &:hover {
-      background: ${colors.destructive.hover};
+      background: var(--colorsSemanticNegative600);
     }
 
     ${isDisabled ? `
-      background: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        background: ${disabled.button};
-        color: ${disabled.text};
+        background: var(--colorsActionDisabled500);
       }
     ` : ""}` : ""}
   `,
   secondary: `
       background: transparent;
-      border-color: ${colors.primary};
-      color: ${colors.primary};
+      border-color: var(--colorsActionMajor500);
+      ${makeColors("var(--colorsActionMajor500)")};
       &:hover {
-        background: ${colors.secondary};
-        border-color: ${colors.secondary};
-       ${makeColors(colors.white)}
+        background: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajorTransparent);
+        ${makeColors("var(--colorsActionMajorYang100)")};
       }
 
       ${destructive ? `
-        border-color: ${colors.error};
-        ${makeColors(colors.error)}
-        &:focus {
-          ${makeColors(colors.white)}
-          background: ${colors.destructive.hover};
-        }
+        border-color: var(--colorsSemanticNegative500);
+        ${makeColors("var(--colorsSemanticNegative500)")}
         &:hover {
-          ${makeColors(colors.white)}
-          border-color: ${colors.destructive.hover};
-          background: ${colors.destructive.hover};
+          background: var(--colorsSemanticNegative600);
+          border-color: var(--colorsSemanticNegativeTransparent);
+          ${makeColors("var(--colorsSemanticNegativeYang100)")};
         }
       ` : ""}
 
       ${isDisabled ? `
-        border-color: ${disabled.button};
-        color: ${disabled.text};
+        border-color: var(--colorsActionDisabled500);
+        ${makeColors("var(--colorsYin030)")};
         &:hover {
-          background: transparent
-          border-color: ${disabled.button};
-          ${makeColors(disabled.text)}
+          background: transparent;
+          border-color: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsYin030)")};
         }
     ` : ""}
   `,
   tertiary: `
     background: transparent;
     border-color: transparent;
-    color: ${colors.primary};
+    ${makeColors("var(--colorsActionMajor500)")};
     &:hover {
-      ${makeColors(colors.secondary)}
+      background: var(--colorsActionMajor600);
+      ${makeColors("var(--colorsActionMajorYang100)")};
     }
 
     ${destructive ? `
-      ${makeColors(colors.error)}
+      ${makeColors("var(--colorsSemanticNegative500)")};
       &:hover {
-        ${makeColors(colors.destructive.hover)}
+        background: var(--colorsSemanticNegative600);
+        ${makeColors("var(--colorsSemanticNegativeYang100)")};
       }
       ` : ""}
 
     ${isDisabled ? `
-      color: ${disabled.text};
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        ${makeColors(disabled.text)}
+        background: var(--colorsActionMajorTransparent);
+        ${makeColors("var(--colorsYin030)")};
       }
     ` : ""}
   `,
   dashed: `
     background: transparent;
-    border: 2px solid ${colors.dashedBorder}
-    border-style: dashed;
-    color: ${colors.dashedButtonText};
+    border: 2px dashed var(--colorsActionMinor500);
+    ${makeColors("var(--colorsActionMinor500)")};
     &:hover {
-      background-color: ${colors.dashedHoverBackground}
+      background-color: var(--colorsActionMinor200);
     }
 
     ${destructive ? `
-      ${makeColors(colors.error)}
-      &:hover {
-        ${makeColors(colors.destructive.hover)}
-      }
+      border-color: var(--colorsSemanticNegative500);
       ` : ""}
 
     ${isDisabled ? `
-      border-color: ${disabled.button};
-      color: ${disabled.text};
+      border-color: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
         background-color: transparent;
-        ${makeColors(disabled.text)}
       }
     ` : ""}
   `,
   darkBackground: `
-    background: ${colors.white};
+    background: var(--colorsActionMajorYang100);
     border-color: transparent;
-    color: ${colors.primary};
+    ${makeColors("var(--colorsActionMajor500)")};
     &:hover {
-      background: ${colors.secondary};
-      ${makeColors(colors.white)}
+      background: var(--colorsActionMajor600);
+      ${makeColors("var(--colorsActionMajorYang100)")}
     }
 
     ${isDisabled ? `
-      background: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        background: ${disabled.button};
-        ${makeColors(disabled.text)}
+        background: var(--colorsActionDisabled500);
+        ${makeColors("var(--colorsYin030)")};
       }
     ` : ""}
   `

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

@@ -7,8 +7,6 @@ exports.default = exports.ButtonWithForwardRef = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
@@ -19,8 +17,6 @@ var _button = _interopRequireWildcard(require("./button.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-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; }
@@ -39,16 +35,15 @@ function renderChildren({
   disabled,
   buttonType,
   iconTooltipMessage,
-  iconTooltipPosition,
-  theme
+  iconTooltipPosition
   /* eslint-enable */
 
 }) {
   const iconColorMap = {
-    primary: theme.colors.white,
-    secondary: theme.colors.primary,
-    tertiary: theme.colors.primary,
-    darkBackground: theme.colors.primary
+    primary: "var(--colorsActionMajorYang100)",
+    secondary: "var(--colorsActionMajor500)",
+    tertiary: "var(--colorsActionMajor500)",
+    darkBackground: "var(--colorsActionMajor500)"
   };
   const iconProps = {
     "aria-hidden": true,
@@ -74,7 +69,6 @@ const renderStyledButton = buttonProps => {
     disabled,
     buttonType,
     iconType,
-    theme,
     href,
     ref,
     m = 0,
@@ -136,8 +130,6 @@ const renderStyledButton = buttonProps => {
 };
 
 const Button = props => {
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _base.default;
-
   const {
     size,
     subtext
@@ -151,8 +143,7 @@ const Button = props => {
   } = props;
   const propsWithoutAs = { ...rest,
     buttonType: buttonType || as,
-    ref: forwardRef || linkRef,
-    theme
+    ref: forwardRef || linkRef
   };
 
   if (subtext.length > 0 && size !== "large") {

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

@@ -51,15 +51,6 @@ const StyledButton = _styledComponents.default.button`
     ${stylingForType}
   `}
 
-  &&& {
-    ${({
-  mb,
-  theme
-}) => (mb || mb === 0) && (0, _styledComponents.css)`
-        margin-bottom: ${mb * theme.spacing}px;
-      `}
-  }
-
   ${({
   fullWidth
 }) => fullWidth && (0, _styledComponents.css)`
@@ -68,12 +59,11 @@ const StyledButton = _styledComponents.default.button`
 
   ${({
   iconOnly,
-  iconPosition,
-  theme
+  iconPosition
 }) => (0, _styledComponents.css)`
     ${_icon.default} {
-      margin-left: ${!iconOnly && iconPosition === "after" ? `${theme.spacing}px` : "0px"};
-      margin-right: ${!iconOnly && iconPosition === "before" ? `${theme.spacing}px` : "0px"};
+      margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
+      margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
       margin-bottom: ${iconOnly ? "1px" : "0px"};
       height: ${additionalIconStyle};
       svg {
@@ -123,7 +113,6 @@ function stylingForType({
   iconOnly,
   disabled,
   buttonType,
-  theme,
   size,
   destructive
 }) {
@@ -133,18 +122,18 @@ function stylingForType({
     font-weight: 600;
     text-decoration: none;
     &:focus {
-      outline: solid 3px ${theme.colors.focus};
+      outline: solid 3px var(--colorsSemanticFocus500);
     }
 
-    ${(0, _buttonTypes.default)(theme, disabled, destructive)[buttonType]};
+    ${(0, _buttonTypes.default)(disabled, destructive)[buttonType]};
 
     ${size === "small" && (0, _styledComponents.css)`
-      font-size: ${theme.text.size};
+      font-size: var(--fontSizes100);
       min-height: 32px;
     `}
 
     ${size === "medium" && (0, _styledComponents.css)`
-      font-size: ${theme.text.size};
+      font-size: var(--fontSizes100);
       min-height: 40px;
     `}
     
@@ -171,15 +160,27 @@ StyledButton.propTypes = {
   /** The text the button displays */
   children: _propTypes.default.node.isRequired,
 
+  /** Apply destructive style to the button */
+  destructive: _propTypes.default.bool,
+
   /** Apply disabled state to the button */
   disabled: _propTypes.default.bool,
 
+  /** Apply fullWidth style to the button */
+  fullWidth: _propTypes.default.bool,
+
+  /** Apply iconOnly to display button with the icon only  */
+  iconOnly: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+
   /** Defines an Icon position within the button */
   iconPosition: _propTypes.default.oneOf([..._button.BUTTON_ICON_POSITIONS, ""]),
 
   /** Defines an Icon type within the button (see Icon for options) */
   iconType: _propTypes.default.oneOf([..._iconConfig.ICONS, ""]),
 
+  /** If provided, the text inside a button will not wrap */
+  noWrap: _propTypes.default.bool,
+
   /** Assigns a size to the button */
   size: _propTypes.default.oneOf(_button.BUTTON_SIZES),
 

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

@@ -77,6 +77,9 @@ const StyledIcon = _styledComponents.default.span`
     if (disabled) {
       finalColor = theme.icon.disabled;
       finalHoverColor = theme.icon.disabled;
+    } else if (typeof color === "string" && color.startsWith("var")) {
+      finalColor = color;
+      finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -9,11 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _row = require("../row");
-
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 
-var _inlineInputs = _interopRequireDefault(require("./inline-inputs.style"));
+var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
@@ -23,9 +21,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; }
 
-function _extends() { _extends = Object.assign || 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 columnWrapper = children => {
+const columnWrapper = (children, gutter) => {
   let inputs = children;
 
   if (!Array.isArray(inputs)) {
@@ -36,8 +32,10 @@ const columnWrapper = children => {
     // Input is never going to be re-ordered so we don't require a defined key
 
     /* eslint-disable react/no-array-index-key */
-    return /*#__PURE__*/_react.default.createElement(_row.Column, {
-      key: index
+    return /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledInlineInput, {
+      key: index,
+      gutter: gutter,
+      "data-element": "inline-input"
     }, input);
   });
 };
@@ -53,14 +51,6 @@ const InlineInputs = props => {
     labelWidth
   } = props;
   const labelId = (0, _react.useRef)((0, _guid.default)());
-  const widthProps = {
-    inputWidth
-  };
-
-  if (labelWidth) {
-    widthProps.labelWidth = labelWidth;
-    widthProps.inputWidth = inputWidth || 100 - labelWidth;
-  }
 
   function renderLabel() {
     if (!label) return null;
@@ -78,13 +68,16 @@ const InlineInputs = props => {
     }));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, {
     gutter: gutter,
     "data-component": "inline-inputs",
-    className: className
-  }, widthProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_row.Row, {
-    gutter: gutter
-  }, columnWrapper(renderChildren())));
+    className: className,
+    labelWidth: labelWidth
+  }, renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
+    gutter: gutter,
+    "data-element": "inline-inputs-container",
+    inputWidth: inputWidth
+  }, columnWrapper(renderChildren(), gutter)));
 }; // Assign props over for demo site
 
 

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledInlineInput = exports.StyledContentContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _row = _interopRequireDefault(require("../row/row.style"));
-
-var _column = _interopRequireDefault(require("../row/column/column.style"));
-
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
 var _label = require("../../__internal__/label/label.style");
@@ -33,20 +29,46 @@ const spacings = {
   large: 32,
   "extra-large": 40
 };
-const StyledInlineInputs = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
+const StyledInlineInput = _styledComponents.default.div`
+  flex: 1;
 
   ${({
+  gutter
+}) => (0, _styledComponents.css)`
+      margin-bottom: 0;
+      padding-left: ${spacings[gutter]}px;
+    `}
+`;
+exports.StyledInlineInput = StyledInlineInput;
+const StyledContentContainer = _styledComponents.default.div`
+  display: flex;
+  flex: ${({
   inputWidth
-}) => inputWidth && `
-    flex: 0 0 ${inputWidth}%;
-  `}
+}) => inputWidth ? `0 0 ${inputWidth}%` : 1};
+
+  ${({
+  gutter
+}) => (0, _styledComponents.css)`
+      margin-bottom: 0;
+      margin-left: -${spacings[gutter]}px;
+
+      ${gutter === "none" && (0, _styledComponents.css)`
+        ${StyledInlineInput} + ${StyledInlineInput} ${_inputPresentation.default} {
+          border-left: none;
+        }
+      `}
+    `}
+`;
+exports.StyledContentContainer = StyledContentContainer;
+const StyledInlineInputs = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
 
   ${_label.StyledLabelContainer} {
+    width: auto;
     margin-bottom: 0;
     padding-right: 16px;
-    width: ${({
+    flex: 0 0 ${({
   labelWidth
 }) => labelWidth ? `${labelWidth}%` : "auto"};
   }
@@ -58,30 +80,6 @@ const StyledInlineInputs = _styledComponents.default.div`
   [data-component="carbon-select"] input {
     width: 30px;
   }
-
-  ${_row.default} {
-    flex-grow: 1;
-  }
-
-  ${({
-  gutter
-}) => (0, _styledComponents.css)`
-      ${_row.default} {
-        margin-bottom: 0;
-        margin-left: -${spacings[gutter]}px;
-
-        > ${_column.default} {
-          margin-bottom: 0;
-          padding-left: ${spacings[gutter]}px;
-        }
-      }
-
-      ${gutter === "none" && (0, _styledComponents.css)`
-        ${_column.default} + ${_column.default} ${_inputPresentation.default} {
-          border-left: none;
-        }
-      `}
-    `}
 `;
 StyledInlineInputs.defaultProps = {
   theme: _base.default

package/lib/components/loader/loader-square.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 = require("./loader.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,18 +57,17 @@ const getDimentions = size => {
 
 const StyledLoaderSquare = _styledComponents.default.div`
   ${({
-  theme,
   size,
   isInsideButton,
   isActive
 }) => (0, _styledComponents.css)`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
-    background-color: ${theme.colors.primary};
+    background-color: var(--colorsActionMajor500);
     display: inline-block;
     ${getDimentions(size)}
 
     ${isInsideButton && (0, _styledComponents.css)`
-      background-color: ${isActive ? theme.colors.white : theme.colors.border};
+      background-color: ${isActive ? "var(--colorsYang100)" : "var(--colorsSemanticNeutral500)"};
     `}
 
     &:nth-of-type(1) {
@@ -88,7 +85,6 @@ const StyledLoaderSquare = _styledComponents.default.div`
   `}
 `;
 StyledLoaderSquare.defaultProps = {
-  theme: _base.default,
   size: "small",
   isInsideButton: false,
   isActive: true

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

@@ -40,24 +40,22 @@ const innerBarAnimation = (0, _styledComponents.keyframes)`
 `;
 const StyledLoaderBar = _styledComponents.default.div`
   ${({
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     display: inline-block;
     height: ${getHeight(size)};
     width: 100%;
-    background-color: ${theme.colors.loadingBarBackground};
+    background-color: var(--colorsActionMajor150);
     overflow: hidden;
     position: relative;
   `}
 `;
 const InnerBar = _styledComponents.default.div`
   ${({
-  theme,
   size
 }) => (0, _styledComponents.css)`
     position: absolute;
-    background-color: ${theme.colors.primary};
+    background-color: var(--colorsActionMajor500);
     width: ${INNER_BAR_LENGTH};
     height: ${getHeight(size)};
     animation: 2s ${innerBarAnimation} linear 0s infinite normal none running;
@@ -82,11 +80,9 @@ StyledLoader.defaultProps = {
   theme: _base.default
 };
 StyledLoaderBar.defaultProps = {
-  theme: _base.default,
   size: "medium"
 };
 InnerBar.defaultProps = {
-  theme: _base.default,
   size: "medium"
 };
 StyledLoaderBar.propTypes = {

package/lib/components/pages/page/page.style.js

@@ -17,7 +17,7 @@ const StyledPage = _styledComponents.default.article`
 `;
 exports.StyledPage = StyledPage;
 const StyledPageContent = _styledComponents.default.div`
-  box-sizing: content-box;
+  box-sizing: border-box;
   padding: 30px 40px;
   width: 100%;
   height: 100%;

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

@@ -31,7 +31,8 @@ var _default = palette => {
     get compatibility() {
       return {
         colorsActionMajor500: this.colors.primary,
-        colorsActionMajor600: this.colors.secondary
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionMajor150: this.colors.loadingBarBackground
       };
     }
 

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

@@ -343,6 +343,7 @@ var _default = palette => {
 
     get compatibility() {
       return { ..._common.default,
+        colorsActionMajor150: this.colors.loadingBarBackground,
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
         colorsActionDisabled500: this.disabled.background,

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

@@ -25,7 +25,8 @@ var _default = palette => {
     get compatibility() {
       return {
         colorsActionMajor500: this.colors.primary,
-        colorsActionMajor600: this.colors.secondary
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionMajor150: this.colors.loadingBarBackground
       };
     }
 

package/package.json

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