feat(chip): added support for noninteractable chips

Closes #1046

Author: mlaursen

packages/chip/src/Chip.tsx

@@ -100,6 +100,14 @@ export interface ChipProps extends ButtonAttributes {
    * `max-width` of the icon.
    */
   disableIconTransition?: boolean;
+
+  /**
+   * Boolean if the chip should render as a non-interactable element (`<span>`)
+   * instead of a button. This can be used to just apply the chip styles.
+   *
+   * @since 2.6.0
+   */
+  noninteractable?: boolean;
 }
 
 const block = bem("rmd-chip");
@@ -127,6 +135,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     contentClassName,
     disableContentWrap = false,
     selectedIcon: propSelectedIcon,
+    noninteractable = false,
     disableIconTransition = false,
     ...props
   },
@@ -135,8 +144,8 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   const { ripples, className, handlers } = useInteractionStates({
     handlers: props,
     className: propClassName,
-    disabled,
-    enablePressedAndRipple: raisable,
+    disabled: disabled || noninteractable,
+    enablePressedAndRipple: raisable && !noninteractable,
   });
 
   let content = children;
@@ -176,14 +185,19 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
 
   const leading = leftIcon && !isHiddenIcon;
   const trailing = rightIcon;
+  const Component = noninteractable ? "span" : "button";
+  const buttonProps = {
+    "aria-pressed": ariaPressed ?? (!!selected || undefined),
+    type: "button",
+    disabled,
+  } as const;
 
   return (
-    <button
+    <Component
+      {...(noninteractable ? {} : buttonProps)}
       {...props}
       {...handlers}
       ref={ref}
-      aria-pressed={ariaPressed ?? (!!selected || undefined)}
-      type="button"
       className={cn(
         block({
           [theme]: true,
@@ -194,10 +208,10 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
           "leading-icon": leading && !trailing,
           "trailing-icon": trailing && !leading,
           surrounded: leading && trailing,
+          noninteractable,
         }),
         className
       )}
-      disabled={disabled}
     >
       <TextIconSpacing
         icon={leftIcon}
@@ -208,7 +222,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
         </TextIconSpacing>
       </TextIconSpacing>
       {ripples}
-    </button>
+    </Component>
   );
 });
 
@@ -234,6 +248,7 @@ if (process.env.NODE_ENV !== "production") {
       selectedThemed: PropTypes.bool,
       children: PropTypes.node,
       selectedIcon: PropTypes.node,
+      noninteractable: PropTypes.bool,
       disableIconTransition: PropTypes.bool,
     };
   } catch (e) {}

packages/chip/src/__tests__/Chip.tsx

@@ -71,4 +71,30 @@ describe("Chip", () => {
     expect(container).toMatchSnapshot();
     expect(getIcon()).toBeNull();
   });
+
+  it("should render as a span when the noninteractable prop is enabled", () => {
+    const props = {
+      "data-testid": "chip",
+      children: "Content",
+    };
+    const { getByTestId, rerender } = render(
+      <Chip {...props} noninteractable />
+    );
+
+    let chip = getByTestId("chip");
+    expect(chip).toBeInstanceOf(HTMLSpanElement);
+    expect(chip).not.toHaveAttribute("aria-pressed");
+    expect(chip).not.toHaveAttribute("type");
+    expect(chip).not.toHaveAttribute("disabled");
+    expect(chip.className).toContain("rmd-chip--noninteractable");
+    expect(chip).toMatchSnapshot();
+
+    rerender(<Chip {...props} />);
+    chip = getByTestId("chip");
+    expect(chip).toBeInstanceOf(HTMLButtonElement);
+    expect(chip).toHaveAttribute("type", "button");
+    expect(chip).not.toHaveAttribute("disabled");
+    expect(chip.className).not.toContain("rmd-chip--noninteractable");
+    expect(chip).toMatchSnapshot();
+  });
 });

packages/chip/src/__tests__/__snapshots__/Chip.tsx.snap

@@ -82,6 +82,39 @@ exports[`Chip should not render the selected icon until the selected prop is tru
 </div>
 `;
 
+exports[`Chip should render as a span when the noninteractable prop is enabled 1`] = `
+<span
+  class="rmd-chip rmd-chip--solid rmd-chip--noninteractable"
+  data-testid="chip"
+>
+  <span
+    class="rmd-chip__content"
+  >
+    Content
+  </span>
+  <span
+    class="rmd-ripple-container"
+  />
+</span>
+`;
+
+exports[`Chip should render as a span when the noninteractable prop is enabled 2`] = `
+<button
+  class="rmd-chip rmd-chip--solid"
+  data-testid="chip"
+  type="button"
+>
+  <span
+    class="rmd-chip__content"
+  >
+    Content
+  </span>
+  <span
+    class="rmd-ripple-container"
+  />
+</button>
+`;
+
 exports[`Chip should render correctly 1`] = `
 <div>
   <button

packages/chip/src/_mixins.scss

@@ -82,6 +82,18 @@
   max-width: 100%;
   position: relative;
 
+  &--noninteractable {
+    @include rmd-states-theme-update-var(hover-color, transparent);
+
+    &:hover {
+      // because the rmd-states-surface mixin uses
+      // `:not(:disabled):not([aria-disabled='true'])`, have to use important or
+      // an even more specific selector
+      // sass-lint:disable no-important
+      cursor: initial !important;
+    }
+  }
+
   &--solid {
     @include rmd-elevation-transition(
       0,

packages/documentation/src/components/Demos/Chip/NoninteractableChips.md

@@ -0,0 +1,22 @@
+import React, { ReactElement } from "react";
+import { Chip } from "@react-md/chip";
+import { Grid } from "@react-md/utils";
+
+export default function NoninteractableChips(): ReactElement {
+  return (
+    <Grid phoneColumns={1} columns={2} wrapOnly>
+      <Chip noninteractable theme="solid">
+        Chip
+      </Chip>
+      <Chip noninteractable theme="outline">
+        Chip
+      </Chip>
+      <Chip noninteractable theme="solid" disabled>
+        Chip
+      </Chip>
+      <Chip noninteractable theme="outline" disabled>
+        Chip
+      </Chip>
+    </Grid>
+  );
+}

packages/documentation/src/components/Demos/Chip/NoninteractableChips.tsx

@@ -14,6 +14,9 @@ import choiceChips from "./ChoiceChips.md";
 import { ActionChips, actionChips } from "./ActionChips";
 import { InputChips, inputChips } from "./InputChips";
 
+import NoninteractableChips from "./NoninteractableChips";
+import noninteractableChips from "./NoninteractableChips.md";
+
 const demos = [
   {
     name: "Simple Chips",
@@ -42,6 +45,11 @@ const demos = [
     description: inputChips,
     children: <InputChips />,
   },
+  {
+    name: "Noninteractable Chips",
+    description: noninteractableChips,
+    children: <NoninteractableChips />,
+  },
 ];
 
 export default function Chip(): ReactElement {