From 9b807f1dc85811d7eed8e946fde51253e4c49920 Mon Sep 17 00:00:00 2001 From: mildtomato Date: Thu, 14 Jan 2021 16:54:48 +0800 Subject: [PATCH 1/3] feat: updated with background option --- src/components/Icon/Icon.css | 39 ++++++++++++++++++++++++++++++++++++ src/components/Icon/Icon.tsx | 36 +++++++++++++++++++++++++++++++-- 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/src/components/Icon/Icon.css b/src/components/Icon/Icon.css index e69de29b..16378259 100644 --- a/src/components/Icon/Icon.css +++ b/src/components/Icon/Icon.css @@ -0,0 +1,39 @@ +.sbui-icon-container { + @apply mx-auto flex-shrink-0 flex items-center justify-center rounded-full p-3; +} + +.sbui-icon-container--brand { + @apply bg-brand-800 bg-opacity-10 text-brand-800; +} + +.sbui-icon-container--gray { + @apply bg-gray-600 bg-opacity-10 text-gray-500; +} + +.sbui-icon-container--red { + @apply bg-red-600 bg-opacity-10 text-red-500; +} + +.sbui-icon-container--yellow { + @apply bg-yellow-600 bg-opacity-10 text-yellow-500; +} + +.sbui-icon-container--green { + @apply bg-green-600 bg-opacity-10 text-green-500; +} + +.sbui-icon-container--blue { + @apply bg-blue-600 bg-opacity-10 text-blue-500; +} + +.sbui-icon-container--indigo { + @apply bg-indigo-600 bg-opacity-10 text-indigo-500; +} + +.sbui-icon-container--purple { + @apply bg-purple-600 bg-opacity-10 text-purple-500; +} + +.sbui-icon-container--pink { + @apply bg-pink-600 bg-opacity-10 text-pink-500; +} diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 570e41de..67bd4a81 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,15 +1,34 @@ import React from 'react' import * as Icons from 'react-feather' import { IconContext } from './IconContext' +import './Icon.css' interface Props { className?: string - size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | number + size?: + | 'tiny' + | 'small' + | 'medium' + | 'large' + | 'xlarge' + | 'xxlarge' + | 'xxxlarge' + | number type?: string color?: string strokeWidth?: number fill?: string stroke?: string + background?: + | 'brand' + | 'gray' + | 'red' + | 'yellow' + | 'green' + | 'blue' + | 'indigo' + | 'purple' + | 'pink' } interface StringMap { @@ -24,6 +43,7 @@ function Icon({ strokeWidth, fill = undefined, stroke = undefined, + background, ...props }: Props) { return ( @@ -35,6 +55,8 @@ function Icon({ medium: 20, large: 20, xlarge: 24, + xxlarge: 30, + xxxlarge: 42, } const defaultSize = defaultSizes['large'] @@ -66,7 +88,7 @@ function Icon({ // default these icons to use 'currentColor' ie, the text color const noColor = !color && !fill && !stroke - return ( + const IconComponent = () => ( ) + + return background ? ( +
+ +
+ ) : ( + + ) }} ) From 4e6ab568122d2fa445b439e26f8ef77f2249aad1 Mon Sep 17 00:00:00 2001 From: mildtomato Date: Thu, 14 Jan 2021 16:56:29 +0800 Subject: [PATCH 2/3] feat: updated with new layout options. `icon` is now a React.ReactNode prop. `variant` has been deprecated. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • new stories added to show different Modal styles --- src/components/Modal/Modal.css | 26 ++++- src/components/Modal/Modal.stories.tsx | 125 ++++++++++++++++++++- src/components/Modal/Modal.tsx | 146 ++++++++++++++----------- 3 files changed, 226 insertions(+), 71 deletions(-) diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index cbcf3bfe..8e5b7577 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -19,14 +19,34 @@ } .sbui-modal { - @apply inline-block align-bottom bg-white dark:bg-dark-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full; + @apply inline-block align-bottom bg-white dark:bg-dark-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all align-middle; +} + +.sbui-modal--tiny { + @apply sm:align-middle sm:w-full sm:max-w-xs; +} + +.sbui-modal--small { + @apply sm:align-middle sm:w-full sm:max-w-sm; +} + +.sbui-modal--medium { + @apply sm:align-middle sm:w-full sm:max-w-lg; +} + +.sbui-modal--large { + @apply sm:align-middle sm:w-full max-w-xl; } .sbui-modal-content { - @apply px-4 pt-5 pb-5 sm:p-6; + @apply px-5 pt-5 pb-5 sm:p-6; } .sbui-modal-footer { + @apply sm:flex sm:flex-row justify-end; +} + +.sbui-modal-footer--with-bg { @apply bg-gray-50 dark:bg-dark-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row justify-end; } @@ -34,7 +54,7 @@ @apply mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10; } -.sbui-modal-icon-container--alert { +.sbui-modal-icon-container--danger { @apply text-red-600 bg-red-600 bg-opacity-20; } diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 74a7da7f..a5c7cccb 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/src/components/Modal/Modal.stories.tsx @@ -7,6 +7,7 @@ import Typography from '../Typography' import { Badge } from '../Badge' import { Button } from '../Button' import { Space } from '../Space' +import { Icon } from '../Icon' export default { title: 'Overlays/Modal', @@ -16,7 +17,7 @@ export default { export const Default = (args: any) => ( - + Modal content is inserted here, if you need to insert anything into the Modal you can do so via{' '} {'{children}'} @@ -26,7 +27,27 @@ export const Default = (args: any) => ( export const withIcon = (args: any) => ( - + + Modal content is inserted here, if you need to insert anything into the + Modal you can do so via{' '} + {'{children}'} + + +) + +export const withVerticalLayout = (args: any) => ( + + + Modal content is inserted here, if you need to insert anything into the + Modal you can do so via{' '} + {'{children}'} + + +) + +export const rightAlignedFooter = (args: any) => ( + + Modal content is inserted here, if you need to insert anything into the Modal you can do so via{' '} {'{children}'} @@ -36,7 +57,17 @@ export const withIcon = (args: any) => ( export const hideFooter = (args: any) => ( - + + Modal content is inserted here, if you need to insert anything into the + Modal you can do so via{' '} + {'{children}'} + + +) + +export const withFooterBackground = (args: any) => ( + + Modal content is inserted here, if you need to insert anything into the Modal you can do so via{' '} {'{children}'} @@ -46,7 +77,17 @@ export const hideFooter = (args: any) => ( export const customFooter = (args: any) => ( - + + Modal content is inserted here, if you need to insert anything into the + Modal you can do so via{' '} + {'{children}'} + + +) + +export const customFooterVertical = (args: any) => ( + + Modal content is inserted here, if you need to insert anything into the Modal you can do so via{' '} {'{children}'} @@ -54,15 +95,27 @@ export const customFooter = (args: any) => ( ) +export const customFooterOneButton = (args: any) => + Default.args = { visible: true, - className: 'font-sans', onCancel: action('onCancel'), onConfirm: action('onConfirm'), title: 'This is the title of the modal', description: 'And i am the description', } +withFooterBackground.args = { + visible: true, + footerBackground: true, + onCancel: action('onCancel'), + onConfirm: action('onConfirm'), + title: 'This is the title of the modal', + description: 'And i am the description', +} + +const icon = + withIcon.args = { visible: true, showIcon: true, @@ -70,11 +123,32 @@ withIcon.args = { onConfirm: action('onConfirm'), title: 'This is the title of the modal', description: 'And i am the description', + icon: icon, +} + +withVerticalLayout.args = { + visible: true, + size: 'small', + layout: 'vertical', + onCancel: action('onCancel'), + onConfirm: action('onConfirm'), + title: 'This is the title of the modal', + description: 'And i am the description', + icon: icon, +} + +rightAlignedFooter.args = { + visible: true, + alignFooter: 'right', + onCancel: action('onCancel'), + onConfirm: action('onConfirm'), + title: 'This is the title of the modal', + description: 'And i am the description', } hideFooter.args = { visible: true, - hideFooter: false, + hideFooter: true, onCancel: action('onCancel'), onConfirm: action('onConfirm'), title: 'This is the title of the modal', @@ -99,3 +173,42 @@ customFooter.args = { , ], } + +customFooterVertical.args = { + visible: true, + size: 'small', + onCancel: action('onCancel'), + onConfirm: action('onConfirm'), + title: 'This is the title of the modal', + description: 'And i am the description', + layout: 'vertical', + customFooter: [ + + + + , + ], +} + +customFooterOneButton.args = { + visible: true, + size: 'small', + icon: , + onCancel: action('onCancel'), + onConfirm: action('onConfirm'), + title: 'Payment succesful', + description: + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.', + layout: 'vertical', + customFooter: [ + + + , + ], +} diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 255e3481..fc53f972 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -3,55 +3,88 @@ import './Modal.css' import { Button, Transition, Icon, Typography, Space } from './../../index' interface Props { - className?: string children?: React.ReactNode - title?: string - description?: string - variant?: 'alert' | 'warning' | 'success' - showIcon?: boolean - visible: boolean - onConfirmText?: string - onCancelText?: string - onCancel?: any - onConfirm?: any + className?: string customFooter?: React.ReactNode + description?: string hideFooter?: boolean + alignFooter?: 'right' | 'left' + layout?: 'horizontal' | 'vertical' + icon?: React.ReactNode loading?: boolean + onCancel?: any + onCancelText?: string + onConfirm?: any + onConfirmText?: string + showIcon?: boolean + footerBackground?: boolean + title?: string + variant?: 'danger' | 'warning' | 'success' + visible: boolean + size?: 'tiny' | 'small' | 'medium' | 'large' } const Modal = ({ - className = '', children, - title, - description, - variant = 'success', - showIcon = false, - visible = false, - onConfirmText = 'Confirm', - onCancelText = 'Cancel', - onCancel, - onConfirm, + className = '', customFooter = undefined, + description, hideFooter = false, + alignFooter = 'left', + layout = 'horizontal', loading = false, + onCancel, + onCancelText = 'Cancel', + onConfirm, + onConfirmText = 'Confirm', + showIcon = false, + title, + footerBackground, + icon, + variant = 'success', + visible = false, + size = 'large', }: Props) => { - let icon = { - alert: , - warning: , - success: , + function stopPropagation(e: React.MouseEvent) { + e.stopPropagation() } - let iconClasses = ['sbui-modal-icon-container'] - iconClasses.push(`sbui-modal-icon-container--${variant}`) + let footerClasses = ['sbui-modal-footer'] + if (footerBackground) { + footerClasses.push('sbui-modal-footer--with-bg') + } - const iconMarkup = showIcon && ( -
{icon[variant]}
+ const footerContent = customFooter ? ( + customFooter + ) : ( + + + + ) - function stopPropagation(e: React.MouseEvent) { - e.stopPropagation() - } - return (
- - {iconMarkup} + + {icon ? icon : null}
-
+ {title && ( {description} )} -
+ + {children} + {!footerBackground && !hideFooter && footerContent}
- - {!hideFooter && ( -
- {customFooter ? ( - customFooter - ) : ( - - - - - )} -
+ {!hideFooter && footerBackground && ( +
{footerContent}
)}
From 083a49f3fcbfa25836a4a540fdea375295502f1f Mon Sep 17 00:00:00 2001 From: mildtomato Date: Thu, 14 Jan 2021 17:11:24 +0800 Subject: [PATCH 3/3] chore: update readme --- README.md | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index e41962f2..2e4d6ed4 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,13 @@ Supabase UI is still a work-in-progress until a major release is published. Some of these are a work in progress - we invite anyone to submit a [feature request](https://github.com/supabase/ui/issues/new?labels=enhancement&template=2.Feature_request.md) if there is something you would like to see. -*General* +_General_ - [x] Button - [x] Typography - [x] Icon -*Data Input* +_Data Input_ - [x] Input - [ ] InputNumber @@ -29,16 +29,16 @@ Some of these are a work in progress - we invite anyone to submit a [feature req - [ ] Time picker - [ ] Form -*Layout* +_Layout_ - [ ] Layout - [ ] Grid (Flex) - [ ] Divider - [x] Space (Flex) -*Display* +_Display_ -- [x] Card (work in progress) +- [x] Card - [ ] Avatar - [ ] Alert - [x] Badge @@ -47,7 +47,7 @@ Some of these are a work in progress - we invite anyone to submit a [feature req - [ ] Tables - [ ] Code block -*Navigation* +_Navigation_ - [ ] Tabs - [ ] Breadcrumb @@ -58,7 +58,7 @@ Some of these are a work in progress - we invite anyone to submit a [feature req - [ ] Flyout menu - [ ] Steps -*Overlay* +_Overlay_ - [x] Modal - [ ] Drawer / SidePanel @@ -66,10 +66,10 @@ Some of these are a work in progress - we invite anyone to submit a [feature req - [ ] Progress - [ ] Feeds / Timeline -*Misc* +_Misc_ - [ ] Storybook docs -- [ ] Themeing +- [ ] Themeing (in progress) - [ ] Supabase Auth Elements - [ ] Documentation website @@ -92,9 +92,7 @@ import { Button } from '@supabase/ui' //... -return ( - -) +return ``` It is probably advisable to use [Normalize](https://github.com/sindresorhus/modern-normalize) with Supabase UI for the timebeing. @@ -124,12 +122,12 @@ Storybook runs by default on `http://localhost:6006/` If you want to test Supabase UI components locally, in context in another project locally, then you will need to `npm link` the supabase-ui project locally. -Follow these instructions here -> +Follow these instructions here -> [NPM Linking and Unlinking instructions](https://dev.to/erinbush/npm-linking-and-unlinking-2h1g) ### Common issues -*A common issue found with local testing is multiple versions of react running.* +_A common issue found with local testing is multiple versions of react running._ You may need to npm-link the react node module in the target app you want to locally test the library in. Then use that version of react inside the library, and then npm-link the library so the target app can use the library with just the 1 version of react. @@ -139,4 +137,4 @@ Step by step: • run npm link react in /supabase/ui. This should make the library use the application’s React copy. -• run npm link @supabase/ui in /your-app \ No newline at end of file +• run npm link @supabase/ui in /your-app