Skip to content

Fix: Button: Replace remaining 40px default size violation [Edit Site 3] #65309

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
mirka merged 5 commits into from
Sep 25, 2024
Merged

Fix: Button: Replace remaining 40px default size violation [Edit Site 3] #65309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9b6c3f
Fix patterns link button title to use 40px default size
hbhalodia Sep 13, 2024
744b937
Fix open save panel button default size to 40px
hbhalodia Sep 13, 2024
752d3a2
Fix editor sidebar buttons to use 40px defualt size
hbhalodia Sep 13, 2024
2cc7851
Fix data views create new views buttons to use 40px default size
hbhalodia Sep 13, 2024
b9ab536
Fix site hub buttons to use 40px default button size
hbhalodia Sep 13, 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/edit-site/src/components/page-patterns/fields.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,7 @@ function TitleField( { item } ) {
title
) : (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit, site-editor --> check for patterns and the pattern title.

Note: It has a link variant, so there is an override style present, so before and after is same.

Before After
page-patterns-before page-patterns-after

variant="link"
onClick={ onClick }
// Required for the grid's roving tab index system.
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/src/components/save-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,7 @@ export default function SavePanel() {
} ) }
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen, when you open the save panel. It has style for screen-reader-text, hence need to remove that style to see the visual change.

Before After
open-save-panel-before Open-save-panel-after

variant="secondary"
className="edit-site-editor__toggle-save-panel-button"
onClick={ () => setIsSaveViewOpened( true ) }
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-site/src/components/sidebar-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import { Button } from '@wordpress/components';
export default function SidebarButton( props ) {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit, site-editor --> and check for icon button in sidebar panel.

Before After
Editor-sidebar-button-before Editor-sidebar-button-after

{ ...props }
className={ clsx( 'edit-site-sidebar-button', props.className ) }
/>
Expand Down
6 changes: 2 additions & 4 deletions packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
/>
<HStack justify="right">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you add a custom data view and click on add new.

Before After
View-before view-after

variant="tertiary"
onClick={ () => {
setIsAdding( false );
Expand All @@ -99,8 +98,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
</Button>

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

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you add a custom data view and click on add new.

Before After
View-before view-after

variant="primary"
type="submit"
aria-disabled={ ! title || isSaving }
Expand Down
18 changes: 6 additions & 12 deletions packages/edit-site/src/components/site-hub/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,7 @@ const SiteHub = memo(
) }
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This can be seen when you visit and check for go back button on the top left corner in site editor mode.

Note: It has fixed height, so changing this does not change before and after images.

Before After
site-hub-dashboard-before site-hub-dashboard-after

ref={ ref }
href={ dashboardLink }
label={ __( 'Go to the Dashboard' ) }
Expand All @@ -80,8 +79,7 @@ const SiteHub = memo(
<HStack>
<div className="edit-site-site-hub__title">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit and check for site title in site editor mode.

Note: It has link variant, hence 40px size does not affect the button.

Before After
site-hub-title-link-before site-hub-title-link-after

variant="link"
href={ homeUrl }
target="_blank"
Expand All @@ -101,8 +99,7 @@ const SiteHub = memo(
className="edit-site-site-hub__actions"
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This can be seen when you visit and check for search icon on the site editor mode.

Before After
site-hub-command-before site-hub-command-after

className="edit-site-site-hub_toggle-command-center"
icon={ search }
onClick={ () => openCommandCenter() }
Expand Down Expand Up @@ -149,8 +146,7 @@ export const SiteHubMobile = memo(
) }
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit and check for go to back button on top left corver in site editor mode for mobile mode.

Note: It has fixed height, so changing this does not change before and after images.

Before After
site-hub-mobile-editor-before site-hub-mobile-editor-after

ref={ ref }
label={ __( 'Go to Site Editor' ) }
className="edit-site-layout__view-mode-toggle"
Expand All @@ -170,8 +166,7 @@ export const SiteHubMobile = memo(
<HStack>
<div className="edit-site-site-hub__title">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit and check for site title in site editor mode for mobile.

Note: It has link variant, hence 40px size does not affect the button.

Before After
site-hub-mobile-title-before site-hub-mobile-title-after

variant="link"
href={ homeUrl }
target="_blank"
Expand All @@ -186,8 +181,7 @@ export const SiteHubMobile = memo(
className="edit-site-site-hub__actions"
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@hbhalodia hbhalodia Sep 16, 2024

Choose a reason for hiding this comment

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

This can be seen when you visit and check for search icon on the site editor mode on mobile.

Before After
site-hub-mobile-command-before site-hub-mobile-command-after

className="edit-site-site-hub_toggle-command-center"
icon={ search }
onClick={ () => openCommandCenter() }
Expand Down