Skip to content

Commit 3ca05a7

Browse files
youknowriadyouknowriad
authored
Remove components-icon-button classname (WordPress#19241)
1 parent fba1069 commit 3ca05a7

File tree

38 files changed

+118
-127
lines changed

38 files changed

+118
-127
lines changed

‎packages/block-editor/src/components/block-pattern-picker/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
.block-editor-block-pattern-picker__pattern {
4343
width: 100%;
4444

45-
&.components-icon-button {
45+
&.components-button.has-icon {
4646
// Override default styles inherited from <IconButton /> to center
4747
// icon horizontally.
4848
justify-content: center;

‎packages/block-editor/src/components/block-switcher/style.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
height: $icon-button-size;
44
}
55

6-
.components-icon-button.block-editor-block-switcher__toggle,
7-
.components-icon-button.block-editor-block-switcher__no-switcher-icon {
6+
.components-button.block-editor-block-switcher__toggle,
7+
.components-button.block-editor-block-switcher__no-switcher-icon {
88
margin: 0;
99
display: block;
1010
height: $icon-button-size;
1111
padding: 3px;
1212
}
1313

14-
.components-icon-button.block-editor-block-switcher__no-switcher-icon {
14+
.components-button.block-editor-block-switcher__no-switcher-icon {
1515
width: $icon-button-size + 6px + 6px;
1616

1717
.block-editor-block-icon {
@@ -37,7 +37,7 @@
3737

3838
// Style this the same as the block buttons in the library.
3939
// Needs specificiity to override the icon button.
40-
.components-icon-button.block-editor-block-switcher__toggle {
40+
.components-button.block-editor-block-switcher__toggle {
4141
width: auto;
4242
// Unset icon button styles.
4343
&:active,

‎packages/block-editor/src/components/default-block-appender/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@
5959
top: 0;
6060

6161
// Change the size of the buttons to match that of the default paragraph height.
62-
.components-icon-button {
62+
.components-button.has-icon {
6363
width: $block-side-ui-width;
6464
height: $block-side-ui-width;
6565
margin-right: 12px;
6666
padding: 0;
6767
}
6868

69-
.components-icon-button svg {
69+
.components-button svg {
7070
display: block;
7171
margin: auto;
7272
}

‎packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset components-icon-button\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
3+
exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset has-icon\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;

‎packages/block-editor/src/components/url-popover/style.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
border-top: $border-width solid $light-gray-500;
33
}
44

5-
.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
5+
.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
66
box-shadow: none;
77
}
88

9-
.block-editor-url-popover__additional-controls div[role="menu"] > .components-icon-button {
9+
.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
1010
padding-left: 2px;
1111
}
1212

@@ -21,7 +21,7 @@
2121
}
2222

2323
// Mimic toolbar component styles for the icons in this popover.
24-
.block-editor-url-popover .components-icon-button {
24+
.block-editor-url-popover .components-button.has-icon {
2525
padding: 3px;
2626

2727
> svg {

‎packages/block-editor/src/components/warning/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@
5656
height: $block-controls-height;
5757

5858
// the padding and margin of the more menu is intentionally non-standard
59-
.components-icon-button {
59+
.components-button.has-icon {
6060
width: auto;
6161
padding: 8px 2px;
6262
}
6363

6464
@include break-small() {
6565
margin-left: 4px;
6666

67-
.components-icon-button {
67+
.components-button.has-icon {
6868
padding: 8px 4px;
6969
}
7070
}

‎packages/block-library/src/audio/edit.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ class AudioEdit extends Component {
156156
<BlockControls>
157157
<ToolbarGroup>
158158
<IconButton
159-
className="components-icon-button components-toolbar__control"
159+
className="components-toolbar__control"
160160
label={ __( 'Edit audio' ) }
161161
onClick={ switchToEditing }
162162
icon="edit"

‎packages/block-library/src/navigation/block-colors-selector.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
5454
return (
5555
<ToolbarGroup>
5656
<IconButton
57-
className="components-icon-button components-toolbar__control block-library-colors-selector__toggle"
57+
className="components-toolbar__control block-library-colors-selector__toggle"
5858
label={ __( 'Open Colors Selector' ) }
5959
onClick={ onToggle }
6060
onKeyDown={ openOnArrowDown }

‎packages/block-library/src/video/edit.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ class VideoEdit extends Component {
187187
<BlockControls>
188188
<ToolbarGroup>
189189
<IconButton
190-
className="components-icon-button components-toolbar__control"
190+
className="components-toolbar__control"
191191
label={ __( 'Edit video' ) }
192192
onClick={ switchToEditing }
193193
icon="edit"

‎packages/components/src/button/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,7 @@ export function Button( props, ref ) {
5959
'is-link': isLink,
6060
'is-destructive': isDestructive,
6161
'has-text': !! icon && !! children,
62-
// Ideally should be has-icon but this is named this way for BC
63-
'components-icon-button': !! icon,
62+
'has-icon': !! icon,
6463
} );
6564

6665
const Tag = href !== undefined && ! disabled ? 'a' : 'button';

‎packages/components/src/button/style.scss

+17-17
Original file line numberDiff line numberDiff line change
@@ -221,27 +221,27 @@
221221
}
222222
}
223223

224-
// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
225-
// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
226-
.screen-reader-text {
227-
height: auto;
228-
}
229-
}
224+
&.has-icon {
225+
.dashicon {
226+
display: inline-block;
227+
flex: 0 0 auto;
228+
}
230229

231-
.components-icon-button {
232-
.dashicon {
233-
display: inline-block;
234-
flex: 0 0 auto;
235-
}
230+
// Ensure that even SVG icons that don't include the .dashicon class are colored.
231+
svg {
232+
fill: currentColor;
233+
outline: none;
234+
}
236235

237-
// Ensure that even SVG icons that don't include the .dashicon class are colored.
238-
svg {
239-
fill: currentColor;
240-
outline: none;
236+
&.has-text svg {
237+
margin-right: 8px;
238+
}
241239
}
242240

243-
&.has-text svg {
244-
margin-right: 8px;
241+
// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
242+
// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
243+
.screen-reader-text {
244+
height: auto;
245245
}
246246
}
247247

‎packages/components/src/button/test/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe( 'Button', () => {
7777

7878
it( 'should render an icon button', () => {
7979
const iconButton = shallow( <Button icon="plus" /> );
80-
expect( iconButton.hasClass( 'components-icon-button' ) ).toBe( true );
80+
expect( iconButton.hasClass( 'has-icon' ) ).toBe( true );
8181
expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
8282
} );
8383

‎packages/components/src/color-picker/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
box-sizing: border-box;
3434
}
3535

36-
.components-icon-button {
36+
.components-button {
3737
padding: 6px;
3838
}
3939
}

‎packages/components/src/color-picker/test/__snapshots__/index.js.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
145145
>
146146
<button
147147
aria-label="Change color format"
148-
className="components-button components-icon-button"
148+
className="components-button has-icon"
149149
onBlur={[Function]}
150150
onClick={[Function]}
151151
onFocus={[Function]}
@@ -320,7 +320,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
320320
>
321321
<button
322322
aria-label="Change color format"
323-
className="components-button components-icon-button"
323+
className="components-button has-icon"
324324
onBlur={[Function]}
325325
onClick={[Function]}
326326
onFocus={[Function]}
@@ -495,7 +495,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
495495
>
496496
<button
497497
aria-label="Change color format"
498-
className="components-button components-icon-button"
498+
className="components-button has-icon"
499499
onBlur={[Function]}
500500
onClick={[Function]}
501501
onFocus={[Function]}
@@ -670,7 +670,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
670670
>
671671
<button
672672
aria-label="Change color format"
673-
className="components-button components-icon-button"
673+
className="components-button has-icon"
674674
onBlur={[Function]}
675675
onClick={[Function]}
676676
onFocus={[Function]}
@@ -845,7 +845,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
845845
>
846846
<button
847847
aria-label="Change color format"
848-
className="components-button components-icon-button"
848+
className="components-button has-icon"
849849
onBlur={[Function]}
850850
onClick={[Function]}
851851
onFocus={[Function]}
@@ -1020,7 +1020,7 @@ exports[`ColorPicker should render color picker 1`] = `
10201020
>
10211021
<button
10221022
aria-label="Change color format"
1023-
className="components-button components-icon-button"
1023+
className="components-button has-icon"
10241024
onBlur={[Function]}
10251025
onClick={[Function]}
10261026
onFocus={[Function]}

‎packages/components/src/dropdown-menu/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
}
7272

7373
.components-menu-item__button,
74-
.components-menu-item__button.components-icon-button {
74+
.components-menu-item__button.components-button {
7575
height: auto;
7676
padding-left: 2rem;
7777

‎packages/components/src/form-token-field/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
}
130130

131131
.components-form-token-field__token-text,
132-
.components-form-token-field__remove-token.components-icon-button {
132+
.components-form-token-field__remove-token.components-button {
133133
display: inline-block;
134134
line-height: 24px;
135135
background: $light-gray-500;
@@ -145,7 +145,7 @@
145145
text-overflow: ellipsis;
146146
}
147147

148-
.components-form-token-field__remove-token.components-icon-button {
148+
.components-form-token-field__remove-token.components-button {
149149
cursor: pointer;
150150
border-radius: 0 12px 12px 0;
151151
padding: 0 2px;

‎packages/components/src/guide/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
background: none;
44
border-bottom: none;
55

6-
.components-icon-button {
6+
.components-button {
77
align-self: flex-start;
88
margin-top: $grid-size-xlarge;
99
position: static;
@@ -39,7 +39,7 @@
3939
margin: 0 2px;
4040
}
4141

42-
.components-icon-button {
42+
.components-button {
4343
height: 30px;
4444
}
4545
}

‎packages/components/src/menu-item/index.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ export function MenuItem( {
3030
role = 'menuitem',
3131
...props
3232
} ) {
33-
className = classnames( 'components-menu-item__button', className, {
34-
'has-icon': icon,
35-
} );
33+
className = classnames( 'components-menu-item__button', className );
3634

3735
if ( info ) {
3836
children = (

‎packages/components/src/menu-item/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.components-menu-item__button,
2-
.components-menu-item__button.components-icon-button {
2+
.components-menu-item__button.components-button {
33
width: 100%;
44
padding: $grid-size ($grid-size-large - $border-width);
55
text-align: left;

‎packages/components/src/menu-item/test/__snapshots__/index.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`MenuItem should match snapshot when all props provided 1`] = `
44
<ForwardRef(IconButton)
55
aria-checked={true}
6-
className="components-menu-item__button my-class has-icon"
6+
className="components-menu-item__button my-class"
77
icon="wordpress"
88
onClick={[Function]}
99
role="menuitemcheckbox"
@@ -39,7 +39,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
3939

4040
exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
4141
<ForwardRef(IconButton)
42-
className="components-menu-item__button my-class has-icon"
42+
className="components-menu-item__button my-class"
4343
icon="wordpress"
4444
onClick={[Function]}
4545
role="menuitem"

‎packages/components/src/menu-items-choice/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.components-menu-items-choice,
2-
.components-menu-items-choice.components-icon-button {
2+
.components-menu-items-choice.components-button {
33
padding-left: 2rem;
44

55
&.has-icon {

‎packages/components/src/modal/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
margin: 0;
9696
}
9797

98-
.components-icon-button {
98+
.components-button {
9999
position: relative;
100100
left: $grid-size;
101101
}

‎packages/components/src/panel/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
padding: $panel-padding;
3030
}
3131

32-
> .components-icon-button {
32+
> .components-button {
3333
color: $dark-gray-900;
3434
}
3535
}

‎packages/components/src/popover/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ $arrow-size: 8px;
212212
width: 100%;
213213
}
214214

215-
.components-popover__close.components-icon-button {
215+
.components-popover__close.components-button {
216216
z-index: z-index(".components-popover__close");
217217
}
218218
/*!rtl:end:ignore*/

‎packages/e2e-test-utils/src/click-on-close-modal-button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
export async function clickOnCloseModalButton( modalClassName ) {
77
let closeButtonClassName =
8-
'.components-modal__header .components-icon-button';
8+
'.components-modal__header .components-button';
99

1010
if ( modalClassName ) {
1111
closeButtonClassName = `${ modalClassName } ${ closeButtonClassName }`;

0 commit comments

Comments
 (0)