fix(ui): align Checkbox vertically in flex rows#1751
Closed
TilmanHaupt wants to merge 12 commits into
Closed
Conversation
Add jn:inline-flex jn:items-center to jn-checkbox-outer so the checkbox sits at the correct baseline when placed next to buttons or other inline elements in a flex container. Also gitignore .husky/prepare-commit-msg (personal DCO sign-off hook). Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
🦋 Changeset detectedLatest commit: b38e122 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
TilmanHaupt
added
ui-components
Contributor
|
github-actions
Bot
added
the
greenhouse-pr-preview
github-actions
Bot
added
greenhouse-pr-preview
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to fix vertical alignment of the Checkbox component when placed inside flex row layouts, and includes a patch changeset for @cloudoperators/juno-ui-components.
Changes:
- Update
Checkboxwrapper classes to improve alignment in flex rows. - Add a patch changeset for the UI components package.
- Ignore
.husky/prepare-commit-msgin.gitignore.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui-components/src/components/Checkbox/Checkbox.component.tsx | Adjusts wrapper classes intended to improve Checkbox alignment in flex row containers. |
| .changeset/til-checkbox-fix.md | Adds a patch changeset entry for the UI components package release. |
| .gitignore | Adds an ignore rule for .husky/prepare-commit-msg. |
github-actions
Bot
added
greenhouse-pr-preview
github-actions
Bot
added
greenhouse-pr-preview
…mHint layout Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
removed
the
greenhouse-pr-preview
github-actions
Bot
added
the
greenhouse-pr-preview
…lignment in flex rows Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
…ation Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
…ight stretch Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
removed
the
greenhouse-pr-preview
…ckboxCell only Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
…cking with flex-col Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
Member
Author
|
closed because i dont get it |
github-actions
Bot
removed
the
greenhouse-pr-preview
github-actions
Bot
added
the
greenhouse-pr-preview
…fix required dot - Remove inline-flex from Checkbox outer (reverts to block): fixes CheckboxGroup item spacing which broke when flex-col children became inline-flex - Remove flex/flex-col from CheckboxGroup options container: restores natural block stacking so checkboxes have proper spacing between them - Remove leading-0 from Checkbox labelStyles: fixes required dot position — zero line-height caused align-top + mt-2 to misplace the dot below the text Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
…CheckboxGroup Checkbox outer needs inline-flex flex-col so it sizes to content and aligns correctly in horizontal flex containers (Stack alignment="center"). CheckboxGroup options container needs flex flex-col to force inline-flex children to stack vertically instead of sitting inline side-by-side. Signed-off-by: TilmanHaupt <tilman.haupt@sap.com>
github-actions
Bot
added
greenhouse-pr-preview
Member
Author
|
i really give up now. not possible with just touching checkbox. |
github-actions
Bot
removed
the
greenhouse-pr-preview
Member
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
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.
Summary
jn:inline-flex jn:flex-col — the outer div shrinks to content size (no excess height), FormHints stack vertically via flex-col, and the parent's items-center centers it correctly.
Test plan
<Checkbox>inside aflexrow container and confirm it aligns vertically with sibling elements