Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Storybook] Remove deprecated components in Overlay #2555

Merged
merged 6 commits into from
Nov 9, 2022
Merged

[Storybook] Remove deprecated components in Overlay #2555

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
12048ec
Remove deprecated components
Nov 8, 2022
5672b6e
Add changeset
Nov 8, 2022
b3d40db
Merge branch 'main' into josepmartins/overlay-stories-fixes
Nov 8, 2022
5bbedbd
Merge branch 'main' into josepmartins/overlay-stories-fixes
Nov 8, 2022
d226407
Merge branch 'main' into josepmartins/overlay-stories-fixes
Nov 8, 2022
7b03068
Merge branch 'main' into josepmartins/overlay-stories-fixes
Nov 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wet-tomatoes-protect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Remove deprecated components usage in Overlay stories
260 changes: 115 additions & 145 deletions src/stories/Overlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
import React, {useState, useRef, useCallback} from 'react'
import {Meta} from '@storybook/react'
import styled from 'styled-components'
import {TriangleDownIcon, PlusIcon, IssueDraftIcon} from '@primer/octicons-react'
import {
Overlay,
ButtonGroup,
Button,
Text,
Box,
StyledOcticon,
Checkbox,
CheckboxGroup,
FormControl,
TextInput,
Link,
Label,
ActionList,
ActionMenu
} from '..'
import {Button, ButtonInvisible, ButtonPrimary, ButtonDanger} from '../deprecated'
import type {AnchorSide} from '@primer/behaviors'
import {DropdownMenu, DropdownButton} from '../deprecated/DropdownMenu'
import {ItemInput} from '../deprecated/ActionList/List'

export default {
title: 'Private components/Overlay',
Expand Down Expand Up @@ -47,24 +44,6 @@ export default {
}
} as Meta

