Skip to content

fix(buttons): Correct dropdown button styles for secondary and tertiary categories

Taurie Davis requested to merge split-dropdown-button-styles into master

What does this MR do?

Dropdown button

category variant before after
primary default Screen_Shot_2020-10-20_at_5.51.12_PM Screen_Shot_2020-10-20_at_5.51.05_PM
secondary default Screen_Shot_2020-10-20_at_5.43.12_PM Screen_Shot_2020-10-20_at_5.42.03_PM
tertiary default Screen_Shot_2020-10-20_at_5.43.19_PM Screen_Shot_2020-10-20_at_5.42.12_PM
primary dashed Screen_Shot_2020-10-20_at_5.52.06_PM Screen_Shot_2020-10-20_at_5.52.10_PM
secondary dashed Screen_Shot_2020-10-20_at_5.52.15_PM Screen_Shot_2020-10-20_at_5.52.21_PM
tertiary dashed Screen_Shot_2020-10-20_at_5.52.26_PM Screen_Shot_2020-10-20_at_5.52.31_PM
primary info Screen_Shot_2020-10-20_at_5.53.25_PM Screen_Shot_2020-10-20_at_5.53.32_PM
secondary info Screen_Shot_2020-10-20_at_5.53.38_PM Screen_Shot_2020-10-20_at_5.53.43_PM
tertiary info Screen_Shot_2020-10-20_at_5.53.49_PM Screen_Shot_2020-10-20_at_5.53.54_PM
primary success Screen_Shot_2020-10-20_at_5.54.41_PM Screen_Shot_2020-10-20_at_5.54.47_PM
secondary success Screen_Shot_2020-10-20_at_5.54.53_PM Screen_Shot_2020-10-20_at_5.54.57_PM
tertiary success Screen_Shot_2020-10-20_at_5.55.25_PM Screen_Shot_2020-10-20_at_5.55.29_PM
primary warning Screen_Shot_2020-10-20_at_5.56.14_PM Screen_Shot_2020-10-20_at_5.56.20_PM
secondary warning Screen_Shot_2020-10-20_at_5.56.26_PM Screen_Shot_2020-10-20_at_5.56.32_PM
tertiary warning Screen_Shot_2020-10-20_at_5.56.37_PM Screen_Shot_2020-10-20_at_5.56.42_PM
primary danger Screen_Shot_2020-10-20_at_5.56.48_PM Screen_Shot_2020-10-20_at_5.56.54_PM
secondary danger Screen_Shot_2020-10-20_at_5.56.59_PM Screen_Shot_2020-10-20_at_5.57.05_PM
tertiary danger Screen_Shot_2020-10-20_at_5.57.10_PM Screen_Shot_2020-10-20_at_5.57.16_PM
primary link Screen_Shot_2020-10-20_at_5.58.36_PM Screen_Shot_2020-10-20_at_5.58.43_PM
secondary link Screen_Shot_2020-10-20_at_5.58.47_PM Screen_Shot_2020-10-20_at_5.58.51_PM
tertiary link Screen_Shot_2020-10-20_at_5.58.56_PM Screen_Shot_2020-10-20_at_5.59.00_PM

Dropdown icon button

