Major Release Tracking Issue

docs/content/Buttons.md

@@ -22,6 +22,8 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
   <Button>Button</Button>
   <Button>Button</Button>
 </ButtonGroup>
+
+<ButtonTableList>Button Table List </ButtonTableList>
 ```
 
 ## System props

docs/content/Details.md

@@ -16,6 +16,7 @@ You are responsible for rendering your own `<summary>`. To style your summary el
   <Button as="summary">Click me</Button>
   <p>This should show and hide</p>
 </Details>
+
 ```
 
 ## With children as a function
@@ -34,6 +35,27 @@ The render function gets an object with the `open` render prop to allow you to c
 </Details>
 ```
 
+## Manage the open state manually
+The `Details` element is built to also let you manage the open state and toggle functionality if necessary. Just provide values to the `open` and `onToggle` props.
+
+**Note:** The `overlay` prop will not function automatically if you chose to provide your own `open` state. You'll need to implement this yourself. You can use the `onClickOutside` prop to implement and customize this behavior.
+
+```jsx live
+<State default={false}>
+  {([open, setOpen]) => {
+    const handleToggle = (e) => setOpen(e.target.open)
+    const handleClickOutside = () => setOpen(false)
+
+    return (
+      <Details open={open} onToggle={handleToggle} onClickOutside={handleClickOutside} overlay>
+        <Button as="summary">Click me</Button>
+        <p>This should show and hide</p>
+      </Details>
+    )
+  }}
+</State>
+```
+
 ## System props
 
 Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
@@ -43,4 +65,7 @@ Details components get `COMMON` system props. Read our [System Props](/system-pr
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | defaultOpen | Boolean | | Sets the initial open/closed state |
-| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it
+| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it |
+| open | Boolean | | Use the open prop if you'd like to manage the open state |
+| onToggle | Function | | Called whenever user clicks on `summary` element. If you are controlling your own `open` state this will be the only function called on click, otherwise it's called before the internal `handleToggle` function.|
+| onClickOutside | Function | | Function to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own `open` state. |

docs/content/Dropdown.md

@@ -3,11 +3,14 @@ title: Dropdown
 ---
 The Dropdown component is a lightweight context menu for housing navigation and actions.
 
+Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` element if you would like. **You must use a `summary` tag in order for the dropdown to behave properly!**. You should also add `aria-haspopup="true"` to custom dropdown triggers for accessibility purposes. You can use the `Dropdown.Caret` component to add a caret to a custom dropdown trigger.
+
 Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button.
 
 ## Default example
 ```jsx live
-<Dropdown title="Dropdown">
+<Dropdown direction='w'>
+  <Dropdown.Button>Dropdown</Dropdown.Button>
   <Dropdown.Menu direction='sw'>
     <Dropdown.Item>Item 1</Dropdown.Item>
     <Dropdown.Item>Item 2</Dropdown.Item>
@@ -16,20 +19,78 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 </Dropdown>
 ```
 
+## With custom button
+```jsx live
+<Dropdown>
+  <summary>
+    Dropdown
+    <Dropdown.Caret/>
+  </summary>
+  <Dropdown.Menu direction='sw'>
+    <Dropdown.Item>Item 1</Dropdown.Item>
+    <Dropdown.Item>Item 2</Dropdown.Item>
+    <Dropdown.Item>Item 3</Dropdown.Item>
+  </Dropdown.Menu>
+</Dropdown>
+```
+
+## Manage the open state manually
+The `Dropdown` element is built to also let you manage the open state and toggle functionality if necessary. Just provide values to the `open` and `onToggle` props.
+
+**Note:** Closing the dropdown on outside clicks will not function automatically if you chose to provide your own `open` state. You'll need to implement this yourself. You can use the `onClickOutside` prop to implement and customize this behavior.
+
+```jsx live
+<State default={false}>
+  {([open, setOpen]) => {
+
+    const handleToggle = (e) => setOpen(e.target.open)
+    const handleClickOutside = () => setOpen(false)
+
+    return (
+      <Dropdown open={open} onToggle={handleToggle} onClickOutside={handleClickOutside}>
+        <Dropdown.Button>Dropdown</Dropdown.Button>
+        <Dropdown.Menu direction='sw'>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+          <Dropdown.Item>Item 3</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+  }}
+</State>
+```
+
 ## System props
 
-Dropdown, Dropdown.Menu, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
+The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. They are listed below, but you may reference the [`Details`](/Details) docs for more details on how to manage your own `open` state.
+
+#### Dropdown
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| defaultOpen | Boolean | | Sets the initial open/closed state |
+| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it |
+| open | Boolean | | Use the open prop if you'd like to manage the open state |
+| onToggle | Function | | Called whenever user clicks on `summary` element. If you are controlling your own `open` state this will be the only function called on click, otherwise it's called before the internal `handleToggle` function.|
+| onClickOutside | Function | | Function to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own `open` state. |
+
+
+
 #### Dropdown.Menu
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
-| direction | String | 'sw' | Sets the direction of the dropdown menu. |
-| title | String or Node | | Sets the text inside of the button, can be either a string or a React node |
+| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
 
-#### Dropdown.Item
+#### Dropdown.Button
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| onClick | Function | none | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. |
+
+#### Dropdown.Caret
 No additional props.
 
-#### Dropdown
+#### Dropdown.Item
 No additional props.

docs/content/Pagination.md

