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

Remove components-icon-button classname #19241

Merged
merged 2 commits into from
Dec 23, 2019
Merged

Remove components-icon-button classname #19241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
888b20c
Remove components-icon-button classname
youknowriad Dec 19, 2019
b0f116f
Fix publish button styles
youknowriad Dec 23, 2019
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: 1 addition & 1 deletion packages/block-editor/src/components/block-pattern-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
.block-editor-block-pattern-picker__pattern {
width: 100%;

&.components-icon-button {
&.components-button.has-icon {
// Override default styles inherited from <IconButton /> to center
// icon horizontally.
justify-content: center;
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-switcher/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
height: $icon-button-size;
}

.components-icon-button.block-editor-block-switcher__toggle,
.components-icon-button.block-editor-block-switcher__no-switcher-icon {
.components-button.block-editor-block-switcher__toggle,
.components-button.block-editor-block-switcher__no-switcher-icon {
Comment on lines -6 to +7
Copy link
Member

Choose a reason for hiding this comment

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

Should I expect to see the .has-icon modifier class here?

I see there's lots of examples where we're not including the modifier class when removing the icon- portion. Is that intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I wanted to avoid the extra specificity when not needed. In most of these examples the extra has-icon has no impact we just want more specificity over the button styles;

margin: 0;
display: block;
height: $icon-button-size;
padding: 3px;
}

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

.block-editor-block-icon {
Expand All @@ -37,7 +37,7 @@

// Style this the same as the block buttons in the library.
// Needs specificiity to override the icon button.
.components-icon-button.block-editor-block-switcher__toggle {
.components-button.block-editor-block-switcher__toggle {
width: auto;
// Unset icon button styles.
&:active,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/default-block-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,14 @@
top: 0;

// Change the size of the buttons to match that of the default paragraph height.
.components-icon-button {
.components-button.has-icon {
width: $block-side-ui-width;
height: $block-side-ui-width;
margin-right: 12px;
padding: 0;
}

.components-icon-button svg {
.components-button svg {
display: block;
margin: auto;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

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>"`;
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>"`;
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/url-popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
border-top: $border-width solid $light-gray-500;
}

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

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

Expand All @@ -21,7 +21,7 @@
}

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

> svg {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,15 @@
height: $block-controls-height;

// the padding and margin of the more menu is intentionally non-standard
.components-icon-button {
.components-button.has-icon {
width: auto;
padding: 8px 2px;
}

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

.components-icon-button {
.components-button.has-icon {
padding: 8px 4px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ class AudioEdit extends Component {
<BlockControls>
<ToolbarGroup>
<IconButton
className="components-icon-button components-toolbar__control"
className="components-toolbar__control"
label={ __( 'Edit audio' ) }
onClick={ switchToEditing }
icon="edit"
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/block-colors-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
return (
<ToolbarGroup>
<IconButton
className="components-icon-button components-toolbar__control block-library-colors-selector__toggle"
className="components-toolbar__control block-library-colors-selector__toggle"
label={ __( 'Open Colors Selector' ) }
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ class VideoEdit extends Component {
<BlockControls>
<ToolbarGroup>
<IconButton
className="components-icon-button components-toolbar__control"
className="components-toolbar__control"
label={ __( 'Edit video' ) }
onClick={ switchToEditing }
icon="edit"
Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ export function Button( props, ref ) {
'is-link': isLink,
'is-destructive': isDestructive,
'has-text': !! icon && !! children,
// Ideally should be has-icon but this is named this way for BC
'components-icon-button': !! icon,
'has-icon': !! icon,
} );

const Tag = href !== undefined && ! disabled ? 'a' : 'button';
Expand Down
34 changes: 17 additions & 17 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,27 +221,27 @@
}
}

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

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

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

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

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ describe( 'Button', () => {

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

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
box-sizing: border-box;
}

.components-icon-button {
.components-button {
padding: 6px;
}
}
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/color-picker/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -495,7 +495,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -670,7 +670,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -845,7 +845,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1020,7 +1020,7 @@ exports[`ColorPicker should render color picker 1`] = `
>
<button
aria-label="Change color format"
className="components-button components-icon-button"
className="components-button has-icon"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
}

.components-menu-item__button,
.components-menu-item__button.components-icon-button {
.components-menu-item__button.components-button {
height: auto;
padding-left: 2rem;

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
}

.components-form-token-field__token-text,
.components-form-token-field__remove-token.components-icon-button {
.components-form-token-field__remove-token.components-button {
display: inline-block;
line-height: 24px;
background: $light-gray-500;
Expand All @@ -145,7 +145,7 @@
text-overflow: ellipsis;
}

.components-form-token-field__remove-token.components-icon-button {
.components-form-token-field__remove-token.components-button {
cursor: pointer;
border-radius: 0 12px 12px 0;
padding: 0 2px;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
background: none;
border-bottom: none;

.components-icon-button {
.components-button {
align-self: flex-start;
margin-top: $grid-size-xlarge;
position: static;
Expand Down Expand Up @@ -39,7 +39,7 @@
margin: 0 2px;
}

.components-icon-button {
.components-button {
height: 30px;
}
}
Expand Down
4 changes: 1 addition & 3 deletions packages/components/src/menu-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ export function MenuItem( {
role = 'menuitem',
...props
} ) {
className = classnames( 'components-menu-item__button', className, {
'has-icon': icon,
} );
className = classnames( 'components-menu-item__button', className );

if ( info ) {
children = (
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.components-menu-item__button,
.components-menu-item__button.components-icon-button {
.components-menu-item__button.components-button {
width: 100%;
padding: $grid-size ($grid-size-large - $border-width);
text-align: left;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/menu-item/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`MenuItem should match snapshot when all props provided 1`] = `
<ForwardRef(IconButton)
aria-checked={true}
className="components-menu-item__button my-class has-icon"
className="components-menu-item__button my-class"
icon="wordpress"
onClick={[Function]}
role="menuitemcheckbox"
Expand Down Expand Up @@ -39,7 +39,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `

exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
<ForwardRef(IconButton)
className="components-menu-item__button my-class has-icon"
className="components-menu-item__button my-class"
icon="wordpress"
onClick={[Function]}
role="menuitem"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu-items-choice/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.components-menu-items-choice,
.components-menu-items-choice.components-icon-button {
.components-menu-items-choice.components-button {
padding-left: 2rem;

&.has-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
margin: 0;
}

.components-icon-button {
.components-button {
position: relative;
left: $grid-size;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
padding: $panel-padding;
}

> .components-icon-button {
> .components-button {
color: $dark-gray-900;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ $arrow-size: 8px;
width: 100%;
}

.components-popover__close.components-icon-button {
.components-popover__close.components-button {
z-index: z-index(".components-popover__close");
}
/*!rtl:end:ignore*/
2 changes: 1 addition & 1 deletion packages/e2e-test-utils/src/click-on-close-modal-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
export async function clickOnCloseModalButton( modalClassName ) {
let closeButtonClassName =
'.components-modal__header .components-icon-button';
'.components-modal__header .components-button';

if ( modalClassName ) {
closeButtonClassName = `${ modalClassName } ${ closeButtonClassName }`;
Expand Down
Loading