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 5] #65361

Merged
merged 13 commits into from
Sep 25, 2024
Merged

Fix: Button Replace remaining 40px default size violations [Block Editor 5] #65361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
246fe1b
Fix: inspector control tabs to use 40px default button size
parthVataliya16 Sep 16, 2024
9491543
Fix: inspector popover header to use 40px default button size
parthVataliya16 Sep 16, 2024
05ec17e
Fix: link control to use 40px default button size
parthVataliya16 Sep 16, 2024
78a6be7
Fix: list view to use 40px default button size
parthVataliya16 Sep 16, 2024
765e269
Fix: media placeholder to use 40px default button size
parthVataliya16 Sep 16, 2024
f680fc7
Add size attribute to inspector popover header and list view
parthVataliya16 Sep 17, 2024
24ed7ff
Revert the changes for submit button
parthVataliya16 Sep 17, 2024
92f1c20
Merge branch 'WordPress:trunk' into fix/issue-65018-5
PARTHVATALIYA Sep 24, 2024
3bc2b29
Replace button component
parthVataliya16 Sep 25, 2024
7c90785
Remove override CSS
parthVataliya16 Sep 25, 2024
f00a63a
Merge branch 'WordPress:trunk' into fix/issue-65018-5
PARTHVATALIYA Sep 25, 2024
e287a6d
Remove __next40pxDefaultSize prop
PARTHVATALIYA Sep 25, 2024
5086a1d
Remove __next40pxDefaultSize prop
PARTHVATALIYA Sep 25, 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
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,6 @@

.block-editor-block-inspector__tab-item {
flex: 1 1 0px;
display: flex;
justify-content: center;
}
41 changes: 21 additions & 20 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
* WordPress dependencies
*/
import {
Button,
Icon,
Tooltip,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
Expand Down Expand Up @@ -43,27 +44,27 @@ export default function InspectorControlsTabs( {
<div className="block-editor-block-inspector__tabs">
<Tabs defaultTabId={ initialTabName } key={ clientId }>
<Tabs.TabList>
{ tabs.map( ( tab ) => (
<Tabs.Tab
key={ tab.name }
tabId={ tab.name }
render={
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
icon={
! showIconLabels ? tab.icon : undefined
}
label={
! showIconLabels ? tab.title : undefined
}
{ tabs.map( ( tab ) =>
showIconLabels ? (
<Tabs.Tab
key={ tab.name }
tabId={ tab.name }
className={ tab.className }
>
{ tab.title }
</Tabs.Tab>
) : (
<Tooltip text={ tab.title } key={ tab.name }>
<Tabs.Tab
tabId={ tab.name }
className={ tab.className }
aria-label={ tab.title }
>
{ showIconLabels && tab.title }
</Button>
}
/>
) ) }
<Icon icon={ tab.icon } />
</Tabs.Tab>
</Tooltip>
)
) }
</Tabs.TabList>
<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
<SettingsTab showAdvancedControls={ !! blockName } />
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/inspector-popover-header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ export default function InspectorPopoverHeader( {
<Spacer />
{ actions.map( ( { label, icon, onClick } ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="small"
key={ label }
className="block-editor-inspector-popover-header__action"
label={ label }
Expand All @@ -45,8 +44,7 @@ export default function InspectorPopoverHeader( {
) ) }
{ onClose && (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="small"
className="block-editor-inspector-popover-header__action"
label={ __( 'Close' ) }
icon={ closeSmall }
Expand Down
13 changes: 0 additions & 13 deletions packages/block-editor/src/components/inspector-popover-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
.block-editor-inspector-popover-header {
margin-bottom: $grid-unit-20;
}

[class].block-editor-inspector-popover-header__action {
height: $icon-size;

&.has-icon {
min-width: $icon-size;
padding: 0;
}

&:not(.has-icon) {
text-decoration: underline;
}
}
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,16 +475,14 @@ function LinkControl( {
className="block-editor-link-control__search-actions"
>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
variant="tertiary"
onClick={ handleCancel }
>
{ __( 'Cancel' ) }
</Button>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
variant="primary"
onClick={ isDisabled ? noop : handleSubmit }
className="block-editor-link-control__search-submit"
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/link-control/settings-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
return (
<>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
className="block-editor-link-control__drawer-toggle"
aria-expanded={ settingsOpen }
onClick={ () => setSettingsOpen( ! settingsOpen ) }
Expand Down
7 changes: 2 additions & 5 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import {
Button,
__experimentalHStack as HStack,
__experimentalTruncate as Truncate,
} from '@wordpress/components';
Expand Down Expand Up @@ -82,9 +81,7 @@ function ListViewBlockSelectButton(
}

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
<a
className={ clsx(
'block-editor-list-view-block-select-button',
className
Expand Down Expand Up @@ -156,7 +153,7 @@ function ListViewBlockSelectButton(
</span>
) }
</HStack>
</Button>
</a>
);
}

Expand Down
9 changes: 9 additions & 0 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,15 @@
text-align: left;
position: relative;
white-space: nowrap;
border-radius: 2px;
box-sizing: border-box;
color: inherit;
font-family: inherit;
font-size: 13px;
font-weight: 400;
margin: 0;
text-decoration: none;
transition: box-shadow 0.1s linear;

.components-modal__content & {
padding-left: 0;
Expand Down
18 changes: 6 additions & 12 deletions packages/block-editor/src/components/media-placeholder/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
return (
<div className="block-editor-media-placeholder__url-input-container">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
className="block-editor-media-placeholder__button"
onClick={ openURLInput }
isPressed={ isURLInputVisible }
Expand Down Expand Up @@ -389,8 +388,7 @@ export function MediaPlaceholder( {
return (
onCancel && (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
className="block-editor-media-placeholder__cancel-button"
title={ __( 'Cancel' ) }
variant="link"
Expand Down Expand Up @@ -419,8 +417,7 @@ export function MediaPlaceholder( {
onToggleFeaturedImage && (
<div className="block-editor-media-placeholder__url-input-container">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
className="block-editor-media-placeholder__button"
onClick={ onToggleFeaturedImage }
variant="secondary"
Expand All @@ -436,8 +433,7 @@ export function MediaPlaceholder( {
const defaultButton = ( { open } ) => {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
variant="secondary"
onClick={ () => {
open();
Expand Down Expand Up @@ -477,8 +473,7 @@ export function MediaPlaceholder( {
const content = (
<>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
variant="primary"
className={ clsx(
'block-editor-media-placeholder__button',
Expand Down Expand Up @@ -508,8 +503,7 @@ export function MediaPlaceholder( {
<FormFileUpload
render={ ( { openFileDialog } ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ciampo marked this conversation as resolved.
Show resolved Hide resolved
onClick={ openFileDialog }
variant="primary"
className={ clsx(
Expand Down
Loading