From e31dca76c6306065608bafd6b894b220857379d6 Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Wed, 26 May 2021 13:26:15 -0500 Subject: [PATCH 1/7] fix: fix component theme types --- src/theme.ts | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index 1bc1aea3..f803e613 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -9,26 +9,26 @@ const logoColor = '#551A8B'; export interface ThemeComponent extends React.CSSProperties, PseudoBoxProps {} export interface MinervaTheme extends Theme { - Button?: React.CSSProperties; - Drawer?: React.CSSProperties; - Heading?: React.CSSProperties; - Modal?: React.CSSProperties; - ModalContent?: React.CSSProperties; - ModalBody?: React.CSSProperties; - ModalHeader?: React.CSSProperties; - ModalFooter?: React.CSSProperties; - Text?: React.CSSProperties; + Button?: ThemeComponent; + Drawer?: ThemeComponent; + Heading?: ThemeComponent; + Modal?: ThemeComponent; + ModalContent?: ThemeComponent; + ModalBody?: ThemeComponent; + ModalHeader?: ThemeComponent; + ModalFooter?: ThemeComponent; + Text?: ThemeComponent; Input?: ThemeComponent; - Image?: React.CSSProperties; - Tooltip?: React.CSSProperties; - InputField?: React.CSSProperties; - Link?: React.CSSProperties; - Checkbox?: React.CSSProperties; - Switch?: React.CSSProperties; - Select?: React.CSSProperties; - Tag?: React.CSSProperties; - Skeleton?: React.CSSProperties; - Tabs?: React.CSSProperties; + Image?: ThemeComponent; + Tooltip?: ThemeComponent; + InputField?: ThemeComponent; + Link?: ThemeComponent; + Checkbox?: ThemeComponent; + Switch?: ThemeComponent; + Select?: ThemeComponent; + Tag?: ThemeComponent; + Skeleton?: ThemeComponent; + Tabs?: ThemeComponent; icons: any; defaultBorderColor?: string; variants?: any; @@ -59,6 +59,7 @@ const defaultTheme: MinervaTheme = { whiteSpace: 'nowrap', verticalAlign: 'middle', fontSize: '14px', + _hover: { backgroundColor: 'red' }, lineHeight: '20px', paddingTop: '8px', paddingBottom: '8px', From d77d314f9420468ca76213bcd16b22e4e0e8bbc8 Mon Sep 17 00:00:00 2001 From: iqra-javed <35740252+iqra-javed@users.noreply.github.com> Date: Fri, 28 May 2021 14:46:30 -0500 Subject: [PATCH 2/7] feat: add AccordionIcon, fix collapsible prop bug, update default accordion styles --- src/Accordion/Accordion.stories.tsx | 40 ++++++++++++++++++++++++----- src/Accordion/index.tsx | 31 ++++++++++++++++++---- src/Icon/baseIcons.tsx | 19 +++++--------- src/layout.tsx | 2 +- src/theme.ts | 20 +++++++++++++++ 5 files changed, 87 insertions(+), 25 deletions(-) diff --git a/src/Accordion/Accordion.stories.tsx b/src/Accordion/Accordion.stories.tsx index bb10cb62..b36a09cc 100644 --- a/src/Accordion/Accordion.stories.tsx +++ b/src/Accordion/Accordion.stories.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.'; +import { + Accordion, + AccordionButton, + AccordionItem, + AccordionPanel, + AccordionIcon, +} from '.'; +import { Box } from '../layout'; export default { title: 'Accordion', @@ -8,6 +15,7 @@ export default { AccordionButton, AccordionItem, AccordionPanel, + AccordionIcon, }, }; @@ -15,7 +23,10 @@ export const Basic = () => { return ( - Section 1 title + + Section 1 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -24,7 +35,10 @@ export const Basic = () => { - Section 2 title + + Section 2 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -33,7 +47,10 @@ export const Basic = () => { - Section 3 (disabled) + + Section 3 (disabled) + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -48,7 +65,10 @@ export const Basic = () => { export const MultipleAndCollapsible = () => ( - Section 1 title + + Section 1 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim @@ -57,7 +77,10 @@ export const MultipleAndCollapsible = () => ( - Section 2 title + + Section 2 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim @@ -66,7 +89,10 @@ export const MultipleAndCollapsible = () => ( - Section 3 title + + Section 3 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim diff --git a/src/Accordion/index.tsx b/src/Accordion/index.tsx index b107dd0f..0982d100 100644 --- a/src/Accordion/index.tsx +++ b/src/Accordion/index.tsx @@ -8,9 +8,12 @@ import { AccordionButton as ReachAccordionButton, AccordionPanel as ReachAccordionPanel, AccordionPanelProps as ReachAccordionPanelProps, + useAccordionItemContext, } from '@reach/accordion'; import { MinervaProps, Box } from '../layout'; import Button from '../Button'; +import { ChevronDown } from '../Icon/baseIcons'; +import { useComponentStyles } from '../theme'; export interface AccordionProps extends MinervaProps { children?: React.ReactNode; @@ -26,6 +29,19 @@ export interface AccordionPanelProps extends MinervaProps { export type AllAccordionItemProps = ReachAccordionItemProps & MinervaProps; +export function AccordionIcon() { + const { isExpanded } = useAccordionItemContext(); + + return ( + + ); +} + export const AccordionItem = forwardRef(function AccordionItem( { ...props }: AllAccordionItemProps, ref @@ -37,6 +53,7 @@ export const AccordionButton = forwardRef(function AccordionButton( { children, ...props }: AccordionButtonProps, ref ) { + const componentStyles = useComponentStyles('AccordionButton'); return ( {children} @@ -72,8 +90,11 @@ export const AccordionPanel = forwardRef(function AccordionPanel( @@ -88,7 +109,7 @@ export const Accordion = forwardRef(function Alert( return ( ( - - ); - // basic UI icons used throughout the component library const baseIcons = { Close, diff --git a/src/layout.tsx b/src/layout.tsx index 11b2670b..b988cbd6 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -320,7 +320,7 @@ export const shouldForwardProp = createShouldForwardProp([ ]); export const Box = styled('div').withConfig({ - shouldForwardProp, + // shouldForwardProp, })( { boxSizing: 'border-box', diff --git a/src/theme.ts b/src/theme.ts index f803e613..ff111932 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -9,6 +9,7 @@ const logoColor = '#551A8B'; export interface ThemeComponent extends React.CSSProperties, PseudoBoxProps {} export interface MinervaTheme extends Theme { + AccordionButton?: ThemeComponent; Button?: ThemeComponent; Drawer?: ThemeComponent; Heading?: ThemeComponent; @@ -43,6 +44,25 @@ breakpoints.lg = breakpoints[2]; breakpoints.xl = breakpoints[3]; const defaultTheme: MinervaTheme = { + AccordionButton: { + _hover: { + backgroundColor: '#EEEEEE', + borderRadius: '5px', + }, + _focus: { + borderWidth: '2px', + borderColor: '#651FFF', + borderRadius: '5px', + backgroundColor: '#EEEEEE', + outlineWidth: 0, + }, + _active: { + borderWidth: '2px', + borderColor: '#651FFF', + borderRadius: '5px', + backgroundColor: '#EEEEEE', + } + }, Button: { backgroundColor: '#fff', borderWidth: '1px', From 778ab4b5124a4531d74eee0ae9ba991d1f04a1e7 Mon Sep 17 00:00:00 2001 From: iqra-javed <35740252+iqra-javed@users.noreply.github.com> Date: Fri, 28 May 2021 14:51:29 -0500 Subject: [PATCH 3/7] fix: remove completed TODO comment --- src/Accordion/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Accordion/index.tsx b/src/Accordion/index.tsx index 0982d100..18c7f9fc 100644 --- a/src/Accordion/index.tsx +++ b/src/Accordion/index.tsx @@ -73,8 +73,6 @@ export const AccordionButton = forwardRef(function AccordionButton( {...props} > {children} - {/* TODO Need to figure out how to determine if Item is expanded and rotate icon */} - {/* */} ); }); From b30b1e4df3d14990fcb87577a6318e61361d29b9 Mon Sep 17 00:00:00 2001 From: iqra-javed <35740252+iqra-javed@users.noreply.github.com> Date: Fri, 28 May 2021 15:08:34 -0500 Subject: [PATCH 4/7] fix: change AccordionButton to use outline instead of border to prevent layout shift --- src/theme.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/theme.ts b/src/theme.ts index ff111932..63c0316f 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -50,15 +50,14 @@ const defaultTheme: MinervaTheme = { borderRadius: '5px', }, _focus: { - borderWidth: '2px', - borderColor: '#651FFF', + outlineWidth: '2px', + outlineColor: '#651FFF', borderRadius: '5px', backgroundColor: '#EEEEEE', - outlineWidth: 0, }, _active: { - borderWidth: '2px', - borderColor: '#651FFF', + outlineWidth: '2px', + outlineColor: '#651FFF', borderRadius: '5px', backgroundColor: '#EEEEEE', } From f1e337a0d29ca1f7500b527fe09b9d0cdcdcf66b Mon Sep 17 00:00:00 2001 From: iqra-javed <35740252+iqra-javed@users.noreply.github.com> Date: Tue, 1 Jun 2021 13:19:51 -0500 Subject: [PATCH 5/7] fix: fix TS error in test --- docs/pages/components/Icon.mdx | 4 +- docs/pages/components/Menu.mdx | 4 +- docs/pages/examples/Buttons.mdx | 2 +- docs/pages/examples/Forms.mdx | 106 ++++++++++++++++---------------- docs/pages/index.mdx | 4 +- docs/theme/index.js | 2 + src/Button/Button.stories.tsx | 4 +- src/theme.ts | 2 +- test/setup.ts | 2 +- 9 files changed, 69 insertions(+), 61 deletions(-) diff --git a/docs/pages/components/Icon.mdx b/docs/pages/components/Icon.mdx index faff3559..d498ee87 100644 --- a/docs/pages/components/Icon.mdx +++ b/docs/pages/components/Icon.mdx @@ -31,8 +31,8 @@ const customTheme = { icons: { // declare the key and component in your theme, then you can use the key as name in the component warning: Warning, - } -} + }, +}; const App = () => ( diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx index bd2d4bc4..f7b108fd 100644 --- a/docs/pages/components/Menu.mdx +++ b/docs/pages/components/Menu.mdx @@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application). -Do _not_ use this if you need to store a value. Use a `` component + instead. ```js diff --git a/docs/pages/examples/Buttons.mdx b/docs/pages/examples/Buttons.mdx index 96dabaf0..b0f16dee 100644 --- a/docs/pages/examples/Buttons.mdx +++ b/docs/pages/examples/Buttons.mdx @@ -23,7 +23,7 @@ render( + diff --git a/docs/pages/examples/Forms.mdx b/docs/pages/examples/Forms.mdx index fa019274..dc6a51bd 100644 --- a/docs/pages/examples/Forms.mdx +++ b/docs/pages/examples/Forms.mdx @@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms) return ( {items.map(plan => ( - - ))} - - ) + + ))} + + ); }; ``` diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index e3483988..1d7f351e 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -69,8 +69,8 @@ const customTheme = { icons: { // declare the key and component in your theme, then you can use the key as name in the component warning: Warning, - } -} + }, +}; const App = () => ( diff --git a/docs/theme/index.js b/docs/theme/index.js index 105f3772..294bb584 100644 --- a/docs/theme/index.js +++ b/docs/theme/index.js @@ -232,6 +232,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => { className="text-current p-2 -mr-2" href={config.github} target="_blank" + rel="noreferrer" > @@ -304,6 +305,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => { filepathWithName } target="_blank" + rel="noreferrer" > Edit this page on GitHub diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 93566d98..f82398c4 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -20,7 +20,9 @@ const meta: Meta = { export default meta; -const Template: Story = (args: Omit) => - Hello World! + Modal Title - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco - deserunt aute id consequat veniam incididunt duis in sint irure nisi. - Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor - esse quis. Sunt ad dolore quis aute consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. - + { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + Modal Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + ); +}; +``` + +## Modal with centered content + +```jsx live +() => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + Modal Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + + ); +}; +``` + +## Modal with full width button + +```jsx live +() => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + Modal Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + ); +}; +``` + ## Customize `ModalOverlay` or `ModalContent` ```js @@ -77,12 +189,10 @@ import { maxWidth="80vw" overflow="hidden" > - Hello World! + Modal Title - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud - ullamco deserunt aute id consequat veniam incididunt duis in sint - irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit - officia tempor esse quis. Sunt ad dolore quis aute consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + id ante vitae eros suscipit pulvinar. = ({ isOpen = false }) => { @@ -55,9 +53,18 @@ const Template: Story = ({ isOpen = false }) => { onClick={() => setOpen(false)} boxShadow="base" width={['100%', 'auto']} + variant="primary" > Submit + diff --git a/src/Modal/index.tsx b/src/Modal/index.tsx index d7502b0a..f4ccedef 100644 --- a/src/Modal/index.tsx +++ b/src/Modal/index.tsx @@ -3,10 +3,8 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { DialogContent, DialogOverlay, DialogProps } from '@reach/dialog'; import { MinervaProps, systemProps, Box } from '../layout'; -import Button from '../Button'; import Text from '../Text'; import { useComponentStyles } from '../theme'; -import { Close } from '../Icon/baseIcons'; type OverlayProps = DialogProps & MinervaProps; export const ModalOverlay = styled(DialogOverlay)( @@ -52,24 +50,12 @@ export const ModalHeader = forwardRef(function ModalHeader( width="100%" justifyContent="space-between" alignItems="center" - padding="1.5rem" + padding="1.375rem" + pb={0} {...componentStyles} {...props} > - - {children} - - + {children} ); }); @@ -83,9 +69,11 @@ export const ModalBody = forwardRef(function ModalBody( @@ -100,7 +88,7 @@ export const ModalFooter = forwardRef(function ModalFooter( ) { const componentStyles = useComponentStyles('ModalFooter'); return ( - + {children} ); @@ -118,13 +106,14 @@ export const ModalContent = forwardRef(function ModalContent( ref={ref} aria-label="modal" padding={0} - borderRadius="5px" + borderRadius="10px" alignItems="center" width="100%" backgroundColor="white" maxWidth="30rem" zIndex={3} margin="10vh auto" + boxShadow="10px 10px 20px rgba(0, 0, 0, 0.12)" {...componentStyles} {...props} />