Skip to content

Update help text alignment in CheckboxControl #60787

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

Merged
jameskoster merged 12 commits into from
Apr 22, 2024
Merged

Update help text alignment in CheckboxControl #60787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
599a832
Update help text alignment
jameskoster Apr 16, 2024
456b9de
Improve alignment, fix wrapping
jameskoster Apr 17, 2024
95f19f9
Changelog
jameskoster Apr 17, 2024
db42921
Update packages/components/CHANGELOG.md
jameskoster Apr 17, 2024
55e5dc7
Wrap checkbox + label in HStack, adjust css
jameskoster Apr 18, 2024
8a7f550
Internalize HStack import
mirka Apr 18, 2024
8f08d50
Use styled span for help text
mirka Apr 18, 2024
92d2783
Tweak changelog
mirka Apr 18, 2024
6c41d46
Merge branch 'trunk' into update/checkbox-help-text-alignment
mirka Apr 19, 2024
be6becb
Don't add span when no help text
mirka Apr 19, 2024
e3a1640
Add unit test
mirka Apr 19, 2024
b20d045
Update snapshots
mirka Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- `Navigator`: Navigation to the active path doesn't create a new location history. ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
- `FormToggle`: Forwards ref to input. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
- `ToggleControl`: Forwards ref to FormToggle. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
- `CheckboxControl`: Update help text alignment.

### Bug Fix

Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/checkbox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
@include break-small() {
--checkbox-input-size: 20px;
}

.components-base-control__help {
margin-left: calc(var(--checkbox-input-size) + #{$grid-unit-15});
}
Copy link
Member

@mirka mirka Apr 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is inevitable at the moment, but raised as an issue at #60836.

Copy link
Contributor

@talldan talldan Apr 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Saw the linked issue. It probably wouldn't be as flexible, but could checkbox control do something like this to indent the text?

help={ <span="components-checkbox-control__help-text">{ helpText }</span> }
.components-checkbox-control__help {
    margin-left: calc(var(--checkbox-input-size) + #{$grid-unit-15});
}

Copy link
Member

@mirka mirka Apr 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, good one! Yes that could work in this instance, with a display: inline-block to account for when the help text is long enough to wrap.

Copy link
Contributor Author

@jameskoster jameskoster Apr 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand the benefit to doing this? Feel free to push any changes :)

Copy link
Member

@mirka mirka Apr 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. The point is that we shouldn't be using selectors from other components, because they aren't guaranteed to be stable. Ideally they would all be obfuscated/randomized so they aren't even available outside the original component.

I'll try it out and push the changes 👍

Copy link
Member

@mirka mirka Apr 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 8f08d50

}

.components-checkbox-control__input[type="checkbox"] {
Expand Down Expand Up @@ -50,7 +54,7 @@
.components-checkbox-control__input-container {
position: relative;
display: inline-block;
margin-right: 12px;
margin-right: $grid-unit-15;
vertical-align: middle;
width: var(--checkbox-input-size);
aspect-ratio: 1;
Expand Down