mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
migration of Popover to use TS Box version (#20279)
* migration of Popover to use TS Box version * fix lint error * Updating docs --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
jainex
GitHub
parent
3915482edb
commit
798a9b0e60
@ -11,8 +11,6 @@ Popover is an overlay that appears by the trigger used for menus, additional con
|
||||
|
||||
## Props
|
||||
|
||||
The `Popover` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Popover} />
|
||||
|
||||
### Reference Element
|
||||
@ -21,7 +19,8 @@ The `referenceElement` prop is required and used to position the popover relativ
|
||||
|
||||
```jsx
|
||||
import { useState } from 'react';
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { BackgroundColor } from '../../../helpers/constants/design-system'
|
||||
import { Popover, Box } from '../../component-library';
|
||||
|
||||
const [referenceElement, setReferenceElement] = useState();
|
||||
|
||||
@ -29,8 +28,12 @@ const setBoxRef = (ref) => {
|
||||
setReferenceElement(ref);
|
||||
};
|
||||
|
||||
<Box ref={setBoxRef}></Box>
|
||||
<Popover referenceElement={referenceElement}>Reference Element</Popover>
|
||||
<Box
|
||||
ref={setBoxRef}
|
||||
backgroundColor={BackgroundColor.primaryDefault}
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
<Popover referenceElement={referenceElement}>Reference element</Popover>
|
||||
```
|
||||
|
||||
### Children
|
||||
@ -44,7 +47,7 @@ import {
|
||||
Icon,
|
||||
IconSize,
|
||||
IconName,
|
||||
} from '../../ui/component-library';
|
||||
} from '../../component-library';
|
||||
|
||||
<Popover>
|
||||
<Text>
|
||||
@ -61,7 +64,7 @@ Use the `position` prop with the `PopoverPosition` enum to set the position of t
|
||||
Default is `PopoverPosition.Auto`
|
||||
|
||||
```jsx
|
||||
import { Popover, PopoverPosition } from '../../ui/component-library';
|
||||
import { Popover, PopoverPosition } from '../../component-library';
|
||||
|
||||
<Popover position={PopoverPosition.Auto}>Auto</Popover>
|
||||
<Popover position={PopoverPosition.AutoStart}>AutoStart</Popover>
|
||||
@ -86,7 +89,7 @@ The `isPortal` prop is a boolean that when set to true, causes the Popover to be
|
||||
Default `false`
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover isPortal={true}>Popover using create portal</Popover>;
|
||||
```
|
||||
@ -96,7 +99,7 @@ import { Popover } from '../../ui/component-library';
|
||||
Use the `hasArrow` boolean to add an arrow to the popover.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover hasArrow>Popover with arrow</Popover>;
|
||||
```
|
||||
@ -106,7 +109,7 @@ import { Popover } from '../../ui/component-library';
|
||||
Use the `isOpen` boolean to control the visibility of the popover.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover isOpen={true}>Popover with arrow</Popover>;
|
||||
```
|
||||
@ -117,7 +120,7 @@ Use the `flip` boolean to flip the popover to the opposite side of the reference
|
||||
For `PopoverPosition.Auto` this will become true.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover flip={true}>Flip demo</Popover>;
|
||||
```
|
||||
@ -128,7 +131,7 @@ Use the `preventOverflow` boolean to prevent the popover from overflowing the vi
|
||||
For `PopoverPosition.Auto` this will become true.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover preventOverflow={true}>Prevent overflow demo</Popover>;
|
||||
```
|
||||
@ -138,7 +141,7 @@ import { Popover } from '../../ui/component-library';
|
||||
Use the `referenceHidden` boolean to hide the Popover when the reference element is no longer visible in the viewport.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover referenceHidden={true}>Reference hidden demo</Popover>;
|
||||
```
|
||||
@ -148,7 +151,7 @@ import { Popover } from '../../ui/component-library';
|
||||
Use the `matchWidth` boolean to match the width of the popover to the reference element.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover matchWidth={true}>Match width demo</Popover>;
|
||||
```
|
||||
@ -161,7 +164,7 @@ Use the `role` prop with `PopoverRole` enum to set the role of the popover.
|
||||
Default: `PopoverRole.Tooltip`
|
||||
|
||||
```jsx
|
||||
import { Popover, PopoverRole } from '../../ui/component-library';
|
||||
import { Popover, PopoverRole } from '../../component-library';
|
||||
|
||||
<Popover role={PopoverRole.Tooltip}>PopoverRole.Tooltip</Popover>;
|
||||
<Popover role={PopoverRole.Dialog}>PopoverRole.Dialog</Popover>;
|
||||
@ -174,7 +177,7 @@ Default is `[0, 8]`
|
||||
First number controls the skidding offset and the second number controls the distance offset.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover offset={[0, 32]}>offset override to [0,32]</Popover>;
|
||||
```
|
||||
@ -184,7 +187,7 @@ import { Popover } from '../../ui/component-library';
|
||||
`onPressEscKey` is a callback function that is invoked when the 'Escape' key is pressed within the `Popover` component
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@ -202,7 +205,7 @@ const handleClick = () => {
|
||||
Using the `PopoverHeader` component to add a header to the `Popover` component. The `PopoverHeader` is used to show common elements such as title, back button, and close button.
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
<Popover>
|
||||
<PopoverHeader
|
||||
@ -220,7 +223,7 @@ import { Popover } from '../../ui/component-library';
|
||||
Not built into the `Popover` component, but a demo of `onMouseEnter` and `onMouseLeave` events on the reference element to control the visibility of the popover
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@ -245,7 +248,7 @@ const handleMouseLeave = () => {
|
||||
Not built into the `Popover` component, but a demo of `onFocus` and `onBlur` events on the reference element to control the visibility of the popover
|
||||
|
||||
```jsx
|
||||
import { Popover } from '../../ui/component-library';
|
||||
import { Popover } from '../../component-library';
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`Popover should render popover element correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="box mm-popover mm-popover--open mm-popover--reference-hidden box--padding-4 box--flex-direction-row box--background-color-background-default box--rounded-lg box--border-color-border-muted box--border-style-solid box--border-width-1"
|
||||
class="mm-box mm-popover mm-popover--open mm-popover--reference-hidden mm-box--padding-4 mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
|
||||
data-testid="popover"
|
||||
role="tooltip"
|
||||
style="position: absolute; left: 0px; top: 0px; width: auto;"
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
export { Popover } from './popover';
|
||||
export { PopoverPosition, PopoverRole } from './popover.types';
|
||||
export type { PopoverProps } from './popover.types';
|
||||
export type {
|
||||
PopoverProps,
|
||||
PopoverStyleUtilityProps,
|
||||
PopoverComponent,
|
||||
} from './popover.types';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import Box from '../../ui/box/box';
|
||||
import { Box, Icon, IconName, IconSize, PopoverHeader, Text } from '..';
|
||||
import {
|
||||
AlignItems,
|
||||
BackgroundColor,
|
||||
@ -9,8 +9,9 @@ import {
|
||||
Display,
|
||||
JustifyContent,
|
||||
TextAlign,
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { Icon, IconName, IconSize, PopoverHeader, Text } from '..';
|
||||
|
||||
import README from './README.mdx';
|
||||
import { Popover, PopoverPosition, PopoverRole } from '.';
|
||||
|
||||
@ -78,7 +79,7 @@ const Template: StoryFn<typeof Popover> = (args) => {
|
||||
onClick={handleClick}
|
||||
backgroundColor={BackgroundColor.primaryAlternative}
|
||||
style={{ width: 200, height: 200 }}
|
||||
color={Color.primaryInverse}
|
||||
color={TextColor.primaryInverse}
|
||||
as="button"
|
||||
>
|
||||
Click to toggle popover
|
||||
@ -751,7 +752,7 @@ export const OnPressEscKey: StoryFn<typeof Popover> = (args) => {
|
||||
onClick={handleClick}
|
||||
backgroundColor={BackgroundColor.primaryAlternative}
|
||||
style={{ width: 200, height: 200 }}
|
||||
color={Color.primaryInverse}
|
||||
color={TextColor.primaryInverse}
|
||||
as="button"
|
||||
>
|
||||
Click to open
|
||||
@ -835,7 +836,7 @@ export const MouseEventDemo: StoryFn<typeof Popover> = (args) => {
|
||||
onMouseLeave={handleMouseLeave}
|
||||
backgroundColor={BackgroundColor.primaryAlternative}
|
||||
style={{ width: 200, height: 200 }}
|
||||
color={Color.primaryInverse}
|
||||
color={TextColor.primaryInverse}
|
||||
>
|
||||
Hover
|
||||
</Box>
|
||||
@ -872,7 +873,7 @@ export const OnFocusBlur: StoryFn<typeof Popover> = (args) => {
|
||||
onBlur={handleClose}
|
||||
backgroundColor={BackgroundColor.primaryAlternative}
|
||||
style={{ width: 200, height: 200 }}
|
||||
color={Color.primaryInverse}
|
||||
color={TextColor.primaryInverse}
|
||||
as="button"
|
||||
>
|
||||
Focus to open
|
||||
|
||||
@ -10,124 +10,139 @@ import {
|
||||
Display,
|
||||
JustifyContent,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { PopoverPosition, PopoverProps, PopoverRole } from '.';
|
||||
|
||||
export const Popover = ({
|
||||
children,
|
||||
className = '',
|
||||
position = PopoverPosition.Auto,
|
||||
role = PopoverRole.Tooltip,
|
||||
hasArrow = false,
|
||||
matchWidth,
|
||||
preventOverflow = false,
|
||||
offset = [0, 8],
|
||||
flip = false,
|
||||
referenceHidden = true,
|
||||
referenceElement,
|
||||
isOpen,
|
||||
title,
|
||||
isPortal = false,
|
||||
arrowProps,
|
||||
onPressEscKey,
|
||||
...props
|
||||
}: PopoverProps) => {
|
||||
const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
|
||||
const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
|
||||
import { Box } from '..';
|
||||
import type { BoxProps, PolymorphicRef } from '../box';
|
||||
|
||||
// Define Popper options
|
||||
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
||||
placement: position,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
enabled: position === PopoverPosition.Auto ? true : preventOverflow,
|
||||
},
|
||||
{
|
||||
name: 'flip',
|
||||
enabled: position === PopoverPosition.Auto ? true : flip,
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
enabled: hasArrow,
|
||||
options: {
|
||||
element: arrowElement,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
import {
|
||||
PopoverProps,
|
||||
PopoverComponent,
|
||||
PopoverPosition,
|
||||
PopoverRole,
|
||||
} from './popover.types';
|
||||
|
||||
// Define width to match reference element or auto
|
||||
const contentStyle = {
|
||||
width: matchWidth ? referenceElement?.clientWidth : 'auto',
|
||||
};
|
||||
export const Popover: PopoverComponent = React.forwardRef(
|
||||
<C extends React.ElementType = 'div'>(
|
||||
{
|
||||
children,
|
||||
className = '',
|
||||
position = PopoverPosition.Auto,
|
||||
role = PopoverRole.Tooltip,
|
||||
hasArrow = false,
|
||||
matchWidth,
|
||||
preventOverflow = false,
|
||||
offset = [0, 8],
|
||||
flip = false,
|
||||
referenceHidden = true,
|
||||
referenceElement,
|
||||
isOpen,
|
||||
title,
|
||||
isPortal = false,
|
||||
arrowProps,
|
||||
onPressEscKey,
|
||||
...props
|
||||
}: PopoverProps<C>,
|
||||
ref?: PolymorphicRef<C>,
|
||||
) => {
|
||||
const [popperElement, setPopperElement] = useState<HTMLElement | null>(
|
||||
null,
|
||||
);
|
||||
const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
|
||||
|
||||
// Esc key press
|
||||
const handleEscKey = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
// Close the popover when the "Esc" key is pressed
|
||||
if (onPressEscKey) {
|
||||
onPressEscKey();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleEscKey);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscKey);
|
||||
};
|
||||
}, [onPressEscKey]);
|
||||
|
||||
const PopoverContent = (
|
||||
<Box
|
||||
borderColor={BorderColor.borderMuted}
|
||||
borderRadius={BorderRadius.LG}
|
||||
backgroundColor={BackgroundColor.backgroundDefault}
|
||||
padding={4}
|
||||
role={role}
|
||||
className={classnames(
|
||||
'mm-popover',
|
||||
// Define Popper options
|
||||
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
||||
placement: position,
|
||||
modifiers: [
|
||||
{
|
||||
'mm-popover--open': Boolean(isOpen),
|
||||
'mm-popover--reference-hidden': Boolean(referenceHidden),
|
||||
name: 'preventOverflow',
|
||||
enabled: position === PopoverPosition.Auto ? true : preventOverflow,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
ref={setPopperElement}
|
||||
{...attributes.popper}
|
||||
{...props}
|
||||
style={{ ...styles.popper, ...contentStyle, ...props.style }}
|
||||
>
|
||||
{children}
|
||||
{hasArrow && (
|
||||
<Box
|
||||
borderColor={BorderColor.borderMuted}
|
||||
className={classnames('mm-popover__arrow')}
|
||||
ref={setArrowElement}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
style={styles.arrow}
|
||||
{...attributes.arrow}
|
||||
{...arrowProps}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
{
|
||||
name: 'flip',
|
||||
enabled: position === PopoverPosition.Auto ? true : flip,
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
enabled: hasArrow,
|
||||
options: {
|
||||
element: arrowElement,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{isPortal
|
||||
? isOpen && createPortal(PopoverContent, document.body)
|
||||
: isOpen && PopoverContent}
|
||||
</>
|
||||
);
|
||||
};
|
||||
// Define width to match reference element or auto
|
||||
const contentStyle = {
|
||||
width: matchWidth ? referenceElement?.clientWidth : 'auto',
|
||||
};
|
||||
|
||||
// Esc key press
|
||||
const handleEscKey = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
// Close the popover when the "Esc" key is pressed
|
||||
if (onPressEscKey) {
|
||||
onPressEscKey();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleEscKey);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscKey);
|
||||
};
|
||||
}, [onPressEscKey]);
|
||||
|
||||
const PopoverContent = (
|
||||
<Box
|
||||
borderColor={BorderColor.borderMuted}
|
||||
borderRadius={BorderRadius.LG}
|
||||
backgroundColor={BackgroundColor.backgroundDefault}
|
||||
padding={4}
|
||||
role={role}
|
||||
className={classnames(
|
||||
'mm-popover',
|
||||
{
|
||||
'mm-popover--open': Boolean(isOpen),
|
||||
'mm-popover--reference-hidden': Boolean(referenceHidden),
|
||||
},
|
||||
className,
|
||||
)}
|
||||
ref={ref || setPopperElement}
|
||||
{...attributes.popper}
|
||||
{...(props as BoxProps<C>)}
|
||||
style={{ ...styles.popper, ...contentStyle, ...props.style }}
|
||||
>
|
||||
{children}
|
||||
{hasArrow && (
|
||||
<Box
|
||||
borderColor={BorderColor.borderMuted}
|
||||
className={classnames('mm-popover__arrow')}
|
||||
ref={setArrowElement}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
style={styles.arrow}
|
||||
{...attributes.arrow}
|
||||
{...(arrowProps as BoxProps<'div'>)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isPortal
|
||||
? isOpen && createPortal(PopoverContent, document.body)
|
||||
: isOpen && PopoverContent}
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import type { BoxProps } from '../../ui/box/box.d';
|
||||
import React from 'react';
|
||||
import type {
|
||||
StyleUtilityProps,
|
||||
PolymorphicComponentPropWithRef,
|
||||
BoxProps,
|
||||
} from '../box';
|
||||
|
||||
export enum PopoverPosition {
|
||||
Auto = 'auto',
|
||||
@ -21,7 +26,7 @@ export enum PopoverRole {
|
||||
Dialog = 'dialog',
|
||||
}
|
||||
|
||||
export interface PopoverProps extends BoxProps {
|
||||
export interface PopoverStyleUtilityProps extends StyleUtilityProps {
|
||||
/**
|
||||
* The contents within the Popover
|
||||
*/
|
||||
@ -46,7 +51,7 @@ export interface PopoverProps extends BoxProps {
|
||||
/**
|
||||
* Pass any `BoxProps` to the Popover arrow
|
||||
*/
|
||||
arrowProps?: BoxProps;
|
||||
arrowProps?: BoxProps<'div'>;
|
||||
/**
|
||||
* Boolean to control the width of the Popover to match the width of the reference element
|
||||
* Default: false
|
||||
@ -92,3 +97,10 @@ export interface PopoverProps extends BoxProps {
|
||||
*/
|
||||
onPressEscKey?: () => void;
|
||||
}
|
||||
|
||||
export type PopoverProps<C extends React.ElementType> =
|
||||
PolymorphicComponentPropWithRef<C, PopoverStyleUtilityProps>;
|
||||
|
||||
export type PopoverComponent = <C extends React.ElementType = 'div'>(
|
||||
props: PopoverProps<C>,
|
||||
) => React.ReactElement | null;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user