Add Position components

docs/sandbox/index.html

@@ -9,7 +9,7 @@
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: undefined;
-    }</style><div class="css-qurhtp"><nav class="css-0 UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v1.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">primer-react@1.0.0-beta</a></span></div></nav><div class="css-19midj6"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="css-19kzrtu"><h1 class="css-phyopm">Hello World!</h1><p class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="css-1aecbjm">This is a box with <span class="css-nakqe">some mono text</span>.</div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
+    }</style><div class="css-qurhtp"><nav class="css-0 UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v2.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">primer-react@2.0.0-beta</a></span></div></nav><div class="css-19midj6"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="css-19kzrtu"><h1 class="css-phyopm">Hello World!</h1><p class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="css-1aecbjm">This is a box with <span class="css-nakqe">some mono text</span>.</div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
 
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Box</span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>

examples/component-examples/PointerBox.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {LiveEditor} from '@compositor/kit'
+import {PointerBox} from '../../src'
+import ExampleHeading from '../doc-components/ExampleHeading'
+
+const example = `<PointerBox m={4} p={2} minHeight={100} bg="green.1" borderColor="green.5">
+  PointerBox
+</PointerBox>`
+
+const PointerBoxExample = {
+  name: 'PointerBox',
+  element: (
+    <div>
+      <ExampleHeading mt={2}>PointerBox</ExampleHeading>
+      <LiveEditor code={example} scope={{PointerBox}} />
+    </div>
+  )
+}
+
+export default PointerBoxExample

examples/component-examples/index.js

@@ -3,7 +3,7 @@ export {default as BorderBox} from './BorderBox'
 export {default as Box} from './Box'
 export {default as BranchName} from './BranchName'
 export {default as Buttons} from './Buttons'
-export {default as CaretBox} from './CaretBox'
+export {default as PointerBox} from './PointerBox'
 export {default as CircleBadge} from './CircleBadge'
 export {default as CircleOcticon} from './CircleOcticon'
 export {default as Colors} from './Colors'

examples/demos/MergeBox.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {MergeStatus, CaretBox} from '../../src'
+import {MergeStatus, PointerBox} from '../../src'
 import MergeDetail from './MergeDetail'
 import MergeActions from './MergeActions'
 
@@ -19,15 +19,15 @@ const MergeBox = ({state, repoUrl, branchName, numCommits, onMerge}) => {
   return (
     <div className="d-flex flex-items-start">
       <MergeStatus state={state} />
-      <CaretBox ml={3} borderColor={stateColorMap[state]} caret="left-top">
+      <PointerBox ml={3} borderColor={stateColorMap[state]} caret="left-top">
         <MergeDetail state={state} />
         <MergeActions
           state={state}
           numCommits={numCommits}
           desktopUrl={getDesktopURL(repoUrl, branchName)}
           onClick={onMerge}
         />
-      </CaretBox>
+      </PointerBox>
     </div>
   )
 }

