[major] Reimplement Chip component #2431
Conversation
…ariants of the chip
packages/lib/src/chip/Chip.test.tsx
Outdated
| const { queryByRole } = render(<DxcChip label="Chip" prefix={{ color: "primary" }} size="small" />); | ||
| test("Chip doesn't render with avatar and without label", () => { | ||
| const { queryByRole } = render(<DxcChip prefix={{ color: "primary" }} />); | ||
| const avatar = queryByRole("img", { hidden: true }); |
There was a problem hiding this comment.
Does the chip component have an img role?
There was a problem hiding this comment.
No, in this test we are checking that the Chip doesn't render when it doesn't have a label but has an avatar as prefix
There was a problem hiding this comment.
But the test should check that there is no chip and not that there is not an img role element.
Also I do not really see the point in this test since we cover this scenario already with typing, we are even receiving an error in test itself.
There was a problem hiding this comment.
Not all the users are using typescript. But if you think it is better, I can remove this test.
There was a problem hiding this comment.
But we are using typescript in our tests.
packages/lib/src/chip/Chip.test.tsx
Outdated
| const onClick = jest.fn(); | ||
| const { getByText, getByRole } = render(<DxcChip label="Chip" onClick={onClick} />); | ||
| expect(getByText("Chip")).toBeTruthy(); | ||
| fireEvent.click(getByRole("button")); |
There was a problem hiding this comment.
The priority should be to try to access by text before accessing by role.
apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
Outdated
Show resolved
Hide resolved
apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
Outdated
Show resolved
Hide resolved
apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
Outdated
Show resolved
Hide resolved
| <td>If true, the component will be disabled.</td> | ||
| <td> | ||
| <TableCode>false</TableCode> | ||
| Text to be placed on the chip. When using an avatar as prefix, the label is required to ensure proper |
There was a problem hiding this comment.
It is also mandatory on dismissible mode.
| Value of the <Code>tabindex</Code> attribute applied to both the component and the prefix and suffix icons | ||
| when a function is given. | ||
| Value of the <Code>tabindex</Code> attribute applied to the component when mode is{" "} | ||
| <Code>"selectable"</Code> and clear icon when mode is <Code>"dismissible"</Code>. when a function is |
There was a problem hiding this comment.
Remove "when a function is given."
| <ComponentHeading name="Chip" /> | ||
| <DxcParagraph> | ||
| A chip is a compact element used to label, filter or represent pieces of information within an interface. | ||
| A chip is a compact element used to label, filter or, represent pieces of information within an interface. |
There was a problem hiding this comment.
The comma should be before the or
…lanation to disabled prop condition.
2 participants
Checklist
(Check off all the items before submitting)
/libdirectory./websiteas needed.Purpose
Reimplement Chip component based on the new design