Improvements to the chip component. (#741)

canonical · Mar 29, 2022 · c352982 · c352982
1 parent ca8ec96
commit c352982
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git 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
@@ -50,7 +50,7 @@ export type Props = PropsWithSpread<
      */
     value: string;
   },
-  HTMLProps<HTMLSpanElement>
+  HTMLProps<HTMLButtonElement>
 >;
 
 const Chip = ({
@@ -89,27 +89,32 @@ 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>
     );
   } 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
@@ -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"