From 2ccfdff83842d5e74496a429a5729e4ab1f0b0ca Mon Sep 17 00:00:00 2001
From: Tal Koren <talkor@gmail.com>
Date: Mon, 5 Feb 2024 15:02:08 +0200
Subject: [PATCH] feat(Dropdown): add withReadOnlyStyle prop (#1926)

---
 src/components/Dropdown/Dropdown.jsx             |  2 ++
 src/components/Dropdown/Dropdown.styles.js       | 16 ++++++++++++++--
 .../Dropdown/__stories__/dropdown.stories.js     |  8 ++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index 1b99091257..f689669cce 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/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}
diff --git a/src/components/Dropdown/Dropdown.styles.js b/src/components/Dropdown/Dropdown.styles.js
index 1dda5ea2e3..216313f085 100644
--- a/src/components/Dropdown/Dropdown.styles.js
+++ b/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")
   });
 
diff --git a/src/components/Dropdown/__stories__/dropdown.stories.js b/src/components/Dropdown/__stories__/dropdown.stories.js
index 60d2af56dd..fbf707ed76 100644
--- a/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/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
 };