WordPress.org

Make WordPress Core

Opened 6 weeks ago

Closed 2 weeks ago

Last modified 13 days ago

#41582 closed enhancement (invalid)

styling HTML5 <progress> according to admin user's chosen admin-color scheme

Reported by: pbiron Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: ui-feedback
Focuses: ui, administration Cc:

Description

By default, each browser applies their own styling to HTML5's <progress> element; e.g.,

  • Chrome uses#7baaf7
  • Firefox uses #06b025
  • IE11 & Edge use #369aca
  • I think Opera uses the same color as Chrome, but since I don't have it installed I can't be sure

Try the following fiddle in various browsers to see it in action.

It would be nice if the various /wp-admin/css/colors/xxx/colors.css contained rules to style HTML5's <progress> element [1] according to the admin user's currently selected admin-color scheme.

As far as I know, <progress> is not currently used in Core. However, the WordPress Importer Redux started by @rmccue plugin does.

Attachments (1)

importer-progress-screenshot.png (38.2 KB) - added by pbiron 6 weeks ago.
screenshot of importer rewrite

Download all attachments as: .zip

Change History (11)

#1 @pbiron
6 weeks ago

  • Keywords ui-feedback added

I tried the CSS described by HTML5 Doctor for styling <progress> but it doesn't seem to work.

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


6 weeks ago

#3 follow-up: @afercia
6 weeks ago

@pbiron I'm not sure WordPress should provide CSS rules for things that are not used in core. If a plugin wants to use <progress>, then I'd say it should provide its own styling.

#4 in reply to: ↑ 3 @pbiron
6 weeks ago

Replying to afercia:

@pbiron I'm not sure WordPress should provide CSS rules for things that are not used in core. If a plugin wants to use <progress>, then I'd say it should provide its own styling.

I understand and agree with the general thought.

However, the plugin I mentioned is on track to eventually replace the official WordPress Importer plugin and I'm working on a rewrite of the Exporter (which is part of core) that will have a similar UI/UX using <progress>. So, this enhancement request is related to core.

@pbiron
6 weeks ago

screenshot of importer rewrite

#5 @pbiron
6 weeks ago

For those who haven't seen the Importer revisions, I've attached a screenshot of the UI that uses <progress>.

#6 follow-up: @JDTrower
6 weeks ago

Using the $highlight-color from the various colors.scss files, I created two pens on CodePen one with solid color progress bars while the other has stripped progress bars. Personally, I think if we decide to add this to core, that we should go with the solid. The CodePens have been tested in the latest versions of Chrome, Firefox, IE 11, Microsoft Edge, and Opera on a Windows 10 computer. I also tested on an iPhone iOS 10.3.3 in Safari. Obviously other OS/Browser combinations would need to be tested and feedback and changes are welcome. The solid progress bar pen shows squared progress bars while the stripped progress bar pen shows rounded progress bars.

If using the $highlight-color works for the progress bars, and the decision is to go ahead and add this to core ahead of the improved WP importer being released and the improved WP exporter being added to core, I can work on a patch to add the CSS to core. Otherwise, I can hold off.

Solid Progress Bar Pen - https://codepen.io/DTrower/pen/wqdGXQ
Stipped Progress Bar Pen - https://codepen.io/DTrower/pen/QMpJmK

#7 in reply to: ↑ 6 ; follow-up: @pbiron
6 weeks ago

Replying to JDTrower:

Using the $highlight-color from the various colors.scss files

Thanx!!!

The only color scheme that I don't think $highlight-color works for is light...and that just might be a problem with that color scheme. For all the other color schemes, $highlight-color is the same as $menu-highlight-background but that is not the case in light. So, for light I think <progress> should use $menu-highlight-background.

Also, I'm not a fan of the black background for the unfilled part of <progress> in your pen, largely because none of the browser defaults uses it. I prefer a

I like the rest of your styling. I've updated my fiddle with the modified version of your styling.

If using the $highlight-color works for the progress bars, and the decision is to go ahead and add this to core ahead of the improved WP importer being released and the improved WP exporter being added to core, I can work on a patch to add the CSS to core. Otherwise, I can hold off.

For now, I think you can hold off. I'll include the styling from my fiddle in the importer & exporter rewrites and we'll see how it is received...and as they get closer to final, then we can consider whether to merge into core.

#8 @melchoyce
4 weeks ago

Tried one that borrows from core form styling, using @JDTrower's pen as a base: https://codepen.io/melchoyce/pen/zdjvXm

#9 in reply to: ↑ 7 @mgelves
2 weeks ago

  • Resolution set to invalid
  • Status changed from new to closed

Replying to pbiron:

For now, I think you can hold off. I'll include the styling from my fiddle in the importer & exporter rewrites and we'll see how it is received...and as they get closer to final, then we can consider whether to merge into core.

Hi @pbiron, considering you will include those changes in the "importer & exporter rewrites" can we mark as solved this ticket?

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


13 days ago

Note: See TracTickets for help on using tickets.