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

Fix: Button Replace remaining 40px default size violations [Block Editor 2] #65308

Merged
merged 3 commits into from
Sep 26, 2024
Merged

Fix: Button Replace remaining 40px default size violations [Block Editor 2] #65308

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
0dde589
Add __next40pxDefaultSize for block-editor 2 files
Dhruvang2001 Sep 13, 2024
3cd42d6
Add size compact to buttons
dhruvang21 Sep 25, 2024
6a0be67
Remove style overrides
dhruvang21 Sep 26, 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
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/block-navigation/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ function BlockNavigationDropdownToggle( {
} ) {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor

Choose a reason for hiding this comment

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

Noting that this Button is used in a deprecated component, and therefore we should be ok to make this change without the need to really test much about it.

{ ...props }
ref={ innerRef }
icon={ listView }
Expand Down
15 changes: 5 additions & 10 deletions packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ import { VIEWMODES } from './constants';
const Actions = ( { onBlockPatternSelect } ) => (
<div className="block-editor-block-pattern-setup__actions">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor

Choose a reason for hiding this comment

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

This component also doesn't seem to be used anymore — however, I managed to find a screenshot of that the UI would look like when rendered in the browser:

Screenshot 2024-09-24 at 13 03 13

Judging from the screenshot, I think that we're good with the changes to this button

variant="primary"
onClick={ onBlockPatternSelect }
>
Expand All @@ -36,17 +35,15 @@ const CarouselNavigation = ( {
} ) => (
<div className="block-editor-block-pattern-setup__navigation">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
icon={ isRTL() ? chevronRight : chevronLeft }
label={ __( 'Previous pattern' ) }
onClick={ handlePrevious }
disabled={ activeSlide === 0 }
accessibleWhenDisabled
/>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
icon={ isRTL() ? chevronLeft : chevronRight }
label={ __( 'Next pattern' ) }
onClick={ handleNext }
Expand All @@ -69,16 +66,14 @@ const SetupToolbar = ( {
const displayControls = (
<div className="block-editor-block-pattern-setup__display-controls">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
icon={ stretchFullWidth }
label={ __( 'Carousel view' ) }
onClick={ () => setViewMode( VIEWMODES.carousel ) }
isPressed={ isCarouselView }
/>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
icon={ grid }
label={ __( 'Grid view' ) }
onClick={ () => setViewMode( VIEWMODES.grid ) }
Expand Down
15 changes: 8 additions & 7 deletions packages/block-editor/src/components/block-patterns-paging/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,24 @@ export default function Pagination( {
className="block-editor-patterns__grid-pagination-previous"
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
variant="tertiary"
onClick={ () => changePage( 1 ) }
disabled={ currentPage === 1 }
aria-label={ __( 'First page' ) }
size="compact"
accessibleWhenDisabled
className="block-editor-patterns__grid-pagination-button"
>
<span>«</span>
</Button>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
variant="tertiary"
onClick={ () => changePage( currentPage - 1 ) }
disabled={ currentPage === 1 }
aria-label={ __( 'Previous page' ) }
size="compact"
accessibleWhenDisabled
className="block-editor-patterns__grid-pagination-button"
>
<span>‹</span>
</Button>
Expand All @@ -74,13 +74,13 @@ export default function Pagination( {
className="block-editor-patterns__grid-pagination-next"
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
variant="tertiary"
onClick={ () => changePage( currentPage + 1 ) }
disabled={ currentPage === numPages }
aria-label={ __( 'Next page' ) }
size="compact"
accessibleWhenDisabled
className="block-editor-patterns__grid-pagination-button"
>
<span>›</span>
</Button>
Expand All @@ -89,8 +89,9 @@ export default function Pagination( {
onClick={ () => changePage( numPages ) }
disabled={ currentPage === numPages }
aria-label={ __( 'Last page' ) }
size="default"
size="compact"
accessibleWhenDisabled
className="block-editor-patterns__grid-pagination-button"
>
<span>»</span>
</Button>
Expand Down
37 changes: 10 additions & 27 deletions packages/block-editor/src/components/block-patterns-paging/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,20 @@
border-top: 1px solid $gray-800;
padding: $grid-unit-05;
justify-content: center;
.components-button.is-tertiary {
width: auto;
height: $button-size-compact;
justify-content: center;

&:disabled {
color: $gray-600;
background: none;
}

&:hover:not(:disabled) {
color: $white;
background-color: $gray-700;
}
}
}
}

.show-icon-labels {
.block-editor-patterns__grid-pagination {
.components-button {
width: auto;
// Hide the button icons when labels are set to display...
span {
display: none;
}
// ... and display labels.
// Uses ::before as ::after is already used for active tab styling.
&::before {
content: attr(aria-label);
}
.block-editor-patterns__grid-pagination-button {
width: auto;
// Hide the button icons when labels are set to display...
span {
display: none;
}
// ... and display labels.
// Uses ::before as ::after is already used for active tab styling.
&::before {
content: attr(aria-label);
}
}
}
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/block-quick-navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor

Choose a reason for hiding this comment

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

Looking good

Screenshot 2024-09-24 at 14 27 19

isPressed={ isSelected }
onClick={ async () => {
await selectBlock( clientId );
Expand Down
Loading