Contextual save bar rethink init

Shopify · Jan 18, 2024 · 4c82098 · 4c82098
1 parent 2dcc73f
commit 4c82098
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 105 deletions.
diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -22,12 +22,7 @@ import type {
 } from '../../utilities/frame';
 import {UseTheme} from '../../utilities/use-theme';
 
-import {
-  ToastManager,
-  Loading,
-  ContextualSaveBar,
-  CSSAnimation,
-} from './components';
+import {ToastManager, Loading} from './components';
 import styles from './Frame.module.scss';
 
 export interface FrameProps {
@@ -242,16 +237,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       sidebar && styles.hasSidebar,
     );
 
-    const contextualSaveBarMarkup = (
-      <CSSAnimation
-        in={showContextualSaveBar}
-        className={styles.ContextualSaveBar}
-        type="fade"
-      >
-        <ContextualSaveBar {...this.contextualSaveBar} />
-      </CSSAnimation>
-    );
-
     const navigationOverlayMarkup =
       showMobileNavigation && isNavigationCollapsed ? (
         <Backdrop
@@ -272,6 +257,8 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       stopLoading: this.stopLoading,
       setContextualSaveBar: this.setContextualSaveBar,
       removeContextualSaveBar: this.removeContextualSaveBar,
+      contextualSaveBarVisible: this.state.showContextualSaveBar,
+      contextualSaveBarProps: this.contextualSaveBar,
     };
 
     return (
@@ -284,7 +271,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           {skipMarkup}
           {topBarMarkup}
           {navigationMarkup}
-          {contextualSaveBarMarkup}
           {loadingMarkup}
           {navigationOverlayMarkup}
           <main

diff --git a/...ris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss b/...ris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss
@@ -2,16 +2,25 @@
 
 .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: var(--p-color-bg-surface-inverse);
+  // --p-color-text: var(--p-color-text-brand-on-bg-fill);
   --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);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  height: 36px;
