primer · BinaryMuse · May 8, 2020 · Apr 13, 2020 · Apr 13, 2020 · Apr 13, 2020
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,6 +5,9 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended"
   ],
+  "globals": {
+    "__DEV__": "readonly"
+  },
   "rules": {
     "import/no-namespace": 0,
     "no-shadow": 0,

diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,7 @@ node_modules
 .DS_Store
 coverage/
 dist/
+lib/
+lib-esm/
 public/
+stats.html
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/babel-defines.js b/babel-defines.js
@@ -0,0 +1,13 @@
+const shared = {
+  __DEV__: "process.env.NODE_ENV !== 'production'"
+}
+
+module.exports = {
+  development: shared,
+  test: shared,
+  production: {
+    ...shared,
+    __DEV__: 'false',
+    'process.env.NODE_ENV': "'production'"
+  }
+}
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,39 @@
+const defines = require('./babel-defines')
+
+function replacementPlugin(env) {
+  return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]
+}
+
+const sharedPlugins = [
+  'macros',
+  'preval',
+  'add-react-displayname',
+  'babel-plugin-styled-components',
+  '@babel/plugin-proposal-object-rest-spread'
+]
+
+const runtimePlugins = [['@babel/plugin-transform-runtime', {version: '7.9.2', helpers: true}]]
+
+function makePresets(moduleValue) {
+  return [
+    ['@babel/preset-react', {modules: moduleValue}],
+    ['@babel/preset-env', {modules: moduleValue}]
+  ]
+}
+
+module.exports = {
+  env: {
+    development: {
+      presets: makePresets(process.env.BABEL_MODULE || false),
+      plugins: [...sharedPlugins, ...runtimePlugins, replacementPlugin('development')]
+    },
+    production: {
+      presets: makePresets(false),
+      plugins: [...sharedPlugins, ...runtimePlugins, replacementPlugin('production')]
+    },
+    test: {
+      presets: makePresets('commonjs'),
+      plugins: [...sharedPlugins, replacementPlugin('test')]
+    }
+  }
+}
diff --git a/css.js b/css.js
diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md
@@ -11,15 +11,18 @@ BorderBox is a Box component with a border. When no `borderColor` is present, th
 <BorderBox>This is a BorderBox</BorderBox>
 ```
 
+Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`.
+
 ## System props
 
-BorderBox components get `COMMON`, `LAYOUT` and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
 | Prop name | Type | Default | Description |
 | :- | :- | :-: | :- |
-| border | String | 'borders.1' (from theme) | Sets the border, use theme values or provide your own. |
+| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. |
+| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. |
 | borderColor | String | 'gray.2' (from theme) | Sets the border color, use theme values or provide your own. |
-| borderRadius | String or Number| 'radii.1' (from theme)| Sets the border radius, use theme values or provide your own. |
+| borderRadius | String or Number| 2 (from theme)| Sets the border radius, use theme values or provide your own. |
 | boxShadow | String | | Sets box shadow, use theme values or provide your own. |
diff --git a/docs/content/Box.md b/docs/content/Box.md
@@ -18,7 +18,7 @@ The Box component serves as a wrapper component for most layout related needs. U
 
 ## System props
 
-Box components get the `COMMON` and `LAYOUT` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 

diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md
@@ -9,7 +9,8 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
 
 ```jsx live
 <FilteredSearch>
-  <Dropdown title="Filter">
+  <Dropdown>
+    <Dropdown.Button>Filter</Dropdown.Button>
     <Dropdown.Menu direction="sw">
       <Dropdown.Item>Item 1</Dropdown.Item>
       <Dropdown.Item>Item 2</Dropdown.Item>

diff --git a/docs/content/Flash.md b/docs/content/Flash.md
@@ -7,7 +7,21 @@ The Flash component informs users of successful or pending actions.
 ## Default example
 
 ```jsx live
