Skip to content
Permalink
Browse files
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
  • Loading branch information
mlaursen committed Nov 14, 2020
1 parent 06e91ca commit a40b6b3f4b25c5c8e714081ebeb147ccf019ac01
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 1 deletion.
@@ -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
)}
@@ -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");
});
});
@@ -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");
});
});
@@ -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 {
@@ -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.
@@ -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`

0 comments on commit a40b6b3

Please sign in to comment.