From 129cee05ea34b03a77bef56f7146a59d097fa76e Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Tue, 2 Apr 2024 19:39:51 +0000 Subject: [PATCH 1/5] Add border-gradient mixin --- polaris-react/postcss-mixins/border-gradient.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 polaris-react/postcss-mixins/border-gradient.js diff --git a/polaris-react/postcss-mixins/border-gradient.js b/polaris-react/postcss-mixins/border-gradient.js new file mode 100644 index 00000000000..2324e328a79 --- /dev/null +++ b/polaris-react/postcss-mixins/border-gradient.js @@ -0,0 +1,12 @@ +// Applies a border-gradient effect to an element. +// @param $backgroundColor - Color of element inside the border. Transparent colors are not supported. +// @param $borderGradientColor - Color gradient to use for the border +// @param $borderRadius - Polaris BorderRadiusScale custom property. +module.exports = (_, backgroundColor, borderGradientColor, borderRadius) => ({ + borderRadius: borderRadius, + border: 'solid var(--p-border-width-025) transparent', + backgroundColor: backgroundColor, + backgroundImage: `linear-gradient(${backgroundColor}, ${backgroundColor}), ${borderGradientColor}`, + backgroundOrigin: 'border-box', + backgroundClip: 'padding-box, border-box', +}); From bf76cf552eec682fd928f7ae2abc71ed0376c82b Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Wed, 3 Apr 2024 02:29:58 +0000 Subject: [PATCH 2/5] Add in contextual save bar in context --- polaris-react/src/components/Frame/Frame.tsx | 25 +++++++++++++------ .../PolarisTestProvider.tsx | 4 +++ polaris-react/src/utilities/frame/context.ts | 2 ++ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index 4919b474338..b8359ba7a69 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -32,6 +32,7 @@ import { CSSAnimation, } from './components'; import styles from './Frame.module.css'; +import {UseFeatures} from '../../utilities/features'; export interface FrameProps { /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */ @@ -253,13 +254,21 @@ class FrameInner extends PureComponent { ); const contextualSaveBarMarkup = ( - - - + + {({dynamicTopBarAndReframe}) => + dynamicTopBarAndReframe ? ( + <> + ) : ( + + + + ) + } + ); const navigationOverlayMarkup = @@ -282,6 +291,8 @@ class FrameInner extends PureComponent { stopLoading: this.stopLoading, setContextualSaveBar: this.setContextualSaveBar, removeContextualSaveBar: this.removeContextualSaveBar, + contextualSaveBarVisible: this.state.showContextualSaveBar, + contextualSaveBarProps: this.contextualSaveBar, }; return ( diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx index 3336f828b32..d6b31aa5e64 100644 --- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx +++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx @@ -118,6 +118,8 @@ function createFrameContext({ toastMessages = [], setContextualSaveBar = noop, removeContextualSaveBar = noop, + contextualSaveBarVisible = false, + contextualSaveBarProps = {}, startLoading = noop, stopLoading = noop, }: Partial = {}): FrameContextType { @@ -128,6 +130,8 @@ function createFrameContext({ toastMessages, setContextualSaveBar, removeContextualSaveBar, + contextualSaveBarVisible, + contextualSaveBarProps, startLoading, stopLoading, }; diff --git a/polaris-react/src/utilities/frame/context.ts b/polaris-react/src/utilities/frame/context.ts index bec521524e4..3304f0b83cd 100644 --- a/polaris-react/src/utilities/frame/context.ts +++ b/polaris-react/src/utilities/frame/context.ts @@ -15,6 +15,8 @@ export interface FrameContextType { toastMessages: ToastPropsWithID[]; setContextualSaveBar(props: ContextualSaveBarProps): void; removeContextualSaveBar(): void; + contextualSaveBarVisible: boolean; + contextualSaveBarProps: ContextualSaveBarProps | null; startLoading(): void; stopLoading(): void; } From 8df8c86103b14d9956292f89e39213af0e4aec74 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Wed, 3 Apr 2024 15:36:33 +0000 Subject: [PATCH 3/5] Remove border-gradient --- polaris-react/postcss-mixins/border-gradient.js | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 polaris-react/postcss-mixins/border-gradient.js diff --git a/polaris-react/postcss-mixins/border-gradient.js b/polaris-react/postcss-mixins/border-gradient.js deleted file mode 100644 index 2324e328a79..00000000000 --- a/polaris-react/postcss-mixins/border-gradient.js +++ /dev/null @@ -1,12 +0,0 @@ -// Applies a border-gradient effect to an element. -// @param $backgroundColor - Color of element inside the border. Transparent colors are not supported. -// @param $borderGradientColor - Color gradient to use for the border -// @param $borderRadius - Polaris BorderRadiusScale custom property. -module.exports = (_, backgroundColor, borderGradientColor, borderRadius) => ({ - borderRadius: borderRadius, - border: 'solid var(--p-border-width-025) transparent', - backgroundColor: backgroundColor, - backgroundImage: `linear-gradient(${backgroundColor}, ${backgroundColor}), ${borderGradientColor}`, - backgroundOrigin: 'border-box', - backgroundClip: 'padding-box, border-box', -}); From a9e82639438443b1097e2645b120f4ac17fc84b2 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Wed, 10 Apr 2024 18:11:09 +0000 Subject: [PATCH 4/5] Add changeset --- .changeset/rude-boxes-carry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rude-boxes-carry.md diff --git a/.changeset/rude-boxes-carry.md b/.changeset/rude-boxes-carry.md new file mode 100644 index 00000000000..70eec3d4fef --- /dev/null +++ b/.changeset/rude-boxes-carry.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added `contextualSaveBarVisible` and `contextualSaveBarProps` to `Frame` context From ed8142fa6528ea028a49d1bb219ec6cd3ed0817b Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Wed, 10 Apr 2024 18:16:37 +0000 Subject: [PATCH 5/5] Fixed duplicate import --- polaris-react/src/components/Frame/Frame.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index b8359ba7a69..f638dafa824 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -32,7 +32,6 @@ import { CSSAnimation, } from './components'; import styles from './Frame.module.css'; -import {UseFeatures} from '../../utilities/features'; export interface FrameProps { /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */