-
-
Notifications
You must be signed in to change notification settings - Fork 7.1k
refactor: grid system overhaul #21500
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: dev
Are you sure you want to change the base?
Conversation
This will break a lot of layouts which is why I put the issue on a major milestone not 3.9.0. Still unsure what the impact of this will be, we need to check a bunch of real examples and see if it's possible to make the required changes automatically. |
@@ -133,8 +133,8 @@ export const VCol = genericComponent()({ | |||
'v-col': !hasColClasses || !props.cols, | |||
[`v-col-${props.cols}`]: props.cols, | |||
[`offset-${props.offset}`]: props.offset, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still using the global offset util classes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't have offset util classes, however it's good to rename to avoid further confusion
f5575c1
to
d7c6f09
Compare
Drop negative margins in favor of gap and gap-aware calculations
Update class names in VCol and VRow components to use consistent naming conventions. Replace deprecated `dense` and `noGutters` properties with `density` prop for better clarity and maintainability. Add utilities for responsive grid behavior and improve SASS mixins for grid density handling.
Remove dots to avoid confusion with classes
d7c6f09
to
29d1a1a
Compare
Description
Resolves #8611, related to #18846
This PR:
dense
andno-gutters
props in favour of widely adopteddensity
propDocs are also updated (both examples and app itself)
Markup: