Merge pull request #38 from commitd/spacing

Modifies spacing to improve compatibility.

Author: stuarthendren

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@committed/components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Committed Component Library",
   "author": "Committed",
   "license": "MIT",

src/stories/designPrinciples.stories.mdx

@@ -29,7 +29,8 @@ We have a fixed list of spacings that double with each step. Using fixed spacing
 feeling to the design. If a space is too small, go up a step, too large go down, try to avoid custom spacings.
 
 The [positioning props][positioning] that deal with spacing (e.g. margin and padding) take a number from 0 to 6 to select the correct
-spacing, 0 being no space and 6 is 128px.
+spacing, 0 being no space and 6 is 128px. In order to be compatible with others using different sets we map less that 0 to 0,
+greater than 6 to 6 and floor the number, incase not an integer.
 
 <Flex flexDirection="column">
   <Flex alignItems="center">

src/stories/spacing.stories.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Box, Flex, Text, colors, theme } from '../'
+
+export default {
+  title: 'Spacing'
+}
+
+export const exampleSpacing = () => (
+  <Flex flexDirection="column">
+    <Flex alignItems="center">
+      <Text>0</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[200]}
+        width={theme.spacing(0)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>1</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[300]}
+        width={theme.spacing(1)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>2</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[400]}
+        width={theme.spacing(2)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>3</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[500]}
+        width={theme.spacing(3)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>4</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[600]}
+        width={theme.spacing(4)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>5</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[700]}
+        width={theme.spacing(5)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>6</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[800]}
+        width={theme.spacing(6)}
+      />
+    </Flex>
+  </Flex>
+)
+
+export const egdeCases = () => (
+  <Flex flexDirection="column">
+    <Flex alignItems="center">
+      <Text>-1</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[200]}
+        width={theme.spacing(-1)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>3.5</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[300]}
+        width={theme.spacing(3.5)}
+      />
+    </Flex>
+    <Flex alignItems="center">
+      <Text>7</Text>
+      <Box
+        m={1}
+        py={1}
+        bgcolor={colors.committedYellow[400]}
+        width={theme.spacing(7)}
+      />
+    </Flex>
+  </Flex>
+)

src/theme/theme.ts

@@ -64,12 +64,13 @@ declare module '@material-ui/core/styles/createPalette' {
 const addTransparency = (color: string) => `${color}88`
 
 export const spacing = (factor: number) => {
-  if (factor < 0 || factor > 6) {
-    throw new Error(
-      `Spacing ${factor} invalid, must be between 0 and 6 inclusive`
-    )
+  // should be an int, but just incase
+  var index = Math.floor(factor)
+  if (index < 0) index = 0
+  if (index > 6) {
+    index = 6
   }
-  return [0, 4, 8, 16, 32, 64, 128][factor]
+  return [0, 4, 8, 16, 32, 64, 128][index]
 }
 
 export const defaultPaletteColors = {