Skip to content

Commit

Permalink
deprecate utility components
Browse files Browse the repository at this point in the history
  • Loading branch information
@VanAnderson
VanAnderson committed Jun 28, 2021
1 parent f4f96ec commit 88cc754
Show file tree
Hide file tree
Showing 25 changed files with 367 additions and 307 deletions.
12 changes: 4 additions & 8 deletions docs/content/AnchoredOverlay.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,19 @@ The overlay can be opened and navigated using keyboard or mouse.
const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen])
return (
<AnchoredOverlay
renderAnchor={(anchorProps) => (
<DropdownButton {...anchorProps}>
Click me to open
</DropdownButton>
)}
renderAnchor={anchorProps => <DropdownButton {...anchorProps}>Click me to open</DropdownButton>}
open={isOpen}
onOpen={openOverlay}
onClose={closeOverlay}
>
<Flex flexDirection="column" maxWidth="300px" padding={2}>
<Box display="flex" flexDirection="column" maxWidth="300px" padding={2}>
<p>
This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons
This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons
</p>
<Button mb={1}>Button 1</Button>
<Button mb={1}>Button 2</Button>
<Button>Button 3</Button>
</Flex>
</Box>
</AnchoredOverlay>
)
}}
Expand Down
46 changes: 31 additions & 15 deletions docs/content/Dialog.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: Dialog
---

import State from '../components/State'

The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
Expand All @@ -27,8 +28,15 @@ If you're running into z-index issues or are rendering the component inside of a
const returnFocusRef = React.useRef(null)
return (
<>
<Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>Open</Button>
<Dialog returnFocusRef={returnFocusRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)} aria-labelledby="header-id">
<Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>
Open
</Button>
<Dialog
returnFocusRef={returnFocusRef}
isOpen={isOpen}
onDismiss={() => setIsOpen(false)}
aria-labelledby="header-id"
>
<Dialog.Header id="header-id">Title</Dialog.Header>
<Box p={3}>
<Text fontFamily="sans-serif">Some content</Text>
Expand All @@ -40,7 +48,6 @@ If you're running into z-index issues or are rendering the component inside of a
</State>
```


You can also pass any non-text content into the header:

```jsx live
Expand All @@ -49,17 +56,26 @@ You can also pass any non-text content into the header:
const returnFocusRef = React.useRef(null)
return (
<>
<Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>Open</Button>
<Dialog isOpen={isOpen} returnFocusRef={returnFocusRef} onDismiss={() => setIsOpen(false)} aria-labelledby="label">
<Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>
Open
</Button>
<Dialog
isOpen={isOpen}
returnFocusRef={returnFocusRef}
onDismiss={() => setIsOpen(false)}
aria-labelledby="label"
>
<Dialog.Header>
<ZapIcon />
</Dialog.Header>
<Box p={3}>
<Text id="label" fontFamily="sans-serif">Are you sure you'd like to delete this issue?</Text>
<Flex mt={3} justifyContent="flex-end">
<Text id="label" fontFamily="sans-serif">
Are you sure you'd like to delete this issue?
</Text>
<Box display="flex" mt={3} justifyContent="flex-end">
<Button mr={1}>Cancel</Button>
<ButtonDanger>Delete</ButtonDanger>
</Flex>
</Box>
</Box>
</Dialog>
</>
Expand All @@ -74,13 +90,13 @@ You can also pass any non-text content into the header:
## Component props
| Prop name | Type | Description |
| :- | :- | :- |
| isOpen | Boolean | Set whether or not the dialog is shown |
| onDismiss | Function | A user-provided function that should close the dialog |
| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed |
| Prop name | Type | Description |
| :-------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen | Boolean | Set whether or not the dialog is shown |
| onDismiss | Function | A user-provided function that should close the dialog |
| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed |
| initialFocusRef | React ref | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. |
| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. |
| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. |
| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. |

`Dialog.Header` does not take any non-system props.
26 changes: 13 additions & 13 deletions docs/content/Overlay.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ const Demo = () => {
onClickOutside={() => setIsOpen(false)}
aria-labelledby="title"
>
<Flex flexDirection="column" p={2}>
<Box display="flex" flexDirection="column" p={2}>
<Text id="title">Are you sure you would like to delete this item?</Text>
<Button>yes</Button>
<Button ref={noButtonRef}>no</Button>
</Flex>
</Box>
</Overlay>
)}
</>
Expand All @@ -67,14 +67,14 @@ render(<Demo />)
## Component props
| Name | Type | Default | Description |
| :-------------- | :-------------------------------- | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ignoreClickRefs | `React.RefObject<HTMLElement> []` | `undefined` | Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice. |
| initialFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused. |
| anchorRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Element the `Overlay` should be anchored to. |
| returnFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Ref for the element to focus when the `Overlay` is closed. |
| onClickOutside | `function` | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`. |
| onEscape | `function` | `undefined` | Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`. |
| width | `'small' │ 'medium' │ 'large' │ 'xlarge' │ 'xxlarge' │ 'auto'` | `auto` | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`. |
| height | `'xsmall', 'small', 'medium', 'large', 'xlarge', 'auto'` | `auto` | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`. |
| visibility | `'visible', 'hidden'` | `visible` | Sets the visibility of the `Overlay`. |
| Name | Type | Default | Description |
| :-------------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ignoreClickRefs | `React.RefObject<HTMLElement> []` | `undefined` | Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice. |
| initialFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused. |
| anchorRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Element the `Overlay` should be anchored to. |
| returnFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Ref for the element to focus when the `Overlay` is closed. |
| onClickOutside | `function` | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`. |
| onEscape | `function` | `undefined` | Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`. |
| width | `'small' │ 'medium' │ 'large' │ 'xlarge' │ 'xxlarge' │ 'auto'` | `auto` | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`. |
| height | `'xsmall', 'small', 'medium', 'large', 'xlarge', 'auto'` | `auto` | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`. |
| visibility | `'visible', 'hidden'` | `visible` | Sets the visibility of the `Overlay`. |
8 changes: 4 additions & 4 deletions docs/content/PointerBox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ function PointerBoxDemo(props) {
Caret Position
</Heading>
<CaretSelector current={pos} onChange={setPos} />
<Relative pt={4}>
<Box position="relative" pt={4}>
<PointerBox m={4} p={2} minHeight={100} bg="bg.success" borderColor="border.success" caret={pos}>
{' '}
Content{' '}
</PointerBox>
</Relative>
</Box>
</Box>
)
}
Expand Down Expand Up @@ -61,9 +61,9 @@ function CaretSelector(props) {
))

return (
<Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
<Box display="grid" gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
{choices}
</Grid>
</Box>
)
}

Expand Down
75 changes: 48 additions & 27 deletions docs/content/Popover.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ It can be useful to give the `Popover.Content` element a margin to help align th
## Default Example

```jxs live
<Relative>
<Box position="relative">
<Text textAlign="center" display="block">
<ButtonPrimary>Hello!</ButtonPrimary>
</Text>
Expand All @@ -25,7 +25,7 @@ It can be useful to give the `Popover.Content` element a margin to help align th
<Button>Got it!</Button>
</Popover.Content>
</Popover>
</Relative>
</Box>
```

## Caret position
Expand All @@ -39,45 +39,66 @@ function PopoverDemo(props) {

return (
<Box>
<Heading as="h3" fontSize={3}>Caret Position</Heading>
<Heading as="h3" fontSize={3}>
Caret Position
</Heading>
<CaretSelector current={pos} onChange={setPos} />
<Heading as="h3" fontSize={3}>Popover Visibility</Heading>
<Heading as="h3" fontSize={3}>
Popover Visibility
</Heading>
<Box my={2}>
<label>
<input type="checkbox" value={open} checked={open}
onChange={() => setOpen(open => !open)}/> Open
<input type="checkbox" value={open} checked={open} onChange={() => setOpen(open => !open)} /> Open
</label>
</Box>

<Relative pt={4}>
<Box position="relative" pt={4}>
<Popover relative open={open} caret={pos}>
<Popover.Content>
<Heading fontSize={2}><code>{pos}</code> caret</Heading>
<Heading fontSize={2}>
<code>{pos}</code> caret
</Heading>
<Text as="p">Message about this particular piece of UI.</Text>
<Button onClick={() => setOpen(false)}>Got it!</Button>
</Popover.Content>
</Popover>
</Relative>
</Box>
</Box>
)
}

function CaretSelector(props) {
const choices = [
'top', 'bottom', 'left', 'right',
'left-bottom', 'left-top', 'right-bottom', 'right-top',
'top-left', 'bottom-left', 'top-right', 'bottom-right'
].map((dir) => (
'top',
'bottom',
'left',
'right',
'left-bottom',
'left-top',
'right-bottom',
'right-top',
'top-left',
'bottom-left',
'top-right',
'bottom-right'
].map(dir => (
<label>
<input key={dir} type='radio' name='caret' value={dir}
checked={dir === props.current} onChange={() => props.onChange(dir)} /> {dir}
<input
key={dir}
type="radio"
name="caret"
value={dir}
checked={dir === props.current}
onChange={() => props.onChange(dir)}
/>{' '}
{dir}
</label>
))
))

return (
<Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
<Box display="grid" gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
{choices}
</Grid>
</Box>
)
}

Expand All @@ -92,19 +113,19 @@ render(<PopoverDemo />)

### Popover

| Name | Type | Default | Description |
| :- | :- | :-: | :- |
| as | String | 'div' | Sets the HTML tag for the component. |
| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. |
| open | Boolean | false | Controls the visibility of the popover. |
| relative | Boolean | false | Set to true to render the popover using relative positioning. |
| Name | Type | Default | Description |
| :------- | :------ | :-----: | :----------------------------------------------------------------------------- |
| as | String | 'div' | Sets the HTML tag for the component. |
| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. |
| open | Boolean | false | Controls the visibility of the popover. |
| relative | Boolean | false | Set to true to render the popover using relative positioning. |

#### Caret Positions

The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `right`, `bottom-left`, `bottom-right`, `top-left`, `top-right`, `left-bottom`, `left-top`, `right-bottom`, or `right-top`.

### Popover.Content

| Name | Type | Default | Description |
| :- | :- | :-: | :- |
| as | String | 'div' | Sets the HTML tag for the component. |
| Name | Type | Default | Description |
| :--- | :----- | :-----: | :----------------------------------- |
| as | String | 'div' | Sets the HTML tag for the component. |
Loading

0 comments on commit 88cc754

Please sign in to comment.