Minor Release Tracking Issue

docs/content/Dropdown.md

@@ -26,7 +26,7 @@ Dropdown, Dropdown.Menu, and Dropdown.Item all get `COMMON` system props. Read o
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | direction | String | 'sw' | Sets the direction of the dropdown menu. |
-| title | String | | Sets the text inside of the button |
+| title | String or Node | | Sets the text inside of the button, can be either a string or a React node |
 
 #### Dropdown.Item
 No additional props.

docs/content/Timeline.md

@@ -0,0 +1,138 @@
+---
+title: Timeline
+---
+
+The Timeline.Item component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
+
+## Example with in-line links
+
+```jsx live
+<Timeline>
+  <Timeline.Item>
+    <Timeline.Badge>
+      <StyledOcticon icon={Flame} />
+    </Timeline.Badge>
+    <Timeline.Body>
+      <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
+        Monalisa
+      </Link>
+      created one <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
+        hot potato
+      </Link>
+      <Link href="#" color="gray.7" muted>
+        Just now
+      </Link>
+    </Timeline.Body>
+  </Timeline.Item>
+</Timeline>
+```
+
+## Default Color example
+
+The default Timeline.Badge color is dark text on a light grey background.
+
+```jsx live
+<Timeline>
+  <Timeline.Item>
+    <Timeline.Badge>
+      <StyledOcticon icon={Flame} />
+    </Timeline.Badge>
+    <Timeline.Body>Default badge color</Timeline.Body>
+  </Timeline.Item>
+</Timeline>
+```
+
+## Adding color to a Badge
+
+To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop
+of the child `StyledOcticon` if necessary.
+
+```jsx live
+<Timeline>
+  <Timeline.Item>
+    <Timeline.Badge bg="red.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
+  </Timeline.Item>
+  <Timeline.Item>
+    <Timeline.Badge bg="green.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
+  </Timeline.Item>
+  <Timeline.Item>
+    <Timeline.Badge bg="purple.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Purple background used when pull requests are merged</Timeline.Body>
+  </Timeline.Item>
+  <Timeline.Item>
+    <Timeline.Badge bg="blue.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Blue background to indicate new events below</Timeline.Body>
+  </Timeline.Item>
+</Timeline>
+```
+
+## Condensed items
+
+Timeline has a condensed prop that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. To condense a single item, remove the top or bottom padding with the `pt={0}` or `pb={0}` prop.
+
+```jsx live
+<Timeline>
+  <Timeline.Item condensed>
+    <Timeline.Badge>
+      <StyledOcticon icon={GitCommit} />
+    </Timeline.Badge>
+    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
+  </Timeline.Item>
+  <Timeline.Item condensed>
+    <Timeline.Badge>
+      <StyledOcticon icon={GitCommit} />
+    </Timeline.Badge>
+    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
+  </Timeline.Item>
+</Timeline>
+```
+
+## Timeline Break
+
+To create a visual break in the timeline, use Timeline.Break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.
+
+```jsx live
+<Timeline>
+  <Timeline.Item>
+    <Timeline.Badge bg="red.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
+  </Timeline.Item>
+  <Timeline.Break />
+  <Timeline.Item>
+    <Timeline.Badge bg="green.5">
+      <StyledOcticon icon={Flame} color="white" />
+    </Timeline.Badge>
+    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
+  </Timeline.Item>
+</Timeline>
+```
+
+## System props
+
+Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+### Timeline
+
+| Prop name   | Type    | Description                                                                       |
+| :---------- | :------ | :-------------------------------------------------------------------------------- |
+| clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
+
+### Timeline.Item
+
+| Prop name | Type    | Description                                                           |
+| :-------- | :------ | :-------------------------------------------------------------------- |
+| condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,6 +1,17 @@
 import * as primerComponents from '@primer/components'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
