Move margin auto logic into spacer component

seek-oss · Jun 4, 2024 · 0cd22ff · 0cd22ff
1 parent 1045305
commit 0cd22ff
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 101 deletions.
diff --git a/src/Playroom/Frames/Frames.css.ts b/src/Playroom/Frames/Frames.css.ts
@@ -12,26 +12,13 @@ export const root = style([
   }),
 ]);
 
-export const framesContainer = style([
-  sprinkles({
-    display: 'flex',
-    gap: 'gutter',
-  }),
-  {
-    marginInline: 'auto',
-  },
-]);
-
-export const frameContainer = style([
-  sprinkles({
-    position: 'relative',
-    height: 'full',
-    textAlign: 'left',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-  {},
-]);
+export const frameContainer = sprinkles({
+  position: 'relative',
+  height: 'full',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+});
 
 export const frame = style([
   sprinkles({ position: 'relative', height: 'full', border: 0 }),

diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
@@ -9,6 +9,8 @@ import playroomConfig from '../../config';
 import frameSrc from './frameSrc';
 
 import * as styles from './Frames.css';
+import { Spacer } from '../Spacer/Spacer';
+import { Inline } from '../Inline/Inline';
 
 interface FramesProps {
   code: string;
@@ -34,7 +36,8 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      <div className={styles.framesContainer}>
+      <Spacer />
+      <Inline space="gutter">
         {frames.map((frame) => (
           <div
             key={`${frame.theme}_${frame.width}`}
@@ -65,7 +68,8 @@ export default function Frames({ code, themes, widths }: FramesProps) {
             </div>
           </div>
         ))}
-      </div>
+      </Inline>
+      <Spacer />
     </div>
   );
 }
diff --git a/src/Playroom/FramesPanel/FramesPanel.css.ts b/src/Playroom/FramesPanel/FramesPanel.css.ts
@@ -2,10 +2,6 @@ import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
 import { colorPaletteVars, sprinkles, vars } from '../sprinkles.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
@@ -9,6 +9,7 @@ import { Text } from '../Text/Text';
 import * as styles from './FramesPanel.css';
 import { Helmet } from 'react-helmet';
 import { Inline } from '../Inline/Inline';
+import { Spacer } from '../Spacer/Spacer';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -47,9 +48,8 @@ interface FrameHeadingProps {
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
   <Inline space="none" alignY="center">
-    <div className={styles.title}>
-      <Heading level="3">{children}</Heading>
-    </div>
+    <Heading level="3">{children}</Heading>
+    <Spacer />
     {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
   </Inline>
 );

diff --git a/src/Playroom/Inline/Inline.css.ts b/src/Playroom/Inline/Inline.css.ts
@@ -7,7 +7,6 @@ const horizontalAlignment = createVar();
 export const gap = style({
   display: 'flex',
   flexDirection: 'row',
-  flexWrap: 'wrap',
   gap: size,
   alignItems: horizontalAlignment,
 });

diff --git a/src/Playroom/SettingsPanel/SettingsPanel.css.ts b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
@@ -11,10 +11,6 @@ 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
@@ -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 { Spacer } from '../Spacer/Spacer';
 
 const getKeyBindings = () => {
   const metaKeySymbol = isMac() ? '⌘' : 'Ctrl';
@@ -72,9 +73,8 @@ const KeyboardShortcut = ({
 
   return (
     <Inline space="small" alignY="center">
-      <div className={styles.keyboardShortcutTitle}>
-        <Text>{description}</Text>
-      </div>
+      <Text>{description}</Text>
+      <Spacer />
       <Text size={isMac() ? 'large' : 'standard'}>
         <div className={styles.keyboardShortcutKeys}>{shortcutSegments}</div>
       </Text>

diff --git a/src/Playroom/Spacer/Spacer.css.ts b/src/Playroom/Spacer/Spacer.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const spacer = style({
+  width: '0',
+  height: '0',
+  margin: 'auto',
+  pointerEvents: 'none',
+});
diff --git a/src/Playroom/Spacer/Spacer.tsx b/src/Playroom/Spacer/Spacer.tsx
@@ -0,0 +1,5 @@
+import * as styles from './Spacer.css';
+
+export const Spacer = () => (
+  <div aria-hidden tabIndex={-1} className={styles.spacer} />
+);
diff --git 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({
@@ -74,9 +70,7 @@ export const buttons = style([
   sprinkles({
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
     pointerEvents: 'auto',
-    justifyContent: 'space-between',
     position: 'relative',
     zIndex: 1,
   }),

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
@@ -18,6 +18,7 @@ import SettingsIcon from '../icons/SettingsIcon';
 import { isMac } from '../../utils/formatting';
 
 import { CSSTransition } from 'react-transition-group';
+import { Spacer } from '../Spacer/Spacer';
 
 interface Props {
   themes: PlayroomProps['themes'];
@@ -89,72 +90,72 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
       )}
       <div className={styles.sidebar}>
         <div className={styles.buttons}>
-          <div className={styles.topButtons}>
-            {hasSnippets && (
-              <ToolbarItem
-                active={isSnippetsOpen}
-                title={`Insert snippet (${isMac() ? '⌘K' : 'Ctrl+K'})`}
-                disabled={!validCursorPosition}
-                onClick={() => {
-                  dispatch({
-                    type: 'toggleToolbar',
-                    payload: { panel: 'snippets' },
-                  });
-                }}
-              >
-                <AddIcon />
-              </ToolbarItem>
-            )}
-            <ToolbarItem
-              active={isFramesOpen}
-              showIndicator={hasFilteredFrames}
-              title="Configure visible frames"
-              onClick={() => {
-                dispatch({
-                  type: 'toggleToolbar',
-                  payload: { panel: 'frames' },
-                });
-              }}
-            >
-              <FramesIcon />
-            </ToolbarItem>
-
+          {hasSnippets && (
             <ToolbarItem
-              active={isPreviewOpen}
-              title="Preview playroom"
-              disabled={code.trim().length === 0}
+              active={isSnippetsOpen}
+              title={`Insert snippet (${isMac() ? '⌘K' : 'Ctrl+K'})`}
+              disabled={!validCursorPosition}
               onClick={() => {
                 dispatch({
                   type: 'toggleToolbar',
-                  payload: { panel: 'preview' },
+                  payload: { panel: 'snippets' },
                 });
               }}
             >
-              <PlayIcon />
-            </ToolbarItem>
-          </div>
-
-          <div>
-            <ToolbarItem
-              title={`Copy Playroom link (${isMac() ? '⌘⇧C' : 'Ctrl+Shift+C'})`}
-              success={copying}
-              onClick={copyHandler}
-            >
-              <ShareIcon />
+              <AddIcon />
             </ToolbarItem>
-            <ToolbarItem
-              active={isSettingsOpen}
-              title="Edit settings"
-              onClick={() =>
-                dispatch({
-                  type: 'toggleToolbar',
-                  payload: { panel: 'settings' },
-                })
-              }
-            >
-              <SettingsIcon />
-            </ToolbarItem>
-          </div>
+          )}
+
+          <ToolbarItem
+            active={isFramesOpen}
+            showIndicator={hasFilteredFrames}
+            title="Configure visible frames"
+            onClick={() => {
+              dispatch({
+                type: 'toggleToolbar',
+                payload: { panel: 'frames' },
+              });
+            }}
+          >
+            <FramesIcon />
+          </ToolbarItem>
+
+          <ToolbarItem
+            active={isPreviewOpen}
+            title="Preview playroom"
+            disabled={code.trim().length === 0}
+            onClick={() => {
+              dispatch({
+                type: 'toggleToolbar',
+                payload: { panel: 'preview' },
+              });
+            }}
+          >
+            <PlayIcon />
+          </ToolbarItem>
+
+          <Spacer />
+
+          <ToolbarItem
+            title={`Copy Playroom link (${isMac() ? '⌘⇧C' : 'Ctrl+Shift+C'})`}
+            success={copying}
+            onClick={copyHandler}
+          >
+            <ShareIcon />
+          </ToolbarItem>
+
+          <ToolbarItem
+            active={isSettingsOpen}
+            title="Edit settings"
+            onClick={() =>
+              dispatch({
+                type: 'toggleToolbar',
+                payload: { panel: 'settings' },
+              })
+            }
+          >
+            <SettingsIcon />
+          </ToolbarItem>
         </div>
         <CSSTransition
           in={isOpen}