category variant before after
primary default Screen_Shot_2020-10-20_at_6.03.44_PM Screen_Shot_2020-10-20_at_6.03.49_PM
secondary default Screen_Shot_2020-10-20_at_6.03.54_PM Screen_Shot_2020-10-20_at_6.03.58_PM
tertiary default Screen_Shot_2020-10-20_at_6.04.03_PM Screen_Shot_2020-10-20_at_6.04.08_PM
primary dashed Screen_Shot_2020-10-20_at_6.04.13_PM Screen_Shot_2020-10-20_at_6.04.19_PM
secondary dashed Screen_Shot_2020-10-20_at_6.04.23_PM Screen_Shot_2020-10-20_at_6.04.27_PM
tertiary dashed Screen_Shot_2020-10-20_at_6.04.31_PM Screen_Shot_2020-10-20_at_6.04.36_PM
primary info Screen_Shot_2020-10-20_at_6.04.42_PM Screen_Shot_2020-10-20_at_6.04.48_PM
secondary info Screen_Shot_2020-10-20_at_6.04.53_PM Screen_Shot_2020-10-20_at_6.04.57_PM
tertiary info Screen_Shot_2020-10-20_at_6.05.02_PM Screen_Shot_2020-10-20_at_6.05.07_PM
primary success Screen_Shot_2020-10-20_at_6.05.13_PM Screen_Shot_2020-10-20_at_6.05.19_PM
secondary success Screen_Shot_2020-10-20_at_6.05.24_PM Screen_Shot_2020-10-20_at_6.05.33_PM
tertiary success Screen_Shot_2020-10-20_at_6.05.37_PM Screen_Shot_2020-10-20_at_6.05.42_PM
primary warning Screen_Shot_2020-10-20_at_6.05.49_PM Screen_Shot_2020-10-20_at_6.05.55_PM
secondary warning Screen_Shot_2020-10-20_at_6.06.00_PM Screen_Shot_2020-10-20_at_6.06.04_PM
tertiary warning Screen_Shot_2020-10-20_at_6.06.09_PM Screen_Shot_2020-10-20_at_6.06.14_PM
primary danger Screen_Shot_2020-10-20_at_6.06.24_PM Screen_Shot_2020-10-20_at_6.06.27_PM
secondary danger Screen_Shot_2020-10-20_at_6.06.31_PM Screen_Shot_2020-10-20_at_6.06.35_PM
tertiary danger Screen_Shot_2020-10-20_at_6.06.40_PM Screen_Shot_2020-10-20_at_6.06.45_PM
primary link Screen_Shot_2020-10-20_at_6.06.53_PM Screen_Shot_2020-10-20_at_6.06.59_PM
secondary link Screen_Shot_2020-10-20_at_6.07.03_PM Screen_Shot_2020-10-20_at_6.07.07_PM
tertiary link Screen_Shot_2020-10-20_at_6.07.11_PM Screen_Shot_2020-10-20_at_6.07.15_PM

Dropdown split button

category variant before after
primary default Screen_Shot_2020-10-20_at_6.15.03_PM Screen_Shot_2020-10-22_at_8.45.48_AM
secondary default Screen_Shot_2020-10-20_at_6.15.07_PM Screen_Shot_2020-10-22_at_8.46.02_AM
tertiary default Screen_Shot_2020-10-20_at_6.15.11_PM Screen_Shot_2020-10-22_at_8.46.05_AM
primary dashed Screen_Shot_2020-10-20_at_6.15.16_PM Screen_Shot_2020-10-22_at_8.46.11_AM
secondary dashed Screen_Shot_2020-10-20_at_6.15.21_PM Screen_Shot_2020-10-22_at_8.46.15_AM
tertiary dashed Screen_Shot_2020-10-20_at_6.15.24_PM Screen_Shot_2020-10-22_at_8.46.18_AM
primary info Screen_Shot_2020-10-20_at_6.15.30_PM Screen_Shot_2020-10-22_at_8.46.24_AM
secondary info Screen_Shot_2020-10-20_at_6.15.36_PM Screen_Shot_2020-10-22_at_8.46.27_AM
tertiary info Screen_Shot_2020-10-20_at_6.15.40_PM Screen_Shot_2020-10-22_at_8.46.31_AM
primary success Screen_Shot_2020-10-20_at_6.15.45_PM Screen_Shot_2020-10-22_at_8.46.36_AM
secondary success Screen_Shot_2020-10-20_at_6.15.50_PM Screen_Shot_2020-10-22_at_8.46.40_AM
tertiary success Screen_Shot_2020-10-20_at_6.15.54_PM Screen_Shot_2020-10-22_at_8.46.44_AM
primary warning Screen_Shot_2020-10-20_at_6.16.00_PM Screen_Shot_2020-10-22_at_8.46.50_AM
secondary warning Screen_Shot_2020-10-20_at_6.16.05_PM Screen_Shot_2020-10-22_at_8.46.53_AM
tertiary warning Screen_Shot_2020-10-20_at_6.16.09_PM Screen_Shot_2020-10-22_at_8.46.57_AM
primary danger Screen_Shot_2020-10-20_at_6.16.15_PM Screen_Shot_2020-10-22_at_8.47.02_AM
secondary danger Screen_Shot_2020-10-20_at_6.16.19_PM Screen_Shot_2020-10-22_at_8.47.06_AM
tertiary danger Screen_Shot_2020-10-20_at_6.16.23_PM Screen_Shot_2020-10-22_at_8.47.10_AM
primary link Screen_Shot_2020-10-20_at_6.16.29_PM Screen_Shot_2020-10-22_at_8.47.16_AM
secondary link Screen_Shot_2020-10-20_at_6.16.33_PM Screen_Shot_2020-10-22_at_8.47.20_AM
tertiary link Screen_Shot_2020-10-20_at_6.16.37_PM Screen_Shot_2020-10-22_at_8.47.25_AM

