Skip to content

feat(buttons): Add borderless prop and link icon styling to buttons

Taurie Davis requested to merge 836-borderless-icon-variant into master

What does this MR do?

  1. Adds borderless property. This can be used with secondary buttons (text and icon) to remove the border. Applying the borderless property to primary or tertiary buttons has no effect.

The result of this MR means that a borderless option is available for secondary buttons.

Secondary Variant Resting Hover Focus Active
Borderless default text Screen_Shot_2020-08-06_at_10.09.47_AM Screen_Shot_2020-08-06_at_10.09.50_AM Screen_Shot_2020-08-06_at_10.09.53_AM Screen_Shot_2020-08-06_at_10.09.57_AM
Borderless default icon Screen_Shot_2020-08-06_at_10.14.53_AM Screen_Shot_2020-08-06_at_10.15.02_AM Screen_Shot_2020-08-06_at_10.15.05_AM Screen_Shot_2020-08-06_at_10.15.08_AM
Borderless info text Screen_Shot_2020-08-06_at_10.10.09_AM Screen_Shot_2020-08-06_at_10.10.12_AM Screen_Shot_2020-08-06_at_10.10.15_AM Screen_Shot_2020-08-06_at_10.10.18_AM
Borderless info icon Screen_Shot_2020-08-06_at_10.15.15_AM Screen_Shot_2020-08-06_at_10.15.18_AM Screen_Shot_2020-08-06_at_10.15.20_AM Screen_Shot_2020-08-06_at_10.15.23_AM
Borderless success text Screen_Shot_2020-08-06_at_10.10.27_AM Screen_Shot_2020-08-06_at_10.10.31_AM Screen_Shot_2020-08-06_at_10.10.34_AM Screen_Shot_2020-08-06_at_10.10.37_AM
Borderless success icon Screen_Shot_2020-08-06_at_10.15.28_AM Screen_Shot_2020-08-06_at_10.15.32_AM Screen_Shot_2020-08-06_at_10.15.34_AM Screen_Shot_2020-08-06_at_10.15.37_AM
Borderless warning text Screen_Shot_2020-08-06_at_10.10.45_AM Screen_Shot_2020-08-06_at_10.10.48_AM Screen_Shot_2020-08-06_at_10.10.50_AM Screen_Shot_2020-08-06_at_10.10.53_AM
Borderless warning icon Screen_Shot_2020-08-06_at_10.15.42_AM Screen_Shot_2020-08-06_at_10.15.45_AM Screen_Shot_2020-08-06_at_10.15.47_AM Screen_Shot_2020-08-06_at_10.15.50_AM
Borderless danger text Screen_Shot_2020-08-06_at_10.11.02_AM Screen_Shot_2020-08-06_at_10.11.05_AM Screen_Shot_2020-08-06_at_10.11.08_AM Screen_Shot_2020-08-06_at_10.11.11_AM
Borderless danger icon Screen_Shot_2020-08-06_at_10.15.55_AM Screen_Shot_2020-08-06_at_10.15.58_AM Screen_Shot_2020-08-06_at_10.16.01_AM Screen_Shot_2020-08-06_at_10.16.04_AM

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Closes #836 (closed)

Edited by Taurie Davis

Merge request reports