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
Comments
👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. |
Shouldn't we adjust the |
@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 Card with footer actions 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. |
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) |
cc @mr-farai @AdamWhitcroft |
While I can't really speak to the design problem, 1 possibility could be to have a |
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. |
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? |
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. |
I don't think we should flip the order of the buttons. To @dleroux 's point, that would not be good for accessibility. |
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? |
It seems like 1 way to backwards compat this is:
Then, people who want to use Homecards looks more like it would use |
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. |
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 To me, the alignment change feels like a regression or a change made to accommodate one page in the admin.
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. |
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? |
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) |
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 theCard 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
The text was updated successfully, but these errors were encountered: