Merge pull request #439 from WordPress/add/icon-button-class

Add proper label to IconButton number element.
WordPress · Apr 18, 2017 · 87e158b · 87e158b
2 parents ffc663c + 46ea902
commit 87e158b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/editor/components/icon-button/index.js b/editor/components/icon-button/index.js
@@ -14,9 +14,8 @@ function IconButton( { icon, children, label, className, ...additionalProps } )
 	const classes = classnames( 'editor-icon-button', className );
 
 	return (
-		<Button { ...additionalProps } aria-label={ label } className={ classes }>
+		<Button { ...additionalProps } aria-label={ label } className={ classes } data-level={ children ? children : null }>
 			<Dashicon icon={ icon } />
-			{ children ? <span>{ children }</span> : null }
 		</Button>
 	);
 }

diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss
@@ -15,7 +15,13 @@
 		}
 	}
 
-	span {
-		font-size: 12px;
+	&:after {
+		content: attr( data-level );
+		font-family: $default-font;
+		font-size: 10px;
+		font-weight: bold;
+		position: absolute;
+		bottom: 8px;
+		right: 4px;
 	}
 }
diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss
@@ -30,17 +30,6 @@
 		background-color: $dark-gray-500;
 		color: $white;
 	}
-
-	/* Optional number, e.g. for headings */
-	span {
-		font-family: $default-font;
-		font-size: 10px;
-		font-weight: bold;
-		position: absolute;
-		bottom: 8px;
-		right: 4px;
-	}
-
 }
 
 .editor-toolbar__control .dashicon {