carbon-react 102.5.0 → 102.7.1

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/components/textarea/textarea.component.js

@@ -194,6 +194,7 @@ const Textarea = ({
     "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
+    value: value,
     ref: inputRef,
     maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
     onChange: onChange,

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.5.0",
+  "version": "102.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {