Add proper label to IconButton number element. #439
Conversation
The IconButton can optionally have a number indicating the level. For example heading might have this, quote has two styles, galleries might have multiple styles also. This PR adds a classname to indicate this, and moves the style to the iconbutton itself. This intends to address feedback in #423 (comment) and #436 (comment).
Ignoring the editor context, I have a hard time agreeing that level is a natural feature of an icon button. I'll plan to poke at this a bit more. |
I suppose this also depends on whether we care to enforce general reusability outside an editor context for these sorts of components. |
|
Exploring a few ideas for extending an icon button with concept of level without necessarily building it into the button itself: |
|
Ooh, I dig the |
|
Put the icon level into a data-level attribute. Let me know what you think, thanks. |
|
Nice 👍 |
| @@ -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 }> | |||
There was a problem hiding this comment.
The children prop can not be used as an attribute because it can contain other tags (components).
I think this should be updated to use a level prop.
We also need a children prop like the one defined before. It's being used in the Block switcher PR https://github.com/WordPress/gutenberg/pull/429/files#diff-4d78380ac51947daf9b826f57a1684bbR58
There was a problem hiding this comment.
Sorry, I merged early here. Regardless, would appreciate some help with fixing it. 💖
There was a problem hiding this comment.
Yep, I'll take care of that ;)
The IconButton can optionally have a number indicating the level. For example heading might have this, quote has two styles, galleries might have multiple styles also. This PR adds a classname to indicate this, and moves the style to the iconbutton itself.
This intends to address feedback in #423 (comment) and #436 (comment).