Closed mattstein closed 1 year ago
...and it’s come to my attention that the Craft status dropdown’s indicators have their centers visually align with the wider icons beneath them while the labels all align flush-left—but I don’t believe there are any cases where Commerce mixes status indicators and icons with menu items. Take that however you will, I guess.
@mattstein from your issue I have been through Commerce and made adjustments where things made sense.
In a number of places Commerce implements a status indicator followed by a word in the same way that Craft does for non-element items e.g. <span class="status live"> Text
which is a common pattern. This comes with its own spacing and styling.
I think it would be a good idea if we are looking for consistency to solve this in Craft first and Commerce can then follow suit. This could be done with CSS or maybe a simple twig macro/component (or maybe a helper method in PHP).
Below is the table in the main body of the issue with updated statuses of what has been changed/what needs to be done.
Location | Fixed in bugfix/fixed-status-spacing-issues ? |
---|---|
Orders Status and Paid Status columns | Same as Craft |
Orders Order Status sidebar menu/filters | Same as Craft |
Orders → (order detail) Item statuses (for line items) | ✓ |
Customers User column | ✓ |
Promotions Sales and Discounts Name columns | craftcms/cms#9704 |
Shipping Shipping Methods, Shipping Categories, and Shipping Zones Name columns | craftcms/cms#9704 |
Store Settings → Countries & States Name column | craftcms/cms#9704 |
Store Settings → (Subscriptions) Plans Name column | craftcms/cms#9704 |
System Settings → Order Statuses Name column | craftcms/cms#9704 |
System Settings → Line Item Statuses → Name column | craftcms/cms#9704 |
System Settings → Line Item Statuses → (new item) Color dropdown | Same as Craft |
System Settings → Emails → Name column | craftcms/cms#9704 |
System Settings → PDFs Name column | craftcms/cms#9704 |
Top Products dashboard widget Name column | craftcms/cms#9704 |
As noted in the table there is a bugfix due for the admintable library that will help address the inconsistencies in some status styling within table layouts.
Description
Commerce’s status indicators in table views and a few other places are visually inconsistent.
The Status column, seen here in the Spoke & Chain demo, wraps the text beneath its indicator while the Paid Status column does not:
The two columns also have different amounts of white space between the indicator and its label. Here they are compared with the first column in a Craft Entries listing:
The Products listing displays its Title field with the visual treatment I would expect:
The Customers listing includes more space between the indicator and its label:
Audit
I think these look best when the indicator visually gets 6px of space between its rightmost extent and the beginning of its label, which seems to be what Craft’s listings and relationship field indicators get1. (This also minimizes their pixel footprint, which seems like a two-fer.) With that in mind, here are the indicators I’ve seen in Commerce UI and whether they conform to that expectation:
Matching Craft/Expected 👍
Inconsistent/Unexpected 😐
@nfourtythree created a branch which looks like it resolves some of these. May not be exhaustive, but I sure tried:
bugfix/fixed-status-spacing-issues
?Additional info
1: Except in listings’ entry status dropdowns, which all get more spacing between the indicator and label: