-
{
ref={floatingElementRef as React.RefObject}
>
Floating element
-
+
}>
Anchor Element
diff --git a/docs/content/core-concepts.md b/docs/content/core-concepts.md
index ccfebac2b7b..8180a7dc998 100644
--- a/docs/content/core-concepts.md
+++ b/docs/content/core-concepts.md
@@ -5,6 +5,7 @@ title: Core Concepts
This document aims to discuss some of the core concepts of building with Primer React.
## Responsive props
+
It's really easy to set different values for most of our component props based on screen size! We take advantage of [styled-system](https://github.com/styled-system/styled-system)'s responsive props API in our components.
```
@@ -20,6 +21,7 @@ or
You can provide your own theme to Primer React! There are a few ways of doing this to varying degrees, checkout the [theme docs](https://primer.style/components/primer-theme) for more information.
## The `css` prop
+
When push comes to shove and you just _really_ need to add a custom CSS rule, you can do that with the `css` prop. Please don't abuse this :)
```
@@ -35,35 +37,34 @@ We categorize our components into 3 general types. Building block components, pa
- Building Blocks
- Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`.
-
- - Pattern Components
+Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`.
- Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future.
+- Pattern Components
- - Helper Components
+Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future.
- Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
+- Helper Components
+Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
- ## The `as` prop
- The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props.
+## The `as` prop
+The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props.
- For example, say you are using a `Button` component, and you really need to apply `Flex` styles to it. You can compose `Flex` and `Button` like so:
+For example, say you are using a `Button` component, and you really need to apply `Box` styles to it. You can compose `Box` and `Button` like so:
- ```.jsx
-
Hello
- ```
+```.jsx
+
Hello
+```
- This will allow you to use all of the `Button` props _and_ all of the `Flex` props without having to wrap your `Button` component in another `Flex` component.
+This will allow you to use all of the `Button` props _and_ all of the `Box` props without having to wrap your `Button` component in another `Box` component.
- **This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `
` instead, because the `Flex`'s render method is ultimately applied, and `Flex` components render `div`'s, you'll see that the rendered component is a `div` when ideally you'd like it to be a `button`. It is also not always clear how the styles in both components will interact and/or override each other.
+**This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `` instead, because the `Box`'s render method is ultimately applied, and `Box` components render `div`'s, you'll see that the rendered component is a `div` when ideally you'd like it to be a `button`. It is also not always clear how the styles in both components will interact and/or override each other.
-For these reasons, **we recommend only using the `as` prop when you cannot achieve the same result by nesting components.** The `Flex` / `Button` example could be done like so:
+For these reasons, **we recommend only using the `as` prop when you cannot achieve the same result by nesting components.** The `Box` / `Button` example could be done like so:
```.jsx
-
+
Hi
-
+
```
diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js
index b4a9b447e60..d83ab453b35 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js
@@ -44,9 +44,9 @@ function LiveCode({code, language, noinline}) {
const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
return (
-
+
-
-
+
+
+
-
+
+
+
)
}
diff --git a/playroom/util.js b/playroom/util.js
index af92dacaa17..e8f7e03da0f 100644
--- a/playroom/util.js
+++ b/playroom/util.js
@@ -43,10 +43,10 @@ export const WithPseudoClass = props => {
export const StickerSheet = ({children, title}) => {
return (
-
+
{title}
{children}
-
+
)
}
@@ -88,22 +88,24 @@ export const ComponentStickerSheet = ({props = [], pseudoClasses = [], title, ch
)
})
return (
-
+
{title}
{propsModifiedChildren[0]}
{pseudoClassChildren}
{propsModifiedChildren.slice(1)}
-
+
)
}
const StickerSheetRow = ({children, label, childWrapper}) => {
return (
-
+
{label}
- {React.Children.map(children, child => childWrapper(child))}
-
+
+ {React.Children.map(children, child => childWrapper(child))}
+
+
)
}
diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx
index de402a58259..5fa8dbf2b38 100644
--- a/src/AvatarPair.tsx
+++ b/src/AvatarPair.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import styled from 'styled-components'
import Avatar from './Avatar'
import {get} from './constants'
-import {Relative, RelativeProps} from './Position'
+import {Box, BoxProps} from './Box'
const ChildAvatar = styled(Avatar)`
position: absolute;
@@ -11,7 +11,7 @@ const ChildAvatar = styled(Avatar)`
box-shadow: ${get('shadows.avatar.childShadow')};
`
-export type AvatarPairProps = RelativeProps
+export type AvatarPairProps = BoxProps
const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
const avatars = React.Children.map(children, (child, i) => {
@@ -19,9 +19,9 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
return i === 0 ? React.cloneElement(child, {size: 40}) :
+
{avatars}
-
+
)
}
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index e2768db6d5b..70e69de26d1 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -2,7 +2,7 @@ import classnames from 'classnames'
import React from 'react'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from './constants'
-import {Absolute} from './Position'
+import {Box} from './Box'
import sx, {SxProp} from './sx'
import {ComponentProps} from './utils/types'
@@ -151,9 +151,9 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
})
return (
-
+
{transformChildren(children)}
-
+
)
}
diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx
index 509d0665626..d51e3d28bbe 100644
--- a/src/CircleOcticon.tsx
+++ b/src/CircleOcticon.tsx
@@ -1,28 +1,28 @@
import {IconProps} from '@primer/octicons-react'
import React from 'react'
import BorderBox from './BorderBox'
-import Flex, {FlexProps} from './Flex'
+import Box, {BoxProps} from './Flex'
export type CircleOcticonProps = {
as?: React.ElementType
size?: number
icon: React.ComponentType<{size?: IconProps['size']}>
-} & FlexProps
+} & BoxProps
function CircleOcticon(props: CircleOcticonProps) {
const {size, as} = props
const {icon: IconComponent, bg, ...rest} = props
return (
-
+
+
)
}
CircleOcticon.defaultProps = {
- ...Flex.defaultProps,
+ ...Box.defaultProps,
size: 32
}
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index d475153d350..2549f44fc26 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -2,7 +2,7 @@ import React, {forwardRef, useRef} from 'react'
import styled from 'styled-components'
import ButtonClose from './Button/ButtonClose'
import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants'
-import Flex from './Flex'
+import Box from './Box'
import useDialog from './hooks/useDialog'
import sx, {SxProp} from './sx'
import Text from './Text'
@@ -44,9 +44,10 @@ const DialogBase = styled.div`
${sx};
`
-const DialogHeaderBase = styled(Flex)`
+const DialogHeaderBase = styled(Box)`
border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
border-bottom: 1px solid ${get('colors.border.primary')};
+ display: flex;
@media screen and (max-width: 750px) {
border-radius: 0px;
@@ -138,7 +139,7 @@ DialogHeader.defaultProps = {
}
DialogHeader.propTypes = {
- ...Flex.propTypes
+ ...Box.propTypes
}
DialogHeader.displayName = 'Dialog.Header'
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 73477ee318b..57b5a056df8 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -216,13 +216,13 @@ const DefaultHeader: React.FC = ({dialogLabelId, title, subti
}, [onClose])
return (
-
-
+
+
{title ?? 'Dialog'}
{subtitle && {subtitle} }
-
+
+
)
}
diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx
index ca471baaffe..80565f23f3f 100644
--- a/src/FilteredActionList/FilteredActionList.tsx
+++ b/src/FilteredActionList/FilteredActionList.tsx
@@ -127,7 +127,7 @@ export function FilteredActionList({
useScrollFlash(listContainerRef)
return (
-
+
-
+
)
}
diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index 7abb2b9d7de..a18300451c0 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -6,7 +6,7 @@ import {FocusZoneHookSettings} from '../hooks/useFocusZone'
import {DropdownButton} from '../DropdownMenu'
import {ItemProps} from '../ActionList'
import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
-import Flex from '../Flex'
+import Box from '../Box'
import {TextInputProps} from '../TextInput'
import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
@@ -146,7 +146,7 @@ export function SelectPanel({
focusTrapSettings={focusTrapSettings}
focusZoneSettings={focusZoneSettings}
>
-
+
+
)
}
diff --git a/src/SubNav.tsx b/src/SubNav.tsx
index 481ae4fad47..f00b3615d74 100644
--- a/src/SubNav.tsx
+++ b/src/SubNav.tsx
@@ -4,7 +4,7 @@ import * as History from 'history'
import React from 'react'
import styled from 'styled-components'
import {COMMON, FLEX, get, SystemBorderProps, SystemCommonProps, SystemFlexProps} from './constants'
-import Flex, {FlexProps} from './Flex'
+import Box, {BoxProps} from './Box'
import sx, {SxProp} from './sx'
import {ComponentProps} from './utils/types'
@@ -54,10 +54,10 @@ function SubNav({actions, className, children, label, ...rest}: SubNavProps) {
)
}
-export type SubNavLinksProps = FlexProps
+export type SubNavLinksProps = BoxProps
function SubNavLinks(props: SubNavLinksProps) {
- return (props => ({
+const TimelineItem = styled(Box).attrs(props => ({
className: classnames('Timeline-Item', props.className)
}))`
position: relative;
@@ -68,12 +69,13 @@ const TimelineItem = styled(Flex).attrs(props => ({
${sx};
`
-export type TimelineBadgeProps = FlexProps
+export type TimelineBadgeProps = BoxProps
const TimelineBadge = (props: TimelineBadgeProps) => {
return (
-
-
+ {
{...props}
>
{props.children}
-
-
+
+
)
}
diff --git a/src/__tests__/Overlay.tsx b/src/__tests__/Overlay.tsx
index 21ef6374335..6121f39b229 100644
--- a/src/__tests__/Overlay.tsx
+++ b/src/__tests__/Overlay.tsx
@@ -1,5 +1,5 @@
import React, {useRef, useState} from 'react'
-import {Overlay, Position, Flex, Text, ButtonDanger, Button} from '..'
+import {Overlay, Box, Text, ButtonDanger, Button} from '..'
import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {axe, toHaveNoViolations} from 'jest-axe'
@@ -22,7 +22,7 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
}
}
return (
-
+
setIsOpen(!isOpen)}>
open overlay
@@ -36,16 +36,16 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
onClickOutside={closeOverlay}
width="small"
>
-
+
Are you sure?
Cancel
Confirm
-
+
) : null}
-
+
)
}
diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx
index 4e86927813b..9aba5eb9161 100644
--- a/src/stories/ConfirmationDialog.stories.tsx
+++ b/src/stories/ConfirmationDialog.stories.tsx
@@ -1,7 +1,7 @@
import React, {useState, useRef, useCallback} from 'react'
import {Meta} from '@storybook/react'
-import {BaseStyles, Button, Flex, ThemeProvider, useTheme} from '..'
+import {BaseStyles, Button, Box, ThemeProvider, useTheme} from '..'
import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
import {ActionMenu} from '../ActionMenu'
@@ -63,7 +63,7 @@ export const ShorthandHook = () => {
[confirm, theme]
)
return (
-
+
Turn me green!
@@ -76,7 +76,7 @@ export const ShorthandHook = () => {
Turn me green!
-
+
)
}
@@ -90,7 +90,7 @@ export const ShorthandHookFromActionMenu = () => {
}, [confirm])
return (
-
+
{text} }
items={[
@@ -100,6 +100,6 @@ export const ShorthandHookFromActionMenu = () => {
}
]}
/>
-
+
)
}
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
index eb05fa8db79..e60771637d1 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -1,7 +1,7 @@
import React, {useState, useRef, useCallback} from 'react'
import {Meta} from '@storybook/react'
import styled from 'styled-components'
-import {BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Position, Flex} from '..'
+import {BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Box} from '..'
import {DropdownMenu, DropdownButton} from '../DropdownMenu'
import {ItemInput} from '../ActionList/List'
@@ -57,13 +57,13 @@ export const DropdownOverlay = () => {
onEscape={() => setIsOpen(false)}
onClickOutside={() => setIsOpen(false)}
>
-
+
Copy link
Quote reply
Reference in new issue
Edit
Delete
-
+
) : null}
@@ -77,7 +77,7 @@ export const DialogOverlay = () => {
const anchorRef = useRef(null)
const closeOverlay = () => setIsOpen(false)
return (
-
+
setIsOpen(!isOpen)}>
open overlay
@@ -90,16 +90,16 @@ export const DialogOverlay = () => {
onClickOutside={closeOverlay}
width="small"
>
-
+
Are you sure?
Cancel
Confirm
-
+
) : null}
-
+
)
}
@@ -137,7 +137,7 @@ export const OverlayOnTopOfOverlay = () => {
)
const [selectedItem, setSelectedItem] = React.useState()
return (
-
+
setIsOpen(!isOpen)}>
@@ -163,7 +163,7 @@ export const OverlayOnTopOfOverlay = () => {
width="small"
sx={{top: '40px'}}
>
-
+
Select an option!
(
@@ -176,11 +176,11 @@ export const OverlayOnTopOfOverlay = () => {
selectedItem={selectedItem}
onChange={setSelectedItem}
/>
-
+
) : null}
) : null}
-
+
)
}
diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx
index 5ebf2839d2e..950312e77f4 100644
--- a/src/stories/useAnchoredPosition.stories.tsx
+++ b/src/stories/useAnchoredPosition.stories.tsx
@@ -100,7 +100,7 @@ export const UseAnchoredPosition = (args: any) => {
[args]
)
return (
-
+
{
>
Floating element
-
+
)
}
export const CenteredOnScreen = () => {
@@ -129,7 +129,7 @@ export const CenteredOnScreen = () => {
})
// The outer Position element simply fills all available space
return (
- }
position="absolute"
top={0}
@@ -149,7 +149,7 @@ export const CenteredOnScreen = () => {
-
+
)
}
diff --git a/src/stories/useFocusTrap.stories.tsx b/src/stories/useFocusTrap.stories.tsx
index 04502522390..f4e37f44784 100644
--- a/src/stories/useFocusTrap.stories.tsx
+++ b/src/stories/useFocusTrap.stories.tsx
@@ -4,7 +4,7 @@ import styled, {createGlobalStyle} from 'styled-components'
import {BaseStyles, BorderBox, Button, Flash, Text, ThemeProvider} from '..'
import {useFocusTrap} from '../hooks/useFocusTrap'
-import Flex from '../Flex'
+import Box from '../Box'
import {themeGet} from '@styled-system/theme-get'
export default {
@@ -63,22 +63,22 @@ export const FocusTrap = () => {
return (
<>
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.
-
+
Durian
Elderberry
Fig
-
+
Grapefruit
Honeydew
Jackfruit
-
+
)
}
@@ -106,22 +106,22 @@ export const RestoreFocus = () => {
return (
<>
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.
-
+
Durian
Elderberry
Fig
-
+
Grapefruit
Honeydew
Jackfruit
-
+
)
}
@@ -149,7 +149,7 @@ export const CustomInitialFocus = () => {
return (
<>
+
This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the
“Elderberry” button will receive the initial focus (if the trap zone container does not already
@@ -160,16 +160,16 @@ export const CustomInitialFocus = () => {
Cantaloupe
} m={4} p={4}>
Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.
-
+
Durian
}>Elderberry
Fig
-
+
Grapefruit
Honeydew
Jackfruit
-
+
)
}
@@ -221,22 +221,22 @@ export const DynamicFocusTrapContents = () => {
return (
<>
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.
-
+
+
Grapefruit
Honeydew
Jackfruit
-
+
)
}
@@ -270,7 +270,7 @@ export const MultipleFocusTraps = () => {
return (
<>
+
This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an
active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled,
@@ -279,18 +279,18 @@ export const MultipleFocusTraps = () => {
Legend
-
+
- Inactive
-
-
+
+
- Suspended
-
-
+
+
- Active
-
+
Apple
Banana
@@ -299,11 +299,11 @@ export const MultipleFocusTraps = () => {
Trap zone ({trapEnabled1 ? 'enabled' : 'disabled'})! Press 1 to toggle.
-
+
Durian
Elderberry
Fig
-
+
Grapefruit
Honeydew
@@ -312,16 +312,16 @@ export const MultipleFocusTraps = () => {
Trap zone ({trapEnabled2 ? 'enabled' : 'disabled'})! Press 2 to toggle.
-
+
Kiwi
Lemon
Mango
-
+
Nectarine
Orange
Peach
-
+
)
}
diff --git a/src/stories/useFocusZone.stories.tsx b/src/stories/useFocusZone.stories.tsx
index 3631dd6d08e..fa916a0968f 100644
--- a/src/stories/useFocusZone.stories.tsx
+++ b/src/stories/useFocusZone.stories.tsx
@@ -4,7 +4,7 @@ import styled, {createGlobalStyle} from 'styled-components'
import {Absolute, BaseStyles, BorderBox, Button, Flash, Grid, theme, ThemeProvider} from '..'
import {Direction, FocusKeys} from '../behaviors/focusZone'
-import Flex from '../Flex'
+import Box from '../Box'
import {themeGet} from '@styled-system/theme-get'
import {useFocusZone} from '../hooks/useFocusZone'
import {useTheme} from '../ThemeProvider'
@@ -55,10 +55,10 @@ export const BasicFocusZone = () => {
return (
<>
-
+
+
Last key pressed: {lastKey}
-
+
{fzEnabled ? 'Disable' : 'Enable'} Focus Zone
@@ -67,16 +67,16 @@ export const BasicFocusZone = () => {
Cantaloupe
} m={4} p={4}>
Use Up Arrow, Down Arrow, Home, and End to move focus within this box.
-
+
Durian
Elderberry
Fig
-
+
Kiwi
Lemon
Mango
-
+
)
}
@@ -100,10 +100,10 @@ export const FocusOutBehavior = () => {
return (
<>
-
+
+
Last key pressed: {lastKey}
-
+
Apple
Banana
Cantaloupe
@@ -112,25 +112,25 @@ export const FocusOutBehavior = () => {
Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends.
-
+
Durian
Elderberry
Fig
-
+
} m={4} p={4}>
Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular.
-
+
Grapefruit
Honeydew
Jackfruit
-
+
Kiwi
Lemon
Mango
-
+
)
}
@@ -202,15 +202,16 @@ export const CustomFocusMovement = () => {
return (
<>
-
+
+
Last key pressed: {lastKey}
-
+
Apple
Use arrow keys to move focus within this box.
- }
gridTemplateRows="1fr 1fr 1fr"
gridTemplateColumns="1fr 1fr 1fr"
@@ -224,11 +225,11 @@ export const CustomFocusMovement = () => {
Honeydew
Jackfruit
Kiwi
-
+
Lemon
Mango
-
+
)
}
@@ -272,48 +273,48 @@ export const FocusInStrategy = () => {
return (
<>
-
+
+
Last key pressed: {lastKey}
-
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
“First” strategy (focus first focusable element)
-
+
Banana
Cantaloupe
Durian
-
+
} m={4} p={4}>
“Closest” strategy (focus first or last depending on focus direction)
-
+
Elderberry
Fig
Grapefruit
-
+
} m={4} p={4}>
“Previous” strategy (most recently focused element)
-
+
Honeydew
Jackfruit
Kiwi
-
+
} m={4} p={4}>
“Custom” strategy (choose randomly for this example)
-
+
Lemon
Mango
Nectarine
-
+
Orange
Papaya
-
+
)
}
@@ -339,21 +340,21 @@ export const SpecialSituations = () => {
return (
<>
+
This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
different situations. Focus treatment within your component should be evaluated for your particular UX using
the ARIA guidelines .
-
+
Last key pressed: {lastKey}
-
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab
-
+
Regular button
@@ -365,12 +366,12 @@ export const SpecialSituations = () => {
style={{width: '250px', height: '95px'}}
defaultValue="Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
>
-
+
} m={4} p={4}>
Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.
-
+
Grapefruit
Jackfruit
-
+
Kiwi
Lemon
Mango
-
+
)
}
@@ -418,27 +419,27 @@ export const ChangingSubtree = () => {
return (
<>
+
This story demonstrates that focusZone is consistent even when the container’s subtree changes.
-
+
Last key pressed: {lastKey}
-
+
Apple
Banana
Cantaloupe
} m={4} p={4}>
Bound keys: Arrow Up and Arrow Down
-
+
{buttons}
-
+
-
+
Remove Button
Add Button
-
-
+
+
)
}
@@ -466,10 +467,10 @@ export const NestedZones = () => {
return (
<>
-
+
+
Last key pressed: {lastKey}
-
+
Apple
Banana
}>
@@ -478,18 +479,18 @@ export const NestedZones = () => {
Cantaloupe
}>
Additional Bound keys: Arrow Left and Arrow Right
-
+
Durian
Elderberry
Fig
Grapefruit
-
+
Honeydew
Jackfruit
Kiwi
-
+
)
}
@@ -523,28 +524,29 @@ export const ActiveDescendant = () => {
return (
<>
+
This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
active element. Below, you can focus the input box then use the up/down arrow keys to change the active
descendant (dark blue outline).
-
+
Last key pressed: {lastKey}
-
+
Apple
Banana
Cantaloupe
Bound keys: Arrow Up and Arrow Down
-
+
{
Elderberry
Fig
Grapefruit
-
-
+
+
Honeydew
Jackfruit
Kiwi
-
+
)
}