Prototype ButtonGroup, PageActions and Footer actions

Shopify · May 1, 2024 · 74232cf · 74232cf
1 parent 74ef461
commit 74232cf
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 21 deletions.
diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.module.css b/polaris-react/src/components/ButtonGroup/ButtonGroup.module.css
@@ -3,11 +3,16 @@
   --pc-button-group-item: 10;
   --pc-button-group-focused: 20;
   /* stylelint-enable */
-  display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: center;
   margin-top: calc(-1 * var(--p-space-200));
   margin-left: calc(-1 * var(--p-space-200));
+
+  @media (--p-breakpoints-md-up) {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
 }
 
 .Item {
@@ -27,6 +32,7 @@
 
 .variantSegmented {
   display: flex;
+  flex-direction: row;
   flex-wrap: nowrap;
   margin-top: 0;
   margin-left: 0;

diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.tsx b/polaris-react/src/components/ButtonGroup/ButtonGroup.tsx
@@ -5,6 +5,7 @@ import {elementChildren} from '../../utilities/components';
 
 import {Item} from './components';
 import styles from './ButtonGroup.module.css';
+import {useBreakpoints} from '../../utilities/breakpoints';
 
 type Gap = 'extraTight' | 'tight' | 'loose';
 
@@ -33,12 +34,14 @@ export function ButtonGroup({
   connectedTop,
   noWrap,
 }: ButtonGroupProps) {
+  const {mdUp} = useBreakpoints();
+
   const className = classNames(
     styles.ButtonGroup,
     gap && styles[gap],
     variant && styles[variationName('variant', variant)],
     fullWidth && styles.fullWidth,
-    noWrap && styles.noWrap,
+    noWrap && mdUp && styles.noWrap,
   );
 
   const contents = elementChildren(children).map((child, index) => (

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,13 +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 */
@@ -27,6 +29,8 @@ export function PageActions({
   primaryAction,
   secondaryActions,
 }: PageActionsProps) {
+  const {mdUp} = useBreakpoints();
+
   let primaryActionMarkup: MaybeJSX = null;
   if (isReactElement(primaryAction)) {
     primaryActionMarkup = <>{primaryAction}</>;
@@ -43,12 +47,17 @@ export function PageActions({
     secondaryActionsMarkup = <>{secondaryActions}</>;
   }
 
-  return (
-    <div className={styles.PageActions}>
-      <LegacyStack distribution="trailing" 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>;
 }