[Storybook] Remove deprecated components in stories (#2563)

* Remove deprecated button in AnchorOverlay stories * Remove deprecated button in Autocomplete stories * Remove deprecated components and fix ConfirmationDialog stories * Remove deprecated Button from Dialog stories; * Remove deprecated Button from SelecPanel stories * Remove deprecated Button from usefocuszone
primer · Nov 11, 2022 · 3085fde · 3085fde
1 parent 9cb14fe
commit 3085fde
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 44 deletions.
diff --git a/.changeset/rude-rules-watch.md b/.changeset/rude-rules-watch.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove deprecated component instances in stories
diff --git a/src/stories/AnchoredOverlay.stories.tsx b/src/stories/AnchoredOverlay.stories.tsx
@@ -3,7 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, Box, ThemeProvider} from '..'
 import Heading from '../Heading'
-import DropdownButton from '../deprecated/Button'
+import {Button} from '../Button'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {registerPortalRoot} from '../Portal'
 
@@ -50,7 +50,7 @@ const ButtonWithAnchoredOverlay = ({portalContainerName}: {portalContainerName?:
       onClose={() => setOpen(false)}
       width="small"
       height="auto"
-      renderAnchor={props => <DropdownButton {...props}>Kitten, please</DropdownButton>}
+      renderAnchor={props => <Button {...props}>Kitten, please</Button>}
       overlayProps={{portalContainerName}}
     >
       <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">

diff --git a/src/stories/Autocomplete.stories.tsx b/src/stories/Autocomplete.stories.tsx
@@ -5,8 +5,8 @@ import {BaseStyles, Box, ThemeProvider} from '..'
 import TextInputTokens from '../TextInputWithTokens'
 import Autocomplete from '../Autocomplete/Autocomplete'
 import {AnchoredOverlay} from '../AnchoredOverlay'
-import {ButtonInvisible} from '../deprecated/Button'
 import FormControl from '../FormControl'
+import {Button} from '../Button'
 import {ComponentProps} from '../utils/types'
 import {
   FormControlArgs,
@@ -700,7 +700,7 @@ export const InOverlayWithCustomScrollContainerRef = (args: FormControlArgs<Auto
         height="xsmall"
         focusTrapSettings={{initialFocusRef: inputRef}}
         side="inside-top"
-        renderAnchor={props => <ButtonInvisible {...props}>open overlay</ButtonInvisible>}
+        renderAnchor={props => <Button {...props}>open overlay</Button>}
       >
         <FormControl.Label htmlFor="autocompleteInput" id="autocompleteLabel" visuallyHidden>
           Pick tags

diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx
@@ -1,9 +1,10 @@
 import React, {useState, useRef, useCallback} from 'react'
 import {Meta} from '@storybook/react'
 import {BaseStyles, Box, ThemeProvider, useTheme} from '..'
-import {Button} from '../deprecated'
+import {Button} from '../Button'
+import {ActionMenu} from '../ActionMenu'
+import {ActionList} from '../ActionList'
 import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-import {ActionMenu} from '../deprecated/ActionMenu'
 
 export default {
   title: 'Components/ConfirmationDialog',
@@ -56,7 +57,7 @@ export const ShorthandHook = () => {
         (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
         event.target instanceof HTMLElement
       ) {
-        event.target.style.backgroundColor = theme?.colors.auto.green[3] ?? 'green'
+        event.target.style.color = theme?.colors.success.fg ?? 'green'
         event.target.textContent = "I'm green!"
       }
     },
@@ -91,15 +92,15 @@ export const ShorthandHookFromActionMenu = () => {
 
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <ActionMenu
-        renderAnchor={props => <Button {...props}>{text}</Button>}
-        items={[
-          {
-            text: 'Do a trick!',
-            onAction: onButtonClick
-          }
-        ]}
-      />
+      <ActionMenu>
+        <ActionMenu.Button>{text}</ActionMenu.Button>
+
+        <ActionMenu.Overlay>
+          <ActionList>
+            <ActionList.Item onSelect={onButtonClick}>Do a trick!</ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
     </Box>
   )
 }
diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx
@@ -2,7 +2,7 @@ import React, {useState, useRef, useCallback} from 'react'
 import {Meta} from '@storybook/react'
 
 import {BaseStyles, ThemeProvider, Box} from '..'
-import {Button} from '../deprecated'
+import {Button} from '../Button'
 import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
 
 export default {

diff --git a/src/stories/SelectPanel.stories.tsx b/src/stories/SelectPanel.stories.tsx
@@ -2,9 +2,10 @@ import type {OverlayProps} from '../Overlay'
 import {Meta} from '@storybook/react'
 import React, {useRef, useState} from 'react'
 import {theme, ThemeProvider} from '..'
+import {Button} from '../Button'
+import {TriangleDownIcon} from '@primer/octicons-react'
 import {ItemInput} from '../deprecated/ActionList/List'
 import BaseStyles from '../BaseStyles'
-import {DropdownButton} from '../deprecated/DropdownMenu'
 import {SelectPanel} from '../SelectPanel'
 import Box from '../Box'
 
@@ -69,9 +70,9 @@ export function MultiSelectStory(): JSX.Element {
       <div>Please select labels that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -100,9 +101,9 @@ export function SingleSelectStory(): JSX.Element {
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -129,9 +130,9 @@ export function ExternalAnchorStory(): JSX.Element {
   return (
     <>
       <h1>Select Panel With External Anchor</h1>
-      <DropdownButton ref={buttonRef} onClick={() => setOpen(!open)}>
+      <Button trailingIcon={TriangleDownIcon} ref={buttonRef} onClick={() => setOpen(!open)}>
         Custom: {selected?.text || 'Click Me'}
-      </DropdownButton>
+      </Button>
       <SelectPanel
         renderAnchor={null}
         anchorRef={buttonRef}
@@ -162,9 +163,9 @@ export function SelectPanelHeightInitialWithOverflowingItemsStory(): JSX.Element
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -194,9 +195,9 @@ export function SelectPanelHeightInitialWithUnderflowingItemsStory(): JSX.Elemen
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -238,9 +239,9 @@ export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch(): JSX.E
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -271,9 +272,9 @@ export function SelectPanelAboveTallBody(): JSX.Element {
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={open}
@@ -313,9 +314,9 @@ export function SelectPanelHeightAndScroll(): JSX.Element {
       <h2>With height:medium</h2>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={openA}
@@ -330,9 +331,9 @@ export function SelectPanelHeightAndScroll(): JSX.Element {
       <h2>With height:auto, maxheight:medium</h2>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
-          </DropdownButton>
+          </Button>
         )}
         placeholderText="Filter Labels"
         open={openB}

diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
 import {BaseStyles, Box, ThemeProvider} from '..'
-import {ButtonPrimary} from '../deprecated'
 import {useAnchoredPosition} from '../hooks'
 import styled from 'styled-components'
 import {get} from '../constants'
@@ -307,9 +306,9 @@ export const WithPortal = () => {
           with <code>useAnchoredPosition</code>, we can break out of this constraint.
         </p>
         <Box sx={{textAlign: 'right'}}>
-          <ButtonPrimary onClick={toggleMenu} ref={anchorElementRef as React.RefObject<HTMLButtonElement>}>
+          <Button variant="primary" onClick={toggleMenu} ref={anchorElementRef as React.RefObject<HTMLButtonElement>}>
             Show the overlay!
-          </ButtonPrimary>
+          </Button>
           {showMenu ? (
             <Portal>
               <Float

diff --git a/src/stories/useFocusZone.stories.tsx b/src/stories/useFocusZone.stories.tsx
@@ -1,9 +1,8 @@
 import React, {useCallback, useRef, useState} from 'react'
 import {Meta} from '@storybook/react'
 import styled, {createGlobalStyle} from 'styled-components'
-
 import {Box, BaseStyles, Flash, theme, ThemeProvider} from '..'
-import {Button, ButtonDanger, ButtonPrimary} from '../deprecated'
+import {Button} from '../Button'
 import {FocusKeys} from '@primer/behaviors'
 import type {Direction} from '@primer/behaviors'
 import {themeGet} from '@styled-system/theme-get'
@@ -47,7 +46,6 @@ export const BasicFocusZone = () => {
   const [fzEnabled, setFzEnabled] = useState(true)
   const {containerRef} = useFocusZone({disabled: !fzEnabled}, [fzEnabled])
 
-  const ToggleButton = fzEnabled ? ButtonDanger : ButtonPrimary
   const toggleFz = useCallback(() => {
     setFzEnabled(!fzEnabled)
   }, [fzEnabled])
@@ -59,9 +57,9 @@ export const BasicFocusZone = () => {
         <Box position="absolute" right={5} top={2}>
           Last key pressed: {lastKey}
         </Box>
-        <ToggleButton onClick={toggleFz} sx={{mb: 3}}>
+        <Button variant={fzEnabled ? 'danger' : 'primary'} onClick={toggleFz} sx={{mb: 3}}>
           {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
-        </ToggleButton>
+        </Button>
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>