Skip to content

Feat: Utility class mixin

Enrique Alcántara requested to merge feat-utility-mixin into master

What does this MR do?

The scope of this MR has changed quite a bit (see related comment). It has been agreed upon by the gitlab-ui working group that manually adding utility classes + mixins is the best approach.

One challenge with this approach is completeness. There are 432 possible combinations of [m,p] * [t,l,b,r,x,y] * [0,1,2,3,4,5,6,7,8] * [xs,sm,md,lg]. This MR does not attempt to add all these combinations, especially because we won't need all these combinations. Instead, this MR provides some initial values so that application contributors can follow the established pattern.

PLEASE NOTE:

We'd like to automate this in the future, but since other MR's are blocked by this we are opting to provide these manually for the time being. To keep this possibility open, it is imperative that we are consistent with classes and mixins added to this file in the future.

API changes included in this library

Declare utilities that can be used to implement component styles using SCSS @mixin and declare a class selector with the same name of the mixin that includes the mixin, i.e.:

@mixin gl-p-0 { padding: map-get($gl-spacing-scale, 0); }
.gl-p-0 { @include gl-p-0; }
Edited by 🤖 GitLab Bot 🤖

Merge request reports

Loading