Preview Button: Remove the separator and border, and reduce the size of the icon. #20683
Conversation
This removes the separator and border from the preview toggle. It also reduces the size of the icon down to 16px. Along with this, some adjustments to the button padding were required.
github-actions
bot
added
the
First-time Contributor
|
Size Change: -7.59 kB (0%) Total Size: 856 kB
ℹ️ View Unchanged
|
|
I really like this as gives some visual clarity. It also stops me wondering if the sizes are different on the drop-down and publish button. |
|
This looks good. I think we should always say "preview" there and not show the name of the current breakpoint. |
| @@ -22,6 +22,7 @@ import { external, check } from '@wordpress/icons'; | |||
|
|
|||
| const downArrow = ( | |||
| <SVG | |||
| className="editor-post-preview__button-icon" | |||
There was a problem hiding this comment.
Teach me your ways. Whats wrong with it? We could totally do it without the className, but let me know why its bad.
There was a problem hiding this comment.
I mean this should be something that gets applied by default by using the right ingredients, without having to manually update the SVG.
…nal icon's spacing and size.
…ted the external label.
|
I removed the dynamic label, replacing it with a static "Preview" label.
I also removed the "View" label, repositioned the external icon, and updated the label from "Preview externally" to "Preview in new tab". |
| justify-content: flex-start; | ||
|
|
||
| svg { | ||
| margin-right: 8px; |
There was a problem hiding this comment.
This caused a few issues, so let's discuss this separately. In the mean time I removed it.
shaunandrews
requested review from
ajitbohra,
jorgefilipecosta,
Soean and
talldan
as code owners
There was a problem hiding this comment.
I see a lot of positive reactions on this change, and good discussion. The PR was lovely, and nearly there. I took the liberty of massaging the pixels ever so slightly, and updating the External Link icon. Here's what it looks like now:
This feels like a good evolution of the Preview dropdown. Let's try it!
|
Thanks for taking this one to the finish line while I was AFK! |
There's a few visual things about the new device-preview button that have been bothering me.
The first is the separator between the currently selected device, and the dropdown arrow. The line makes me thing that this button does two things; I'd expect different behavior when clicking the label and when clicking the icon. But both the label and the icon both trigger the same action. So, I don't see the need for the line at all. This PR removes it.
The border around button feels a little strange. Not all buttons in the toolbar have a border, in fact I don't see any other buttons in the top toolbar, or block toolbars that use a border. So, I removed the border and kind of like how it feels. What do you think?
The icon's current size feels too heavy. When compared to other dropdown in the editor and WordPress, the icon is larger than others. So, I reduces the size of the icon down to 16px and it feels nicer. What do you think?
Current:
This PR:
