Merge pull request #285 from primer/colocate-css

Colocate Primer CSS global injections with components that need them

package.json

@@ -12,7 +12,7 @@
     "predist": "rm -rf dist",
     "dist": "NODE_ENV=production rollup -c",
     "postdist": "du -ha dist",
-    "prepack": "script/npm-pack-check",
+    "prepack": "script/npm-prepack",
     "prepublishOnly": "npm run dist",
     "lint": "eslint src pages",
     "test": "jest",
@@ -40,7 +40,6 @@
     "classnames": "^2.2.5",
     "d3-shape": "^1.2.0",
     "emotion": "9.2.8",
-    "preval.macro": "3.0.0",
     "primer-alerts": "1.5.9",
     "primer-avatars": "1.5.6",
     "primer-branch-name": "1.0.7",

pages/components/docs/Details.md

@@ -1,30 +1,53 @@
 
 # Details
 
-```.jsx
-<ExampleHeading>With static children</ExampleHeading>
+The Details component is an HTML `<details>` element without native browser styling that optionally uses the [render props pattern](https://reactjs.org/docs/render-props.html) to pass its state to child components.
+
+You are responsible for rendering your own `<summary>`. To style your summary element like a [Button](./Button), you can use the `is` prop:
+
+```jsx
+<Button is="summary">Summary text</Button>
+```
 
+## With static children
+```.jsx
 <Details>
-  <summary className="btn">Click me</summary>
+  <Button is="summary">Click me</Button>
   <p>This should show and hide</p>
 </Details>
+```
 
+## With children as a function
+The render function gets an object with two keys:
 
-<ExampleHeading>With children as a function</ExampleHeading>
+* `open` is a boolean reflecting the `<details>` element's `open` attribute, and can be used to conditionally show or hide content.
+* `toggle` is a function that can be assigned to event handlers to trigger toggling of the `open` state.
 
+If you use this form or the render prop (see below), **you must attach the `toggle` prop as an event listener**. If you don't the render function will not be called when the element is toggled by the native browser behavior.
+
+```.jsx
 <Details>
   {({open, toggle}) => (
-    <React.Fragment>
-      <summary className="btn" onClick={toggle}>
+    <>
+      <Button is="summary" onClick={toggle}>
         {open ? 'Hide' : 'Show'}
-      </summary>
+      </Button>
       <p>This should show and hide</p>
-    </React.Fragment>
+    </>
   )}
 </Details>
+```
 
-<ExampleHeading>With render prop</ExampleHeading>
-<Details render={() => 'hi'} />
+## With render prop
+The Details component also accepts a `render` function prop.
+
+```.jsx
+<Details render={({open, toggle}) => (
+  <>
+    <Button is="summary" onClick={toggle}>Open? {String(open)}</Button>
+    <p>This is the content.</p>
+  </>
+)} />
 ```
 
 ## System props

pages/components/docs/Dropdown.md

@@ -4,10 +4,10 @@
 ## Default example
 ```.jsx
 <Dropdown scheme="primary" minWidth="5em">
-  <Box is="ul" m={0} p={0} className="list-style-none">
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
+  <Box role="list">
+    <Box role="listitem">Item 1</Box>
+    <Box role="listitem">Item 2</Box>
+    <Box role="listitem">Item 3</Box>
   </Box>
 </Dropdown>
 ```

pages/components/docs/Position.md

@@ -21,7 +21,7 @@
   <ExampleHeading my={2}>Sticky</ExampleHeading>
 
   <Box border={1} borderColor="green.5" height={1000}>
-    <Sticky top={0} bg="green.2" p={4}>
+    <Sticky top={0} bg="green.2" p={6}>
       I'm sticky!
     </Sticky>
   </Box>

pages/components/docs/Text.md

@@ -2,7 +2,11 @@
 
 ## Default example
 ```.jsx
-<Text is="div" fontWeight="bold" lineHeight="condensed">Text</Text>
+<Text fontWeight="bold">bold</Text>
+{' '}
+<Text color="red.6">red color</Text>
+{' '}
+<Text color="white" bg="gray.9" p={2}>white on black</Text>
 ```
 
 ## System props

script/npm-pack-check → script/npm-prepack

@@ -10,8 +10,7 @@ const config = {
     'dist/index.umd.js',
     'dist/css.js',
     'src/index.js',
-    'src/system-props.js',
-    'src/primer-components.scss'
+    'src/system-props.js'
   ],
   missing: [
     'pages',

src/BaseStyles.js

@@ -1,11 +1,4 @@
-import {injectGlobal} from 'emotion'
 import {withSystemProps, TYPOGRAPHY} from './system-props'
-// eslint-disable-next-line no-unused
-import sass from 'sass.macro'
-
-injectGlobal(sass`
-  @import "./primer-components.scss";
-`)
 
 const BaseStyles = withSystemProps(
   {

src/BranchName.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-branch-name/index.scss";
+`)
+
 function BranchName({children, href, is: Tag, className}) {
   // We don't want someone to use href on a non tag
   if (Tag !== 'a') {

src/Button.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-buttons/index.scss";
+`)
+
 function Button({is: Tag, children, size, block, linkStyle, grouped, scheme, onClick, disabled, className, ...rest}) {
   const classes = classnames(
     className,

src/CircleBadge.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-avatars/lib/circle-badge.scss";
+`)
+
 const ICON_CLASS = 'CircleBadge-icon'
 
 const sizeMapper = (size = 'medium') => {

src/CounterLabel.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-labels/lib/counters.scss";
+`)
+
 function CounterLabel({scheme, children, className}) {
   return <span className={classnames(className, 'Counter', scheme && `Counter--${scheme}`)}>{children}</span>
 }

src/Details.js

@@ -1,8 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
+import styled from 'react-emotion'
 import {withSystemProps, COMMON, withoutPropTypes} from './system-props'
 
+const DetailsReset = styled('details')`
+  & > summary {
+    list-style: none;
+  }
+  & > summary::before {
+    display: none;
+  }
+  & > summary::-webkit-details-marker {
+    display: none;
+  }
+`
+
 class Details extends React.Component {
   constructor(props) {
     super(props)
@@ -18,13 +30,13 @@ class Details extends React.Component {
   }
 
   render() {
-    const {className, children, render = getRenderer(children), ...rest} = this.props
+    const {children, render = getRenderer(children), ...rest} = this.props
     const {open} = this.state
 
     return (
-      <details {...rest} className={classnames('details-reset', className)} open={open}>
+      <DetailsReset {...rest} open={open}>
         {render({open, toggle: this.toggle})}
-      </details>
+      </DetailsReset>
     )
   }
 }

src/FilterList.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-navigation/lib/filter-list.scss";
+`)
+
 export const ITEM_CLASS = 'filter-item'
 export const SELECTED_CLASS = 'selected'
 

src/Flash.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-alerts/index.scss";
+`)
+
 const schemeMap = {
   green: 'success',
   red: 'error',

src/Label.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-labels/lib/labels.scss";
+`)
+
 const colorScheme = (scheme, outline) => {
   if (outline) {
     return {

src/StateLabel.js

@@ -2,9 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Octicon, {GitMerge, IssueClosed, IssueOpened, IssueReopened} from '@githubprimer/octicons-react'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {colors} from './theme'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-labels/lib/states.scss";
+`)
+
 const stateColorMap = {
   open: 'green',
   opened: 'green',

src/TextInput.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-forms/lib/form-control.scss";
+`)
+
 function TextInput({autocomplete, block, className, disabled, id, name, onChange, placeholder, required, size, value}) {
   const classes = classnames(className, 'form-control', {
     'input-block': block,

src/Tooltip.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import sass from 'sass.macro'
+import {injectGlobal} from 'emotion'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-tooltips/index.scss";
+`)
+
 function Tooltip({direction, children, className, text, noDelay, align, wrap}) {
   const classes = classnames(
     className,

src/UnderlineNav.js

@@ -1,8 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {injectGlobal} from 'emotion'
+import sass from 'sass.macro'
 import {withSystemProps, COMMON} from './system-props'
 
+injectGlobal(sass`
+  @import "primer-support/index.scss";
+  @import "primer-navigation/lib/underline-nav.scss";
+`)
+
 export const ITEM_CLASS = 'UnderlineNav-item no-underline'
 export const SELECTED_CLASS = 'selected'