Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Grid behavior changed in version 0.56.0 #569

Closed
bedrich-schindler opened this issue Oct 3, 2024 · 0 comments · Fixed by #570
Closed

Grid behavior changed in version 0.56.0 #569

bedrich-schindler opened this issue Oct 3, 2024 · 0 comments · Fixed by #570
Assignees
@adamkudrna
Labels
bug Something isn't working
Milestone
v1.0.0

Comments

@bedrich-schindler
Copy link
Contributor

Changes introduced in src/components/Grid/Grid.module.scss break clients using Grid in version 0.56.0.

It happens due to change from:

        align-content: var(--rui-local-align-content); // 2.
        align-items: var(--rui-local-align-items); // 2.
        justify-content: var(--rui-local-justify-content); // 2.
        justify-items: var(--rui-local-justify-items); // 2.

to

        place-content: var(--rui-local-align-content) var(--rui-local-justify-content); // 2.
        place-items: var(--rui-local-align-items) var(--rui-local-justify-items); // 2.

After change, button in example is aligned at the start (left) while it was aligned at the end before the change:

image

Same thing happens with inputs:

image
@bedrich-schindler bedrich-schindler added the bug Something isn't working label Oct 3, 2024
@github-project-automation github-project-automation bot moved this to 💡Ideas in The Board Oct 4, 2024
@adamkudrna adamkudrna moved this from 💡Ideas to 🏗 In progress in The Board Oct 4, 2024
@adamkudrna adamkudrna added this to the v1.0.0 milestone Oct 4, 2024
adamkudrna added a commit that referenced this issue Oct 4, 2024
@adamkudrna
Fix Grid items/content alignment when just a single value is set (#569
9af02ba 
)

Intentionally use longhand properties because custom property
fallback mechanism evaluates `initial` values as empty. That
makes the other value from the items/content pair unexpectedly
used for both axes.
@adamkudrna adamkudrna mentioned this issue Oct 4, 2024
Merged
adamkudrna added a commit that referenced this issue Oct 4, 2024
@adamkudrna
Fix Grid items/content alignment when just a single value is set (#569
6fb0182 
)

Intentionally use longhand properties because the custom property
fallback mechanism evaluates `initial` values as empty. That makes
the other value from the items/content pair unexpectedly used for
both axes.
adamkudrna added a commit that referenced this issue Oct 7, 2024
@adamkudrna
Fix Grid items/content alignment when just a single value is set (#569
1d12e64 
)

Intentionally use longhand properties because the custom property
fallback mechanism evaluates `initial` values as empty. That makes
the other value of the shorthand property unexpectedly used for
both axes.
adamkudrna added a commit that referenced this issue Oct 7, 2024
@adamkudrna
Fix Grid items/content alignment when just a single value is set (#569
637e64d 
)

Intentionally use longhand properties because the custom property
fallback mechanism evaluates `initial` values as empty. That makes
the other value of the shorthand property unexpectedly used for
both axes.
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in The Board Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@adamkudrna adamkudrna

Labels
bug Something isn't working
Projects
The Board
Archived in project
Milestone
v1.0.0
Development

Successfully merging a pull request may close this issue.

Fix Grid items/content alignment when just a single value is set (#569) react-ui-org/react-ui
2 participants
@adamkudrna @bedrich-schindler