Skip to content

Commit

Permalink
Fix: Button Replace remaining 40px default size violations [Block Edi…
Browse files Browse the repository at this point in the history 
…tor 3] (#65225)

* Fix: Global Styles component to use 40px default size.

* Fix: Block variation picket to use 40px default size.

* Fix: Block variation transform to use 40px default size.

* Fix: color gradient dropdown and block appender button to use 40px default size.

* fix: shadowpanel clear button

* fix: Button Block appender issues.

* fix: Coverts shadow panel Buttons to normal html buttons.

* Update packages/block-library/src/group/editor.scss

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Update packages/block-library/src/group/editor.scss

Co-authored-by: Lena Morita <lena@jaguchi.com>

* feat: Add tootlip tu shadow button.

---------

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
  • Loading branch information
@vipul0425 @t-hamano
@jameskoster @tyxla @mirka @ciampo
9 people authored Sep 24, 2024
1 parent cf78cf0 commit df5eaed
Show file tree
Hide file tree
Showing 10 changed files with 42 additions and 58 deletions.
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/block-variation-picker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ function BlockVariationPicker( {
{ allowSkip && (
<div className="block-editor-block-variation-picker__skip">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
variant="link"
onClick={ () => onSelect() }
>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-variation-transforms/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ function VariationsButtons( {
</VisuallyHidden>
{ variations.map( ( variation ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
size="compact"
key={ variation.name }
icon={ <BlockIcon icon={ variation.icon } showColors /> }
isPressed={ selectedValue === variation.name }
Expand Down
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/button-block-appender/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
color: $gray-900;
box-shadow: inset 0 0 0 $border-width $gray-900;

// Needs specificity to override button styles.
&.components-button.components-button {
padding: $grid-unit-15;
}

.is-dark-theme & {
color: $light-gray-placeholder;
box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/button-block-appender/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@ function ButtonBlockAppender(

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
ref={ mergedInserterButtonRef }
onFocus={ onFocus }
tabIndex={ tabIndex }
Expand Down
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/colors-gradients/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,7 @@ const renderToggle =
};

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
{ ...toggleProps }
>
<Button __next40pxDefaultSize { ...toggleProps }>
<LabeledColorIndicator
colorValue={ colorValue }
label={ label }
Expand Down
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/global-styles/color-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,11 +239,7 @@ function ColorPanelDropdown( {
};

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
{ ...toggleProps }
>
<Button __next40pxDefaultSize { ...toggleProps }>
<LabeledColorIndicators
indicators={ indicators }
label={ label }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/global-styles/filters-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,7 @@ export default function FiltersPanel( {
return (
<ItemGroup isBordered isSeparated>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
{ ...toggleProps }
>
<LabeledColorIndicator
Expand Down
61 changes: 28 additions & 33 deletions packages/block-editor/src/components/global-styles/shadow-panel-components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
FlexItem,
Dropdown,
Composite,
Tooltip,
} from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
Expand Down Expand Up @@ -42,8 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
/>
<div className="block-editor-global-styles__clear-shadow">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
variant="tertiary"
onClick={ () => onShadowChange( undefined ) }
>
Expand Down Expand Up @@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {

export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
return (
<Composite.Item
role="option"
aria-label={ label }
aria-selected={ isActive }
className={ clsx( 'block-editor-global-styles__shadow__item', {
'is-active': isActive,
} ) }
render={
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
className={ clsx(
'block-editor-global-styles__shadow-indicator',
{
unset: type === 'unset',
}
) }
onClick={ onSelect }
label={ label }
style={ { boxShadow: shadow } }
showTooltip
>
{ isActive && <Icon icon={ check } /> }
</Button>
}
/>
<Tooltip text={ label }>
<Composite.Item
role="option"
aria-label={ label }
aria-selected={ isActive }
className={ clsx( 'block-editor-global-styles__shadow__item', {
'is-active': isActive,
} ) }
render={
<button
className={ clsx(
'block-editor-global-styles__shadow-indicator',
{
unset: type === 'unset',
}
) }
onClick={ onSelect }
style={ { boxShadow: shadow } }
aria-label={ label }
>
{ isActive && <Icon icon={ check } /> }
</button>
}
/>
</Tooltip>
);
}

Expand Down Expand Up @@ -143,11 +142,7 @@ function renderShadowToggle() {
};

return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
{ ...toggleProps }
>
<Button __next40pxDefaultSize { ...toggleProps }>
<HStack justify="flex-start">
<Icon
className="block-editor-global-styles__toggle-icon"
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,15 @@

// These styles are similar to the color palette.
.block-editor-global-styles__shadow-indicator {
appearance: none;
background: none;
color: $gray-800;
border: $gray-200 $border-width solid;
border-radius: $radius-small;
cursor: pointer;
display: inline-flex;
align-items: center;

padding: 0;

height: $button-size-small + 2 * $border-width;
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/group/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
&::after {
content: "";
display: flex;
flex: 1 0 $grid-unit-60;
flex: 1 0 $button-size-next-default-40px;
pointer-events: none;
min-height: $grid-unit-60 - $border-width - $border-width;
min-height: $button-size-next-default-40px - $border-width - $border-width;
border: $border-width dashed currentColor;
}

Expand Down

1 comment on commit df5eaed

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in df5eaed.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11013081196
📝 Reported issues:

Please sign in to comment.