Merge pull request #95 from components-ai/positional-space

Positional space

.changeset/stale-bees-grab.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Remove x/y shorthands for spacing

apps/docs/components/Sidebar.tsx

@@ -37,6 +37,7 @@ export const Sidebar = () => {
       <NavItem href="/examples/filters">Filters</NavItem>
       <NavItem href="/examples/transforms">Transforms</NavItem>
       <NavItem href="/examples/border-images">Border Images</NavItem>
+      <NavItem href="/examples/space">Space</NavItem>
       <NavSectionTitle>Community</NavSectionTitle>
       <NavItem href="https://github.com/components-ai/css.gui">GitHub</NavItem>
       <NavItem href="https://twitter.com/components_ai">Twitter</NavItem>

apps/docs/components/examples/Space.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { codegen, Editor, styled } from '@compai/css-gui'
+
+export const SpaceExample = () => {
+  const [styles, setStyles] = useState({
+    margin: { value: 16, unit: 'px' },
+    padding: { value: 16, unit: 'px' },
+  })
+
+  return (
+    <div>
+      {/** @ts-ignore */}
+      <Editor styles={styles} onChange={setStyles} />
+      <div sx={{ border: 'thin solid', borderColor: 'border', mt: [3, 4, 5] }}>
+        <styled.p styles={{ ...styles, border: 'thin solid' }}>
+          Fun with space!
+        </styled.p>
+      </div>
+      {/** @ts-ignore */}
+      <pre>{codegen.css(styles)}</pre>
+      <hr />
+      <pre>{JSON.stringify(styles, null, 2)}</pre>
+    </div>
+  )
+}

apps/docs/pages/examples/space.mdx

@@ -0,0 +1,84 @@
+import { SpaceExample } from '../../components/examples/Space'
+
+## Space
+
+Space refers to `margin` and `padding` controls. In order to keep things
+as simple as possible early on, we recommend that you use the longhand
+version.
+
+```js
+import { useState } from 'react'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
+
+export const SpaceExample = () => {
+  const [styles, setStyles] = useState({
+    marginTop: { value: 16, unit: 'px' },
+    marginRight: { value: 16, unit: 'px' },
+    marginLeft: { value: 16, unit: 'px' },
+    marginBottom: { value: 16, unit: 'px' },
+    paddingTop: { value: 16, unit: 'px' },
+    paddingRight: { value: 16, unit: 'px' },
+    paddingLeft: { value: 16, unit: 'px' },
+    paddingBottom: { value: 16, unit: 'px' },
+  })
+
+  return (
+    <div>
+      <Editor styles={styles} onChange={setStyles}>
+        <Inputs.MarginTop />
+        <Inputs.MarginRight />
+        <Inputs.MarginBottom />
+        <Inputs.MarginLeft />
+        <Inputs.PaddingTop />
+        <Inputs.PaddingRight />
+        <Inputs.PaddingBottom />
+        <Inputs.PaddingLeft />
+      </Editor>
+      <div sx={{ border: 'thin solid', borderColor: 'border', mt: [3, 4, 5] }}>
+        <styled.p styles={{ ...styles, border: 'thin solid' }}>
+          Fun with space!
+        </styled.p>
+      </div>
+      <pre>{codegen.css(styles)}</pre>
+      <hr />
+      <pre>{JSON.stringify(styles, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+<SpaceExample />
+
+## Padding/Margin Shorthand
+
+If desirable, you can also use the spacing shorthand to target all directions
+at once.
+
+```js
+import { useState } from 'react'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
+
+export const SpaceExample = () => {
+  const [styles, setStyles] = useState({
+    margin: { value: 16, unit: 'px' },
+    padding: { value: 16, unit: 'px' },
+  })
+
+  return (
+    <div>
+      <Editor styles={styles} onChange={setStyles}>
+        <Inputs.Margin />
+        <Inputs.Padding />
+      </Editor>
+      <div sx={{ border: 'thin solid', borderColor: 'border', mt: [3, 4, 5] }}>
+        <styled.p styles={{ ...styles, border: 'thin solid' }}>
+          Fun with space!
+        </styled.p>
+      </div>
+      <pre>{codegen.css(styles)}</pre>
+      <hr />
+      <pre>{JSON.stringify(styles, null, 2)}</pre>
+    </div>
+  )
+}
+```

packages/gui/src/data/properties.ts

@@ -884,14 +884,6 @@ export const properties: Record<string, PropertyData> = {
     type: 'length',
     percentage: true,
   },
-  marginX: {
-    type: 'length',
-    percentage: true,
-  },
-  marginY: {
-    type: 'length',
-    percentage: true,
-  },
   marginTop: {
     type: 'length',
     percentage: true,
@@ -1182,14 +1174,6 @@ export const properties: Record<string, PropertyData> = {
     type: 'length',
     percentage: true,
   },
-  paddingX: {
-    type: 'length',
-    percentage: true,
-  },
-  paddingY: {
-    type: 'length',
-    percentage: true,
-  },
   paddingTop: {
     type: 'length',
     percentage: true,