search

react95-io / React95

🌈🕹 Windows 95 style UI component library for React
https://react95.io
MIT License
6.68k stars 186 forks source link

Add Chip component #244

Open arturbien opened 3 years ago

arturbien commented 3 years ago

(See yellow buttons)

image

hyperloo commented 3 years ago

Hi @arturbien, can I work on this component? This seems to be interesting and a beginner's friendly start. image

The thing that I have noticed is:

  1. Each tag has an Image and a text.
  2. A tag can be a multi-texted tab.

The things that I would like to know about the component is:

  1. Will the size of the tag be variable, i.e. one can change width, height, border-radius & padding of the tag?
  2. Can a tag have either an Image or text only?
  3. Can there be multiple images in a Tag like multi-text in tag 1?
  4. 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.

arturbien commented 3 years ago

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:

  1. Make it the same size as Button component (with the same size prop)
  2. Make it accept only text (no need for images/icons right now) passed as label prop
  3. When onClick is passed, add role='button' and tabindex=0 attributes for accessibility and to make it focusable
  4. Five new colors will have to be added to the theme: chipBackground, chipBorderLight, chipBorderDark, chipOutline and chipText. For now it's okay to add the same colors across every theme.
  5. Border radius is probably going to be like 10px
  6. 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) 💪

hyperloo commented 3 years ago

@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.