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

RangeControl: Add lint rule for 40px size prop usage #64558

Merged
merged 11 commits into from
Aug 16, 2024
Merged

RangeControl: Add lint rule for 40px size prop usage #64558

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
490c6d0
Fix in Query Loop block
mirka Aug 15, 2024
9d4312a
Fix in Excerpt block
mirka Aug 15, 2024
9618fef
Fix in Grid block
mirka Aug 15, 2024
47f5cc8
Fix in SpacingSizesControl
mirka Aug 15, 2024
71db8f1
Fix in Image block Zoom control
mirka Aug 15, 2024
55c38a1
Fix in HeightControl
mirka Aug 15, 2024
f423047
Fix in BorderRadiusControl
mirka Aug 15, 2024
982aab5
Add lint rule
mirka Aug 15, 2024
d46937c
Fixup in HeightControl
mirka Aug 15, 2024
7f28701
Address in ColorPicker
mirka Aug 16, 2024
43337a5
Merge branch 'trunk' into range-40px
mirka Aug 16, 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 .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@ module.exports = {
'BorderControl',
'DimensionControl',
'FontSizePicker',
'RangeControl',
'ToggleGroupControl',
].map( ( componentName ) => ( {
// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/border-radius-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
units={ units }
/>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Can be seen in the block inspector ▸ Styles ▸ Border & Shadow of an Image block. No visual change because this is a standalone slider-only RangeControl instance.

BorderRadiusControl

label={ __( 'Border radius' ) }
hideLabelFromVision
className="components-border-radius-control__range-control"
Expand Down
10 changes: 0 additions & 10 deletions packages/block-editor/src/components/border-radius-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,6 @@
.components-border-radius-control__range-control {
flex: 1;
margin-right: $grid-unit-15;

> div {
height: 40px;
display: flex;
align-items: center;
}
}

> span {
flex: 0 0 auto;
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/height-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export default function HeightControl( {
<FlexItem isBlock>
<Spacer marginX={ 2 } marginBottom={ 0 }>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Can be seen in the Group block ▸ Styles ▸ Dimensions ▸ Minimum Height. No visual change because this is a standalone slider-only RangeControl instance.

HeightControl, after

value={ customRangeValue }
min={ 0 }
max={
Expand Down
26 changes: 17 additions & 9 deletions packages/block-editor/src/components/image-editor/zoom-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/**
* WordPress dependencies
*/
import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
import {
ToolbarButton,
RangeControl,
Dropdown,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { search } from '@wordpress/icons';

Expand All @@ -27,14 +32,17 @@ export default function ZoomDropdown() {
/>
) }
renderContent={ () => (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Zoom' ) }
min={ MIN_ZOOM }
max={ MAX_ZOOM }
value={ Math.round( zoom ) }
onChange={ setZoom }
/>
<DropdownContentWrapper paddingSize="medium">
<RangeControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Zoom' ) }
min={ MIN_ZOOM }
max={ MAX_ZOOM }
value={ Math.round( zoom ) }
onChange={ setZoom }
/>
</DropdownContentWrapper>
Comment on lines +35 to +45
Copy link
Member Author

Choose a reason for hiding this comment

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

Insert an Image block, choose the Crop tool in the block toolbar, and open the Zoom dropdown.

Before After
Image Zoom dropdown, before Image Zoom dropdown, after

I added some padding to the dropdown content because the slider thumb was almost touching the edge.

) }
/>
);
Expand Down
2 changes: 2 additions & 0 deletions ...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,7 @@ export default function SpacingInputControl( {
} }
/>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

No visual change because these are standalone slider-only RangeControl instances.

SpacingSizesControl, default SpacingSizesControl, custom

onMouseOver={ onMouseOver }
onMouseOut={ onMouseOut }
onFocus={ onMouseOver }
Expand All @@ -270,6 +271,7 @@ export default function SpacingInputControl( {
) }
{ showRangeControl && ! showCustomValueControl && (
<RangeControl
__next40pxDefaultSize
onMouseOver={ onMouseOver }
onMouseOut={ onMouseOut }
className="spacing-sizes-control__range-control"
Expand Down
10 changes: 0 additions & 10 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 @@ -18,17 +18,7 @@

.spacing-sizes-control__range-control,
.spacing-sizes-control__custom-value-range {
height: 40px;
/* Vertically center the RangeControl until it has true 40px height. */
display: flex;
align-items: center;
margin-bottom: 0;
Comment on lines -21 to -25
Copy link
Member

Choose a reason for hiding this comment

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

Love it that we can clean up all those styles 🚀

flex: 1;

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

.components-range-control__mark {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/layouts/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
</FlexItem>
<FlexItem isBlock>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Can be seen in Grid block. No visual change because this is a standalone slider-only RangeControl instance.

Grid block

__nextHasNoMarginBottom
onChange={ handleSliderChange }
value={ quantity || 0 }
Expand Down Expand Up @@ -368,6 +369,7 @@ function GridLayoutColumnsAndRowsControl( {
/>
) : (
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Same here.

Grid block controls

__nextHasNoMarginBottom
value={ columnCount ?? 0 }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/post-excerpt/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ export default function PostExcerptEditor( {
}
/>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Before After
Excerpt block, before Excerpt block, after

__nextHasNoMarginBottom
label={ __( 'Max number of words' ) }
value={ excerptLength }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query-pagination-numbers/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<RangeControl
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

Insert a Query Loop block, choose something with pagination, and click the pagination block to show the block inspector.

Before After
Query Pagination controls, before Query Pagination controls, after

__nextHasNoMarginBottom
label={ __( 'Number of links' ) }
help={ __(
Expand Down
Loading