-import Octicon, {Check, Zap, X, Search, PrimitiveDot, Octoface, Person, Mail} from '@primer/octicons-react'
+import Octicon, {
+  Check,
+  Zap,
+  X,
+  Search,
+  PrimitiveDot,
+  Octoface,
+  Person,
+  Mail,
+  GitCommit,
+  Flame
+} from '@primer/octicons-react'
 import State from '../../../components/State'
 
 export default {
@@ -15,5 +26,7 @@ export default {
   PrimitiveDot,
   Octoface,
   Person,
-  Mail
+  Mail,
+  GitCommit,
+  Flame
 }

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -80,6 +80,8 @@
       url: /Text
     - title: TextInput
       url: /TextInput
+    - title: Timeline
+      url: /Timeline
     - title: Tooltip
       url: /Tooltip
     - title: Truncate

index.d.ts

@@ -149,7 +149,7 @@ declare module '@primer/components' {
 
   export interface DropdownMenuProps extends CommonProps, Omit<React.HTMLAttributes<HTMLUListElement>, 'color'> {
     direction?: string
-    title: string
+    title: string | React.ReactNode
   }
 
   export const Dropdown: React.FunctionComponent<DropdownProps> & {
@@ -191,6 +191,10 @@ declare module '@primer/components' {
 
   export const CounterLabel: React.FunctionComponent<CounterLabelProps>
 
+  export interface GridProps extends BoxProps, StyledSystem.GridProps, Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {}
+
+  export const Grid: React.FunctionComponent<GridProps>
+
   export interface LabelProps extends CommonProps, Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
     outline?: boolean
     variant?: 'small' | 'medium' | 'large' | 'xl'
@@ -231,7 +235,11 @@ declare module '@primer/components' {
     variant?: 'normal' | 'lightweight'
   }
 
-  export interface SideNavLinkProps extends CommonProps, TypographyProps, LinkProps, Omit<React.HTMLAttributes<HTMLAnchorElement>, 'color'> {
+  export interface SideNavLinkProps
+    extends CommonProps,
+      TypographyProps,
+      LinkProps,
+      Omit<React.HTMLAttributes<HTMLAnchorElement>, 'color'> {
     variant?: 'normal' | 'full'
   }
 
@@ -275,6 +283,22 @@ declare module '@primer/components' {
     wrap?: boolean
   }
 
+  export interface TimelineProps extends Omit<FlexProps, 'flexDirection'> {
+    clipSidebar?: boolean
+  }
+
+  export interface TimelineItemProps extends Omit<FlexProps, 'flexDirection'> {
+    condensed?: boolean
+  }
+  export interface TimelineBadgeProps extends Omit<FlexProps, 'height' | 'width' | 'alignItems' | 'justifyContent'> {}
+
+  export const Timeline: React.FunctionComponent<TimelineProps> & {
+    Item: React.FunctionComponent<TimelineItemProps>
+    Badge: React.FunctionComponent<TimelineBadgeProps>
+    Body: React.FunctionComponent<BoxProps>
+    Break: React.FunctionComponent<BoxProps>
+  }
+
   export const Tooltip: React.FunctionComponent<TooltipProps>
 
   export interface UnderlineNavProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
@@ -457,6 +481,11 @@ declare module '@primer/components/src/Flash' {
   export default Flash
 }
 
+declare module '@primer/components/src/Grid' {
+  import {Grid} from '@primer/components'
+  export default Grid
+}
+
 declare module '@primer/components/src/CounterLabel' {
   import {CounterLabel} from '@primer/components'
   export default CounterLabel
@@ -503,6 +532,10 @@ declare module '@primer/components/src/TextInput' {
   import {TextInput} from '@primer/components'
   export default TextInput
 }
+declare module '@primer/components/src/Timeline' {
+  import {Timeline} from '@primer/components'
+  export default Timeline
+}
 declare module '@primer/components/src/Tooltip' {
   import {Tooltip} from '@primer/components'
   export default Tooltip

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -12,6 +12,7 @@
     "prepublishOnly": "yarn run dist",
     "lint": "eslint src docs/components",
     "test": "jest -- src",
+    "update-snapshots": "jest -u -- src",
     "watch": "jest --watch --no-coverage",
     "playroom:start": "playroom start",
     "playroom:build": "playroom build",

src/ButtonStyles.js

@@ -24,11 +24,6 @@ export default css`
     outline: none;
   }
 
-  &:focus,
-  &:active {
-    z-index: 1;
-  }
-
   &:disabled {
     cursor: default;
   }

src/Dropdown.js

@@ -139,7 +139,7 @@ Dropdown.Item.propTypes = {
 Dropdown.defaultProps = {theme}
 Dropdown.propTypes = {
   children: PropTypes.node,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   ...COMMON.propTypes
 }