Problem/Motivation
So that the linearity of the workflow can be understood and the states can all be seen in one place, style it like a button bar.
Proposed resolution
The design looks like this:

Which is a direct screenshot of the preview from this codepen example of how it can work: http://codepen.io/tkoleary/pen/zZjKpe?editors=1100
It borrows styles from button classes, uses no javascript and is natively accessible since the markup is just checkboxes.
Remaining tasks
Make patch
User interface changes
Instead of a select box there is a bar of buttons for the states.
Comments
Comment #2
tkoleary commentedComment #3
tkoleary commentedComment #4
tkoleary commentedComment #5
tkoleary commentedComment #6
timmillwoodThis shows a linear workflow process. What if the process is not linear?
Comment #7
tkoleary commented@timmillwood "My only concern with that @tkoleary @yoroy is are all workflows linear?” No, but lining them up does not necessarily imply linearity (although an average user will benefit from a linear and easy to understand flow). The primary benefit is that they see them at once.
Example of non linear would be:
"Draft, Ready for legal review, Ready for editorial review, Published,”
where not all pieces of content require legal review. You can still line them up.
I practice I think it’s more likely in examples like above that users will just make another workflow for legal.
Comment #8
andrewmacpherson commentedFeedback about the design:
In some configurations this could fail WCAG 2 SC 1.4.1 Use of Color.
The "Add workflow" action creates such a workflow, with just two states (draft, published).
Could we have a "tick" icon in the selected state, next to the text label?
Feedback about the codepen:
<label for="edit-moderation-state-0-state">points to a div, which doesn't work. When this is implemented in Drupal, I assume the state select is just a FormAPI'#type' => 'radios'with some custom styling? If so, there isn't an issue here, as FAPI radios are labelled with fieldset/legend.Comment #10
xjmThis feature request assumes a linear workflow with just a few workflow states. However, it's entirely possible to have a workflow that's a tree, or that has more states than are usable in a line (IIRC 5-7 items is the point at which it becomes hard for users to understand in a horizontal list of buttons).
E.g., it might be that an "Review for placement" state can transition to all three of (say) "Approved front page news", "Approved internal news", "Approved email digest news", etc. that create queues for editors to do other stuff with, and it could be that none of those states can transition back to "Review for placement" They might all be able to transition to and from "Review for placement", but what would be displayed when it is in "Review for placement"?
Basically, any flow is possible, so we can't assume it's a line. I also don't know if it makes sense to magically pick a line when the workflow is linear and switch back to the select box when it's not.
Comment #11
sam152 commentedThe current field is configurable on the form display, meaning we can contrib any widgets we like for it and use those if we please. Writing one, I found there were a few blockers if anyone is interested in looking at those:
#2914839: The current moderation state in the "meta" region on content entity forms is coupled to the moderation_state field widget.
#2915384: Alternative moderation_state field widgets do not receive the same access/visibility treatment as the default ModerationStateWidget.
Comment #23
mgiffordTagging