feat(components): Add static class name with button style

[mskelton]

SUMMARY

Adds a static class name to buttons based on their style (e.g. primary, secondary, etc.) to more easily allow custom CSS styling of buttons.

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[john-bodley]

Thanks @mskelton for the change. Given that we're changing the button class is there expected to be any UI changes? If so would you mind including before/after screenshots.

[mskelton]

@john-bodley This PR adds a new class, it doesn't change or remove any existing classes, so there are no expected UI changes.

[mistercrunch]

Seems superset-frontend/package-lock.json should not be affected by this PR, mind pulling it out?

[rusackas]

Can you explain the use case for the class? We're a little nervous about adding code that serves no purpose to most folks.

If this is to support CSS templates at the dashboard level (where you can add custom CSS) that's one thing... we would just want to annotate the lines of code serving this purpose.

If this is to customize the button for an entire Superset installation, the correct way would be to edit the Emotion based styling in the Button component, rather than adding hooks to layer on additional CSS files. CSS and LESS have been deprecated in favor of Emotion, and we'd rather see changes made on those grounds, or even steer toward more proper Emotion-based theming.

[mskelton]

@rusackas The purpose is to support custom CSS for embedded dashboards. The use case I have is to customize the controls in the dashboard (e.g. buttons, checkbox, dropdowns, etc. to align more closely with the app we are embedding superset in. Most controls I'm able to use class names from the Ant components (e.g. .ant-menu-item), but buttons are styled differently based on the style, however there isn't an associated class to allow me to control that.

Happy to add a comment to the line explaining the purpose of the class name.

[mskelton]

@mistercrunch The package-lock.json was committed by mistake, I've reverted it.

[mistercrunch]

LGTM

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7fccea1) 69.04% compared to head (165dfe9) 69.07%.
Report is 179 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #26639      +/-   ##
==========================================
+ Coverage   69.04%   69.07%   +0.02%     
==========================================
  Files        1931     1932       +1     
  Lines       75327    78860    +3533     
  Branches     8429     9511    +1082     
==========================================
+ Hits        52013    54475    +2462     
- Misses      21167    22056     +889     
- Partials     2147     2329     +182     

Flag	Coverage Δ
javascript	57.47% <ø> (+0.98%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rusackas]

closing/reopening to kick CI.