React95
React95 copied to clipboard
Add Chip component
(See yellow buttons)
Hi @arturbien, can I work on this component? This seems to be interesting and a beginner's friendly start.
The thing that I have noticed is:
- Each tag has an Image and a text.
- A tag can be a multi-texted tab.
The things that I would like to know about the component is:
- Will the size of the tag be variable, i.e. one can change width, height, border-radius & padding of the tag?
- Can a tag have either an Image or text only?
- Can there be multiple images in a Tag like multi-text in tag 1?
- Is there a delete tag option to be present in the tag?
What other features will you like to have in this component?
I hope these questions seem to be genuine to you.
Note: It is my very initial requests so ignore any informality in the request.
Hey @hyperloo and welcome to React95 ❤️ sorry for late response, been busy lately.
First of all let's rename this component to Chip
as it seems to be more popular naming convention.
And let's keep it simple for now. I think basic requirements would be:
- Make it the same size as
Button
component (with the samesize
prop) - Make it accept only text (no need for images/icons right now) passed as
label
prop - When onClick is passed, add
role='button'
andtabindex=0
attributes for accessibility and to make it focusable - Five new colors will have to be added to the theme:
chipBackground
,chipBorderLight
,chipBorderDark
,chipOutline
andchipText
. For now it's okay to add the same colors across every theme. - Border radius is probably going to be like 10px
- All borders and outlines in React95 always have 2px width
As a reference see React95 Button component and Material UI's Chip component: https://material-ui.com/components/chips/#chip
If you need any further help feel free to join our Slack channel (link in the docs) 💪
@arturbien Have a look at this PR which I made earlier. I have made it for the Tag Component. https://github.com/arturbien/React95/pull/251
Should I keep this component and create a new Chip Component.