carbon-react 126.7.0 → 126.7.1

package/esm/components/tile/tile.config.d.ts

@@ -1,2 +1,3 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
+export declare const TILE_BORDER_VARIANTS: string[];

package/esm/components/tile/tile.config.js

@@ -1,2 +1,3 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
-export const TILE_THEMES = ["tile", "transparent", "active"];
+export const TILE_THEMES = ["tile", "transparent", "active", "grey"];
+export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];

package/esm/components/tile/tile.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import computeSizing from "../../style/utils/element-sizing";
-const getBorderColor = borderVariant => {
+const getBorderColor = (borderVariant, variant) => {
   switch (borderVariant) {
     case "selected":
       return "var(--colorsUtilityYin100)";
@@ -15,7 +15,14 @@ const getBorderColor = borderVariant => {
     case "info":
       return "var(--colorsSemanticInfo500)";
     default:
-      return "var(--colorsUtilityMajor100)";
+      switch (variant) {
+        case "active":
+          return "var(--colorsActionMajor500)";
+        case "grey":
+          return "var(--colorsUtilityMajor200)";
+        default:
+          return "var(--colorsUtilityMajor100)";
+      }
   }
 };
 const getBorderRadius = roundness => {
@@ -41,7 +48,8 @@ const StyledTile = styled.div`
     ${space}
 
     box-sizing: border-box;
-    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border: var(--${borderWidth}) solid
+      ${getBorderColor(borderVariant, variant)};
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
@@ -65,12 +73,10 @@ const StyledTile = styled.div`
 
     ${variant === "active" && css`
       background-color: var(--colorsActionMajor025);
-      border-color: var(--colorsActionMajor500);
     `}
 
     ${variant === "grey" && css`
       background-color: var(--colorsUtilityMajor025);
-      border-color: var(--colorsUtilityMajor200);
     `}
 
     display: flex;

package/lib/components/tile/tile.config.d.ts

@@ -1,2 +1,3 @@
 export declare const TILE_ORIENTATIONS: string[];
 export declare const TILE_THEMES: string[];
+export declare const TILE_BORDER_VARIANTS: string[];

package/lib/components/tile/tile.config.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TILE_THEMES = exports.TILE_ORIENTATIONS = void 0;
+exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_BORDER_VARIANTS = void 0;
 const TILE_ORIENTATIONS = exports.TILE_ORIENTATIONS = ["horizontal", "vertical"];
-const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active"];
+const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active", "grey"];
+const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];

package/lib/components/tile/tile.style.js

@@ -11,7 +11,7 @@ var _elementSizing = _interopRequireDefault(require("../../style/utils/element-s
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const getBorderColor = borderVariant => {
+const getBorderColor = (borderVariant, variant) => {
   switch (borderVariant) {
     case "selected":
       return "var(--colorsUtilityYin100)";
@@ -24,7 +24,14 @@ const getBorderColor = borderVariant => {
     case "info":
       return "var(--colorsSemanticInfo500)";
     default:
-      return "var(--colorsUtilityMajor100)";
+      switch (variant) {
+        case "active":
+          return "var(--colorsActionMajor500)";
+        case "grey":
+          return "var(--colorsUtilityMajor200)";
+        default:
+          return "var(--colorsUtilityMajor100)";
+      }
   }
 };
 const getBorderRadius = roundness => {
@@ -50,7 +57,8 @@ const StyledTile = _styledComponents.default.div`
     ${_styledSystem.space}
 
     box-sizing: border-box;
-    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border: var(--${borderWidth}) solid
+      ${getBorderColor(borderVariant, variant)};
     border-radius: ${getBorderRadius(roundness)};
     --tileBorderRadius: ${getBorderRadius(roundness)};
 
@@ -74,12 +82,10 @@ const StyledTile = _styledComponents.default.div`
 
     ${variant === "active" && (0, _styledComponents.css)`
       background-color: var(--colorsActionMajor025);
-      border-color: var(--colorsActionMajor500);
     `}
 
     ${variant === "grey" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityMajor025);
-      border-color: var(--colorsUtilityMajor200);
     `}
 
     display: flex;

package/package.json

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