Add transparent buttons using "type" and "emphasis" props

puppetlabs / design-system

A resource for creating user interfaces based on brand, UX, and dev principles

https://puppet.style

Apache License 2.0

18 stars 27 forks source link

Add transparent buttons using "type" and "emphasis" props #315

Open jilliankeenan opened 4 years ago

jilliankeenan commented 4 years ago

What component is this referring to?

Button

We want to add transparent buttons using "type" and "emphasis". See attachment for design spec for updated Button component.

In addition:

Move type="text" to emphasis="text" or emphasis="text-only"
Add a prop for width in order to support full width buttons with width="100%". (It can just set the CSS width with that string.) An alternative would be to add a boolean fullWidth prop.

Note: This will be a breaking change due to "transparent" becoming an emphasis rather than a type, so it should be implemented in the releases/alpha branch.

MaximeKoitsalu commented 4 years ago

Hey @jilliankeenan , can I take a shot at this issue? I'm trying to learn more React 😊

jilliankeenan commented 4 years ago

Absolutely @MaximeKoitsalu Go for it! Feel free to let us know if you have any trouble setting up the development environment.

MaximeKoitsalu commented 4 years ago

Thanks @jilliankeenan, just for clarification, when you write the below message, that is the branch I should create a pull request to, right?

should be implemented in the releases/alpha branch

Edit: I'm not sure I am doing the right steps to setup the development environment.

First following the instructions on the npm page here, I first forked the project. I navigated to design-system/packages/react-components and ran npm install. In this situation npm install failed as seen in this picture.

In my second attempt following the instructions in the Github README.md file here for local sandbox. I first forked the project, navigated to design-system, ran npm install but then got the following error.

I'm on Windows 10 and running bash through VSCode

jilliankeenan commented 4 years ago

@MaximeKoitsalu Thanks for sharing this! - We're looking into this currently, seems to be an issue related to running the puppet design system development environment in Windows.