diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx index 313b249c093..14466587724 100644 --- a/packages/react/src/Button/Button.features.stories.tsx +++ b/packages/react/src/Button/Button.features.stories.tsx @@ -1,6 +1,8 @@ import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react' -import React, {useState} from 'react' +import React, {useState, useRef} from 'react' import {Button} from '.' +import {announce} from '@primer/live-region-element' +import VisuallyHidden from '../_VisuallyHidden' export default { title: 'Components/Button/Features', @@ -16,7 +18,7 @@ export const LeadingVisual = () => -export const TrailingCounter = () => { +export const TrailingButtonNothing = () => { const [count, setCount] = useState(0) return ( + ) +} + +export const TrailingCounterWithFocusBouncing = () => { + const [count, setCount] = useState(0) + const onClick = () => { + setCount(count + 1) + // i think the proper react way is to pass a ref?? + const button = document.querySelector('#test-1') as HTMLElement + // eslint-disable-next-line github/no-blur + button.blur() + setTimeout(() => { + button.focus() + }, 250) + } + return ( +
+ +
+ ) +} + +export const TrailingCounterWithPoliteLiveRegion = () => { + const [count, setCount] = useState(0) + return ( + + ) +} + +export const TrailingCounterWithAdjacentLiveRegion = () => { + const [count, setCount] = useState(0) + + const onClick = () => { + setCount(count + 1) + announce(`Watch (${count + 1})`) + } + return ( +
+ +
+ ) +} + +export const TrailingCounterWithNestedLiveRegion = () => { + const [count, setCount] = useState(0) + + const onClick = () => { + setCount(count + 1) + } + return ( +
+ +
+ ) +} + export const TrailingCounterAllVariants = () => { const [count, setCount] = useState(0) return ( diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 746a26dfe0b..7b5c02bd136 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -19,6 +19,7 @@ const ButtonBase = forwardRef( trailingVisual: TrailingVisual, trailingAction: TrailingAction, count, + dynamicallyUpdated, icon: Icon, variant = 'default', size = 'medium', @@ -62,7 +63,6 @@ const ButtonBase = forwardRef( } }, [innerRef]) } - return ( ) : ( <> - + {LeadingVisual && ( diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index c41e3a0e5c5..ac6d0769963 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -72,7 +72,7 @@ export type ButtonProps = { trailingAction?: React.ElementType | null children?: React.ReactNode - + dynamicallyUpdated?: boolean count?: number } & ButtonBaseProps