WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 months ago

#29875 closed defect (bug) (maybelater)

Inconsistent button styles for install

Reported by: iandstewart Owned by: chriscct7
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: Upgrade/Install Keywords: ui-feedback
Focuses: ui Cc:

Description

The language pack selection screen features a blue button aligned to the right like so.

https://cloudup.com/cvOk27SYJij

While the next few steps of the install process feature a grey button aligned to the left, at least for Canadian English.

https://cloudup.com/cgi_-PW5Ot1

The alignment may be language specific. Not sure if that can be corrected in some way to be less jarring, maybe with centred alignment. The colour shift seemed odd enough to report.

Attachments (5)

29875.1.diff (658 bytes) - added by Ipstenu 5 years ago.
Making the translation install button not blue
29875.2.diff (2.2 KB) - added by Ipstenu 5 years ago.
Making the other installer buttons blue
Mockup.png (394.4 KB) - added by Travel_girl 3 years ago.
Suggestion Install-Burron
29875.3.diff (1.7 KB) - added by Ipstenu 3 years ago.
Updated patch #2
29875.3-install.diff (657 bytes) - added by Ipstenu 3 years ago.
Updating install.php to be blue buttons as well

Download all attachments as: .zip

Change History (25)

@Ipstenu
5 years ago

Making the translation install button not blue

@Ipstenu
5 years ago

Making the other installer buttons blue

#1 @Ipstenu
5 years ago

The difference is that the translation-install.php file has it set as button-primary and the others do not. There are some that shouldn't be set that, but I don't know which way is best. I've tossed up two patches to go either way. I'd lean towards making all the install buttons primary like that to make it clear what the final action should be.

#2 @iseulde
5 years ago

  • Version changed from trunk to 4.0

#3 @chriscct7
4 years ago

  • Owner set to chriscct7
  • Status changed from new to reviewing

#4 @SergeyBiryukov
3 years ago

  • Keywords ui-feedback added

@karmatosed: Any preference here?

@Travel_girl
3 years ago

Suggestion Install-Burron

#5 @Travel_girl
3 years ago

I think it would be the best way, that the finaly action button is a blue button and should be a primary button.

#6 follow-up: @melchoyce
3 years ago

+1 to primary, right-aligned.

#7 in reply to: ↑ 6 @Travel_girl
3 years ago

What would be the next step for this ticket? Do we need more opinions for the button?

#8 @melchoyce
3 years ago

Next step is to get a patch ready for commit.

@Ipstenu Do you want update your existing patch, if it doesn't match @Travel_girl's mockups?

@Ipstenu
3 years ago

Updated patch #2

#9 @Ipstenu
3 years ago

I forgot I wrote the patch in the first place!

The patch I have doesn't change the CSS, just assigns button-primary to the buttons (that's 29875.2.diff) so if you want the CSS to move the buttons to the left then that's a different change which I haven't done, and I'm not sure where we'd want to put that.

I added 29875.3.diff which is based off trunk, and that just makes the buttons primary again.

#10 follow-up: @Travel_girl
3 years ago

@Ipstenu do you have screenshot how the buttons would look like, with your patch? So I can have a look what css-changes are needed.

#11 in reply to: ↑ 10 @Ipstenu
3 years ago

Replying to Travel_girl:

@Ipstenu do you have screenshot how the buttons would look like, with your patch? So I can have a look what css-changes are needed.

They literally change the color from grey to blue.

https://cloudup.com/cT9hd1ZKYrI

Which ones of the various screens do you want screen grabs for?

Last edited 3 years ago by Ipstenu (previous) (diff)

#12 @Ipstenu
3 years ago

Step 0 (no wp-config) - https://cloudup.com/cB_Sb6mPeGS - Blue Left

Step 1 (build wp-config) - https://cloudup.com/clKPh6Mi_5w - Blue Left

Step 2 (alright sparky) - https://cloudup.com/cOwWE4KCzXY - Grey Left

Step 3 (language) - https://cloudup.com/cT9hd1ZKYrI - Blue Right

Step 4 (install WordPress) - https://cloudup.com/c0XLCCq9Ced - Grey Left

If I change step 2 (sparky) to button-primary, it becomes blue left

Step 4 is in another castle -- FILE - install.php but it too becomes blue and left.

Language being blue and RIGHT is the outlier and is using button button-primary button-large in translation-install.php, and that's the same code as I used in the diff. At a guess it's from the input having the ID of "language-continue"

Attaching a diff with them all blue though.

@Ipstenu
3 years ago

Updating install.php to be blue buttons as well

#13 follow-up: @Travel_girl
3 years ago

@Ipstenu the buttons are really jumping all the time.

I think their should be all blue and on the right site, because it is one process.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#16 in reply to: ↑ 13 @melchoyce
2 years ago

Replying to Travel_girl:

@Ipstenu the buttons are really jumping all the time.

I think their should be all blue and on the right site, because it is one process.

+1

@Ipstenu, does your latest patch have them all right-aligned in addition to blue?

#17 @Ipstenu
2 years ago

3 diff has them as blue and I did not adjust direction because as I said before:

Language being blue and RIGHT is the outlier and is using button button-primary button-large in translation-install.php, and that's the same code as I used in the diff. At a guess it's from the input having the ID of "language-continue"

Everything _else_ is aligned left so I'd think we'd have to edit the CSS to be left in that case.

29875.3.diff​ and 29875.3-install.diff​ make the buttons blue.

#18 @JoshuaWold
16 months ago

Just discussed this ticket at WordCamp Europe 2018 in the design team.

Based on what we can see so far, when a primary button is in a modal or isolated smaller window it appears on the right. When it’s in a larger screen (such as a settings page in WordPress admin) it appears on the left. If this assumption is correct, then it’d make sense to move the primary button in this flow to the right.

Also, since the color has been taken care of, we suggest closing the ticket out and opening a new one if the alignment issue needs further discussion.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 months ago

#20 @karmatosed
4 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from reviewing to closed

I am now closing this ticket as it was left open for feedback and none has happened. This closed the advice given in the previous comment. I will add 'maybe later' to denote the alignment issue can have a ticket.

Note: See TracTickets for help on using tickets.