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

Author: mlaursen

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
         )}

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");
+  });
 });

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");
+  });
 });

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 {

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.

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`