Set a default icon margin for buttons with icon and text. (#12901)

WordPress · Jan 9, 2019 · 14374e5 · 14374e5
1 parent e969954
commit 14374e5
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 9 deletions.
diff --git a/packages/block-library/src/audio/test/__snapshots__/index.js.snap b/packages/block-library/src/audio/test/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ exports[`core/audio block edit matches snapshot 1`] = `
       class="components-form-file-upload"
     >
       <button
-        class="components-button components-icon-button editor-media-placeholder__button is-button is-default is-large"
+        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
         type="button"
       >
         <svg

diff --git a/packages/block-library/src/cover/test/__snapshots__/index.js.snap b/packages/block-library/src/cover/test/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ exports[`core/cover block edit matches snapshot 1`] = `
       class="components-form-file-upload"
     >
       <button
-        class="components-button components-icon-button editor-media-placeholder__button is-button is-default is-large"
+        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
         type="button"
       >
         <svg

diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ exports[`core/gallery block edit matches snapshot 1`] = `
       class="components-form-file-upload"
     >
       <button
-        class="components-button components-icon-button editor-media-placeholder__button is-button is-default is-large"
+        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
         type="button"
       >
         <svg

diff --git a/packages/block-library/src/video/test/__snapshots__/index.js.snap b/packages/block-library/src/video/test/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ exports[`core/video block edit matches snapshot 1`] = `
       class="components-form-file-upload"
     >
       <button
-        class="components-button components-icon-button editor-media-placeholder__button is-button is-default is-large"
+        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
         type="button"
       >
         <svg

diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
@@ -22,7 +22,9 @@ class IconButton extends Component {
 	render() {
 		const { icon, children, label, className, tooltip, shortcut, labelPosition, ...additionalProps } = this.props;
 		const { 'aria-pressed': ariaPressed } = this.props;
-		const classes = classnames( 'components-icon-button', className );
+		const classes = classnames( 'components-icon-button', className, {
+			'has-text': children,
+		} );
 		const tooltipText = tooltip || label;
 
 		// Should show the tooltip if...

diff --git a/packages/components/src/icon-button/style.scss b/packages/components/src/icon-button/style.scss
@@ -19,10 +19,10 @@
 	svg {
 		fill: currentColor;
 		outline: none;
+	}
 
-		&:not:only-child {
-			margin-right: 4px;
-		}
+	&.has-text svg {
+		margin-right: 4px;
 	}
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

diff --git a/...es/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap b/...es/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap
@@ -18,7 +18,7 @@ exports[`PluginMoreMenuItem renders menu item as button properly 1`] = `
   >
     <button
       aria-label="My plugin button menu item"
-      className="components-button components-icon-button components-menu-item__button has-icon"
+      className="components-button components-icon-button components-menu-item__button has-icon has-text"
       onClick={[Function]}
       role="menuitem"
       type="button"