-
Notifications
You must be signed in to change notification settings - Fork 0
IBX-7844: Tag component #62
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
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR implements a new Tag component for the design system, providing a reusable UI element with multiple visual variants and sizes.
- Adds Tag component with comprehensive type system including primary, success, warning, error, and ghost variants
- Implements responsive sizing (medium/small) and icon support functionality
- Integrates styling system with SCSS mixins and comprehensive visual theming
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
File | Description |
---|---|
packages/components/src/components/Tag/index.ts | Exports Tag component and types |
packages/components/src/components/Tag/Tag.types.ts | Defines TagSize, TagType enums and TagProps interface |
packages/components/src/components/Tag/Tag.tsx | Main Tag component implementation with conditional rendering |
packages/components/src/components/Tag/Tag.stories.tsx | Storybook stories for all Tag variants |
packages/assets/src/scss/styles.scss | Imports tags stylesheet |
packages/assets/src/scss/mixins/_tags.scss | Tag-specific SCSS mixins |
packages/assets/src/scss/mixins/_buttons.scss | Refactors button state mixin for reusability |
packages/assets/src/scss/_tags.scss | Complete Tag component styling with variants and themes |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
63e6f04
to
02cbe60
Compare
export const Tag = ({ children, className = '', isDark = false, icon, size = TagSize.Medium, type }: TagProps) => { | ||
const isGhostType = (tagType: TagType | TagGhostType): tagType is TagGhostType => { | ||
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion | ||
return Object.values(TagGhostType).includes(tagType as TagGhostType); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this case, the use of as
to check whether a specific type exists in the enum string cannot be omitted, that's why rule 'no-unsafe-type-assertion' is disabled here
Related PRs:
Description:
For QA:
Documentation: