[Card] Revert change to footer button alignment, add new footerActionAlignment prop

[qq99]

Reverts #2104
See #2075 for more context on this change

WHY are these changes introduced?

It seemed to be generally accepted that this change is rendering buttons strangely, as seen in #2075 (comment).

After the PR I am reverting, polaris-react renders secondary buttons on the left, then primary buttons, which is contrary to the expected Primary > Secondary reading order. The blue button should be on the left.

So, I set out to revert this change (because every consumer of Card would be expecting right-aligned buttons prior to that change, IMO that was a breaking change), and give the ability to control alignment.

WHAT is this pull request doing?

Final product:

• Adds new footerActionAlignment prop to <Card> to control the overall left/right alignment. Default to right for historical consumers

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page, Card} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Card
        title="Card with right-aligned footer actions"
        primaryFooterAction={{content: 'Do a thing'}}
        secondaryFooterActions={[
          {content: 'Do another thing'},
          {content: 'Do a third thing'},
        ]}
        sectioned
      >
        Some copy
      </Card>
      <Card
        title="Card with left-aligned footer actions"
        primaryFooterAction={{content: 'Do a thing'}}
        secondaryFooterActions={[
          {content: 'Do another thing'},
          {content: 'Do a third thing'},
        ]}
        footerActionAlignment="left"
        sectioned
      >
        Some copy
      </Card>
    </Page>
  );
}

🎩 checklist

• Tested on mobile (via browser simulation)
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	5
Files potentially affected	4

Details

All files potentially affected (total: 4)

• /src/components/Card/Card.tsx
• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/CalloutCard/CalloutCard.tsx
• /src/components/SettingToggle/SettingToggle.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Card/Card.scss (total: 4)

Files potentially affected (total: 4)

• /src/components/Card/Card.tsx
• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/CalloutCard/CalloutCard.tsx
• /src/components/SettingToggle/SettingToggle.tsx

🧩 src/components/Card/Card.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/CalloutCard/CalloutCard.tsx
• /src/components/SettingToggle/SettingToggle.tsx

📄 src/components/Card/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Card/tests/Card.test.tsx (total: 0)

Files potentially affected (total: 0)

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[rexmac]

👍 Thanks for this! 👏

[mitchmaps]

LGTM 👍 🔥

[yourpalsonja]

This LGTM. 👍

Reading #2075, it seems like we still haven't come to a consensus on how the pattern should actually exist in the admin.

@qq99 would you want to schedule an office hours with a designer from the Polaris team and me?

[qq99]

Hi all, I chatted with @dpersing who recommended we actually change DOM order in this case

A good example was for partially sighted users who would:

• visually see buttons in 1 order
• hear buttons read in the opposite order
  => confusion

I've updated the PR to change the DOM order as a result (previously it was CSS flex to change visual order)

[qq99]

There's a dupe of this above