Update inline spacing treatment, using modern CSS features

.changeset/khaki-seahorses-fly.md

@@ -2,4 +2,4 @@
 'playroom': minor
 ---
 
-Use CSS gap for layout spacing in Playroom UI.
+Use CSS gap and grid for layout spacing in Playroom UI.

src/Playroom/Button/Button.css.ts

@@ -78,7 +78,7 @@ export const positive = style({
 });
 
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  sprinkles({ position: 'relative', paddingLeft: 'small' }),
   {
     top: '1px',
   },

src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -296,9 +296,9 @@ globalStyle('.CodeMirror-dialog button', {
   appearance: 'none',
   font: vars.font.scale.standard,
   fontFamily: vars.font.family.standard,
-  marginLeft: vars.space.medium,
-  paddingTop: vars.space.medium,
-  paddingBottom: vars.space.medium,
+  marginLeft: vars.space.small,
+  paddingTop: vars.space.small,
+  paddingBottom: vars.space.small,
   paddingLeft: vars.space.large,
   paddingRight: vars.space.large,
   alignSelf: 'center',

src/Playroom/Frames/Frames.css.ts

@@ -4,26 +4,21 @@ import { sprinkles } from '../sprinkles.css';
 export const root = style([
   sprinkles({
     height: 'full',
-    width: 'full',
-    whiteSpace: 'nowrap',
-    display: 'flex',
     boxSizing: 'border-box',
-    paddingY: 'gutter',
-    paddingLeft: 'gutter',
+    display: 'flex',
+    padding: 'gutter',
     textAlign: 'center',
+    overflow: 'auto',
+  }),
+]);
+
+export const framesContainer = style([
+  sprinkles({
+    display: 'flex',
+    gap: 'gutter',
   }),
   {
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    // // Simulate centering when fewer frames than viewport width.
-    '::before': {
-      content: '""',
-      flex: 1,
-    },
-    '::after': {
-      content: '""',
-      flex: 1,
-    },
+    marginInline: 'auto',
   },
 ]);
 
@@ -34,7 +29,6 @@ export const frameContainer = style([
     textAlign: 'left',
     display: 'flex',
     flexDirection: 'column',
-    paddingRight: 'gutter',
   }),
   {},
 ]);

src/Playroom/Frames/Frames.tsx

