lightning icon indicating copy to clipboard operation
lightning copied to clipboard

Consolidate and standardize button components

Open stuartc opened this issue 11 months ago • 1 comments

Currently we have duplicate button implementations across LightningWeb.Components.Common.button/1 and LightningWeb.Components.NewInputs.button/1, leading to inconsistent usage patterns. The Common implementation appears to be legacy code that should be deprecated.

Additionally, several components are extending NewInputs.button with custom classes that should be proper variants instead. For example:

  • Collections component adds custom ring/shadow classes, why?
  • GitHub component adds custom colour classes that could be a "danger" variant

Proposed changes:

  1. Replace Common.button/1 in favour of NewInputs.button/1
  2. Improve tooltip api
  3. Add new variants to NewInputs.button/1 to cover common patterns: - outline/ghost variant (for secondary actions)
    • danger variant (for destructive actions)
    • size variants (to standardize min-widths and padding)
  4. Update all button instances to use appropriate variants instead of custom classes
  5. Document the available variants and their intended usage

This will improve maintainability and ensure consistent button styling across the application.

stuartc avatar Apr 07 '25 12:04 stuartc

From original issue:

"We should standardize buttons, styles, and behavior on Lightning and Thunderbolt. This helps to deliver consistency and eliminate bounces/flashes experienced when buttons are pressed on the app. See below for an example of how varying save buttons cause a bounce effect: https://www.loom.com/share/58feb3af170a42fdbe70a127843bb7cb"

taylordowns2000 avatar Apr 16 '25 12:04 taylordowns2000