Dropdown split icon button

category variant before after
primary default Screen_Shot_2020-10-20_at_6.19.05_PM Screen_Shot_2020-10-22_at_8.47.30_AM
secondary default Screen_Shot_2020-10-20_at_6.19.09_PM Screen_Shot_2020-10-22_at_8.47.34_AM
tertiary default Screen_Shot_2020-10-20_at_6.19.12_PM Screen_Shot_2020-10-22_at_8.47.38_AM
primary dashed Screen_Shot_2020-10-20_at_6.19.18_PM Screen_Shot_2020-10-22_at_8.47.43_AM
secondary dashed Screen_Shot_2020-10-20_at_6.19.22_PM Screen_Shot_2020-10-22_at_8.47.47_AM
tertiary dashed Screen_Shot_2020-10-20_at_6.19.26_PM Screen_Shot_2020-10-22_at_8.47.51_AM
primary info Screen_Shot_2020-10-20_at_6.19.33_PM Screen_Shot_2020-10-22_at_8.47.57_AM
secondary info Screen_Shot_2020-10-20_at_6.19.37_PM Screen_Shot_2020-10-22_at_8.48.01_AM
tertiary info Screen_Shot_2020-10-20_at_6.19.41_PM Screen_Shot_2020-10-22_at_8.48.04_AM
primary success Screen_Shot_2020-10-20_at_6.19.46_PM Screen_Shot_2020-10-22_at_8.48.09_AM
secondary success Screen_Shot_2020-10-20_at_6.19.50_PM Screen_Shot_2020-10-22_at_8.48.12_AM
tertiary success Screen_Shot_2020-10-20_at_6.19.54_PM Screen_Shot_2020-10-22_at_8.48.15_AM
primary warning Screen_Shot_2020-10-20_at_6.20.00_PM Screen_Shot_2020-10-22_at_8.48.20_AM
secondary warning Screen_Shot_2020-10-20_at_6.20.04_PM Screen_Shot_2020-10-22_at_8.48.23_AM
tertiary warning Screen_Shot_2020-10-20_at_6.20.08_PM Screen_Shot_2020-10-22_at_8.48.27_AM
primary danger Screen_Shot_2020-10-20_at_6.20.13_PM Screen_Shot_2020-10-22_at_8.48.31_AM
secondary danger Screen_Shot_2020-10-20_at_6.20.17_PM Screen_Shot_2020-10-22_at_8.48.36_AM
tertiary danger Screen_Shot_2020-10-20_at_6.20.20_PM Screen_Shot_2020-10-22_at_8.48.39_AM
primary link Screen_Shot_2020-10-20_at_6.20.25_PM Screen_Shot_2020-10-22_at_8.48.44_AM
secondary link Screen_Shot_2020-10-20_at_6.20.29_PM Screen_Shot_2020-10-22_at_8.48.48_AM
tertiary link Screen_Shot_2020-10-20_at_6.20.32_PM Screen_Shot_2020-10-22_at_8.48.51_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.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Taurie Davis

Merge request reports