Add gap utility classes - #2281
Merged
Merged
Conversation
PolariTOON
requested review from
JF-Cozy,
Ldoppea and
Merkur39
as code owners
November 4, 2022 10:16
BundleMonFiles updated (2)
Unchanged files (1)
Total files change +1.31KB +3.38% Unchanged groups (1)
Final result: ✅ View report in BundleMon website ➡️ |
Collaborator
|
Partons sur les composants Stack ou Grid pour gérer ces cas |
zatteo
force-pushed
the
feat/gap-utilities
branch
from
July 29, 2026 08:12
089729a to
76d015a
Compare
Collaborator
|
a few moment later... ⏳ around 4 years 🤣 |
JF-Cozy
approved these changes
Jul 29, 2026
| .u-g-auto - Auto gaps in both directions | ||
| .u-g-0 - No gaps in both directions | ||
| .u-g-half - Gaps in both directions with half a line (8px) | ||
| .u-g-1 - Gaps in both directions with 1 line (16px) |
Collaborator
There was a problem hiding this comment.
don't know if u-g- is clearer than u-gap- . I assume with u-g we copy margin/padding approach 🤔
Member
There was a problem hiding this comment.
Yes it is the purpose. Actually everything is copy/pasted from margin/padding except we have only vertical/horizontal and auto is replaced by normal.
Collaborator
There was a problem hiding this comment.
commit should be squashed, you know it ;)
zatteo
force-pushed
the
feat/gap-utilities
branch
from
July 29, 2026 08:43
504eef4 to
ce5fae2
Compare
|
🎉 This PR is included in version 140.6.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 30, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 31, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
doubleface
added a commit
to linagora/twake-drive
that referenced
this pull request
Jul 31, 2026
Add gap utilities and fix iframe breakpoint targeting cozy-ui 140.5.2 → 141.0.0 - cozy/cozy-ui#2281 - cozy/cozy-ui#2950
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
We often need to put some regular spacing between elements. I learned there are the
u-stack-*classes that basically allow that, but :At the end, it seems we don't really use these classes but rather margin utility classes on each element.
As we often are in flex contexts, i propose adding new gap utility classes that do not have these limiations and allow to add gutters between child nodes (not elements) of a flex element by declaring them only at a single location.
Gaps can also be used in grid contexts and multi-column layouts, and eventually will likely be compatible with subgrids, masonry layouts, table layouts, multi-row layouts...
Demo link: https://polaritoon.github.io/cozy-ui/styleguide/section-utilities.html#kssref-utilities-gaps