message: use master details
diff: @@ -18,13 +18,18 @@ You are responsible for rendering your own `<summary>`. To style your summary el
  ```
  ## With children as a function
  -The render function gets an object with the `open` prop to allow you to conditionally update UI based on the open state of the dropdown:
  +The render function gets an object with two keys:
  +
  +* `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}) => (
  + {({open, toggle}) => (
  <>
  - <Button as="summary">
  + <Button as="summary" onClick={toggle}>
  {open ? 'Hide' : 'Show'}
  </Button>
  <p>This should show and hide</p>
  @@ -33,6 +38,18 @@ The render function gets an object with the `open` prop to allow you to conditio
  </Details>
  ```
  +## With render prop
  +The Details component also accepts a `render` function prop.
  +
  +```.jsx
  +<Details overlay render={({open, toggle}) => (
  + <>
  + <Button as="summary" onClick={toggle}>Open? {String(open)}</Button>
  + <p>This is the content.</p>
  + </>
  +)} />
  +```
  +
  ## System props
  Details components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
  @@ -42,6 +59,7 @@ Details components get `COMMON` system props. Read our [System Props](/component
  | Name | Type | Default | Description |
  | :- | :- | :-: | :- |
  | open | Boolean | | Sets the open/closed state of the Details component |
  +| render | Function | | Optional render function, to allow you to handle toggling and open/closed state from a container component.
  | overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it
  export const meta = {displayName: 'Details'}
  