examples/demos/MergeButton.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Button, CaretBox, Details, Text} from '../../src'
+import {Box, Button, PointerBox, Details, Text} from '../../src'
 
 const MergeButton = ({numCommits, onClick, primary}) => {
   const arrowStyles = {
@@ -37,7 +37,7 @@ const MergeButton = ({numCommits, onClick, primary}) => {
               <div className="d-inline-block v-align-middle" style={arrowStyles} />
             </Button>
             <Box position="absolute" width={300} mt={1} style={{zIndex: 99999}}>
-              <CaretBox caret="top-left">
+              <PointerBox caret="top-left">
                 <ul className="list-style-none p-0 m-0">
                   <li className="border-bottom py-2 pl-4 pr-2">
                     <Text is="p" m={0} fontSize={1} fontWeight="bold">
@@ -64,7 +64,7 @@ const MergeButton = ({numCommits, onClick, primary}) => {
                     </Text>
                   </li>
                 </ul>
-              </CaretBox>
+              </PointerBox>
             </Box>
           </React.Fragment>
         )}

src/PointerBox.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import BorderBox from './BorderBox'
+import {Position} from './Position'
+import Caret from './Caret'
+
+function PointerBox(props) {
+  // don't destructure these, just grab them
+  const {bg, border, borderColor} = props
+  const {caret, children, ...boxProps} = props
+  const caretProps = {bg, borderColor, borderWidth: border, location: caret}
+  return (
+    <Position {...boxProps}>
+      {children}
+      <Caret {...caretProps} />
+    </Position>
+  )
+}
+
+PointerBox.propTypes = {
+  ...Position.propTypes,
+  caret: Caret.propTypes.location
+}
+
+PointerBox.defaultProps = {
+  ...BorderBox.defaultProps,
+  position: 'relative'
+}
+
+// we can set this because it "extends" Position implicitly
+PointerBox.systemComponent = true
+
+export default PointerBox

src/Position.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import {withSystemProps, LAYOUT, POSITION} from './system-props'
+
+const Position = withSystemProps('div', LAYOUT.concat(POSITION))
+
+function withPosition(position) {
+  const WithPosition = props => <Position {...props} position={position} />
+  WithPosition.defaultProps = {...Position.defaultProps}
+  delete WithPosition.defaultProps.position
+  WithPosition.propTypes = {...Position.propTypes}
+  delete WithPosition.propTypes.position
+  WithPosition.displayName = `Position.${position}`
+  return WithPosition
+}
+
+const Absolute = withPosition('absolute')
+const Fixed = withPosition('fixed')
+const Relative = withPosition('relative')
+const Sticky = withPosition('sticky')
+
+export {Position, Absolute, Fixed, Relative, Sticky}

src/__tests__/CaretBox.js → src/__tests__/PointerBox.js

@@ -1,21 +1,21 @@
 import React from 'react'
-import {CaretBox} from '..'
+import {PointerBox} from '..'
 import {render} from '../utils/testing'
 
-describe('CaretBox', () => {
+describe('PointerBox', () => {
   it('is a system component', () => {
-    expect(CaretBox.systemComponent).toEqual(true)
+    expect(PointerBox.systemComponent).toEqual(true)
   })
 
   it('renders a <Caret> in <BorderBox> with relative positioning', () => {
-    expect(render(<CaretBox />)).toMatchSnapshot()
+    expect(render(<PointerBox />)).toMatchSnapshot()
   })
 
   it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<CaretBox borderColor="red.5" />)).toMatchSnapshot()
+    expect(render(<PointerBox borderColor="red.5" />)).toMatchSnapshot()
   })
 
   it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<CaretBox bg="red.5" />)).toMatchSnapshot()
+    expect(render(<PointerBox bg="red.5" />)).toMatchSnapshot()
   })
 })

