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

Spacing Sizes Control: Try improving layout spacing #44858

Merged
merged 3 commits into from
Oct 13, 2022
Merged

Spacing Sizes Control: Try improving layout spacing #44858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
623187f
Spacing Sizes Control: Try improving layout spacing
aaronrobertshaw Oct 11, 2022
7217b35
Provide 16px gap between unit and range control
aaronrobertshaw Oct 11, 2022
c529de6
Update custom select list size and spacing
aaronrobertshaw Oct 11, 2022
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
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ export default function SpacingInputControl( {
hideLabelFromVision={ true }
className="components-spacing-sizes-control__custom-value-input"
style={ { gridColumn: '1' } }
size={ '__unstable-large' }
/>

<RangeControl
Expand Down Expand Up @@ -279,6 +280,7 @@ export default function SpacingInputControl( {
label={ ariaLabel }
hideLabelFromVision={ true }
__nextUnconstrainedWidth={ true }
size={ '__unstable-large' }
/>
) }
</>
Expand Down
45 changes: 26 additions & 19 deletions packages/block-editor/src/components/spacing-sizes-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
grid-template-rows: 25px auto;
grid-template-rows: 16px auto;
}

.component-spacing-sizes-control {
Expand All @@ -27,7 +27,7 @@
grid-column: 1 / 1;
justify-content: left;
height: $grid-unit-20;
margin-top: $grid-unit-15;
margin-top: $grid-unit-20;
}

.components-spacing-sizes-control__side-label {
Expand All @@ -37,8 +37,9 @@
}

&.is-unlinked {
.components-range-control.components-spacing-sizes-control__range-control {
margin-top: $grid-unit-15;
.components-range-control.components-spacing-sizes-control__range-control,
.components-spacing-sizes-control__custom-value-input {
margin-top: $grid-unit-10;
}
}

Expand All @@ -60,12 +61,7 @@
grid-column: 2 / 2;
grid-row: 1 / 1;
justify-self: end;
padding: 0;
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
}
margin-top: -4px;
}

.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
Expand All @@ -75,33 +71,43 @@
.components-spacing-sizes-control__custom-toggle-single {
grid-column: 3 / 3;
justify-self: end;
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
margin-top: $grid-unit-15;
}
margin-top: $grid-unit-15;
}

.component-spacing-sizes-control__linked-button {
grid-column: 3 / 3;
grid-row: 1 / 1;
justify-self: end;
line-height: 0;
margin-top: -4px;
}

.components-spacing-sizes-control__custom-value-range {
grid-column: span 2;
margin-left: $grid-unit-10;
height: 30px;
margin-left: $grid-unit-20;
margin-top: 8px;
}

.components-spacing-sizes-control__custom-value-input {
width: 124px;
margin-top: 8px;
}

.components-range-control {
Copy link
Contributor

Choose a reason for hiding this comment

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

Any reasons why we're using the internal classname (components-range-control) instead of the classname assigned specifically by SpacingSizesControl (i.e. components-spacing-sizes-control__custom-value-range) ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Mainly just that it was the only common classname across all range controls within the SpacingSizesControl. The classname you mentioned is only used for the custom spacing values. There's also the preset slider.

I can replace the components-range-control with multiple selectors.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

While taking a look at switching this out, I noticed there are already other uses of internal RangeControl class names to be able to tweak the marks etc into the design for this control. I'll hold off on replacing this for now.

Copy link
Contributor

Choose a reason for hiding this comment

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

Makes sense! I guess at most we can add a note (in code or anywhere we track the follow-up work) regarding the refactor of the components-range-control classname.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The same sort of tidy-up will need to happen for the BorderRadiusControl as well.

I took the liberty of adding this to #40507 where the replacement of the RangeControl with new slider components would happen. Makes sense to me that we refactor or clean this up only once. Of course, if that is too far out we could move that to a different issue.

Copy link
Contributor

Choose a reason for hiding this comment

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

Sounds good to me, thank you!

height: 40px;
/* Vertically center the RangeControl until it has true 40px height. */
display: flex;
align-items: center;

> .components-base-control__field {
/* Fixes RangeControl contents when the outer wrapper is flex */
flex: 1;
}
}

.components-spacing-sizes-control__range-control {
grid-column: span 3;
height: 40px;
margin-top: 8px;
}

.components-range-control__mark {
Expand All @@ -125,5 +131,6 @@

.components-spacing-sizes-control__custom-select-control {
grid-column: span 3;
margin-top: $grid-unit-10;
}
}