From 69643c060e80ab78c970d05bac90ad7bac1a9bc9 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Wed, 5 Jun 2024 14:20:20 +1000
Subject: [PATCH] Optimise use of flex-grow/margin auto spacing

Using new Box component where appropriate
---
 src/Playroom/Frames/Frames.css.ts             | 39 +++++++------------
 src/Playroom/Frames/Frames.tsx                |  5 ++-
 src/Playroom/FramesPanel/FramesPanel.css.ts   |  4 --
 src/Playroom/FramesPanel/FramesPanel.tsx      |  9 +++--
 .../SettingsPanel/SettingsPanel.css.ts        |  8 ----
 src/Playroom/SettingsPanel/SettingsPanel.tsx  |  5 ++-
 src/Playroom/Toolbar/Toolbar.css.ts           |  4 --
 src/Playroom/Toolbar/Toolbar.tsx              |  2 +-
 src/Playroom/sprinkles.css.ts                 |  9 +++--
 9 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/src/Playroom/Frames/Frames.css.ts b/src/Playroom/Frames/Frames.css.ts
index 658e1d34..ea619aad 100644
--- a/src/Playroom/Frames/Frames.css.ts
+++ b/src/Playroom/Frames/Frames.css.ts
@@ -12,33 +12,20 @@ export const root = style([
   }),
 ]);
 
-export const framesContainer = style([
-  sprinkles({
-    display: 'flex',
-    gap: 'gutter',
-  }),
-  {
-    marginInline: 'auto',
-  },
-]);
+export const frameContainer = sprinkles({
+  position: 'relative',
+  height: 'full',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+});
 
