Merge pull request #69 from supabase/feature/modal-layouts

Feature/modal layouts

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,18 +58,18 @@ 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
 - [ ] Toast messages / Notifaction
 - [ ] 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 (
-  <Button>I am a Supabase UI button</Button>
-)
+return <Button>I am a Supabase UI button</Button>
 ```
 
 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
+• run npm link @supabase/ui in /your-app

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;
+}

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 = () => (
           <FeatherIcon
             color={!noColor ? color : 'currentColor'}
             stroke={!noColor ? stroke : 'currentColor'}
@@ -77,6 +99,16 @@ function Icon({
             {...props}
           />
         )
+
+        return background ? (
+          <div
+            className={`sbui-icon-container sbui-icon-container--${background}`}
+          >
+            <IconComponent />
+          </div>
+        ) : (
+          <IconComponent />
+        )
       }}
     </IconContext.Consumer>
   )

src/components/Modal/Modal.css

@@ -19,22 +19,42 @@
 }
 
 .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;
 }
 
 .sbui-modal-icon-container {
   @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;
 }