@thecb/components 6.0.0 → 6.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -1,7 +1,11 @@
 import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
 import { Box, Stack } from "../layouts";
 import Text from "../text";
-import { noop } from "../../../util/general";
+import {
+  noop,
+  inputDisabledStyle,
+  inputPlaceholderTextStyle
+} from "../../../util/general";
 import DropdownIcon from "./DropdownIcon";
 import styled from "styled-components";
 // support for Array.prototype.at() in older browsers
@@ -12,7 +16,8 @@ import {
   GREY_CHATEAU,
   STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  CHARADE_GREY
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -300,10 +305,9 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         extraStyles={
-          disabled &&
-          `color: #6e727e;
-            background-color: #f7f7f7;
-            pointer-events: none;`
+          disabled
+            ? `${inputPlaceholderTextStyle}${inputDisabledStyle}`
+            : inputPlaceholderTextStyle
         }
         hoverStyles={`background-color: ${themeValues.hoverColor};`}
         isOpen={isOpen}

package/src/util/general.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
+import { CHARADE_GREY } from "../constants/colors";
 
 export const noop = () => {};
 
@@ -96,3 +97,23 @@ export const screenReaderOnlyStyle = `
   height: 1px;
   overflow: hidden;
 `;
+
+export const inputPlaceholderTextStyle = `
+  ::-webkit-input-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-moz-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-ms-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::placeholder {
+    color: ${CHARADE_GREY};
+  }
+`;
+export const inputDisabledStyle = `
+  color: #6e727e;
+  background-color: #f7f7f7;
+  pointer-events: none;
+`;