Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card with footer actions tweak #2075

Closed
ouellettejordan opened this issue Sep 4, 2019 · 18 comments · Fixed by #2104
Closed

Card with footer actions tweak #2075

ouellettejordan opened this issue Sep 4, 2019 · 18 comments · Fixed by #2104
Assignees

Comments

@ouellettejordan
Copy link

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

@ghost
Copy link

ghost commented Sep 4, 2019

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

@qq99
Copy link
Contributor

qq99 commented Sep 26, 2019

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
Screen Shot 2019-09-26 at 11 35 12 AM

@qq99
Copy link
Contributor

qq99 commented Sep 26, 2019

I understand that this makes sense for e.g. home cards:
Screen Shot 2019-09-26 at 11 36 10 AM
but it seems like a regression of sorts for non-home cards

@qq99
Copy link
Contributor

qq99 commented Sep 26, 2019

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

@ouellettejordan
Copy link
Author

ouellettejordan commented Sep 26, 2019

@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
Copy link
Contributor

qq99 commented Sep 26, 2019

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
Copy link
Contributor

qq99 commented Sep 26, 2019

cc @mr-farai @AdamWhitcroft

@qq99
Copy link
Contributor

qq99 commented Sep 26, 2019

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
Copy link
Author

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
Copy link
Contributor

qq99 commented Sep 26, 2019

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
Copy link
Contributor

dleroux commented Sep 26, 2019

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
Copy link
Contributor

sarahill commented Sep 26, 2019

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

@AdamWhitcroft
Copy link

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
Copy link
Contributor

qq99 commented Sep 26, 2019

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
Copy link

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
Copy link
Contributor

rexmac commented Oct 28, 2019

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
Copy link
Author

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
Copy link
Contributor

qq99 commented Oct 28, 2019

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants