From a40b6b3f4b25c5c8e714081ebeb147ccf019ac01 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Fri, 13 Nov 2020 17:29:42 -0700
Subject: [PATCH] fix(list): fixed ListItem disabled colors to optionally
 include addons

The new `disabledOpacity` prop will allow for the full ListItem to gain
an opacity value while disabled instead of only setting the color
values. This allows the addons to also be dimmed.

fix #997
---
 packages/list/src/SimpleListItem.tsx           |  3 +++
 packages/list/src/__tests__/ListItem.tsx       | 13 +++++++++++++
 packages/list/src/__tests__/SimpleListItem.tsx | 13 +++++++++++++
 packages/list/src/_mixins.scss                 | 12 +++++++++++-
 packages/list/src/_variables.scss              |  7 +++++++
 packages/list/src/getListItemHeight.ts         | 11 +++++++++++
 6 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/list/src/SimpleListItem.tsx b/packages/list/src/SimpleListItem.tsx
index 3fc7c2265a..323c93a1d8 100644
--- a/packages/list/src/SimpleListItem.tsx
+++ b/packages/list/src/SimpleListItem.tsx
@@ -39,6 +39,7 @@ export const SimpleListItem = forwardRef<HTMLLIElement, SimpleListItemProps>(
       clickable = false,
       onClick,
       disabled = false,
+      disabledOpacity = false,
       ...props
     },
     ref
@@ -66,6 +67,8 @@ export const SimpleListItem = forwardRef<HTMLLIElement, SimpleListItemProps>(
             "three-lines": threeLines,
             clickable,
             disabled: isDisabled,
+            "disabled-color": isDisabled && !disabledOpacity,
+            "disabled-opacity": isDisabled && disabledOpacity,
           }),
           className
         )}
diff --git a/packages/list/src/__tests__/ListItem.tsx b/packages/list/src/__tests__/ListItem.tsx
index 5618d2a4fd..b2f59d0896 100644
--- a/packages/list/src/__tests__/ListItem.tsx
+++ b/packages/list/src/__tests__/ListItem.tsx
@@ -49,4 +49,17 @@ describe("ListItem", () => {
     rerender(<ListItem {...props} tabIndex={0} disabled />);
     expect(item.tabIndex).toBe(0);
   });
+
+  it("should apply the correct disabled classes based on the disabledOpacity prop", () => {
+    const props = { disabled: true, children: "Content" };
+    const { rerender, getByRole } = render(<ListItem {...props} />);
+
+    const item = getByRole("button");
+    expect(item.className).toContain("rmd-list-item--disabled-color");
+    expect(item.className).not.toContain("rmd-list-item--disabled-opacity");
+
+    rerender(<ListItem {...props} disabledOpacity />);
+    expect(item.className).not.toContain("rmd-list-item--disabled-color");
+    expect(item.className).toContain("rmd-list-item--disabled-opacity");
+  });
 });
diff --git a/packages/list/src/__tests__/SimpleListItem.tsx b/packages/list/src/__tests__/SimpleListItem.tsx
index db98e4a8ce..77bf864cce 100644
--- a/packages/list/src/__tests__/SimpleListItem.tsx
+++ b/packages/list/src/__tests__/SimpleListItem.tsx
@@ -39,4 +39,17 @@ describe("SimpleListItem", () => {
     fireEvent.click(item);
     expect(onClick).toBeCalled();
   });
+
+  it("should apply the correct disabled classes based on the disabledOpacity prop", () => {
+    const props = { role: "button", disabled: true, children: "Content" };
+    const { rerender, getByRole } = render(<SimpleListItem {...props} />);
+
+    const item = getByRole("button");
+    expect(item.className).toContain("rmd-list-item--disabled-color");
+    expect(item.className).not.toContain("rmd-list-item--disabled-opacity");
+
+    rerender(<SimpleListItem {...props} disabledOpacity />);
+    expect(item.className).not.toContain("rmd-list-item--disabled-color");
+    expect(item.className).toContain("rmd-list-item--disabled-opacity");
+  });
 });
diff --git a/packages/list/src/_mixins.scss b/packages/list/src/_mixins.scss
index 19fe1eff0b..976184c779 100644
--- a/packages/list/src/_mixins.scss
+++ b/packages/list/src/_mixins.scss
@@ -184,9 +184,19 @@
   }
 
   &--disabled {
+    pointer-events: none;
+  }
+
+  &--disabled-color {
     @include rmd-theme(color, text-disabled-on-background);
+    @include rmd-theme-update-var(
+      text-secondary-on-background,
+      rmd-theme-var(text-disabled-on-background)
+    );
+  }
 
-    pointer-events: none;
+  &--disabled-opacity {
+    opacity: $rmd-list-item-disabled-opacity;
   }
 
   &--link {
diff --git a/packages/list/src/_variables.scss b/packages/list/src/_variables.scss
index 25ce57c543..176c89c895 100644
--- a/packages/list/src/_variables.scss
+++ b/packages/list/src/_variables.scss
@@ -158,6 +158,13 @@ $rmd-list-item-media-large-size: 6.25rem !default;
 /// @type Number
 $rmd-list-item-media-spacing: 1rem !default;
 
+/// The opacity to apply to a list item when it is `disabled` and the
+/// `disabledOpacity` boolean is enabled that will also darken any addons
+/// rendered in the list item.
+///
+/// @type Number
+$rmd-list-item-disabled-opacity: 0.5 !default;
+
 /// A Map of all the "themeable" parts of the list package. Every key in this
 /// map will be used to create a css variable to dynamically update the values
 /// of the icon as needed.
diff --git a/packages/list/src/getListItemHeight.ts b/packages/list/src/getListItemHeight.ts
index 9438e35aa3..f0d7ec4b6c 100644
--- a/packages/list/src/getListItemHeight.ts
+++ b/packages/list/src/getListItemHeight.ts
@@ -18,6 +18,17 @@ export interface SimpleListItemProps
    */
   disabled?: boolean;
 
+  /**
+   * Boolean if the list item should apply an opacity value while disabled
+   * instead of overriding the primary and secondary text colors. Enabling this
+   * will allow for the list item addons to also be dimmed.
+   *
+   * This is configured by the `$rmd-list-item-disabled-opacity` variable.
+   *
+   * Note: This does nothing if the `disabled` prop is not enabled.
+   */
+  disabledOpacity?: boolean;
+
   /**
    * Boolean if the list item should be updated to use the clickable styles to
    * the item. This is really just a pass-down value for the main `ListItem`