fix(react-components): fix Chip "deleteIcon" prop type

PeculiarVentures · Feb 27, 2024 · 2ece1a7 · 2ece1a7
1 parent c36169f
commit 2ece1a7
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 8 deletions.
diff --git a/packages/react-components/src/Button/button.test.tsx b/packages/react-components/src/Button/button.test.tsx
@@ -5,8 +5,8 @@ import {
   renderWithWrapper as render,
   screen,
 } from '../test-utils';
-import { Button } from './index';
 import { PlusIcon } from '../icons';
+import { Button } from './index';
 
 describe('<Button />', () => {
   describe('Button render variants', () => {

diff --git a/packages/react-components/src/Checkbox/checkbox.test.tsx b/packages/react-components/src/Checkbox/checkbox.test.tsx
@@ -5,8 +5,8 @@ import {
   userEvent,
   fireEvent,
 } from '../test-utils';
-import { Checkbox } from '../index';
 import { PlusIcon } from '../icons';
+import { Checkbox } from './index';
 
 describe('<Checkbox />', () => {
   describe('Checkbox render variants', () => {

diff --git a/packages/react-components/src/Chip/__snapshots__/chip.test.tsx.snap b/packages/react-components/src/Chip/__snapshots__/chip.test.tsx.snap
@@ -1,5 +1,192 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Chip /> should have custom delete icon 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  font-family: inherit;
+  outline: 0;
+  box-sizing: border-box;
+  border-radius: var(--pv-size-base-3);
+  padding: 0 var(--pv-size-base-2);
+  height: var(--pv-size-base-6);
+  background-color: transparent;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms,box-shadow 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms,box-shadow 200ms;
+  margin: 0 var(--pv-size-base);
+  cursor: default;
+  border: 1px solid transparent;
+  vertical-align: middle;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: var(--pv-color-secondary);
+  color: var(--pv-color-white);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: inherit;
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-2 {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  margin: 0px calc(var(--pv-size-base) * -1) 0 var(--pv-size-base);
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
+  opacity: 0.6;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  opacity: 1;
+}
+
+<div
+    class="emotion-0"
+  >
+    <span
+      class="emotion-1"
+    >
+      Text
+    </span>
+    <svg
+      aria-hidden="true"
+      class="emotion-2"
+      fill="none"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 12.5h12M12 18.5v-12"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Chip /> should have delete icon 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  font-family: inherit;
+  outline: 0;
+  box-sizing: border-box;
+  border-radius: var(--pv-size-base-3);
+  padding: 0 var(--pv-size-base-2);
+  height: var(--pv-size-base-6);
+  background-color: transparent;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms,box-shadow 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms,box-shadow 200ms;
+  margin: 0 var(--pv-size-base);
+  cursor: default;
+  border: 1px solid transparent;
+  vertical-align: middle;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: var(--pv-color-secondary);
+  color: var(--pv-color-white);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: inherit;
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-2 {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  margin: 0px calc(var(--pv-size-base) * -1) 0 var(--pv-size-base);
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
+  opacity: 0.6;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  opacity: 1;
+}
+
+<div
+    class="emotion-0"
+  >
+    <span
+      class="emotion-1"
+    >
+      Text
+    </span>
+    <svg
+      aria-hidden="true"
+      class="emotion-2"
+      fill="none"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M12.671 12l2.665 2.665a.318.318 0 010 .447l-.224.224a.317.317 0 01-.447 0L12 12.671l-2.665 2.665a.317.317 0 01-.448 0l-.224-.224a.318.318 0 010-.447L11.33 12 8.663 9.335a.318.318 0 010-.447l.224-.224a.317.317 0 01.448 0L12 11.329l2.665-2.665a.317.317 0 01.447 0l.224.224a.318.318 0 010 .447L12.671 12z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<Chip /> should pass className 1`] = `
 <DocumentFragment>
   .emotion-0 {

diff --git a/packages/react-components/src/Chip/chip.test.tsx b/packages/react-components/src/Chip/chip.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderWithWrapper as render } from '../test-utils';
+import { PlusIcon } from '../icons';
 import { Chip } from './index';
 
 describe('<Chip />', () => {
@@ -19,6 +20,31 @@ describe('<Chip />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should have delete icon', () => {
+    const { asFragment } = render(
+      <Chip
+        onDelete={() => {}}
+      >
+        Text
+      </Chip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should have custom delete icon', () => {
+    const { asFragment } = render(
+      <Chip
+        deleteIcon={PlusIcon}
+        onDelete={() => {}}
+      >
+        Text
+      </Chip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   describe('variants & colors', () => {
     const variants: Array<React.ComponentProps<typeof Chip>['variant']> = [
       'contained',

diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx
@@ -20,7 +20,7 @@ export interface ChipOwnProps {
   /**
    * Override the default delete icon element. Shown only if `onDelete` is set.
    */
-  deleteIcon?: React.ReactElement;
+  deleteIcon?: React.ElementType<any>;
   /**
    * The variant to use.
    */
@@ -224,7 +224,7 @@ export const Chip = React.forwardRef<any, ChipProps>((props, ref) => {
     return (
       <ChipDeleteIcon
         aria-hidden
-        as={deleteIcon as React.ElementType}
+        as={deleteIcon}
         onClick={handleDeleteClick}
       />
     );

diff --git a/packages/react-components/src/Image/image.test.tsx b/packages/react-components/src/Image/image.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithWrapper as render, screen, fireEvent } from '../test-utils';
-import { Image } from '../index';
+import { Image } from './index';
 
 const src = 'https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60';
 

diff --git a/packages/react-components/src/Radio/radio.test.tsx b/packages/react-components/src/Radio/radio.test.tsx
@@ -5,8 +5,8 @@ import {
   userEvent,
   fireEvent,
 } from '../test-utils';
-import { Radio } from '../index';
 import { PlusIcon } from '../icons';
+import { Radio } from './index';
 
 describe('<Radio />', () => {
   describe('Radio render variants', () => {

diff --git a/packages/react-components/src/TextField/text_field.test.tsx b/packages/react-components/src/TextField/text_field.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithWrapper as render, screen, userEvent } from '../test-utils';
-import { TextField } from '../index';
+import { TextField } from './index';
 
 describe('<TextField />', () => {
   describe('TextField render variants', () => {

diff --git a/packages/react-components/src/Typography/typography.test.tsx b/packages/react-components/src/Typography/typography.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithWrapper as render } from '../test-utils';
-import { Typography } from '../index';
+import { Typography } from './index';
 
 describe('<Typography />', () => {
   it('should render with default styles', () => {