src/__tests__/Position.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import {LAYOUT, POSITION} from '../system-props'
+import BorderBox from '../BorderBox'
+import {Absolute, Fixed, Relative, Sticky} from '../Position'
+import {render} from '../utils/testing'
+
+describe('position components', () => {
+  // position components don't "implement" the position prop because
+  // it's not in their propTypes, since it can't be overridden
+  const positionProps = LAYOUT.concat(POSITION.filter(p => p !== 'position'))
+
+  describe('Absolute', () => {
+    it('implements system props', () => {
+      expect(Absolute).toImplementSystemProps(positionProps)
+    })
+    it('sets position: absolute', () => {
+      expect(render(<Absolute />)).toHaveStyleRule('position', 'absolute')
+    })
+    it('cannot override position', () => {
+      expect(render(<Absolute position="relative" />)).toHaveStyleRule('position', 'absolute')
+    })
+    it('can render other components with the is prop', () => {
+      const result = render(<Absolute is={BorderBox} />)
+      expect(result).toHaveStyleRule('position', 'absolute')
+      expect(result).toHaveStyleRule('border', '1px solid')
+    })
+  })
+
+  describe('Fixed', () => {
+    it('implements system props', () => {
+      expect(Fixed).toImplementSystemProps(positionProps)
+    })
+    it('sets position: fixed', () => {
+      expect(render(<Fixed />)).toHaveStyleRule('position', 'fixed')
+    })
+    it('cannot override position', () => {
+      expect(render(<Fixed position="relative" />)).toHaveStyleRule('position', 'fixed')
+    })
+    it('can render other components with the is prop', () => {
+      const result = render(<Fixed is={BorderBox} />)
+      expect(result).toHaveStyleRule('position', 'fixed')
+      expect(result).toHaveStyleRule('border', '1px solid')
+    })
+  })
+
+  describe('Relative', () => {
+    it('implements system props', () => {
+      expect(Relative).toImplementSystemProps(positionProps)
+    })
+    it('sets position: relative', () => {
+      expect(render(<Relative />)).toHaveStyleRule('position', 'relative')
+    })
+    it('cannot override position', () => {
+      expect(render(<Relative position="absolute" />)).toHaveStyleRule('position', 'relative')
+    })
+    it('can render other components with the is prop', () => {
+      const result = render(<Relative is={BorderBox} />)
+      expect(result).toHaveStyleRule('position', 'relative')
+      expect(result).toHaveStyleRule('border', '1px solid')
+    })
+  })
+
+  describe('Sticky', () => {
+    it('implements system props', () => {
+      expect(Sticky).toImplementSystemProps(positionProps)
+    })
+    it('sets position: sticky', () => {
+      expect(render(<Sticky />)).toHaveStyleRule('position', 'sticky')
+    })
+    it('cannot override position', () => {
+      expect(render(<Sticky position="absolute" />)).toHaveStyleRule('position', 'sticky')
+    })
+    it('can render other components with the is prop', () => {
+      const result = render(<Sticky is={BorderBox} />)
+      expect(result).toHaveStyleRule('position', 'sticky')
+      expect(result).toHaveStyleRule('border', '1px solid')
+    })
+  })
+})

src/__tests__/__snapshots__/CaretBox.js.snap → src/__tests__/__snapshots__/PointerBox.js.snap

@@ -1,16 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CaretBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
+exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 .emotion-0 {
-  position: relative;
   background-color: #d73a49;
   border: 1px solid;
   border-color: #e1e4e8;
   border-radius: 3px;
+  position: relative;
 }
 
 <div
   className="emotion-0"
+  position="relative"
 >
   <svg
     height={16}
@@ -43,17 +44,18 @@ exports[`CaretBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 </div>
 `;
 
-exports[`CaretBox passes the "borderColor" prop to both <BorderBox> and <Caret> 1`] = `
+exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret> 1`] = `
 .emotion-0 {
-  position: relative;
   background-color: #fff;
   border: 1px solid;
   border-color: #d73a49;
   border-radius: 3px;
+  position: relative;
 }
 
 <div
   className="emotion-0"
+  position="relative"
 >
   <svg
     height={16}
@@ -86,17 +88,18 @@ exports[`CaretBox passes the "borderColor" prop to both <BorderBox> and <Caret>
 </div>
 `;
 
-exports[`CaretBox renders a <Caret> in <BorderBox> with relative positioning 1`] = `
+exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1`] = `
 .emotion-0 {
-  position: relative;
   background-color: #fff;
   border: 1px solid;
   border-color: #e1e4e8;
   border-radius: 3px;
+  position: relative;
 }
 
 <div
   className="emotion-0"
+  position="relative"
 >
   <svg
     height={16}

src/index.js

@@ -3,6 +3,7 @@ export {default as theme} from './theme'
 // Layout
 export {default as BorderBox} from './BorderBox'
 export {default as Box} from './Box'
+export {Position, Absolute, Fixed, Relative, Sticky} from './Position'
 
 // Components
 export {default as Avatar} from './Avatar'
@@ -15,7 +16,7 @@ export {default as ButtonLink} from './ButtonLink'
 export {default as OcticonButton} from './OcticonButton'
 
 export {default as Caret} from './Caret'
-export {default as CaretBox} from './CaretBox'
+export {default as PointerBox} from './PointerBox'
 export {default as CircleOcticon} from './CircleOcticon'
 export {default as CircleBadge} from './CircleBadge'