const DummyItem = styled.button`
border-radius: 6px;
font-weight: 400;
padding: 6px 8px;
font-weight: 400;
text-align: left;
margin: 0;
font-size: 14px;
background: none;
border: none;
&:hover {
background: #f0f3f5;
}

&:focus {
background: red;
}
`
interface OverlayProps {
anchorSide: AnchorSide
}
Expand All @@ -87,13 +66,14 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
onClickOutside={() => setIsOpen(false)}
anchorSide={anchorSide}
>
<Box display="flex" flexDirection="column" p={2}>
<DummyItem>Copy link</DummyItem>
<DummyItem>Quote reply</DummyItem>
<DummyItem>Reference in new issue</DummyItem>
<DummyItem>Edit</DummyItem>
<DummyItem>Delete</DummyItem>
</Box>
<ActionList>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Quote reply</ActionList.Item>
<ActionList.Item>Reference in new issue</ActionList.Item>
<ActionList.Item>Edit</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete</ActionList.Item>
</ActionList>
</Overlay>
) : null}
</>
Expand All @@ -107,7 +87,7 @@ export const DialogOverlay = ({anchorSide}: OverlayProps) => {
const anchorRef = useRef<HTMLDivElement>(null)
const closeOverlay = () => setIsOpen(false)
return (
<Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
<Box ref={anchorRef}>
<Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
open overlay
</Button>
Expand All @@ -123,7 +103,9 @@ export const DialogOverlay = ({anchorSide}: OverlayProps) => {
>
<Box display="flex" flexDirection="column" p={2}>
<Text>Are you sure?</Text>
<ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
<Button variant="danger" onClick={closeOverlay}>
Cancel
</Button>
<Button onClick={closeOverlay} ref={confirmButtonRef}>
Confirm
</Button>
Expand All @@ -143,30 +125,9 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
const anchorRef = useRef<HTMLDivElement>(null)
const closeOverlay = () => setIsOpen(false) // intentionally not memoized
const closeSecondaryOverlay = useCallback(() => setIsSecondaryOpen(false), [setIsSecondaryOpen])
const items = React.useMemo(
() => [
{
text: '🔵 Cyan',
onMouseDown: (e: React.MouseEvent) => {
e.preventDefault()
}
},
{
text: '🔴 Magenta',
onMouseDown: (e: React.MouseEvent) => {
e.preventDefault()
}
},
{
text: '🟡 Yellow',
onMouseDown: (e: React.MouseEvent) => {
e.preventDefault()
}
}
],
[]
)
const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
const items = ['🔵 Cyan', '🔴 Magenta', '🟡 Yellow']
const [selectedItem, setSelectedItem] = React.useState(items[0])

return (
<Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
<input placeholder="Input for focus testing" />
Expand Down Expand Up @@ -198,17 +159,22 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
>
<Box display="flex" flexDirection="column" p={2}>
<Text>Select an option!</Text>
<DropdownMenu
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
<DropdownButton aria-labelledby={`favorite-color-label ${ariaLabelledBy}`} {...anchorProps}>
{children}
</DropdownButton>
)}
placeholder="🎨"
items={items}
selectedItem={selectedItem}
onChange={setSelectedItem}
/>
<ActionMenu>
<ActionMenu.Button sx={{width: 200}}>{selectedItem}</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList selectionVariant="single">
{items.map(item => (
<ActionList.Item
key={item}
selected={item === selectedItem}
onSelect={() => setSelectedItem(item)}
>
{item}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Box>
</Overlay>
) : null}
Expand All @@ -218,6 +184,69 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
)
}

export const MemexNestedOverlays = () => {
const [overlayOpen, setOverlayOpen] = React.useState(false)
const buttonRef = useRef<HTMLButtonElement>(null)

const durations = ['days', 'weeks']
const [duration, setDuration] = React.useState(durations[0])

return (
<div>
<ButtonGroup>
<Button>Add iteration</Button>
<Button
aria-label="Add custom iteration"
ref={buttonRef}
onClick={() => setOverlayOpen(!overlayOpen)}
sx={{paddingX: 2}}
>
<TriangleDownIcon />
</Button>
</ButtonGroup>
{overlayOpen && (
<Overlay
width="medium"
onEscape={() => setOverlayOpen(false)}
onClickOutside={() => setOverlayOpen(false)}
returnFocusRef={buttonRef}
ignoreClickRefs={[buttonRef]}
top={60}
left={16}
>
<Box as="form" onSubmit={() => setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}>
<Box sx={{paddingX: 3, display: 'flex', alignItems: 'center', gap: 1}}>
<Text color="fg.muted" sx={{fontSize: 1}}>
Duration:
</Text>
<TextInput defaultValue={2} />
<ActionMenu>
<ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
{duration}
</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList selectionVariant="single">
{durations.map(item => (
<ActionList.Item key={item} selected={item === duration} onSelect={() => setDuration(item)}>
{item}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Box>
<ActionList.Divider />
<Box sx={{display: 'flex', justifyContent: 'flex-end', px: 2, gap: 1}}>
<Button>Cancel</Button>
<Button variant="primary">Add</Button>
</Box>
</Box>
</Overlay>
)}
</div>
)
}

export const NestedOverlays = () => {
const [listOverlayOpen, setListOverlayOpen] = React.useState(false)
const [createListOverlayOpen, setCreateListOverlayOpen] = React.useState(false)
Expand All @@ -234,7 +263,7 @@ export const NestedOverlays = () => {

return (
<div>
<TextInput />
<TextInput placeholder="Input for focus testing" />
<div>
primary overlay open: {String(listOverlayOpen)}, secondary overlay open: {String(createListOverlayOpen)}
</div>
Expand All @@ -260,34 +289,35 @@ export const NestedOverlays = () => {
left={16}
>
<Box sx={{display: 'flex', flexDirection: 'column', py: 2}}>
<Box sx={{paddingX: 3}}>
<Text color="fg.muted" sx={{fontSize: 1}}>
Add to list
</Text>
<Box sx={{marginY: 1}}>
<Box sx={{paddingX: 3, paddingY: 2}}>
<CheckboxGroup>
<CheckboxGroup.Label>Add to list</CheckboxGroup.Label>
<FormControl>
<FormControl.Label>My stack</FormControl.Label>
<FormControl.Caption id="custom-checkbox-one-caption">Personal repositories</FormControl.Caption>
<Checkbox value="my-stack" />
</FormControl>
<FormControl>
<FormControl.Label>Want to try</FormControl.Label>
<FormControl.Caption id="custom-checkbox-one-caption">Testing new libraries</FormControl.Caption>
<Checkbox value="wanna-try" />
</FormControl>
</Box>
</CheckboxGroup>
</Box>
<ActionList.Divider />
<ButtonInvisible
<Button
variant="invisible"
ref={secondaryButtonRef}
sx={{textAlign: 'left', px: 2, mx: 2}}
sx={{px: 2, mx: 2, display: 'flex'}}
leadingIcon={PlusIcon}
onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}
>
<StyledOcticon icon={PlusIcon} sx={{mr: 1}} />
Create list
</ButtonInvisible>
</Button>
</Box>
{createListOverlayOpen && (
<Overlay
width="large"
width="medium"
onEscape={() => setCreateListOverlayOpen(false)}
onClickOutside={() => setCreateListOverlayOpen(false)}
returnFocusRef={secondaryButtonRef}
Expand All @@ -302,7 +332,9 @@ export const NestedOverlays = () => {
<TextInput placeholder="Name this list" sx={{mb: 2}} />
<TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />

<ButtonPrimary onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>Create</ButtonPrimary>
<Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
Create
</Button>
</Box>
</Overlay>
)}
Expand All @@ -312,69 +344,6 @@ export const NestedOverlays = () => {
)
}

export const MemexNestedOverlays = () => {
const [overlayOpen, setOverlayOpen] = React.useState(false)
const buttonRef = useRef<HTMLButtonElement>(null)

const durations = ['days', 'weeks']
const [duration, setDuration] = React.useState(durations[0])

return (
<div>
<ButtonGroup>
<Button>Add iteration</Button>
<Button
aria-label="Add custom iteration"
ref={buttonRef}
onClick={() => setOverlayOpen(!overlayOpen)}
sx={{paddingX: 2}}
>
<TriangleDownIcon />
</Button>
</ButtonGroup>
{overlayOpen && (
<Overlay
width="medium"
onEscape={() => setOverlayOpen(false)}
onClickOutside={() => setOverlayOpen(false)}
returnFocusRef={buttonRef}
ignoreClickRefs={[buttonRef]}
top={60}
left={16}
>
<Box as="form" onSubmit={() => setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}>
<Box sx={{paddingX: 3, display: 'flex', alignItems: 'center', gap: 1}}>
<Text color="fg.muted" sx={{fontSize: 1}}>
Duration:
</Text>
<TextInput defaultValue={2} />
<ActionMenu>
<ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
{duration}
</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList selectionVariant="single">
{durations.map(item => (
<ActionList.Item key={item} selected={item === duration} onSelect={() => setDuration(item)}>
{item}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Box>
<ActionList.Divider />
<Box sx={{display: 'flex', justifyContent: 'flex-end', px: 2, gap: 1}}>
<Button>Cancel</Button>
<ButtonPrimary>Add</ButtonPrimary>
</Box>
</Box>
</Overlay>
)}
</div>
)
}

export const MemexIssueOverlay = () => {
const [overlayOpen, setOverlayOpen] = React.useState(false)
const linkRef = useRef<HTMLAnchorElement>(null)
Expand Down Expand Up @@ -458,7 +427,8 @@ export const MemexIssueOverlay = () => {
}}
/>
) : (
<ButtonInvisible
<Button
variant="invisible"
ref={buttonRef}
onClick={() => setEditing(true)}
aria-label="Change issue title"
Expand All @@ -472,7 +442,7 @@ export const MemexIssueOverlay = () => {
}}
>
{title}
</ButtonInvisible>
</Button>
)}
</Box>
</Overlay>
Expand Down