Skip to content

Commit

Permalink
accordion: support as props for panel and item (#459)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaance
chaance committed Feb 8, 2020
1 parent 769e47c commit 54286ce
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 94 deletions.
21 changes: 12 additions & 9 deletions packages/accordion/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,9 +351,9 @@ if (__DEV__) {
*
* @see Docs https://reacttraining.com/reach-ui/accordion#accordionitem
*/
export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
export const AccordionItem = forwardRefWithAs<AccordionItemProps, "div">(
function AccordionItem(
{ children, disabled = false, ...props },
{ as: Comp = "div", children, disabled = false, ...props },
forwardedRef
) {
const { accordionId, openPanels, readOnly } = useAccordionContext();
Expand Down Expand Up @@ -391,14 +391,14 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(

return (
<AccordionItemContext.Provider value={context}>
<div
<Comp
{...props}
ref={forwardedRef}
data-reach-accordion-item=""
{...dataAttributes}
>
{children}
</div>
</Comp>
</AccordionItemContext.Provider>
);
}
Expand All @@ -407,7 +407,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
/**
* @see Docs https://reacttraining.com/reach-ui/accordion#accordionitem-props
*/
export type AccordionItemProps = React.HTMLProps<HTMLDivElement> & {
export type AccordionItemProps = {
/**
* An `AccordionItem` expects to receive an `AccordionButton` and
* `AccordionPanel` components as its children, though you can also nest other
Expand Down Expand Up @@ -584,8 +584,11 @@ if (__DEV__) {
*
* @see Docs https://reacttraining.com/reach-ui/accordion#accordionpanel
*/
export const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
function AccordionPanel({ children, ...props }, forwardedRef) {
export const AccordionPanel = forwardRefWithAs<AccordionPanelProps, "div">(
function AccordionPanel(
{ as: Comp = "div", children, ...props },
forwardedRef
) {
const {
dataAttributes,
panelId,
Expand All @@ -594,7 +597,7 @@ export const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
} = useAccordionItemContext();

return (
<div
<Comp
hidden={!open}
role="region"
aria-labelledby={buttonId}
Expand All @@ -606,7 +609,7 @@ export const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
tabIndex={-1}
>
{children}
</div>
</Comp>
);
}
);
Expand Down
71 changes: 49 additions & 22 deletions website/src/pages/accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import {
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel
AccordionPanel,
} from "@reach/accordion";
import "@reach/accordion/styles.css";
```
Expand Down Expand Up @@ -224,15 +224,15 @@ return (

#### Accordion Props

| Prop | Type | Required |
| --------------------------------------- | ---------------------- | -------- |
| [children](#accordion-children) | `node` | true |
| [collapsible](#accordion-collapsible) | `boolean` | false |
| [defaultIndex](#accordion-defaultindex) | `number` \| `number[]` | false |
| [index](#accordion-index) | `number` \| `number[]` | false |
| [multiple](#accordion-multiple) | `boolean` | false |
| [onChange](#accordion-onchange) | `func` | false |
| [readOnly](#accordion-readonly) | `boolean` | false |
| Prop | Type | Required |
| ----------------------------------------- | ---------------------- | -------- |
| [`children`](#accordion-children) | `node` | true |
| [`collapsible`](#accordion-collapsible) | `boolean` | false |
| [`defaultIndex`](#accordion-defaultindex) | `number` \| `number[]` | false |
| [`index`](#accordion-index) | `number` \| `number[]` | false |
| [`multiple`](#accordion-multiple) | `boolean` | false |
| [`onChange`](#accordion-onchange) | `func` | false |
| [`readOnly`](#accordion-readonly) | `boolean` | false |

##### Accordion `children`

Expand Down Expand Up @@ -365,10 +365,19 @@ Please see the [styling guide](/styling).
#### AccordionItem Props
| Prop | Type | Required |
| ----------------------------------- | --------- | -------- |
| [children](#accordionitem-children) | `node` | true |
| [disabled](#accordionitem-disabled) | `boolean` | false |
| Prop | Type | Required |
| ------------------------------------- | -------------------- | -------- |
| [`as`](#accordionitem-as) | `string | Component` | false |
| [`children`](#accordionitem-children) | `node` | true |
| [`disabled`](#accordionitem-disabled) | `boolean` | false |
##### AccordionItem `as`
`as: keyof JSX.IntrinsicElements | React.ComponentType`
A string representing an HTML element or a React component that will tell the `AccordionItem` what element to render. Defaults to `div`.
> **NOTE:** Many semantic elements, like `button` elements, have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding our defaults and make sure that the element you choose to render provides the same experience for all users.
##### AccordionItem `children`
Expand Down Expand Up @@ -422,9 +431,18 @@ Please see the [styling guide](/styling).
#### AccordionButton Props
| Prop | Type | Required |
| ------------------------------------- | ------ | -------- |
| [children](#accordionbutton-children) | `node` | true |
| Prop | Type | Required |
| --------------------------------------- | -------------------- | -------- |
| [`as`](#accordionbutton-as) | `string | Component` | false |
| [`children`](#accordionbutton-children) | `node` | true |
##### AccordionButton `as`
`as: keyof JSX.IntrinsicElements | React.ComponentType`
A string representing an HTML element or a React component that will tell the `AccordionButton` what element to render. Defaults to `button`.
> **NOTE:** Many semantic elements, like `button` elements, have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding our defaults and make sure that the element you choose to render provides the same experience for all users.
##### AccordionButton `children`
Expand Down Expand Up @@ -486,7 +504,7 @@ If you need to group interactive elements within an accordion's button, we recom
margin: "9px 0",
display: "flex",
justifyContent: "space-between",
padding: "4px 10px"
padding: "4px 10px",
}}
>
<AccordionButton
Expand All @@ -503,7 +521,7 @@ If you need to group interactive elements within an accordion's button, we recom
font: "inherit",
fontWeight: "bolder",
margin: 0,
padding: "10px 0"
padding: "10px 0",
}}
>
{children}
Expand Down Expand Up @@ -553,9 +571,18 @@ Please see the [styling guide](/styling).

#### AccordionPanel Props

| Prop | Type | Required |
| ------------------------------------ | ------ | -------- |
| [children](#accordionpanel-children) | `node` | true |
| Prop | Type | Required |
| -------------------------------------- | -------------------- | -------- |
| [`as`](#accordionpanel-as) | `string | Component` | false |
| [`children`](#accordionpanel-children) | `node` | true |

##### AccordionPanel `as`

`as: keyof JSX.IntrinsicElements | React.ComponentType`

A string representing an HTML element or a React component that will tell the `AccordionPanel` what element to render. Defaults to `div`.

> **NOTE:** Many semantic elements, like `button` elements, have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding our defaults and make sure that the element you choose to render provides the same experience for all users.

##### AccordionPanel `children`

Expand Down
Loading

0 comments on commit 54286ce

Please sign in to comment.