-<Flash m={4} scheme="green"> Flash green </Flash>
+<Flash>Default Flash</Flash>
+<Flash variant="success">Success Flash</Flash>
+<Flash variant="warning">Warning Flash</Flash>
+<Flash variant="danger">Danger Flash</Flash>
+```
+
+## With an icon
+
+Flash components with icons inside of them will automatically set the correct color for the icon depending on the type of Flash, as well as applying the correct right margin.
+
+```jsx live
+<Flash variant="success">
+  <StyledOcticon icon={Check}/>
+  Success!
+</Flash>
 ```
 
 ## System props
@@ -19,4 +33,4 @@ Flash components get `COMMON` system props. Read our [System Props](/system-prop
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | full | Boolean | | Creates a full width Flash component|
-| scheme | String | blue | Can be one of `green`, `yellow`, or `red` - sets the background color, border, and text color of the Flash component
+| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component |
diff --git a/docs/content/Flex.md b/docs/content/Flex.md
@@ -2,9 +2,9 @@
 title: Flex
 ---
 
-Flex is a component that will allow you to use flexbox properties.
+The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default.
 
-*Previously, `Flex.Item` was used for flex item specific properties - we've added all properties to the `Flex` component, but are keeping Flex.Item around for backwards compatibility.*
+*Previously, a `Flex.Item` component was used for flex item specific properties; `Box` now contains all those properties and should be used in its place.*
 
 ## Default example
 
@@ -28,7 +28,6 @@ Flex is a component that will allow you to use flexbox properties.
 
 Flex components get `FLEX`, `COMMON`, and `LAYOUT` system props.
 
-
 Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props

diff --git a/docs/content/PointerBox.md b/docs/content/PointerBox.md
@@ -14,7 +14,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it.
 
 ## System props
 
-PointerBox components get `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+PointerBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 

diff --git a/docs/content/Popover.md b/docs/content/Popover.md
@@ -86,7 +86,7 @@ render(<PopoverDemo />)
 
 ## System props
 
-`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 

diff --git a/docs/content/Position.md b/docs/content/Position.md
@@ -41,7 +41,7 @@ The Position component is a wrapper component that gives the containing componen
 
 ## System props
 
-Position components get `POSITION`, `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Position components get `POSITION`, `LAYOUT`, `FLEX, and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 

diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md
@@ -86,12 +86,36 @@ Used to wrap the content in a `SelectMenu`.
 </SelectMenu.Menu>
 ```
 
+### Right-aligned modal
+
+Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly.
+
+```jsx live
+<Relative display="flex" justifyContent="flex-end">
+  <SelectMenu>
+    <Button as="summary">Projects</Button>
+    <SelectMenu.Modal align="right">
+      <SelectMenu.Header>Projects</SelectMenu.Header>
+      <SelectMenu.List>
+        <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
+        <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
+        <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+        <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+      </SelectMenu.List>
+    </SelectMenu.Modal>
+  </SelectMenu>
+</Relative>
+```
+
 ### System Props
 
 SelectMenu.Modal components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ### Component Props
-SelectMenu.Modal components do not get any additional props besides system props.
+
+| Prop name | Type   | Default | Description                                       |
+| :-------- | :----- | :------ | ------------------------------------------------- |
+| align     | String | 'left'  | Use `right` to align the select menu to the right |
 
 
 ## SelectMenu.List
@@ -114,10 +138,12 @@ SelectMenu.List components do not get any additional props besides system props.
 
 ## SelectMenu.Item
 
-Individual items in a select menu.
+Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`. 
+
+You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. 
 
 ```jsx
-<SelectMenu.Item selected={true}>
+<SelectMenu.Item href="/link/to/thing" selected={true}>
   {/* wraps an individual list item*/}
 </SelectMenu.Item>
 ```

diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md
@@ -71,7 +71,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more
 
 ```jsx live
 <BorderBox p={3} backgroundColor='gray.0' maxWidth={360}>
-  <BorderBox border='none' borderBottom={1} mb={2} pb={1}>
+  <BorderBox borderWidth={0} borderBottomWidth={1} borderRadius={0} mb={2} pb={1}>
     <Heading as="h5" fontSize={1} color="gray.7">Menu</Heading>
   </BorderBox>
   <SideNav variant="lightweight">
@@ -133,7 +133,7 @@ If using React Router, you can use the `as` prop to render the element as a `Nav
 
 ## System props
 
-`SideNav` components get `COMMON`, `BORDER`, and `LAYOUT` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 

diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md
@@ -6,7 +6,12 @@ Use StateLabel components to show the status of an issue or pull request.
 ## Default example
 
 ```jsx live
-  <StateLabel status="issueOpened">Open</StateLabel>
+<StateLabel status="issueOpened">Open</StateLabel>
+<StateLabel status="issueClosed">Closed</StateLabel>
+<StateLabel status="pullOpened">Open</StateLabel>
+<StateLabel status="pullClosed">Closed</StateLabel>
+<StateLabel status="pullMerged">Merged</StateLabel>
+<StateLabel status="draft">Draft</StateLabel>
 ```
 
 ## System props
@@ -17,5 +22,5 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system
 
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
-| small | Boolean | | Used to create a smaller version of the default StateLabel |
-| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed` or `pullMerged`.
+| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. |
+| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`.