m
/
metamask-extension
mirror of https://github.com/kremalicious/metamask-extension.git
1
0
Fork 0
Code

Changes to Popover folder (#19245)

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 { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import Box from '../../ui/box/box';
import {
AlignItems,
BackgroundColor,
BorderColor,
Color,
DISPLAY,
Display,
JustifyContent,
TextAlign,
} from '../../../helpers/constants/design-system';
@ -41,9 +41,9 @@ export default {
args: {
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 [isOpen, setIsOpen] = useState(true);
@ -98,7 +98,7 @@ DefaultStory.args = {
hasArrow: true,
};
export const ReferenceElement: ComponentStory<typeof Popover> = (args) => {
export const ReferenceElement: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState();
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 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 [referenceAutoElement, setReferenceAutoElement] = useState();
@ -176,7 +176,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
minHeight: '400px',
}}
borderColor={BorderColor.borderDefault}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
marginBottom={4}
@ -185,7 +185,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 400, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
textAlign={TextAlign.Center}
@ -316,7 +316,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
width: '200vw',
height: '200vh',
}}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
@ -324,7 +324,7 @@ export const Position: ComponentStory<typeof Popover> = (args) => {
ref={setRefAuto}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 400, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.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 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 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 [isOpen, setIsOpen] = useState(true);
@ -438,7 +438,7 @@ export const IsOpen: ComponentStory<typeof Popover> = (args) => {
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
onClick={handleClick}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.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 setBoxRef = (ref) => {
@ -478,7 +478,7 @@ export const Flip: ComponentStory<typeof Popover> = (args) => {
return (
<Box
style={{ height: '200vh' }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
@ -486,7 +486,7 @@ export const Flip: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.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 setBoxRef = (ref) => {
@ -525,7 +525,7 @@ export const PreventOverflow: ComponentStory<typeof Popover> = (args) => {
return (
<Box
style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
@ -533,7 +533,7 @@ export const PreventOverflow: ComponentStory<typeof Popover> = (args) => {
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.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 setBoxRef = (ref) => {
@ -573,14 +573,14 @@ export const ReferenceHidden: ComponentStory<typeof Popover> = (args) => {
return (
<Box
style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
>
<Box
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.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 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 setBoxRef = (ref) => {
@ -650,14 +650,14 @@ export const Role: ComponentStory<typeof Popover> = (args) => {
return (
<Box
style={{ height: '100vh', width: '100vw' }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
>
<Box
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.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 setBoxRef = (ref) => {
@ -696,14 +696,14 @@ export const Offset: ComponentStory<typeof Popover> = (args) => {
return (
<Box
style={{ height: '200vh', width: '100vw' }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
>
<Box
ref={setBoxRef}
backgroundColor={BackgroundColor.primaryMuted}
style={{ width: 200, height: 200 }}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.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 [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 [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 [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 [isOpen, setIsOpen] = useState(false);

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

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