feat(Dropdown): add withReadOnlyStyle prop (#1926)

src/components/Dropdown/Dropdown.jsx

@@ -37,6 +37,7 @@ const Dropdown = forwardRef(
       placeholder,
       disabled,
       readOnly,
+      withReadOnlyStyle,
       onMenuOpen,
       onMenuClose,
       onFocus,
@@ -329,6 +330,7 @@ const Dropdown = forwardRef(
         isClearable={!readOnly && clearable}
         isSearchable={!readOnly && searchable}
         readOnly={readOnly}
+        withReadOnlyStyle={withReadOnlyStyle}
         aria-readonly={readOnly}
         aria-label={overrideAriaLabel}
         aria-details={tooltipContent}

src/components/Dropdown/Dropdown.styles.js

@@ -65,6 +65,16 @@ const readOnlyContainerStyle = readOnly => {
   };
 };
 
+// TODO: unite backgroundColor style with `readOnlyContainerStyle` in next major [breaking]
+const readOnlyStyle = isReadOnly => {
+  if (!isReadOnly) {
+    return {};
+  }
+  return {
+    backgroundColor: getCSSVar("allgrey-background-color")
+  };
+};
+
 const getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {
   delete provided[":active"];
   delete provided.width;
@@ -237,10 +247,11 @@ const menuOpenOpacity = ({ menuIsOpen }) => {
 const singleValue =
   () =>
   (provided, { isDisabled, selectProps }) => {
-    const { readOnly } = selectProps;
+    const { readOnly, withReadOnlyStyle } = selectProps;
     const readOnlyProps = readOnly
       ? {
           ...readOnlyContainerStyle(readOnly),
+          ...readOnlyStyle(withReadOnlyStyle),
           cursor: "text"
         }
       : {};
@@ -290,13 +301,14 @@ const getCenterContentStyle = rtl => {
 
 const valueContainer =
   ({ size, rtl }) =>
-  (provided, { isDisabled }) => ({
+  (provided, { isDisabled, selectProps: { withReadOnlyStyle, readOnly } }) => ({
     ...provided,
     ...getCenterContentStyle(rtl),
     ...getFont(),
     ...getColor(),
     ...getInnerSize(size),
     ...disabledContainerStyle(isDisabled),
+    ...readOnlyStyle(withReadOnlyStyle && readOnly),
     borderRadius: getCSSVar("border-radius-small")
   });
 

src/components/Dropdown/__stories__/dropdown.stories.js

@@ -55,12 +55,16 @@ const dropdownTemplate = props => {
 export const Overview = {
   render: dropdownTemplate.bind({}),
   name: "Overview",
-
   args: {
     placeholder: "Placeholder text here",
     className: "dropdown-stories-styles_spacing"
   },
-
+  parameters: {
+    controls: {
+      // TODO: remove exclusion when prop is removed in next major
+      exclude: ["withReadOnlyStyle"]
+    }
+  },
   play: overviewPlaySuite
 };