Components: remove global CSS reset in button

[simison]

Changes proposed in this Pull Request

Remove button CSS reset from the button component and add it to Calypso CSS reset stylesheet.

I looked at each reset rule separately —

Needed

• background: this reset is needed in the component. Only related style .button sets is background-color.

Not needed

• border: the shorthand sets border-width, border-style, and border-color and each of those already is in the .button. Should this still be included in case someone removes one of those in the future?

Were already in .button and can be removed as duplicate

• outline
• padding
• font-size
• -webkit-appearance
• appearance
• vertical-align

We cannot use all:unset rule here since it lacks IE support: https://developer.mozilla.org/en-US/docs/Web/CSS/all#Browser_compatibility :-(

Testing instructions

• Confirm Button components don't change appearance across Calypso
• Confirm <button> elements without .button class don't change
• Lastly, check http://calypso.localhost:3000/devdocs/design/button

[matticbot]

Test live: https://calypso.live/?branch=update/components-button-css-reset

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[jsnajdr]

This reset style is needed to make <button> elements unstyled by default, and make them look as close to a <div> as possible.

Removing it breaks a lot of places where we use <button> to create accessible clickable things that don't look like a classic button:

Media Library Items: (notice the unwanted border)

Site Icon: (broken InfoPopover icon and clickable site icon image)

Close buttons in Notices:

Change Username link in Login:

A better solution would be to move the reset to the reset.scss stylesheet. It's really a reset rather than styling specific to Calypso design.

[simison]

Thanks for having a look Jarda! Yepp, I realized the same yesterday, only set this ready for review little too early. 😁

Fixed!

I'd leave background reset directly in the component as well since it's good to be defensive in re-usable components in unknown environments.

stale

[ockham]

This appears to be working well for me.

I modified the Changelog a bit (see) and asked one question.

All in all, looking good to 🚢

[simison]

Here's a follow-up PR to further re-work some of the button CSS: #37103