[card] Revert change to footer button alignment, add new footerAction…

…Alignment prop (left | right), default to right for backwards compat

UNRELEASED.md

@@ -6,6 +6,10 @@
 
 - Added `external` prop to `ResourceList` ([#2408](https://github.com/Shopify/polaris-react/pull/2408))
 - Added `onMouseEnter` and `onTouchStart` props to `Button` ([#2409](https://github.com/Shopify/polaris-react/pull/2409))
+- Updated the type of the `title` prop in `ChoiceList` from `string` to `ReactNode` ([#2355](https://github.com/Shopify/polaris-react/pull/2355))
+- Added `disabled` prop to `Filters` component ([#2389](https://github.com/Shopify/polaris-react/pull/2389))
+- Added `footerActionAlignment` prop to control `<Card>` footer action alignment, defaults to `'right'`
+- Added `reverse` prop to `<ButtonGroup>` to control visual render order ([#2407](https://github.com/Shopify/polaris-react/pull/2407))
 
 ### Bug fixes
 
@@ -15,6 +19,7 @@
 - Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418])
 - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of it's container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
 - Fixed a race condition in DatePicker ([#2373](https://github.com/Shopify/polaris-react/pull/2373))
+- Updated `Card` footer actions to be right aligned by default again ([#2407](https://github.com/Shopify/polaris-react/pull/2407))
 
 ### Documentation
 

src/components/ButtonGroup/ButtonGroup.scss

@@ -16,6 +16,10 @@ $item-spacing: spacing(tight);
   margin-left: (-1 * $item-spacing);
 }
 
+.Reverse {
+  flex-direction: row-reverse;
+}
+
 .Item {
   margin-top: $item-spacing;
   margin-left: $item-spacing;

src/components/ButtonGroup/ButtonGroup.tsx

@@ -13,19 +13,23 @@ export interface ButtonGroupProps {
   connectedTop?: boolean;
   /** Button components */
   children?: React.ReactNode;
+  //* Reverse the visual order of the buttons while maintaining DOM order */
+  reverse?: boolean;
 }
 
 export function ButtonGroup({
   children,
   segmented,
   fullWidth,
   connectedTop,
+  reverse = false,
 }: ButtonGroupProps) {
   const className = classNames(
     styles.ButtonGroup,
     segmented && styles.segmented,
     fullWidth && styles.fullWidth,
     connectedTop && styles.connectedTop,
+    reverse && styles.Reverse,
   );
 
   const contents = elementChildren(children).map((child, index) => (

src/components/Card/Card.scss

@@ -93,13 +93,17 @@
 
 .Footer {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
   padding: 0 spacing() spacing();
 
   @include page-content-when-not-fully-condensed {
     padding: 0 spacing(loose) spacing(loose);
   }
 
+  &.LeftJustified {
+    justify-content: flex-start;
+  }
+
   .Section-subdued + & {
     border-top: border();
     padding: spacing(loose);

src/components/Card/Card.tsx

@@ -29,6 +29,8 @@ export interface CardProps {
   secondaryFooterActions?: ComplexAction[];
   /** The content of the disclosure button rendered when there is more than one secondary footer action */
   secondaryFooterActionsDisclosureText?: string;
+  /** Alignment of the footer actions on the card, defaults to right */
+  footerActionAlignment?: 'right' | 'left';
 }
 
 // TypeScript can't generate types that correctly infer the typing of
@@ -49,6 +51,7 @@ export const Card: React.FunctionComponent<CardProps> & {
   primaryFooterAction,
   secondaryFooterActions,
   secondaryFooterActionsDisclosureText,
+  footerActionAlignment = 'right',
 }: CardProps) {
   const i18n = useI18n();
 
@@ -94,10 +97,15 @@ export const Card: React.FunctionComponent<CardProps> & {
 
   const footerMarkup =
     primaryFooterActionMarkup || secondaryFooterActionsMarkup ? (
-      <div className={styles.Footer}>
-        <ButtonGroup>
-          {secondaryFooterActionsMarkup}
+      <div
+        className={classNames(
+          styles.Footer,
+          footerActionAlignment === 'left' && styles.LeftJustified,
+        )}
+      >
+        <ButtonGroup reverse={footerActionAlignment === 'right'}>
           {primaryFooterActionMarkup}
+          {secondaryFooterActionsMarkup}
         </ButtonGroup>
       </div>
     ) : null;

src/components/Card/README.md

@@ -237,7 +237,7 @@ Use for less important card actions, or actions merchants may do before reviewin
 
 <!-- content-for: web -->
 
-Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information.
+Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information. Footer actions can be left or right aligned with the `footerActionAlignment` prop.
 
 <!-- /content-for -->
 

src/components/Card/tests/Card.test.tsx

@@ -4,7 +4,15 @@ import {
   trigger,
   findByTestID,
 } from 'test-utilities/legacy';
-import {Card, Badge, Button, Popover, ActionList} from 'components';
+import {mountWithApp} from 'test-utilities';
+import {
+  Card,
+  Badge,
+  Button,
+  ButtonGroup,
+  Popover,
+  ActionList,
+} from 'components';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {Section} from '../components';
 
@@ -74,6 +82,44 @@ describe('<Card />', () => {
     expect(card.find(Card.Header)).toHaveLength(1);
   });
 
+  describe('footerActionAlignment prop', () => {
+    it('renders right-aligned if not supplied', () => {
+      const card = mountWithApp(
+        <Card primaryFooterAction={{content: 'test action'}}>
+          <p>Some card content.</p>
+        </Card>,
+      );
+
+      expect(card).toContainReactComponent(ButtonGroup, {reverse: true});
+    });
+
+    it('renders right-aligned if set to "right"', () => {
+      const card = mountWithApp(
+        <Card
+          primaryFooterAction={{content: 'test action'}}
+          footerActionAlignment="right"
+        >
+          <p>Some card content.</p>
+        </Card>,
+      );
+
+      expect(card).toContainReactComponent(ButtonGroup, {reverse: true});
+    });
+
+    it('renders left-aligned if set to "left"', () => {
+      const card = mountWithApp(
+        <Card
+          primaryFooterAction={{content: 'test action'}}
+          footerActionAlignment="left"
+        >
+          <p>Some card content.</p>
+        </Card>,
+      );
+
+      expect(card).toContainReactComponent(ButtonGroup, {reverse: false});
+    });
+  });
+
   it('renders a primary footer action', () => {
     const card = mountWithAppProvider(
       <Card primaryFooterAction={{content: 'test action'}}>