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

fix(AnchoredOverlay): replace broken stories #5056

Merged
merged 10 commits into from
Oct 9, 2024
Merged

fix(AnchoredOverlay): replace broken stories #5056

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f726be2
fix(AnchoredOverlay): replace broken stories
francinelucca Oct 2, 2024
9872da5
fix: storybook build failure
francinelucca Oct 2, 2024
5835d4a
Merge branch 'main' of github.com:primer/react into francinelucca/342…
francinelucca Oct 3, 2024
8d8cb53
Docs(AnchoredOverlay): rewrite hovercard using stack
francinelucca Oct 3, 2024
9889b8f
Docs(AnchoredOverlay): remove unused variable
francinelucca Oct 4, 2024
1ac42cf
Docs(AnchoredOverlay): use text size prop in stories instead of fontSize
francinelucca Oct 4, 2024
0706149
Merge branch 'main' into francinelucca/3420-prcanchoredoverlay-exampl…
francinelucca Oct 8, 2024
c2dd904
Update packages/react/src/AnchoredOverlay/AnchoredOverlay.features.st…
francinelucca Oct 8, 2024
0102af9
Docs(AnchoredOverlay): use sx prop for styling instead of styled-syst…
francinelucca Oct 8, 2024
f2bd114
Merge branch 'main' into francinelucca/3420-prcanchoredoverlay-exampl…
francinelucca Oct 9, 2024
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
64 changes: 48 additions & 16 deletions packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,49 @@ import React, {useEffect, useRef, useState} from 'react'
import type {Args, Meta} from '@storybook/react'
import {FocusKeys} from '@primer/behaviors'

import {Box, Button} from '..'
import {Avatar, Box, Text} from '..'
import {AnchoredOverlay} from '../AnchoredOverlay'
import Heading from '../Heading'
import Octicon from '../Octicon'
import {Button} from '../Button'
import {registerPortalRoot} from '../Portal'
import {Playground} from './AnchoredOverlay.stories'
import {LocationIcon, RepoIcon} from '@primer/octicons-react'
import {Stack} from '../Stack/Stack'

export default {
title: 'Components/AnchoredOverlay/Features',
component: AnchoredOverlay,
} as Meta

const hoverCard = (
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
<Stack direction="horizontal" gap="condensed" justify="space-between">
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
<Button size="small">Follow</Button>
</Stack>
<Stack direction="horizontal" gap="none">
<Text weight="medium">monalisa</Text>
<Text color={'var(--fgColor-muted)'} ml={1}>
Monalisa Octocat
</Text>
</Stack>
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend using the size prop instead.

Suggested change
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
<Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>

Same goes for other places where you're using Text to set the size.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah perfect, will do! thankss 🙏🏼

<Stack direction="horizontal" gap="none">
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
Interwebs
</Text>
</Stack>
<Stack direction="horizontal" gap="none">
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
Owns this repository
</Text>
</Stack>
</Stack>
)

const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
const scrollingElementRef = useRef<HTMLDivElement>(null)
useEffect(() => {
Expand Down Expand Up @@ -70,8 +102,8 @@ export const CustomAnchorId = () => {
renderAnchor={props => <Button {...props}>Button</Button>}
anchorId="my-custom-anchor-id"
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
francinelucca marked this conversation as resolved.
Show resolved Hide resolved
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -88,8 +120,8 @@ export const Height = () => {
renderAnchor={props => <Button {...props}>Button</Button>}
height="large"
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -106,8 +138,8 @@ export const Width = () => {
renderAnchor={props => <Button {...props}>Button</Button>}
width="large"
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -128,8 +160,8 @@ export const AnchorAlignment = () => {
)}
align="center"
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -146,8 +178,8 @@ export const AnchorSide = () => {
renderAnchor={props => <Button {...props}>Button</Button>}
side="outside-right"
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -165,7 +197,7 @@ export const OffsetPositionFromAnchor = () => {
anchorOffset={100}
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand All @@ -182,8 +214,8 @@ export const OffsetAlignmentFromAnchor = () => {
renderAnchor={props => <Button {...props}>Button</Button>}
alignmentOffset={100}
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand Down Expand Up @@ -247,8 +279,8 @@ export const OverlayPropsOverrides = () => {
<li>overflow: `auto`</li>
<li>maxHeight: `xsmall`</li>
</pre>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
<Box width="100%" height="100%" display="flex" flexDirection="column">
{hoverCard}
</Box>
</AnchoredOverlay>
)
Expand Down
43 changes: 35 additions & 8 deletions packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,47 @@
import React, {useState} from 'react'
import type {Args, Meta} from '@storybook/react'
import {LocationIcon, RepoIcon} from '@primer/octicons-react'

import {Box} from '..'
import {Avatar, Text} from '..'
import {AnchoredOverlay} from '../AnchoredOverlay'
import {Button} from '../Button'
import Octicon from '../Octicon'
import {action} from '@storybook/addon-actions'
import {Stack} from '../Stack/Stack'

export default {
title: 'Components/AnchoredOverlay',
component: AnchoredOverlay,
} as Meta

const hoverCard = (
<Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
<Stack direction="horizontal" gap="condensed" justify="space-between">
<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
<Button size="small">Follow</Button>
</Stack>
<Stack direction="horizontal" gap="none">
<Text weight="medium">monalisa</Text>
<Text color={'var(--fgColor-muted)'} ml={1}>
Monalisa Octocat
</Text>
</Stack>
<Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
<Stack direction="horizontal" gap="none">
<Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
Interwebs
</Text>
</Stack>
<Stack direction="horizontal" gap="none">
<Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
<Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
Owns this repository
</Text>
</Stack>
</Stack>
)

export const Default = () => {
const [open, setOpen] = useState(false)

Expand All @@ -21,9 +52,7 @@ export const Default = () => {
onClose={() => setOpen(false)}
renderAnchor={props => <Button {...props}>Button</Button>}
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
</Box>
{hoverCard}
</AnchoredOverlay>
)
}
Expand All @@ -48,14 +77,12 @@ export const Playground = (args: Args) => {
overlayProps={args.portalContainerName}
side={args.side}
>
<Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
<img src={`//placekitten.com/200/300`} alt="kitten" />
</Box>
{hoverCard}
</AnchoredOverlay>
)
}
Playground.args = {
width: 'small',
width: 'auto',
height: 'auto',
portalContainerName: 'Portal name',
side: 'outside-bottom',
Expand Down
Loading