fix(Tag): New variants, Icon only, docs update, improvements #1011
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
marcinsawicki
changed the title
VadymBezpalko
approved these changes
Feb 22, 2024
Comment on lines
24
to
44
| const kinds: Array<TagKind> = [ | ||
| 'default', | ||
| 'info', | ||
| 'warning', | ||
| 'success', | ||
| 'error', | ||
| 'purple', | ||
| 'black', | ||
| 'gray', | ||
| 'gradient01', | ||
| 'gradient02', | ||
| 'gradient03', | ||
| 'gradient04', | ||
| 'gradient05', | ||
| 'gradient06', | ||
| 'gradient07', | ||
| 'gradient08', | ||
| 'gradient09', | ||
| 'gradient10', | ||
| 'gradient11', | ||
| ]; |
There was a problem hiding this comment.
I think we can move it to constants and then, based on this, we can generate our type TagKind. Thanks to this we will always have the stories synchronized automatically.
| @@ -10,14 +13,90 @@ import * as Stories from './Tag.stories'; | |||
|
|
|||
| ## Intro <a id="Intro" /> | |||
|
|
|||
| <Canvas of={Stories.Default} sourceState="none" /> | |||
| #### Basic implementation example | |||
There was a problem hiding this comment.
I think we can make the headings with h3
Suggested change
| #### Basic implementation example | |
| ### Basic implementation example |
| <Tag>Example tag</Tag> | ||
| ``` | ||
|
|
||
| #### Using tag with icons |
There was a problem hiding this comment.
Suggested change
| #### Using tag with icons | |
| ### Using tag with icons |
| </Tag> | ||
| ``` | ||
|
|
||
| #### Using tag with close button |
There was a problem hiding this comment.
Suggested change
| #### Using tag with close button | |
| ### Using tag with close button |
| </Tag> | ||
| ``` | ||
|
|
||
| #### Using tag with icon only <a id="IconOnly" /> |
There was a problem hiding this comment.
Suggested change
| #### Using tag with icon only <a id="IconOnly" /> | |
| ### Using tag with icon only <a id="IconOnly" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves: #885
Description
Improving
Tagcomponent with:iconOnlyflag (check docs how to use it correctly)kindvariantsdismissibleOnHoverflag to show the close button on component hoverdismissibleflag is now deprecated (but still supported), as passingonRemovewill be responsible for showing the close button (in the old implementation you had to passonRemoveanddismissibleto display the close button)Additionally, I cleaned up the styles and some component code in our current target direction.
Storybook
https://feature-885--613a8e945a5665003a05113b.chromatic.com/?path=/docs/components-tag--docs
Checklist
Obligatory:
livechat/design-system)