[ContextualSaveBar] Add support for custom saveAction markup

Author: chloerice

.changeset/healthy-toads-rollerblade.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for setting custom markup on the `ContextualSaveBar` `saveAction` prop

polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss

@@ -1,12 +1,6 @@
 @import '../../../../styles/common';
 
 .ContextualSaveBar {
-  /* stylelint-disable -- polaris: Used to apply dark theme to action buttons */
-  --p-color-bg-surface: var(--p-color-bg-inverse);
-  --p-color-text: var(--p-color-text-inverse);
-  --p-color-bg-surface-hover: var(--p-color-bg-fill-inverse-hover);
-  --p-color-bg-surface-secondary-active: var(--p-color-bg-fill-inverse-active);
-  /* stylelint-enable */
   display: flex;
   height: $top-bar-height;
   background: var(--p-color-bg-inverse);
@@ -95,8 +89,8 @@
     --pc-button-bg_pressed: rgba(247, 247, 247, 1);
     --pc-button-bg_disabled: rgba(255, 255, 255, 0.2);
     --pc-button-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.48) inset,
-      -1px 0 0 0 rgba(255, 255, 255, 0.20) inset,
-      1px 0 0 0 rgba(255, 255, 255, 0.20) inset,
+      -1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
+      1px 0 0 0 rgba(255, 255, 255, 0.2) inset,
       0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset;
     --pc-button-box-shadow_active: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
       1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,

polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -3,16 +3,19 @@ import {AlertTriangleIcon} from '@shopify/polaris-icons';
 
 import {Button} from '../../../Button';
 import {Image} from '../../../Image';
-// eslint-disable-next-line import/no-deprecated
-import {LegacyStack} from '../../../LegacyStack';
+import {InlineStack} from '../../../InlineStack';
 import {Text} from '../../../Text';
 import {Icon} from '../../../Icon';
 import {classNames} from '../../../../utilities/css';
+import type {
+  ContextualSaveBarProps,
+  ContextualSaveBarAction,
+} from '../../../../utilities/frame';
 import {useFrame} from '../../../../utilities/frame';
-import type {ContextualSaveBarProps} from '../../../../utilities/frame';
 import {getWidth} from '../../../../utilities/get-width';
 import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
+import {isInterface} from '../../../../utilities/is-interface';
 
 import {DiscardConfirmationModal} from './components';
 import styles from './ContextualSaveBar.module.scss';
@@ -77,25 +80,34 @@ export function ContextualSaveBar({
     </Button>
   );
 
+  let saveActionMarkup;
+
   const saveActionContent =
-    saveAction && saveAction.content
+    saveAction && 'content' in saveAction
       ? saveAction.content
       : i18n.translate('Polaris.ContextualSaveBar.save');
 
-  const saveActionMarkup = saveAction && (
-    <Button
-      variant="primary"
-      tone="success"
-      size="large"
-      url={saveAction.url}
-      onClick={saveAction.onAction}
-      loading={saveAction.loading}
-      disabled={saveAction.disabled}
-      accessibilityLabel={saveAction.content}
-    >
-      {saveActionContent}
-    </Button>
-  );
+  if (saveAction && isInterface(saveAction)) {
+    const {url, loading, disabled, onAction} =
+      saveAction as ContextualSaveBarAction;
+
+    saveActionMarkup = (
+      <Button
+        variant="primary"
+        tone="success"
+        size="large"
+        onClick={onAction}
+        url={url}
+        loading={loading}
+        disabled={disabled}
+        accessibilityLabel={saveActionContent}
+      >
+        {saveActionContent}
+      </Button>
+    );
+  } else {
+    saveActionMarkup = saveAction;
+  }
 
   const width = getWidth(logo, 104);
 
@@ -134,11 +146,11 @@ export function ContextualSaveBar({
             )}
           </div>
           <div className={styles.ActionContainer}>
-            <LegacyStack spacing="tight" wrap={false}>
+            <InlineStack gap="200" wrap={false}>
               {secondaryMenu}
               {discardActionMarkup}
               {saveActionMarkup}
-            </LegacyStack>
+            </InlineStack>
           </div>
         </div>
       </div>

polaris-react/src/components/Page/Page.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useRef} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   DeleteIcon,
@@ -7,6 +7,7 @@ import {
   ExternalIcon,
   ViewIcon,
   MenuVerticalIcon,
+  ChevronDownIcon,
 } from '@shopify/polaris-icons';
 import {
   Badge,
@@ -15,6 +16,13 @@ import {
   LegacyStack,
   Page,
   PageActions,
+  Popover,
+  ActionList,
+  ButtonGroup,
+  TextField,
+  FormLayout,
+  ContextualSaveBar,
+  Frame,
 } from '@shopify/polaris';
 
 export default {
@@ -493,3 +501,177 @@ export function WithContentAfterTitleAndSubtitle() {
     </Page>
   );
 }
+
+export function WithSplitSaveAction() {
+  const initialState = {
+    title: 'Jar With Lock-Lid',
+    description: '',
+    isDraft: false,
+  };
+
+  const [active, setActive] = React.useState(false);
+  const [title, setTitle] = useState('Jar With Lock-Lid');
+  const [description, setDescription] = useState('');
+  const [isDirty, setIsDirty] = useState(false);
+  const [isDraft, setIsDraft] = useState(false);
+
+  const savedEditHistory = useRef<
+    {
+      title: string;
+      description: string;
+      isDraft: boolean;
+    }[]
+  >([]);
+
+  const handleChange = (name: string) => (value: string) => {
+    switch (name) {
+      case 'title':
+        handleDirtyState(name, value, title);
+        setTitle(value);
+        break;
+      case 'description':
+        handleDirtyState(name, value, description);
+        setDescription(value);
+        break;
+      default:
+        null;
+    }
+  };
+
+  const handleDirtyState = (
+    name: string,
+    newValue: string,
+    currentValue: string,
+  ) => {
+    if (
+      (newValue !== initialState[name] && !isDirty) ||
+      newValue !== currentValue
+    ) {
+      setIsDirty(true);
+    } else {
+      setIsDirty(false);
+    }
+  };
+
+  const handleDiscard = () => {
+    const previousState: {
+      title: string;
+      description: string;
+      isDraft: boolean;
+    } = savedEditHistory.current.pop() ?? initialState;
+
+    setTitle(previousState.title);
+    setDescription(previousState.description);
+    setIsDraft(previousState.isDraft);
+    setIsDirty(false);
+  };
+
+  const splitButton = (
+    <ButtonGroup variant="segmented">
+      <Button
+        size="large"
+        onClick={() => {
+          savedEditHistory.current.push({title, description, isDraft: false});
+          setIsDirty(false);
+          setIsDraft(false);
+        }}
+      >
+        Save
+      </Button>
+
+      <Popover
+        active={active}
+        preferredAlignment="right"
+        activator={
+          <Button
+            size="large"
+            onClick={() => setActive(true)}
+            icon={ChevronDownIcon}
+            accessibilityLabel="Other save actions"
+          />
+        }
+        autofocusTarget="first-node"
+        onClose={() => setActive(false)}
+        zIndexOverride={514}
+      >
+        <ActionList
+          actionRole="menuitem"
+          items={[
+            {
+              content: 'Save as draft',
+              onAction: () => {
+                setIsDraft(true);
+                savedEditHistory.current.push({
+                  title,
+                  description,
+                  isDraft: true,
+                });
+              },
+            },
+          ]}
+          onActionAnyItem={() => setIsDirty(false)}
+        />
+      </Popover>
+    </ButtonGroup>
+  );
+
+  const saveBar = isDirty ? (
+    <ContextualSaveBar
+      message="Unsaved changes"
+      saveAction={splitButton}
+      discardAction={{
+        content: 'Discard',
+        onAction: handleDiscard,
+      }}
+    />
+  ) : null;
+
+  console.log(savedEditHistory);
+
+  return (
+    <Frame
+      logo={{
+        width: 124,
+        contextualSaveBarSource:
+          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999',
+      }}
+    >
+      {saveBar}
+      <Page
+        backAction={{content: 'Products', url: '#'}}
+        title="Jar With Lock-Lid"
+        titleMetadata={
+          <Badge tone={isDraft ? 'info' : 'success'}>
+            {isDraft ? 'Draft' : 'Active'}
+          </Badge>
+        }
+        secondaryActions={[
+          {content: 'Duplicate'},
+          {content: 'View on your store'},
+        ]}
+        pagination={{
+          hasPrevious: true,
+          hasNext: true,
+        }}
+      >
+        <LegacyCard sectioned>
+          <FormLayout>
+            <TextField
+              autoComplete="off"
+              label="Title"
+              value={title}
+              onChange={handleChange('title')}
+            />
+            <TextField
+              multiline
+              autoComplete="off"
+              label="Description"
+              value={description}
+              onChange={handleChange('description')}
+            />
+          </FormLayout>
+        </LegacyCard>
+      </Page>
+    </Frame>
+  );
+}

polaris-react/src/utilities/frame/index.ts

@@ -3,6 +3,7 @@ export * from './hooks';
 export * from './context';
 
 export type {
+  ContextualSaveBarAction,
   ContextualSaveBarProps,
   ToastProps,
   ToastID,

polaris-react/src/utilities/frame/types.ts

@@ -13,7 +13,7 @@ export interface Logo {
   width?: number;
 }
 
-interface ContextualSaveBarAction {
+export interface ContextualSaveBarAction {
   /** A destination to link to */
   url?: string;
   /** Content the action displays */
@@ -40,7 +40,7 @@ export interface ContextualSaveBarProps {
   /** Accepts a string of content that will be rendered to the left of the actions */
   message?: string;
   /** Save or commit contextual save bar action with text defaulting to 'Save' */
-  saveAction?: ContextualSaveBarAction;
+  saveAction?: ContextualSaveBarAction | React.JSX.Element;
   /** Discard or cancel contextual save bar action with text defaulting to 'Discard' */
   discardAction?: ContextualSaveBarCombinedActionProps;
   /** Remove the normal max-width on the contextual save bar */