From c352982f9a3cb98f15c84661dd3232f0afb4f0ec Mon Sep 17 00:00:00 2001
From: huwshimi <huwshimi@users.noreply.github.com>
Date: Tue, 29 Mar 2022 14:36:02 +1100
Subject: [PATCH] Improvements to the chip component. (#741)

---
 src/components/Chip/Chip.test.tsx             | 49 +++++++++++++++++++
 src/components/Chip/Chip.tsx                  | 21 +++++---
 .../Chip/__snapshots__/Chip.test.tsx.snap     |  2 +
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/src/components/Chip/Chip.test.tsx b/src/components/Chip/Chip.test.tsx
index f1c0d11f1..aa10f4570 100644
--- a/src/components/Chip/Chip.test.tsx
+++ b/src/components/Chip/Chip.test.tsx
@@ -51,6 +51,13 @@ describe("Chip ", () => {
     expect(onClick.mock.calls[0]).toEqual([{ lead: "Owner", value: "Bob" }]);
   });
 
+  it("calls onClick when clicking on the chip", () => {
+    const onClick = jest.fn();
+    const wrapper = mount(<Chip lead="Owner" value="Bob" onClick={onClick} />);
+    wrapper.find(".p-chip").simulate("click");
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
   it("renders positive chip", () => {
     const wrapper = shallow(<Chip appearance="positive" value="positive" />);
     expect(wrapper.prop("className").includes("p-chip--positive")).toBe(true);
@@ -74,6 +81,7 @@ describe("Chip ", () => {
       true
     );
   });
+
   it("renders extra props", () => {
     const wrapper = shallow(
       <Chip
@@ -88,4 +96,45 @@ describe("Chip ", () => {
       wrapper.find(".p-chip--information").first().props()["data-testid"]
     ).toEqual("testID");
   });
+
+  it("passes additional classes", () => {
+    const wrapper = shallow(
+      <Chip className="extra-extra" lead="Owner" value="Bob" />
+    );
+    expect(wrapper.prop("className")).toBe("p-chip extra-extra");
+  });
+
+  it("passes additional classes to a dismissable chip", () => {
+    const wrapper = shallow(
+      <Chip
+        className="extra-extra"
+        lead="Owner"
+        onDismiss={jest.fn()}
+        value="Bob"
+      />
+    );
+    expect(wrapper.prop("className")).toBe("p-chip extra-extra");
+  });
+
+  it("does not submit forms when clicking on the chip", () => {
+    const onSubmit = jest.fn();
+    const wrapper = mount(
+      <form onSubmit={onSubmit}>
+        <Chip lead="Owner" value="Bob" />
+      </form>
+    );
+    wrapper.find(".p-chip").simulate("click");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("does not submit forms when clicking on the dismiss button", () => {
+    const onSubmit = jest.fn();
+    const wrapper = mount(
+      <form onSubmit={onSubmit}>
+        <Chip lead="Owner" onDismiss={jest.fn()} value="Bob" />
+      </form>
+    );
+    wrapper.find(".p-chip__dismiss").simulate("click");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index f13f7d2ed..b45b0c1d0 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -50,7 +50,7 @@ export type Props = PropsWithSpread<
      */
     value: string;
   },
-  HTMLProps<HTMLSpanElement>
+  HTMLProps<HTMLButtonElement>
 >;
 
 const Chip = ({
@@ -89,16 +89,19 @@ const Chip = ({
     </>
   );
 
-  const chipClassName = classNames({
-    [`p-chip--${appearance}`]: !!appearance,
-    "p-chip": !appearance,
-  });
+  const chipClassName = classNames(
+    {
+      [`p-chip--${appearance}`]: !!appearance,
+      "p-chip": !appearance,
+    },
+    props.className
+  );
 
   if (onDismiss) {
     return (
-      <span className={chipClassName} aria-pressed={selected} {...props}>
+      <span {...props} className={chipClassName}>
         {chipContent}
-        <button className="p-chip__dismiss" onClick={onDismiss}>
+        <button className="p-chip__dismiss" onClick={onDismiss} type="button">
           <i className="p-icon--close">Dismiss</i>
         </button>
       </span>
@@ -106,10 +109,12 @@ const Chip = ({
   } else {
     return (
       <button
-        className={chipClassName}
+        {...props}
         aria-pressed={selected}
+        className={chipClassName}
         onClick={onClick}
         onKeyDown={(e) => onKeyDown(e)}
+        type="button"
       >
         {chipContent}
       </button>
diff --git a/src/components/Chip/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__snapshots__/Chip.test.tsx.snap
index 340376452..aecfcc68a 100644
--- a/src/components/Chip/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/Chip/__snapshots__/Chip.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Chip  renders default chip 1`] = `
 <button
   className="p-chip"
   onKeyDown={[Function]}
+  type="button"
 >
   <span
     className="p-chip__value"
@@ -20,6 +21,7 @@ exports[`Chip  renders lead-value chip 1`] = `
 <button
   className="p-chip"
   onKeyDown={[Function]}
+  type="button"
 >
   <span
     className="p-chip__lead"