Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components): create new Tag component #15441

Merged
merged 4 commits into from
Jun 20, 2024
Merged

feat(components): create new Tag component #15441

merged 4 commits into from
Jun 20, 2024

Conversation

jerader
Copy link
Collaborator

@jerader jerader commented Jun 17, 2024

closes RSQ-84 https://opentrons.atlassian.net/browse/RSQ-84

Overview

This PR creates the Tag component that was added to the design system. Additionally, it deprecates the usage of the basic type in Chip component

Test Plan

Search for Tag in Storybook and look through the different props. Make sure it matches the Figma designs

Changelog

  • create new Tag component folder and create the component and storybook
  • remove basic type from Chip component, story and test
    NOTE: i did not make a test for this component. I think atoms in the components directory like this are not as important to have a test since we can check how it looks/works via the story

Review requests

see test plan

Risk assessment

low

@jerader jerader marked this pull request as ready for review June 17, 2024 19:35
@jerader jerader requested a review from a team as a code owner June 17, 2024 19:35
@jerader jerader requested review from mjhuff, koji, shlokamin, mmencarelli and ncdiehl11 and removed request for a team June 17, 2024 19:35
Copy link
Collaborator

@ncdiehl11 ncdiehl11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good with one nit!

{iconName != null && iconPosition === 'left' ? (
<Icon name={iconName} aria-label={`icon_${text}`} css={ICON_STYLE} />
) : null}
<StyledText css={TEXT_STYLE}>{text}</StyledText>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we use as='h3' to avoid redundancy?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think that the h3 StyledText tag doesn't translate correctly for the ODD so i'd have to override it still with the css prop

@koji
Copy link
Contributor

koji commented Jun 17, 2024

@jerader

Could you add tests for Tag component?

I think need to add Tag to components/src/atoms/index.ts

@jerader jerader requested a review from koji June 17, 2024 20:39
@koji
Copy link
Contributor

koji commented Jun 18, 2024

@jerader
recommend you share the storybook with Mel to get her review.

@jerader
Copy link
Collaborator Author

jerader commented Jun 18, 2024

@jerader recommend you share the storybook with Mel to get her review.

@koji yup! i tagged her and left a comment in the ticket with the storybook link. she was ooo yesterday so i'll ping her today to remind her to take a look

Copy link
Contributor

@koji koji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

once you update focus-within style and Storybook title, this pr is good to go on dev side.

@jerader jerader merged commit b69403e into edge Jun 20, 2024
52 checks passed
@jerader jerader deleted the comp_create-tag branch June 20, 2024 11:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants