Prototype Modal Footer buttons and update page action order

Shopify · May 1, 2024 · 4313dcf · 4313dcf
1 parent f3db89c
commit 4313dcf
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 24 deletions.
diff --git a/polaris-react/src/components/Modal/components/Footer/Footer.tsx b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
@@ -4,6 +4,8 @@ import type {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
 import {Box} from '../../../Box';
 import {InlineStack} from '../../../InlineStack';
+import {BlockStack} from '../../../BlockStack';
+import {useBreakpoints} from '../../../../utilities/breakpoints';
 
 export interface FooterProps {
   /** Primary action */
@@ -19,18 +21,39 @@ export function Footer({
   secondaryActions,
   children,
 }: FooterProps) {
+  const {mdUp} = useBreakpoints();
+
   const primaryActionButton =
     (primaryAction && buttonsFrom(primaryAction, {variant: 'primary'})) || null;
   const secondaryActionButtons =
     (secondaryActions && buttonsFrom(secondaryActions)) || null;
+
+  const actionsContent = mdUp ? (
+    <InlineStack gap="200" direction={mdUp ? 'row' : 'row-reverse'}>
+      {secondaryActionButtons}
+      {primaryActionButton}
+    </InlineStack>
+  ) : (
+    <BlockStack gap="200">
+      {primaryActionButton}
+      {secondaryActionButtons}
+    </BlockStack>
+  );
+
   const actions =
-    primaryActionButton || secondaryActionButtons ? (
-      <InlineStack gap="200">
-        {secondaryActionButtons}
-        {primaryActionButton}
-      </InlineStack>
-    ) : null;
+    primaryActionButton || secondaryActionButtons ? actionsContent : null;
 
+  const content = mdUp ? (
+    <InlineStack gap="400" blockAlign="center" align="space-between">
+      <Box>{children}</Box>
+      {actions}
+    </InlineStack>
+  ) : (
+    <BlockStack>
+      <Box>{children}</Box>
+      {actions}
+    </BlockStack>
+  );
   return (
     <InlineStack gap="400" blockAlign="center">
       <Box
@@ -39,10 +62,7 @@ export function Footer({
         padding="400"
         width="100%"
       >
-        <InlineStack gap="400" blockAlign="center" align="space-between">
-          <Box>{children}</Box>
-          {actions}
-        </InlineStack>
+        {content}
       </Box>
     </InlineStack>
   );

diff --git a/polaris-react/src/components/PageActions/PageActions.tsx b/polaris-react/src/components/PageActions/PageActions.tsx
@@ -6,14 +6,15 @@ import type {
   LoadableAction,
 } from '../../types';
 // eslint-disable-next-line import/no-deprecated
-import {LegacyStack} from '../LegacyStack';
 import {ButtonGroup} from '../ButtonGroup';
 import {buttonsFrom} from '../Button';
 import {isInterface} from '../../utilities/is-interface';
 import {isReactElement} from '../../utilities/is-react-element';
 
 import styles from './PageActions.module.css';
 import {useBreakpoints} from '../../utilities/breakpoints';
+import {BlockStack} from '../BlockStack';
+import {InlineStack} from '../InlineStack';
 
 export interface PageActionsProps {
   /** The primary action for the page */
@@ -29,8 +30,6 @@ export function PageActions({
   secondaryActions,
 }: PageActionsProps) {
   const {mdUp} = useBreakpoints();
-  const distribution = mdUp ? 'trailing' : 'fill';
-  const isVertical = mdUp ? false : true;
 
   let primaryActionMarkup: MaybeJSX = null;
   if (isReactElement(primaryAction)) {
@@ -48,16 +47,17 @@ export function PageActions({
     secondaryActionsMarkup = <>{secondaryActions}</>;
   }
 
-  return (
-    <div className={styles.PageActions}>
-      <LegacyStack
-        distribution={distribution}
-        vertical={isVertical}
-        spacing="tight"
-      >
-        {secondaryActionsMarkup}
-        {primaryActionMarkup}
-      </LegacyStack>
-    </div>
+  const actionsMarkup = mdUp ? (
+    <InlineStack gap="200" align="end">
+      {secondaryActionsMarkup}
+      {primaryActionMarkup}
+    </InlineStack>
+  ) : (
+    <BlockStack gap="200">
+      {primaryActionMarkup}
+      {secondaryActionsMarkup}
+    </BlockStack>
   );
+
+  return <div className={styles.PageActions}>{actionsMarkup}</div>;
 }