Remove components-icon-button classname (#19241)

WordPress · Dec 23, 2019 · 3ca05a7 · 3ca05a7
1 parent fba1069
commit 3ca05a7
Show file tree

Hide file tree

Showing 38 changed files with 118 additions and 127 deletions.
diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss
@@ -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;

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -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 {
 	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 {
@@ -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,

diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -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;
 	}

diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -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>"`;
diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
@@ -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;
 }
 
@@ -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 {

diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
@@ -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;
 		}
 	}

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -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"

diff --git a/packages/block-library/src/navigation/block-colors-selector.js b/packages/block-library/src/navigation/block-colors-selector.js
@@ -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 }

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -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"

diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
@@ -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';

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -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;
 	}
 }
 

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
@@ -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();
 		} );
 

diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss
@@ -33,7 +33,7 @@
 		box-sizing: border-box;
 	}
 
-	.components-icon-button {
+	.components-button {
 		padding: 6px;
 	}
 }

diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -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;
 

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
@@ -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;
@@ -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;

diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
@@ -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;
@@ -39,7 +39,7 @@
 			margin: 0 2px;
 		}
 
-		.components-icon-button {
+		.components-button {
 			height: 30px;
 		}
 	}

diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
@@ -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 = (

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -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;

diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -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"
@@ -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"

diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
@@ -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 {

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -95,7 +95,7 @@
 		margin: 0;
 	}
 
-	.components-icon-button {
+	.components-button {
 		position: relative;
 		left: $grid-size;
 	}

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
@@ -29,7 +29,7 @@
 		padding: $panel-padding;
 	}
 
-	> .components-icon-button {
+	> .components-button {
 		color: $dark-gray-900;
 	}
 }

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -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*/
diff --git a/packages/e2e-test-utils/src/click-on-close-modal-button.js b/packages/e2e-test-utils/src/click-on-close-modal-button.js
@@ -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 }`;