@@ -34,36 +34,38 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      {frames.map((frame) => (
-        <div
-          key={`${frame.theme}_${frame.width}`}
-          className={styles.frameContainer}
-        >
-          <div className={styles.frame}>
-            <div className={styles.frameBorder} />
-            <Iframe
-              intersectionRootRef={scrollingPanelRef}
-              src={frameSrc(
-                { themeName: frame.theme, code: renderCode.current },
-                playroomConfig
+      <div className={styles.framesContainer}>
+        {frames.map((frame) => (
+          <div
+            key={`${frame.theme}_${frame.width}`}
+            className={styles.frameContainer}
+          >
+            <div className={styles.frame}>
+              <div className={styles.frameBorder} />
+              <Iframe
+                intersectionRootRef={scrollingPanelRef}
+                src={frameSrc(
+                  { themeName: frame.theme, code: renderCode.current },
+                  playroomConfig
+                )}
+                className={styles.frame}
+                style={{ width: frame.width }}
+                data-testid="previewFrame"
+              />
+            </div>
+            <div className={styles.frameName} data-testid="frameName">
+              {frame.theme === '__PLAYROOM__NO_THEME__' ? (
+                <Text weight="strong">{frame.widthName}</Text>
+              ) : (
+                <Text>
+                  <Strong>{frame.theme}</Strong>
+                  {` \u2013 ${frame.widthName}`}
+                </Text>
               )}
-              className={styles.frame}
-              style={{ width: frame.width }}
-              data-testid="previewFrame"
-            />
+            </div>
           </div>
-          <div className={styles.frameName} data-testid="frameName">
-            {frame.theme === '__PLAYROOM__NO_THEME__' ? (
-              <Text weight="strong">{frame.widthName}</Text>
-            ) : (
-              <Text>
-                <Strong>{frame.theme}</Strong>
-                {` \u2013 ${frame.widthName}`}
-              </Text>
-            )}
-          </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }

src/Playroom/FramesPanel/FramesPanel.css.ts

@@ -2,27 +2,24 @@ import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
 import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
 
-export const title = sprinkles({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 'medium',
+export const title = style({
+  marginRight: 'auto',
 });
 
 export const reset = style([
   sprinkles({
     position: 'relative',
     font: 'small',
     border: 0,
-    padding: 'medium',
+    padding: 'small',
     appearance: 'none',
   }),
   {
     color: 'currentColor',
     backgroundColor: 'transparent',
     outline: 'none',
     textDecoration: 'underline',
-    margin: calc(vars.space.medium).negate().toString(),
+    margin: calc(vars.space.small).negate().toString(),
     '::before': {
       content: '""',
       position: 'absolute',
@@ -46,18 +43,9 @@ export const reset = style([
   },
 ]);
 
-export const label = style([
-  sprinkles({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    userSelect: 'none',
-  }),
-  {
-    height: calc(vars.grid).multiply(9).toString(),
-  },
-]);
+export const label = sprinkles({
+  cursor: 'pointer',
+});
 
 const checkboxSize = '20px';
 export const checkbox = style([
@@ -82,7 +70,6 @@ export const fakeCheckbox = style([
     justifyContent: 'center',
     position: 'relative',
     borderRadius: 'large',
-    marginRight: 'large',
     padding: checkboxPadding,
     pointerEvents: 'none',
   }),

src/Playroom/FramesPanel/FramesPanel.tsx

@@ -8,6 +8,7 @@ import { Text } from '../Text/Text';
 
 import * as styles from './FramesPanel.css';
 import { Helmet } from 'react-helmet';
+import { Inline } from '../Inline/Inline';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -45,10 +46,12 @@ interface FrameHeadingProps {
   children: ReactNode;
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
-  <div className={styles.title}>
-    <Heading level="3">{children}</Heading>
+  <Inline space="none" alignY="center">
+    <div className={styles.title}>
+      <Heading level="3">{children}</Heading>
+    </div>
     {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
-  </div>
+  </Inline>
 );
 
 interface FrameOptionProps<Option> {
@@ -65,23 +68,25 @@ function FrameOption<Option>({
 }: FrameOptionProps<Option>) {
   return (
     <label className={styles.label}>
-      <input
-        type="checkbox"
-        checked={selected}
-        className={styles.checkbox}
-        onChange={(event) => {
-          if (event.target.checked) {
-            const newVisiblePreference = [...visible, option];
-            onChange(newVisiblePreference);
-          } else {
-            onChange(visible.filter((p) => p !== option));
-          }
-        }}
-      />
-      <div className={styles.fakeCheckbox}>
-        <Checkmark />
-      </div>
-      <Text truncate>{String(option)}</Text>
+      <Inline space="large" alignY="center">
+        <input
+          type="checkbox"
+          checked={selected}
+          className={styles.checkbox}
+          onChange={(event) => {
+            if (event.target.checked) {
+              const newVisiblePreference = [...visible, option];
+              onChange(newVisiblePreference);
+            } else {
+              onChange(visible.filter((p) => p !== option));
+            }
+          }}
+        />
+        <div className={styles.fakeCheckbox}>
+          <Checkmark />
+        </div>
+        <Text truncate>{String(option)}</Text>
+      </Inline>
     </label>
   );
 }
@@ -110,7 +115,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
       <ToolbarPanel>
         <Stack space="xxxlarge">
           <label>
-            <Stack space="medium">
+            <Stack space="small">
               <Heading level="3">Title</Heading>
               <input
                 type="text"
@@ -128,7 +133,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
             </Stack>
           </label>
 
-          <Stack space="none">
+          <Stack space="xlarge">
             <FrameHeading
               showReset={hasFilteredWidths}
               onReset={() => dispatch({ type: 'resetVisibleWidths' })}
@@ -156,7 +161,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
           </Stack>
 
           {hasThemes ? (
-            <Stack space="none">
+            <Stack space="xlarge">
               <FrameHeading
                 showReset={hasFilteredThemes}
                 onReset={() => dispatch({ type: 'resetVisibleThemes' })}

src/Playroom/Inline/Inline.css.ts

@@ -1,57 +1,30 @@
-import { calc } from '@vanilla-extract/css-utils';
-import { createVar, style } from '@vanilla-extract/css';
-import { sprinkles, vars } from '../sprinkles.css';
+import { style, createVar, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../sprinkles.css';
 
 const size = createVar();
-
-export const root = style([
-  sprinkles({
-    display: 'flex',
-    flexWrap: 'wrap',
-  }),
-  {
-    marginTop: calc(size).negate().toString(),
-    marginLeft: calc(size).negate().toString(),
-  },
-]);
-
-export const item = style({
-  paddingTop: size,
-  paddingLeft: size,
-});
-
-export const xxsmall = style({
-  vars: {
-    [size]: vars.grid,
-  },
-});
-
-export const xsmall = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(2).toString(),
-  },
+const horizontalAlignment = createVar();
+
+export const gap = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: size,
+  alignItems: horizontalAlignment,
 });
 
-export const small = style({
+export const spaceScale = styleVariants(vars.space, (space) => ({
   vars: {
-    [size]: calc(vars.grid).multiply(3).toString(),
+    [size]: space,
   },
-});
-
-export const medium = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(4).toString(),
-  },
-});
-
-export const large = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(5).toString(),
-  },
-});
+}));
 
-export const xlarge = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(6).toString(),
+export const horizontalAlignmentScale = styleVariants(
+  {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
   },
-});
+  (alignment) => ({
+    alignItems: alignment,
+  })
+);