[ThemeProvider] Change frameOffset to accept string

Shopify · Jan 19, 2021 · 638d66c · 638d66c
1 parent 1a5ae98
commit 638d66c
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 18 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Remove `light` property from `Tooltip` as it now defaults to a light background ([#3803](https://github.com/Shopify/polaris-react/pull/3803)) ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
 - Made `title` property required in `Modal` for accessibility label, added `hideTitle` property ([#3803](https://github.com/Shopify/polaris-react/pull/3803)) ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
+- Changed the `frameOffset` prop to accept a string in `ThemeProvider` ([]())
 
 ### Enhancements
 

diff --git a/src/components/Frame/README.md b/src/components/Frame/README.md
@@ -648,7 +648,7 @@ function FrameExample() {
         background: '#225062',
       },
     },
-    frameOffset: 60,
+    frameOffset: '60px',
     logo: {
       width: 124,
       topBarSource:

diff --git a/src/utilities/theme/tests/utils.test.ts b/src/utilities/theme/tests/utils.test.ts
@@ -122,7 +122,7 @@ describe('buildCustomProperties', () => {
     expect(colors).not.toContain('--top-bar-background');
   });
 
-  it('creates default custom property of 0px for frameOffset when frameOffset is undefined and newDesignLanguage is false', () => {
+  it('creates default custom property of 0px for frameOffset when frameOffset is undefined', () => {
     const theme = {
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
@@ -132,19 +132,9 @@ describe('buildCustomProperties', () => {
     expect(colors).toMatchObject({'--p-frame-offset': '0px'});
   });
 
-  it('creates default custom property of 0px for frameOffset when frameOffset is undefined and newDesignLanguage is true', () => {
-    const theme = {
-      colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
-      colorScheme: DefaultColorScheme,
-    };
-
-    const colors = buildCustomProperties(theme, true);
-    expect(colors).toMatchObject({'--p-frame-offset': '0px'});
-  });
-
   it('creates custom property with value for frameOffset when frameOffset is provided and newDesignLanguage is false', () => {
     const theme = {
-      frameOffset: 60,
+      frameOffset: '60px',
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
     };
@@ -155,7 +145,7 @@ describe('buildCustomProperties', () => {
 
   it('creates custom property with value for frameOffset when frameOffset is provided and newDesignLanguage is true', () => {
     const theme = {
-      frameOffset: 80,
+      frameOffset: '80px',
       colors: {topBar: {background: '#eeeeee'}, surface: '#ffffff'},
       colorScheme: DefaultColorScheme,
     };

diff --git a/src/utilities/theme/types.ts b/src/utilities/theme/types.ts
@@ -52,7 +52,7 @@ export interface ThemeConfig {
   colors?: Partial<RoleColors> & LegacyColors;
   colorScheme?: ColorScheme;
   config?: Config;
-  frameOffset?: number;
+  frameOffset?: string;
 }
 
 export type CustomPropertiesLike = Record<string, string>;

diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts
@@ -26,18 +26,18 @@ export function buildCustomPropertiesNoMemo(
   newDesignLanguage: boolean,
   tokens?: Record<string, string>,
 ): CustomPropertiesLike {
-  const {colors = {}, colorScheme, config, frameOffset = 0} = themeConfig;
+  const {colors = {}, colorScheme, config, frameOffset = '0px'} = themeConfig;
   const mergedConfig = mergeConfigs(base, config || {});
 
   return newDesignLanguage
     ? customPropertyTransformer({
         ...colorFactory(colors, colorScheme, mergedConfig),
         ...tokens,
-        frameOffset: `${frameOffset}px`,
+        frameOffset,
       })
     : {
         ...buildLegacyColors(themeConfig),
-        ...customPropertyTransformer({frameOffset: `${frameOffset}px`}),
+        ...customPropertyTransformer({frameOffset}),
       };
 }