Make Preview and Save Draft buttons use the same style #21192
Conversation
ZebulanStanphill
added
the
[Feature] UI Components
|
Size Change: -22 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
62d09b9
to
15353cf
Compare
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
15353cf
to
7c676f3
Compare
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
7c676f3
to
bf084a5
Compare
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
bf084a5
to
9cd58a6
Compare
|
Interesting! And thank you for the pull request. A PR like this is in the camp of "we can try this and learn"! Trying it out in code is a much better way to progress, than talking endlessly on tickets. In that vein, I wouldn't oppse getting a feel for this. However my instinct is that this control has more in common with the dropdown than it does with icon button menu toggles:
I know there's a spectrum of consistency there, but in my mind it's the same design principle as having a solid button component that can also be presented in outline or text-only form. More than ensuring consistency that buttons all look the same, we leverage our good sensibilities to decide which presentation works best given its context. Yes, we can use that same principle to decide that in the top toolbar, that preview button does not need an icon. But to me it's more about evaluating what we feel works best there, than ensuring consistency. @pablohoneyhoney @mtias any thoughts? |
|
@jasmussen Yeah, I made this PR since I figured it would be easier to try it out in practice than just discussing it in an issue. I'd argue this button is less like a select dropdown than a lot of other things, e.g. the block alignment toolbar dropdown button. The preview options button includes not only a 3-choice radio menu, but also an action link to open something in another tab. That makes it a lot less like a select dropdown than, say, the Tools (edit/select) dropdown that's also in the top toolbar. |
|
Great questions being raised here! The Preview option works exactly the same as the ellipses on the end. It opens a dropdown that shows some editor settings which change the view immediately when selected.
There seems to be two major differences:
So how do we navigate the UI implementation with those observations? Maybe because the focus of the Preview is limited to one type of selection, it should remain as a pseudo selectbox component (ie. include the dropdown arrow)? |
Actually, it also has the "Preview in external tab" link, though I suppose that's not really a "setting". But even ignoring that, it still wouldn't be the only dropdown in the top toolbar with a single type of setting change:
So then the only real distinguishing factor is that it is a text button, rather than an icon button. |
|
Good point, @ZebulanStanphill. I noted here #20877 (comment), which is an attempt to add a navigation ability to the top toolbar, that including a dropdown arrow would help visually. I wasn't thinking about this particular issue, but if the similarity is that these two items are text-based and not icons... that starts aligning nicely. |
|
Well, the site editor things ended up not using chevrons. Notably, the site editor navigation buttons use the same styles as the preview button in this PR, so it looks like the "Save Draft" button is the one that is inconsistent. So, how should we move forward here? |
ZebulanStanphill
changed the title
|
@ZebulanStanphill good observations. I think next step is a PR if you're up for it? No better way to decide. |
|
I could definitely make a PR to simplify the Save Draft button. I just looked into it, though, and it turns out that button is actually not using custom styles... it's using tertiary button styles, specifically the Do you still think I should make a PR to change it to a standard button? |
I'm increasingly unsure that the terms primary, secondary, and tertiary to define the visual appearance of the buttons is not really helpful, because those terms suggest a hierarchy that is not always appropriate for the design. For example in embeds, buttons go primary, tertiary, tertiary. I think it might make sense to consider them as solid, outlined, and text-only buttons. But that is a separate point, and does not detract from yours, and it does seem like the next thing to try is to make both the save draft button, and the preview dropdown, be the same as they are in the FSE experience. It might even be an extension, or refocus, of this PR. Thanks! |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
2 times, most recently
from
cd41bfb
to
3d2dc16
Compare
The Save Draft button isn't in the FSE experience, and the Preview dropdown button looks the same as in the post/page editor. But anyway, I've updated the PR to change both buttons to appear consistent with other text-only buttons like the ones in the FSE experience. |
ZebulanStanphill
changed the title
|
Here's what I see:
As an exercise in reduction, this seems very promising, insofar as it surfaces inconsistencies that were previously overlooked. For example it immediately stands out to me that the titlecase, "Save Draft" is inconsistent with what we're moving towards elsewhere. We might want to change that to "Save draft". I also wonder if we should unify the padding around this text only button to match tertiary buttons. Compare:
The padding of tertiary buttons is 6px compared to 6px 12px for primary and secondary buttons, so that the optical spacing of the buttons when not focused is balanced. Here's what these tweaks would look like:
Here's focus:
I think this could work. |
|
@jasmussen That sounded like a good idea to me, so I started implementing it. However, while working on it, I noticed something odd: some instances of the It makes me wonder: why do some use the prop and some don't? Are some of them invalid? If the |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
3d2dc16
to
4119241
Compare
|
This looks good. I do wonder why the padding on the left and right of the save and preview buttons is smaller than the publish button? The publish button uses 12px of padding, while these buttons now use 6px. Here's how it looks now in this PR:
Here's how it would look if you made it 12px to match the publish button:
-- I wouldn't let this hold up merging, but it wasn't clear to me if this was intentional. (Sorry if I missed a previous discussion around this decision.) |
|
@shaunandrews The padding was changed to optically balance the spacing between the buttons (similar to what is done to the buttons in the rich text formatting tools toolbar group) and match existing tertiary buttons that already do the same thing. @jasmussen first suggested it 4 days ago. |
|
Yep, the reduced padding for tertiary buttons is intentional, and you have to compare the resting state rather than the focused state, as that is what you will see most. It's also the case with the media placeholders:
It becomes especially important when stacked:
Even that isn't perfect, but it's better than the alternative of a 12px indented stacked button. |
|
I tend to disagree. The smaller padding looks wrong to my eyes, especially with the example of the vertical setup state for the image block; with different padding the text doesn’t line up. That said, I doubt anyone will really notice and this is such a small thing that it’s not worth discussing more now. Thanks for the insights. |
|
I just noticed that when I create a new document, I see this disabled preview button:
|
|
For better or worse, that's what the standard disabled state of tertiary buttons looks like. If we want to change it, we should probably do so in a separate PR. |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
89b80b3
to
f984f98
Compare
|
Associated PR waiting to be reviewed: |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
7 times, most recently
from
913b17b
to
50a38aa
Compare
|
What's blocking here? I feel this is a good one to land before 5.5 |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
50a38aa
to
71bbf10
Compare
|
I had my checks pass today by updating snapshots. Normaly it's enough to update the unit test snapshots:
but for my last two PRS, I had to do
that last one took forever, but fixed the issue I was having. |
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
71bbf10
to
ce58781
Compare
Co-authored-by: Joen Asmussen <asmussen@gmail.com>
ZebulanStanphill
force-pushed
the
update/preview-options-button-style
branch
from
ce58781
to
f1244d9
Compare
|
I'll merge once I can get the tests to pass. |
ZebulanStanphill
removed
the
Needs Design Feedback
Description
We were moving away from showing chevrons in buttons that open dropdown menus... so why does the Preview button still have one? This PR removes it.
One issue this raises to the surface is the inconsistency in design between the "Save Draft" and "Preview" buttons. I'm not really sure what an icon-less button should look like. What exactly is the standard?
UPDATE: this PR now changes both buttons to look the same and adjusts their padding to optically balance the spacing between them.
Screenshots
UPDATE: the buttons now look like this:
Checklist: