Inconsistent status indicator spacing

[mattstein]

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 get¹. (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 👍

• Products Title column
• Subscriptions Subscription plan column (though column headings should also be Title Case)

Inconsistent/Unexpected 😐

@nfourtythree created a branch which looks like it resolves some of these. May not be exhaustive, but I sure tried:

Location	Fixed in bugfix/fixed-status-spacing-issues?
Orders Status and Paid Status columns	✓
Orders Order Status sidebar menu/filters
Orders → (order detail) Item statuses (for line items)
Customers User column
Promotions Sales and Discounts Name columns
Shipping Shipping Methods, Shipping Categories, and Shipping Zones Name columns
Store Settings → Countries & States Name column
Store Settings → (Subscriptions) Plans Name column
System Settings → Order Statuses Name column	✓
System Settings → Line Item Statuses → Name column	✓
System Settings → Line Item Statuses → (new item) Color dropdown
System Settings → Emails → Name column
System Settings → PDFs Name column
Top Products dashboard widget Name column

Additional info

• Craft CMS version: 3.7.7, 3.7.8
• Craft Commerce version: 3.4.1

---

1: Except in listings’ entry status dropdowns, which all get more spacing between the indicator and label:

[mattstein]

...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.

[nfourtythree]

@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.