@@ -0,0 +1,194 @@
+---
+title: Pagination
+---
+import State from '../components/State'
+
+Use the pagination component to create a connected set of links that lead to related pages (for example, previous, next, or page numbers).
+
+## Basic example
+
+The pagination component only requires two properties to render: `pageCount`, which is the total number of pages, and `currentPage`, which is the currently selected page number (which should be managed by the consuming application).
+
+```jsx live
+<Pagination
+  pageCount={15}
+  currentPage={2}
+  onPageChange={e => e.preventDefault()}
+/>
+```
+
+However, to handle state changes when the user clicks a page, you also need to pass `onPageChange`, which is a function that takes a click event and page number as an argument:
+
+```javascript
+type PageChangeCallback = (evt: React.MouseEvent, page: number) => void
+```
+
+By default, clicking a link in the pagination component will cause the browser to navigate to the URL specified by the page. To cancel navigation and handle state management on your own, you should call `preventDefault` on the event, as in this example:
+
+```jsx live
+<State default={1}>
+  {([page, setPage]) => {
+    const totalPages = 15
+    const onPageChange = (evt, page) => {
+      evt.preventDefault()
+      setPage(page)
+    }
+
+    return (
+      <BorderBox p={2}>
+        <Box>Current page: {page} / {totalPages}</Box>
+        <Pagination
+          pageCount={totalPages}
+          currentPage={page}
+          onPageChange={onPageChange}
+        />
+      </BorderBox>
+    )
+  }}
+</State>
+```
+
+## Customizing link URLs
+
+To customize the URL generated for each link, you can pass a function to the `hrefBuilder` property. The function should take a page number as an argument and return a URL to use for the link.
+
+```javascript
+type HrefBuilder = (page: number) => string
+```
+
+```jsx live
+<State default={'(nothing clicked yet)'}>
+  {([lastUrl, setLastUrl]) => {
+    const onPageChange = (evt, page) => {
+      evt.preventDefault()
+      setLastUrl(evt.target.href)
+    }
+    const hrefBuilder = (page) => {
+      return `https://example.com/pages/${page}`
+    }
+
+    return (
+      <BorderBox p={2}>
+        <Box>The last URL clicked was: {lastUrl}</Box>
+        <Pagination
+          pageCount={15}
+          currentPage={2}
+          onPageChange={onPageChange}
+          hrefBuilder={hrefBuilder}
+        />
+      </BorderBox>
+    )
+  }}
+</State>
+```
+
+## Customizing which pages are shown
+
+Two props control how many links are displayed in the pagination container at any given time. `marginPageCount` controls how many pages are guaranteed to be displayed on the left and right of the component; `surroundingPageCount` controls how many pages will be displayed to the left and right of the current page.
+
+```jsx live
+<Pagination
+  pageCount={20}
+  currentPage={10}
+  marginPageCount={1}
+  surroundingPageCount={2}
+  onPageChange={e => e.preventDefault()}
+/>
+```
+
+The algorithm tries to minimize the amount the component shrinks and grows as the user changes pages; for this reason, if any of the pages in the margin (controlled via `marginPageCount`) intersect with pages in the center (controlled by `surroundingPageCount`), the center section will be shifted away from the margin. Consider the following examples, where pages one through six are shown when any of the first four pages are selected. Only when the fifth page is selected and there is a gap between the margin pages and the center pages does a break element appear.
+
+```jsx live
+<Box>
+  {[1, 2, 3, 4, 5].map(page => (
+    <Pagination
+      pageCount={20}
+      currentPage={page}
+      marginPageCount={1}
+      surroundingPageCount={2}
+      onPageChange={e => e.preventDefault()}
+    />
+  ))}
+</Box>
+```
+
+### Previous/next pagination
+
+To hide all the page numbers and create a simple pagination container with just the Previous and Next buttons, set `showPages` to `false`.
+
+```jsx live
+<State default={1}>
+  {([page, setPage]) => {
+    const totalPages = 10
+    const onPageChange = (evt, page) => {
+      evt.preventDefault()
+      setPage(page)
+    }
+
+    return (
+      <BorderBox p={2}>
+        <Box>Current page: {page} / {totalPages}</Box>
+        <Pagination
+          pageCount={totalPages}
+          currentPage={page}
+          onPageChange={onPageChange}
+          showPages={false}
+        />
+      </BorderBox>
+    )
+  }}
+</State>
+```
+
+## System props
+
+Pagination components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| currentPage | Number | | **Required.** The currently selected page. |
+| hrefBuilder | Function | `#${page}` | A function to generate links based on page number. |
+| marginPageCount | Number | 1 | How many pages to always show at the left and right of the component. |
+| onPageChange | Function | no-op | Called with event and page number when a page is clicked. |
+| pageCount | Number | | **Required.** The total number of pages. |
+| showPages | Boolean | `true` | Whether or not to show the individual page links. |
+| surroundingPageCount | Number | 2 | How many pages to display on each side of the currently selected page. |
+
+## Theming
+
+The following snippet shows the properties in the theme that control the styling of the pagination component:
+
+```javascript
+{
+  // ... rest of theme ...
+  pagination: {
+    fontSize,
+    fontWeight,
+    borderRadius,
+    colors: {
+      normal: {
+        fg,
+        bg,
+        border
+      },
+      disabled: {
+        fg,
+        bg,
+        border
+      },
+      hover: {
+        fg,
+        bg,
+        border
+      },
+      selected: {
+        fg,
+        bg,
+        border
+      }
+    }
+  }
+}
+```