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

[jilliankeenan]

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]

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

[jilliankeenan]

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

[MaximeKoitsalu]

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]

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