Polaris-react: Card with footer actions tweak

[ouellettejordan]

Issue summary

Update Card with footer actions component to display footer actions [button(s)] to be left aligned by default as opposed to right aligned by default. Left aligned is the most common use and intended design of actions on cards.

Expected behaviour

When using Card with footer actions component the buttons on the card are left aligned by default.

Actual behaviour

When using Card with footer actions currently, the buttons are right aligned by default and you only get left aligned buttons when using the Card with custom footer actions

This seems odd as most (if not all) cases in the Admin, buttons show up left aligned (Home, Settings, etc). Are all these instances using the Card with custom footer actions then to get around this funky default of right aligned buttons? Something worth investigating when fixing this issue.

Also, with this fix, should we keep the Card with custom footer actions component and reserve that for right aligned actions?

cc @alex-page @HYPD @sarahill

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[qq99]

I think this is a bit of a strange change

Most of the order#show cards expect buttons on the right-side, and you can see how it appears a bit strange with the primary button on the right of a left-aligned button set

[qq99]

I understand that this makes sense for e.g. home cards:

but it seems like a regression of sorts for non-home cards

[qq99]

Shouldn't we adjust the primaryAction to be on the left, then?

[ouellettejordan]

@qq99 Ah, I see. I think the common pattern is that button are on the left side in most cases _except_ on detail views such as order show. How can we better document these distinctions/rules then?

It's seems like the distinctions/rules are...

Detail view card with footer actions
Right aligned

Card with footer actions
Left aligned

The way it's currently documented doesn't clarify these distinctions or seemingly unspoken rules. With the way it was implemented before this issue, we would end up with buttons aligned to the right by default in cases that they should not be.

cc @HYPD @sarahill

[qq99]

I imagine the primary button was on the right hand side for Order#show because the buttons were right-aligned, so the rule there was "edge of card == most important button" cause your eye reads outside->in

FWIW, I think Order#show could have left-aligned buttons, and they'd likely look OK, if the primary buttons were moved to the left side too. Right now it's just strange that the primary button is 2nd in render order if they're left-aligned

Right now, I think we're encouraging clicks on secondary buttons (by virtue of them appearing first in LTR reading order)

[qq99]

cc @mr-farai @AdamWhitcroft

[qq99]

While I can't really speak to the design problem, 1 possibility could be to have a footerActionAlignment="left|right" prop (something of this sort), and default it to... left?

[ouellettejordan]

I think this issue was to default it to the left as before it was the right which was not reflective of most use cases.

[qq99]

That may be true, but I think we're now in a worse UX state because the secondary actions are now appearing where the primary actions should. Anyone up for adjusting it?

[dleroux]

Any suggestions on how to best proceed? I'm not sure the flipping the buttons is the right solutions. There's also tab order and screen reader users to consider.

[sarahill]

I don't think we should flip the order of the buttons. To @dleroux 's point, that would not be good for accessibility.

[AdamWhitcroft]

I think the main issue here is the choice of example used for footer actions on https://polaris.shopify.com/ - it shows what is essentially a fulfillment card, but nowhere do we represent fulfillment cards like this.

Where in the product are we using cards with footer actions, that are left aligned, with the primary button being on the right?

[qq99]

It seems like 1 way to backwards compat this is:

• revert it
• add new prop to specify whether you want buttons on the right or the left, default it to right (today's behaviour)

Then, people who want to use primaryAction/secondaryActions but put them on the left/right have that option

Homecards looks more like it would use secondaryActions (for the subdued button) and new prop, tertiaryActions (for the textual button(s))

[AdamWhitcroft]

Adding a new prop could work, but we don't (to the best of my knowledge) have cards with left-aligned buttons, using primary and secondary buttons, where the primary button is the left-most.

So building props to accept a pattern we don't actually use might just open the door for things that exist outside of our current design system.

[rexmac]

Where in the product are we using cards with footer actions, that are left aligned, with the primary button being on the right?

we don't (to the best of my knowledge) have cards with left-aligned buttons, using primary and secondary buttons, where the primary button is the left-most.

Are there any examples of left-aligned primary buttons (with or without a secondary action)? I only ever see them right-aligned, e.g., actions in modal footers, show/detail page cards with multiple actions, and page dirty state "Save" buttons.

It seems we have no examples in the admin of cards with left-aligned buttons having both a secondary and primary button, as shown in the "Card with multiple footer actions". The only examples I found of left-aligned buttons were cards in Home that only have one button, styled as secondary.

It seems the "best" way to achieve the old pattern of right-aligned secondary and primary buttons on a card is to use the "Card with custom footer actions", i.e., place the buttons in the content of the card (rather than the footer) and wrap them in a custom, styled container (or maybe a Stack) to right align them.

To me, the alignment change feels like a regression or a change made to accommodate one page in the admin.

Left aligned is the most common use and intended design of actions on cards.

Is this true? And if so, I suppose my question is, should cards with secondary and primary buttons be following this new pattern of left-alignment, with the primary _after_ (i.e., to the right of) the secondary? Or should we be applying workarounds as mentioned above to retain the right-alignment?

For context, my team is in the midst of porting the Order Details page to React and it seems that this alignment change has not been ported to (or has not yet shipped) in polaris-rails, so we are wondering if the buttons should remain right-aligned for parity with the existing Order#show page in Rails, or if we should allow them to be left-aligned as in the "Card with multiple actions" example.

[ouellettejordan]

After looking at this further, it has become apparent to me that there is no commonality throughout the Admin and therefore making my initial comment that left aligned is the most common alignment incorrect.

I think that saying one alignment over the other is "correct" or should be the default alignment seems like the wrong approach with these footer actions. It seems in different contexts you may need different alignment? Can we make the system flexible enough to accommodate both and maybe not prioritize one over the other?

[qq99]

footerActionAlignment = 'right' | 'left'?
and default to 'right' for backwards compat? (every card written before this change expected them to to be right-aligned)

We can use flex to change the order (LTR or RTL) of the buttons so that DOM-order can still be priority order (I assume this would be all screen readers would need)