Skip to content

feat(css): Add missing sm margin and fix class order issue

Zack Cuddy requested to merge zcuddy-add-missing-utilities into master

What does this MR do?

Need for classes exposed as part of: gitlab!36867 (comment 380129940)

  1. Adds gl-sm-mx-0 => Remove horizontal margin after sm breakpoint.

  2. The order of responsive classes was causing a bug when trying to apply gl-sm-w-auto in tandem with gl-w-full. Since gl-w-full was lower in the file than the breakpoint class, it was always overridden. Then problem was unfixable as the !important classes do not currently generate for responsive classes. See: #871 (closed)

Issue: Screen_Shot_2020-07-15_at_1.54.27_PM

I believe having the responsive classes after all the static classes should remedy this issue. I also checked and there are currently no uses cases of gl-sm-w-auto in GitLab.org, Custom portal, or Status page:

No Uses
Customer Portal Screen_Shot_2020-07-16_at_9.05.44_AM
Status Page Screen_Shot_2020-07-16_at_9.06.16_AM
GitLab.org Screen_Shot_2020-07-16_at_9.06.44_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.
Edited by Zack Cuddy

Merge request reports

Loading