feat: support new chip variants (read-only, icon, badged), deprecate StatusLabel (#1217)

Author: jmuzina

src/components/Chip/Chip.stories.tsx

@@ -43,3 +43,43 @@ export const Dismissible: Story = {
 
   name: "Dismissible",
 };
+
+export const Dense: Story = {
+  render: () => <Chip lead="Owner" value="Bob" isDense={true} />,
+  name: "Dense",
+};
+
+export const Inline: Story = {
+  render: () => (
+    <p>
+      This is text with an inline{" "}
+      <Chip value="chip" isDense={true} isInline={true} />
+    </p>
+  ),
+  name: "Inline",
+};
+
+export const ReadOnly: Story = {
+  render: () => <Chip lead="Owner" value="Bob" isReadOnly={true} />,
+  name: "Read-only",
+};
+
+export const WithIcon: Story = {
+  render: () => <Chip value="Users" iconName="user" />,
+  name: "With Icon",
+};
+
+export const WithBadge: Story = {
+  render: () => (
+    <Chip
+      lead="Owner"
+      value="Bob"
+      badge={
+        <span className="p-badge" aria-label="More than 2.5 billion items">
+          2.5B
+        </span>
+      }
+    />
+  ),
+  name: "With Badge",
+};

src/components/Chip/Chip.test.tsx

@@ -107,6 +107,21 @@ describe("Chip ", () => {
     expect(screen.getByTestId("chip")).toHaveClass("p-chip--information");
   });
 
+  it("renders dense chip", () => {
+    render(<Chip data-testid="chip" isDense={true} value="dense" />);
+    expect(screen.getByTestId("chip")).toHaveClass("is-dense");
+  });
+
+  it("renders inline chip", () => {
+    render(<Chip data-testid="chip" isInline={true} value="inline" />);
+    expect(screen.getByTestId("chip")).toHaveClass("is-inline");
+  });
+
+  it("renders readonly chip", () => {
+    render(<Chip data-testid="chip" isReadOnly={true} value="readonly" />);
+    expect(screen.getByTestId("chip")).toHaveClass("is-readonly");
+  });
+
   it("renders extra props", () => {
     render(
       <Chip
@@ -120,6 +135,29 @@ describe("Chip ", () => {
     expect(screen.getByTestId("chip")).toBeDisabled();
   });
 
+  it("renders icon chip", () => {
+    render(<Chip data-testid="chip" iconName="user" value="Users" />);
+    const chip = screen.getByTestId("chip");
+    // Icons don't have roles (they are decorative), so we need to use query selector
+    const icon = chip.querySelector(".p-icon--user");
+    expect(icon).toBeInTheDocument();
+  });
+
+  it("renders chip with badge", () => {
+    render(
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        value="Bob"
+        badge={<span className="p-badge">1</span>}
+      />,
+    );
+
+    const chip = screen.getByTestId("chip");
+    const badge = within(chip).getByText("1");
+    expect(badge).toBeInTheDocument();
+  });
+
   it("passes additional classes", () => {
     render(
       <Chip
@@ -177,4 +215,54 @@ describe("Chip ", () => {
     await userEvent.click(dismissButton);
     expect(onSubmit).not.toHaveBeenCalled();
   });
+
+  it("does not render a dismiss button when isReadOnly is true", () => {
+    const onDismiss = jest.fn();
+    render(
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        value="Bob"
+        isReadOnly={true}
+        onDismiss={onDismiss}
+      />,
+    );
+    const chip = screen.getByTestId("chip");
+
+    const dismissButton = within(chip).queryByRole("button", {
+      name: Label.Dismiss,
+    });
+    expect(dismissButton).not.toBeInTheDocument();
+  });
+
+  it("does not call onClick when isReadOnly is true", async () => {
+    const onClick = jest.fn();
+    render(
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        onClick={onClick}
+        value="Bob"
+        isReadOnly={true}
+      />,
+    );
+    await userEvent.click(screen.getByTestId("chip"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("cannot be focused when isReadOnly is true", async () => {
+    const onClick = jest.fn();
+    render(
+      <Chip
+        data-testid="chip"
+        lead="Owner"
+        onClick={onClick}
+        value="Bob"
+        isReadOnly={true}
+      />,
+    );
+    const chip = screen.getByTestId("chip");
+    await userEvent.tab();
+    expect(chip).not.toHaveFocus();
+  });
 });

src/components/Chip/Chip.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { highlightSubString } from "../../utils";
 import type { KeyboardEvent, MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "types";
 import classNames from "classnames";
+import { ICONS } from "../Icon";
 
 export enum Label {
   Dismiss = "Dismiss",
@@ -22,6 +23,29 @@ export type Props = PropsWithSpread<
      */
     appearance?: ValueOf<typeof ChipType>;
 
+    /**
+     * Whether the chip is read-only.
+     * If true, the chip will not be interactive.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A badge to display on the chip.
+     */
+    badge?: ReactNode;
+    /**
+     * The name of an icon to display on the chip.
+     */
+    iconName?: ValueOf<typeof ICONS> | string;
+    /**
+     * Whether the chip is dense.
+     * Reduces the height of the chip by removing padding.
+     */
+    isDense?: boolean;
+    /**
+     * Whether the chip is inline.
+     * If true, the chip will be displayed inline with other content (such as text).
+     */
+    isInline?: boolean;
     /**
      * The lead for the chip.
      */
@@ -70,6 +94,11 @@ const Chip = ({
   quoteValue,
   selected,
   subString = "",
+  isReadOnly = false,
+  isDense = false,
+  isInline = false,
+  iconName,
+  badge,
   value,
   ...props
 }: Props): React.JSX.Element => {
@@ -88,25 +117,36 @@ const Chip = ({
 
   const chipContent = (
     <>
+      {iconName && <i className={`p-icon--${iconName}`} />}
       {lead && <span className="p-chip__lead">{lead.toUpperCase()}</span>}
       <span
         className="p-chip__value"
         dangerouslySetInnerHTML={{
           __html: quoteValue ? `'${chipValue}'` : chipValue,
         }}
       />
+      {badge && badge}
     </>
   );
 
   const chipClassName = classNames(
     {
       [`p-chip--${appearance}`]: !!appearance,
       "p-chip": !appearance,
+      "is-dense": isDense,
+      "is-readonly": isReadOnly,
+      "is-inline": isInline,
     },
     props.className,
   );
 
-  if (onDismiss) {
+  if (isReadOnly) {
+    return (
+      <span {...props} className={chipClassName}>
+        {chipContent}
+      </span>
+    );
+  } else if (onDismiss) {
     return (
       <span {...props} className={chipClassName}>
         {chipContent}

src/components/StatusLabel/StatusLabel.tsx

@@ -35,8 +35,8 @@ export type Props = PropsWithSpread<
 
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 const StatusLabel = ({
   appearance,