m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Changes to Popover folder (#19245)

Browse Source
This commit is contained in:
Dhruv 2023-05-30 04:46:11 +05:30 committed by GitHub
parent 97a9834182
commit cdaa21b3cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/components/component-library/popover/popover.stories.tsx
View File

@ -1,12 +1,12 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react'; import { StoryFn, Meta } from '@storybook/react';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { import {
AlignItems, AlignItems,
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
Color, Color,
DISPLAY, Display,
JustifyContent, JustifyContent,
TextAlign, TextAlign,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -41,9 +41,9 @@ export default {
args: { args: {
children: 'Popover', children: 'Popover',
}, },
} as ComponentMeta<typeof Popover>; } as Meta<typeof Popover>;
const Template: ComponentStory<typeof Popover> = (args) => { const Template: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
@ -98,7 +98,7 @@ DefaultStory.args = {
hasArrow: true, hasArrow: true,
}; };
export const ReferenceElement: ComponentStory<typeof Popover> = (args) => { export const ReferenceElement: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -125,7 +125,7 @@ export const ReferenceElement: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const Children: ComponentStory<typeof Popover> = (args) => { export const Children: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -154,7 +154,7 @@ export const Children: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const Position: ComponentStory<typeof Popover> = (args) => { export const Position: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [referenceAutoElement, setReferenceAutoElement] = useState(); const [referenceAutoElement, setReferenceAutoElement] = useState();
@ -176,7 +176,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
minHeight: '400px', minHeight: '400px',
}} }}
borderColor={BorderColor.borderDefault} borderColor={BorderColor.borderDefault}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
marginBottom={4} marginBottom={4}
@ -185,7 +185,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 400, height: 200 }} style={{ width: 400, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -316,7 +316,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
width: '200vw', width: '200vw',
height: '200vh', height: '200vh',
}} }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
@ -324,7 +324,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
ref={setRefAuto} ref={setRefAuto}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 400, height: 200 }} style={{ width: 400, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -346,7 +346,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const IsPortal: ComponentStory<typeof Popover> = (args) => { export const IsPortal: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -384,7 +384,7 @@ export const IsPortal: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const HasArrow: ComponentStory<typeof Popover> = (args) => { export const HasArrow: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -419,7 +419,7 @@ export const HasArrow: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const IsOpen: ComponentStory<typeof Popover> = (args) => { export const IsOpen: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
@ -438,7 +438,7 @@ export const IsOpen: ComponentStory<typeof Popover> = (args) => {
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
onClick={handleClick} onClick={handleClick}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
@ -468,7 +468,7 @@ export const IsOpen: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const Flip: ComponentStory<typeof Popover> = (args) => { export const Flip: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -478,7 +478,7 @@ export const Flip: ComponentStory<typeof Popover> = (args) => {
return ( return (
<Box <Box
style={{ height: '200vh' }} style={{ height: '200vh' }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
@ -486,7 +486,7 @@ export const Flip: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
@ -515,7 +515,7 @@ export const Flip: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const PreventOverflow: ComponentStory<typeof Popover> = (args) => { export const PreventOverflow: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -525,7 +525,7 @@ export const PreventOverflow: ComponentStory<typeof Popover> = (args) => {
return ( return (
<Box <Box
style={{ height: '200vh', width: '100vw' }} style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
@ -533,7 +533,7 @@ export const PreventOverflow: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -563,7 +563,7 @@ export const PreventOverflow: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const ReferenceHidden: ComponentStory<typeof Popover> = (args) => { export const ReferenceHidden: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -573,14 +573,14 @@ export const ReferenceHidden: ComponentStory<typeof Popover> = (args) => {
return ( return (
<Box <Box
style={{ height: '200vh', width: '100vw' }} style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
<Box <Box
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -610,7 +610,7 @@ export const ReferenceHidden: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const MatchWidth: ComponentStory<typeof Popover> = (args) => { export const MatchWidth: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -640,7 +640,7 @@ export const MatchWidth: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const Role: ComponentStory<typeof Popover> = (args) => { export const Role: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -650,14 +650,14 @@ export const Role: ComponentStory<typeof Popover> = (args) => {
return ( return (
<Box <Box
style={{ height: '100vh', width: '100vw' }} style={{ height: '100vh', width: '100vw' }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
<Box <Box
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -686,7 +686,7 @@ export const Role: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const Offset: ComponentStory<typeof Popover> = (args) => { export const Offset: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const setBoxRef = (ref) => { const setBoxRef = (ref) => {
@ -696,14 +696,14 @@ export const Offset: ComponentStory<typeof Popover> = (args) => {
return ( return (
<Box <Box
style={{ height: '200vh', width: '100vw' }} style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
<Box <Box
ref={setBoxRef} ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }} style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
@ -731,7 +731,7 @@ export const Offset: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const onPressEscKey: ComponentStory<typeof Popover> = (args) => { export const onPressEscKey: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -768,7 +768,7 @@ export const onPressEscKey: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const WithPopoverHeader: ComponentStory<typeof Popover> = (args) => { export const WithPopoverHeader: StoryFn<typeof Popover> = (args) => {
const [refTitleElement, setRefTitleElement] = useState(); const [refTitleElement, setRefTitleElement] = useState();
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
@ -809,7 +809,7 @@ export const WithPopoverHeader: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const MouseEventDemo: ComponentStory<typeof Popover> = (args) => { export const MouseEventDemo: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -846,7 +846,7 @@ export const MouseEventDemo: ComponentStory<typeof Popover> = (args) => {
); );
}; };
export const OnFocusBlur: ComponentStory<typeof Popover> = (args) => { export const OnFocusBlur: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState(); const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);

4
ui/components/component-library/popover/popover.tsx
View File

@ -7,7 +7,7 @@ import {
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
BorderRadius, BorderRadius,
DISPLAY, Display,
JustifyContent, JustifyContent,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
@ -112,7 +112,7 @@ export const Popover = ({
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
className={classnames('mm-popover__arrow')} className={classnames('mm-popover__arrow')}
ref={setArrowElement} ref={setArrowElement}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
style={styles.arrow} style={styles.arrow}