+  background-color: var(--p-color-bg-surface-inverse);
+
+  border-radius: var(--p-border-radius-300);
+  border: solid var(--p-border-width-025) transparent;
+  // stylelint-disable-next-line polaris/color/function-disallowed-list -- custom top border color for shading effect
+  background-image: linear-gradient(
+      var(--p-color-bg-surface-inverse),
+      var(--p-color-bg-surface-inverse)
+    ),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 
   .LogoContainer {
     border-right: none;
@@ -50,63 +59,53 @@
     $layout-width-inner-spacing-base;
   height: 100%;
   margin: 0 auto;
-  padding: 0 var(--p-space-400);
-
-  @media (--p-breakpoints-sm-up) {
-    padding: 0 var(--p-space-500);
-  }
-
-  @media (--p-breakpoints-md-up) {
-    padding: 0 var(--p-space-800);
-  }
+  padding: var(--p-space-100);
+  padding-left: var(--p-space-200);
 }
 
 .fullWidth {
-  max-width: none;
-  padding: 0 var(--p-space-400);
+  // max-width: none;
+  // padding: 0 var(--p-space-400);
 }
 
 .MessageContainer {
   display: flex;
   flex-direction: row;
-  gap: var(--p-space-200);
+  align-items: center;
+  gap: var(--p-space-050);
+
+  h2 {
+    color: var(--p-color-text-brand-on-bg-fill);
+  }
 
   // stylelint-disable -- Icon overrides specific to Contextual Save Bar
   & [class*='Polaris-Icon__Svg'],
   & [class*='Icon-Svg'] {
-    fill: var(--p-color-text-inverse);
+    fill: var(--p-color-text-brand-on-bg-fill);
   }
 }
 
 .ActionContainer {
   flex-shrink: 0;
 
-  & [class*='Polaris-Button--variantPrimary'],
-  & [class*='Button-variantPrimary'] {
-    --pc-button-color: rgba(48, 48, 48, 1);
-    --pc-button-color_disabled: var(--p-color-text-secondary);
-    --pc-button-bg: rgba(255, 255, 255, 1);
-    --pc-button-bg_hover: rgba(250, 250, 250, 1);
-    --pc-button-bg_active: rgba(247, 247, 247, 1);
-    --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,
-      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,
-      -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
-  }
-
   & [class*='Polaris-Button--variantTertiary'],
   & [class*='Button-variantTertiary'] {
-    --pc-button-bg: var(--p-color-bg-fill-inverse);
-    --pc-button-bg_hover: var(--p-color-bg-fill-inverse-hover);
-    --pc-button-bg_active: var(--p-color-bg-fill-inverse-active);
-    --pc-button-bg_disabled: var(--pc-button-bg);
-    --pc-button-color: var(--p-color-text-inverse);
-    --pc-button-color_disabled: var(--p-color-text-secondary);
+    --p-color-text: var(--p-color-text-brand-on-bg-fill);
+    background-color: rgba(255, 255, 255, 0.1);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    &:active {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &[class*='Polaris-Button--disabled'],
+    &[class*='Button-disabled'] {
+      --pc-button-text: var(--p-color-text-secondary);
+      background: var(--pc-button-color);
+    }
   }
   /* stylelint-enable */
 }

diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
@@ -1,33 +1,27 @@
 import React, {useCallback} from 'react';
-import {AlertTriangleIcon} from '@shopify/polaris-icons';
+import {AlertBubbleIcon} from '@shopify/polaris-icons';
 
 import {Button} from '../../../Button';
-import {Image} from '../../../Image';
 // eslint-disable-next-line import/no-deprecated
 import {LegacyStack} from '../../../LegacyStack';
 import {Text} from '../../../Text';
 import {Icon} from '../../../Icon';
 import {classNames} from '../../../../utilities/css';
-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 {DiscardConfirmationModal} from './components';
 import styles from './ContextualSaveBar.module.scss';
 
 export function ContextualSaveBar({
-  alignContentFlush,
   message,
   saveAction,
   discardAction,
   fullWidth,
-  contextControl,
   secondaryMenu,
 }: ContextualSaveBarProps) {
   const i18n = useI18n();
-  const {logo} = useFrame();
   const {
     value: discardConfirmationModalVisible,
     toggle: toggleDiscardConfirmationModal,
@@ -66,7 +60,7 @@ export function ContextualSaveBar({
   const discardActionMarkup = discardAction && (
     <Button
       variant="tertiary"
-      size="large"
+      size="slim"
       url={discardAction.url}
       onClick={discardActionHandler}
       loading={discardAction.loading}
@@ -84,9 +78,7 @@ export function ContextualSaveBar({
 
   const saveActionMarkup = saveAction && (
     <Button
-      variant="primary"
-      tone="success"
-      size="large"
+      size="slim"
       url={saveAction.url}
       onClick={saveAction.onAction}
       loading={saveAction.loading}
@@ -97,23 +89,6 @@ export function ContextualSaveBar({
     </Button>
   );
 
-  const width = getWidth(logo, 104);
-
-  const imageMarkup = logo && (
-    <Image style={{width}} source={logo.contextualSaveBarSource || ''} alt="" />
-  );
-
-  const logoMarkup =
-    alignContentFlush || contextControl ? null : (
-      <div className={styles.LogoContainer} style={{width}}>
-        {imageMarkup}
-      </div>
-    );
-
-  const contextControlMarkup = contextControl ? (
-    <div className={styles.ContextControl}>{contextControl}</div>
-  ) : null;
-
   const contentsClassName = classNames(
     styles.Contents,
     fullWidth && styles.fullWidth,
@@ -122,13 +97,11 @@ export function ContextualSaveBar({
   return (
     <>
       <div className={styles.ContextualSaveBar}>
-        {contextControlMarkup}
-        {logoMarkup}
         <div className={contentsClassName}>
           <div className={styles.MessageContainer}>
-            <Icon source={AlertTriangleIcon} />
+            <Icon source={AlertBubbleIcon} />
             {message && (
-              <Text as="h2" variant="headingMd" tone="text-inverse" truncate>
+              <Text as="h2" variant="bodySm" tone="text-inverse" truncate>
                 {message}
               </Text>
             )}

diff --git a/polaris-react/src/components/Frame/index.ts b/polaris-react/src/components/Frame/index.ts
@@ -1,4 +1,5 @@
 export * from './Frame';
+export {ContextualSaveBar} from './components';
 
 export {
   DEFAULT_TOAST_DURATION,

diff --git a/polaris-react/src/components/TopBar/TopBar.module.scss b/polaris-react/src/components/TopBar/TopBar.module.scss
@@ -166,3 +166,39 @@ $right-column: 1fr;
 .SecondaryMenu svg {
   fill: var(--p-color-icon-inverse);
 }
+
+.SearchBar-enter {
+  transform: translateY(-100%);
+}
+
+.SearchBar-enter-active {
+  transition: transform var(--p-motion-duration-300);
+  transform: translateY(11px);
+}
+
+.SearchBar-exit {
+  transform: translateY(-26px);
+}
+
+.SearchBar-exit-active {
+  transform: translateY(-112px);
+  transition: transform var(--p-motion-duration-300);
+}
+
+.ContextualSaveBar-enter {
+  transform: translateY(calc(100% + 36px));
+}
+
+.ContextualSaveBar-enter-active {
+  transition: transform var(--p-motion-duration-300);
+  transform: translateY(10px);
+}
+
+.ContextualSaveBar-exit {
+  transform: translateY(-24px);
+}
+
+.ContextualSaveBar-exit-active {
+  transform: translateY(100%);
+  transition: transform var(--p-motion-duration-300);
+}