-export const frameContainer = style([
-  sprinkles({
-    position: 'relative',
-    height: 'full',
-    textAlign: 'left',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-  {},
-]);
-
-export const frame = style([
-  sprinkles({ position: 'relative', height: 'full', border: 0 }),
-  {
-    flexGrow: 1,
-  },
-]);
+export const frame = sprinkles({
+  position: 'relative',
+  height: 'full',
+  border: 0,
+  flexGrow: 1,
+});
 
 export const frameBorder = style([
   sprinkles({
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 07bae466..2484b973 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -9,6 +9,7 @@ import playroomConfig from '../../config';
 import frameSrc from './frameSrc';
 
 import * as styles from './Frames.css';
+import { Box } from '../Box/Box';
 
 interface FramesProps {
   code: string;
@@ -34,7 +35,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      <div className={styles.framesContainer}>
+      <Box display="flex" gap="gutter" marginX="auto">
         {frames.map((frame) => (
           <div
             key={`${frame.theme}_${frame.width}`}
@@ -65,7 +66,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
             </div>
           </div>
         ))}
-      </div>
+      </Box>
     </div>
   );
 }
diff --git a/src/Playroom/FramesPanel/FramesPanel.css.ts b/src/Playroom/FramesPanel/FramesPanel.css.ts
index 84507c04..bd1d800e 100644
--- a/src/Playroom/FramesPanel/FramesPanel.css.ts
+++ b/src/Playroom/FramesPanel/FramesPanel.css.ts
@@ -3,10 +3,6 @@ import { globalStyle, style } from '@vanilla-extract/css';
 import { colorPaletteVars, sprinkles } from '../sprinkles.css';
 import { vars } from '../vars.css';
 
-export const title = style({
-  marginRight: 'auto',
-});
-
 export const reset = style([
   sprinkles({
     position: 'relative',
diff --git a/src/Playroom/FramesPanel/FramesPanel.tsx b/src/Playroom/FramesPanel/FramesPanel.tsx
index 25ce095b..5e17fb1b 100644
--- a/src/Playroom/FramesPanel/FramesPanel.tsx
+++ b/src/Playroom/FramesPanel/FramesPanel.tsx
@@ -5,10 +5,11 @@ import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
-
-import * as styles from './FramesPanel.css';
 import { Helmet } from 'react-helmet';
 import { Inline } from '../Inline/Inline';
+import { Box } from '../Box/Box';
+
+import * as styles from './FramesPanel.css';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -47,9 +48,9 @@ interface FrameHeadingProps {
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
   <Inline space="none" alignY="center">
-    <div className={styles.title}>
+    <Box flexGrow={1}>
       <Heading level="3">{children}</Heading>
-    </div>
+    </Box>
     {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
   </Inline>
 );
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.css.ts b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
index 9fff7e5c..54a99dbe 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.css.ts
+++ b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
@@ -8,14 +8,6 @@ export const fieldset = sprinkles({
   padding: 'none',
 });
 
-export const keyboardShortcutsRow = sprinkles({
-  alignItems: 'center',
-});
-
-export const keyboardShortcutTitle = style({
-  marginRight: 'auto',
-});
-
 export const keyboardShortcutKeys = style([
   {
     display: 'grid',
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.tsx b/src/Playroom/SettingsPanel/SettingsPanel.tsx
index c4c3cd2a..7dabdc3c 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.tsx
+++ b/src/Playroom/SettingsPanel/SettingsPanel.tsx
@@ -18,6 +18,7 @@ import ColorModeDarkIcon from '../icons/ColorModeDarkIcon';
 import { Text } from '../Text/Text';
 import { Inline } from '../Inline/Inline';
 import { isMac } from '../../utils/formatting';
+import { Box } from '../Box/Box';
 
 const getKeyBindings = () => {
   const metaKeySymbol = isMac() ? '⌘' : 'Ctrl';
@@ -72,9 +73,9 @@ const KeyboardShortcut = ({
 
   return (
     <Inline space="small" alignY="center">
-      <div className={styles.keyboardShortcutTitle}>
+      <Box flexGrow={1}>
         <Text>{description}</Text>
-      </div>
+      </Box>
       <Text size={isMac() ? 'large' : 'standard'}>
         <div className={styles.keyboardShortcutKeys}>{shortcutSegments}</div>
       </Text>
diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts
index 6f56a4fc..d70ad976 100644
--- a/src/Playroom/Toolbar/Toolbar.css.ts
+++ b/src/Playroom/Toolbar/Toolbar.css.ts
@@ -42,10 +42,6 @@ export const sidebar = sprinkles({
   overflow: 'hidden',
 });
 
-export const topButtons = sprinkles({
-  transition: 'medium',
-});
-
 export const positions_isOpen = style({});
 export const positionContainer = style([
   sprinkles({
diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index 7c7000fa..527437e6 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -89,7 +89,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
       )}
       <div className={styles.sidebar}>
         <div className={styles.buttons}>
-          <div className={styles.topButtons}>
+          <div>
             {hasSnippets && (
               <ToolbarItem
                 active={isSnippetsOpen}
diff --git a/src/Playroom/sprinkles.css.ts b/src/Playroom/sprinkles.css.ts
index d4917a18..bddc9e06 100644
--- a/src/Playroom/sprinkles.css.ts
+++ b/src/Playroom/sprinkles.css.ts
@@ -55,6 +55,7 @@ const responsiveProperties = defineProperties({
     display: ['none', 'flex', 'block', 'inline'],
     flexDirection: ['row', 'column', 'row-reverse'],
     flexWrap: ['wrap'],
+    flexGrow: [0, 1],
     justifyContent: [
       'stretch',
       'flex-start',
@@ -69,10 +70,10 @@ const responsiveProperties = defineProperties({
     paddingBottom: vars.space,
     paddingLeft: vars.space,
     paddingRight: vars.space,
-    marginTop: vars.space,
-    marginBottom: vars.space,
-    marginLeft: vars.space,
-    marginRight: vars.space,
+    marginTop: { ...vars.space, auto: 'auto' },
+    marginBottom: { ...vars.space, auto: 'auto' },
+    marginLeft: { ...vars.space, auto: 'auto' },
+    marginRight: { ...vars.space, auto: 'auto' },
     overflow: ['hidden', 'auto'],
     boxShadow: colorPaletteVars.shadows,
     borderRadius: vars.radii,