-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1851 from dev-launchers/development/components
feat(components): Popover component (#1723)
- Loading branch information
Showing
6 changed files
with
253 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { | ||
| Meta, | ||
| Controls, | ||
| Stories, | ||
| Description, | ||
| Primary, | ||
| } from '@storybook/blocks'; | ||
| import * as PopoverStories from './Popover.stories.tsx'; | ||
| import Popover from './Popover.tsx'; | ||
|
|
||
| # Popover | ||
|
|
||
| Popover component. HasCloseBtn will automatically add a button, if developers need another way to close the popover, you can use PopoverClose. Everything needs to be wrapped in the `Popover` component. | ||
|
|
||
| ## Anatomy | ||
|
|
||
| ```jsx | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| PopoverClose, | ||
| } from '@devlaunchers/components/src/components/Popover'; | ||
|
|
||
| export default () => ( | ||
| <Popover> | ||
| <PopoverTrigger /> | ||
| <PopoverContent> | ||
| <PopoverClose /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| ``` | ||
|
|
||
| ### Popover | ||
|
|
||
| Popover is the main component that will wrap the PopoverTrigger and PopoverContent. | ||
|
|
||
| ### PopoverTrigger | ||
|
|
||
| PopoverTrigger is a wrapper component that will be displayed and when clicked it will open the PopoverContent. | ||
| PopoverTrigger is an button component, if you want to use your own button make sure you are passing `asChild` prop. | ||
|
|
||
| ### PopoverContent | ||
|
|
||
| PopoverContent is a wrapper that will hide the content until the PopoverTrigger is clicked on. | ||
|
|
||
| ### PopoverClose & Close buttons. | ||
|
|
||
| #### Built in close button. | ||
|
|
||
| If you want too have automatically add a close X button, pass the prop hasCloseBtn = true. | ||
|
|
||
| #### Adding a dynamic close button. | ||
|
|
||
| If you want to a custom close button, use PopoverClose as a wrapper for the component you want to close the popover. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### [Constrain the content size](https://www.radix-ui.com/primitives/docs/components/popover#constrain-the-content-size) | ||
|
|
||
| <p className="!mt-0 !text-base"> | ||
| You may want to constrain the width of the content so that it matches the | ||
| trigger width. You may also want to constrain its height to not exceed the | ||
| viewport. | ||
| </p> | ||
|
|
||
| <Meta of={PopoverStories} /> | ||
|
|
||
| <Description of={PopoverStories} /> | ||
|
|
||
| <Stories /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import Button from '../atoms/Button'; | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| PopoverClose, | ||
| } from './Popover'; | ||
|
|
||
| const meta: Meta<typeof Popover> = { | ||
| component: Popover, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Popover>; | ||
|
|
||
| /* | ||
| *👇 Render functions are a framework specific feature to allow you control on how the component renders. | ||
| * See https://storybook.js.org/docs/react/api/csf | ||
| * to learn how to use render functions. | ||
| */ | ||
| export const Primary: Story = { | ||
| render: () => ( | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button buttonType="primary" buttonSize="standard"> | ||
| Open | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent hasCloseBtn={false}> | ||
| {' '} | ||
| Click outside of the popover to close | ||
| </PopoverContent> | ||
| </Popover> | ||
| ), | ||
| }; | ||
|
|
||
| export const WithClose: Story = { | ||
| render: () => ( | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button buttonType="primary" buttonSize="standard"> | ||
| Open | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-96"> Click X to close </PopoverContent> | ||
| </Popover> | ||
| ), | ||
| }; | ||
|
|
||
| export const UsingPopoverClose: Story = { | ||
| render: () => ( | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button buttonType="primary" buttonSize="standard"> | ||
| Open | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| hasCloseBtn={false} | ||
| className="flex w-96 items-center justify-between" | ||
| > | ||
| <p>Click button to close</p> | ||
| <PopoverClose> | ||
| <Button buttonType="primary" buttonSize="standard"> | ||
| {' '} | ||
| Close{' '} | ||
| </Button> | ||
| </PopoverClose> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| 'use client'; | ||
| import * as PopoverPrimitive from '@radix-ui/react-popover'; | ||
| import { X } from 'lucide-react'; | ||
| import * as React from 'react'; | ||
| import { cn } from '../../utils/classesMerger'; | ||
|
|
||
| /** | ||
| * @see http://localhost:6006/?path=/docs/components-popover--docs | ||
| */ | ||
|
|
||
| const Popover = PopoverPrimitive.Root; | ||
| const PopoverTrigger = PopoverPrimitive.Trigger; | ||
| const PopoverAnchor = PopoverPrimitive.Anchor; | ||
| const PopoverClose = PopoverPrimitive.Close; | ||
|
|
||
| const PopoverContent = React.forwardRef< | ||
| React.ElementRef<typeof PopoverPrimitive.Content>, | ||
| Omit< | ||
| React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, | ||
| 'align' | ||
| > & { | ||
| /** | ||
| * Boolean when set to false will remove the close button in the top right corner of the dialog. | ||
| */ | ||
| hasCloseBtn?: boolean; | ||
| /** | ||
| * The side offset of the dialog. | ||
| */ | ||
| align?: 'center' | 'start' | 'end'; | ||
| } | ||
| >( | ||
| ( | ||
| { | ||
| className, | ||
| children, | ||
| align = 'center', | ||
| hasCloseBtn = true, | ||
| sideOffset = 4, | ||
| ...props | ||
| }, | ||
| ref | ||
| ) => ( | ||
| <PopoverPrimitive.Portal> | ||
| <PopoverPrimitive.Content | ||
| ref={ref} | ||
| align={align} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| 'z-50 rounded-md border bg-white p-8 text-popover-foreground shadow-md outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| {hasCloseBtn && ( | ||
| <PopoverPrimitive.Close className="absolute right-8 top-8 flex items-center justify-center rounded-md bg-white drop-shadow-xl"> | ||
| <X className="h-6 w-6" /> | ||
| </PopoverPrimitive.Close> | ||
| )} | ||
| </PopoverPrimitive.Content> | ||
| </PopoverPrimitive.Portal> | ||
| ) | ||
| ); | ||
| PopoverContent.displayName = PopoverPrimitive.Content.displayName; | ||
|
|
||
| export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export { | ||
| Popover, | ||
| PopoverTrigger, | ||
| PopoverContent, | ||
| PopoverAnchor, | ||
| } from './Popover'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters