Merge pull request #15 from supabase/fix/styling-and-button-fixes

Fix/styling and button fixes

Author: MildTomato

src/components/Button/Button.css

@@ -3,7 +3,7 @@
 }
 
 .sbui-btn {
-  @apply relative cursor-pointer inline-flex space-x-2 text-center;
+  @apply relative cursor-pointer inline-flex space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
 }
 
 .sbui-btn-container--shadow {
@@ -15,7 +15,7 @@
 }
 
 .sbui-btn:disabled {
-  @apply opacity-75 cursor-default;
+  @apply opacity-75 cursor-not-allowed;
   pointer-events: none;
 }
 
@@ -24,39 +24,57 @@
 */
 
 .sbui-btn--tiny {
-  @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm;
+  @apply px-2.5 py-1.5 text-xs font-medium rounded;
 }
 .sbui-btn--small {
-  @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md;
+  @apply px-3 py-2 text-sm leading-4 font-medium rounded-md;
 }
 .sbui-btn--medium {
-  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm;
+  @apply px-4 py-2 text-sm font-medium rounded-md;
 }
 .sbui-btn--large {
-  @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm;
+  @apply px-4 py-2 text-base font-medium rounded-md;
 }
 .sbui-btn--xlarge {
-  @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm;
+  @apply px-6 py-3 text-base font-medium rounded-md;
 }
 
 /*
   Button varients
 */
 .sbui-btn-primary {
-  @apply text-white hover:text-gray-500 bg-brand-700 hover:bg-brand-600;
-}
-.sbui-btn-secondary {
-  @apply text-brand-800 text-brand-800 bg-brand-50 bg-opacity-75 hover:bg-brand-100;
+  @apply text-white hover:text-gray-500 bg-brand-700 hover:bg-brand-600 dark:hover:bg-brand-800;
 }
 .sbui-btn-default {
-  @apply text-gray-500 text-gray-500 bg-white border-gray-100 hover:text-gray-600 hover:bg-white hover:border-gray-200;
+  @apply text-gray-500 bg-white border-gray-300 hover:text-gray-600 hover:bg-white hover:border-gray-200; 
+  @apply dark:border-dark-700 dark:bg-gray-600 dark:text-dark-200;
+}
+.sbui-btn-secondary {
+  @apply text-gray-600 bg-gray-200 hover:text-gray-700 hover:bg-gray-300 dark:text-gray-300 dark:bg-gray-500 dark:hover:text-gray-200;
 }
 .sbui-btn-outline {
-  @apply text-brand-700 bg-transparent border border-brand-700 border-solid text-brand-700 hover:bg-brand-700 hover:text-white;
+  @apply border text-gray-500 bg-transparent border-gray-200 border-solid hover:bg-white hover:text-gray-600 hover:border-gray-600 dark:text-white dark:border-dark-400 dark:hover:text-dark-600 dark:hover:border-white;
+}
+.sbui-btn-dashed {
+  @apply border text-gray-500 bg-transparent border-gray-200 border-dashed hover:text-gray-600 hover:border-gray-600;
+  @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 }
-.sbui-btn-ghost {
+.sbui-btn-link {
   @apply text-brand-700 bg-transparent text-brand-700 border-none hover:bg-brand-300 hover:bg-opacity-25;
 }
+.sbui-btn-text {
+  @apply text-gray-400 bg-transparent border-none hover:bg-gray-200 hover:bg-opacity-25;
+  @apply dark:text-dark-300 dark:hover:bg-dark-600;
+}
+
+.sbui-btn--danger {
+  @apply border-red-500 text-red-500; 
+  @apply dark:border-red-500 dark:text-red-500;
+}
+
+.sbui-btn-primary.sbui-btn--danger {
+  @apply bg-red-500 text-white
+}
 
 /* 
   Animation for icon
@@ -94,10 +112,10 @@
   @apply text-gray-500;
 }
 .sbui-btn-secondary:hover svg {
-  @apply bg-brand-100;
+  @apply text-gray-100;
 }
 .sbui-btn-default:hover svg {
-  @apply text-gray-600;
+  @apply text-gray-300;
 }
 .sbui-btn-outline:hover svg {
   @apply text-white;
@@ -107,9 +125,9 @@
 }
 
 .sbui-btn--with-icon {
-  @apply pl-10;
+  /* @apply pl-10; */
 }
 
 .sbui-btn-icon-container {
-  @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
+  @apply inset-y-0 flex items-center pointer-events-none;
 }

src/components/Button/Button.js

@@ -4,7 +4,7 @@ import './Button.css'
 import { Transition, Icon } from '../../index'
 
 export const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge']
-export const VARIANTS = ['primary', 'default', 'secondary', 'outline', 'ghost']
+export const VARIANTS = ['primary', 'default', 'secondary', 'outline', 'dashed', 'link', 'text']
 
 const Button = ({
   block,
@@ -18,6 +18,7 @@ const Button = ({
   size = 'medium',
   style,
   type = 'primary',
+  danger,
   ...props
 }) => {
   // default classes
@@ -29,13 +30,18 @@ const Button = ({
   }
 
   if (block) {
+    containerClasses.push('sbui-btn--w-full')
     classes.push('sbui-btn--w-full')
   }
 
   if (icon) {
     classes.push('sbui-btn--with-icon')
   }
 
+  if (danger ) {
+    classes.push('sbui-btn--danger')
+  }
+
   if (size) {
     let sizeClasses = {
       tiny: 'sbui-btn--tiny',
@@ -47,27 +53,11 @@ const Button = ({
     classes.push(sizeClasses[size])
   }
 
-  let textColor = {
-    primary: 'text-white hover:text-gray-500',
-    secondary: 'text-brand-800',
-    default: 'text-gray-500',
-    outline: 'text-brand-500',
-    ghost: 'text-brand-500',
-  }
-
-  let variantClasses = {
-    primary: 'sbui-btn-primary',
-    secondary: 'sbui-btn-secondary',
-    default: 'sbui-btn-default',
-    outline: 'sbui-btn-outline',
-    ghost: 'sbui-btn-ghost',
-  }
-
-  classes.push(variantClasses[type])
+  classes.push(`sbui-btn-${type}`)
 
   return (
     <React.Fragment>
-      <span className={containerClasses}>
+      <span className={containerClasses.join(' ')}>
         <button
           {...props}
           className={`sbui-btn ${classes.join(' ')} ${classes.join(
@@ -79,30 +69,25 @@ const Button = ({
           type="button"
         >
           <Transition
-            show={loading ? true : false}
+            show={loading || icon ? true : false}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             enterTo="opacity-100 translate-y-0 sm:scale-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <Icon
-              size={16}
-              className={
-                'sbui-btn--icon-stroke ' +
-                textColor[type] +
-                ' sbui-btn--anim--spin'
-              }
-              type={'Loader'}
-            />
+            {loading ? (
+              <Icon
+                size={21}
+                className={'sbui-btn--anim--spin'}
+                type={'Loader'}
+              />
+            ) : icon ? (
+              <div className="sbui-btn-icon-container">{icon}</div>
+            ) : null}
           </Transition>
-
-          {icon && !loading && (
-            <div className="sbui-btn-icon-container">{icon}</div>
-          )}
-
-          <span>{children}</span>
+          {children && <span>{children}</span>}
         </button>
       </span>
     </React.Fragment>
@@ -118,6 +103,7 @@ Button.propTypes = {
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
   icon: PropTypes.string,
+  danger: PropTypes.bool
 }
 
 export default Button

src/components/Button/Button.stories.js

@@ -12,8 +12,10 @@ export const Default = (args) => <Button {...args}>Button text</Button>
 export const withStyles = (args) => <Button {...args}>Button text</Button>
 export const withIcon = (args) => <Button {...args}>Button text</Button>
 export const withBlock = (args) => <Button {...args}>Button text</Button>
+export const withOnlyIcon = (args) => <Button {...args}/>
+export const withOnlyLoading = (args) => <Button {...args}/>
 
-const icon = <Icon stroke={'#666666'} className={''} type={"Package"}/>
+const icon = <Icon className={''} type={"Package"}/>
 
 withIcon.args = {
   type: 'primary',
@@ -29,4 +31,12 @@ withStyles.args = {
 withBlock.args = {
   type: 'primary',
   block: true
+}
+
+withOnlyIcon.args = {
+  icon: icon
+}
+
+withOnlyLoading.args = {
+  loading: true
 }

src/components/Checkbox/Checkbox.css

@@ -26,8 +26,8 @@
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
-[type='checkbox']:checked,
-[type='radio']:checked {
+[type='checkbox']:checked {
+  @apply dark:bg-brand-700;
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -37,7 +37,7 @@
 
 .sbui-checkbox {
   /* @apply m-0 focus:ring-brand-500 h-4 text-brand-600 border border-solid border-gray-300 dark:border-gray-400 dark:bg-transparent rounded; */
-  @apply focus:ring-brand-500 h-4 w-4 text-brand-700 border border-solid border-gray-300 rounded;
+  @apply m-0 focus:ring-brand-500 h-4 w-4 text-brand-700 border border-solid border-gray-300 rounded dark:border-dark-400 dark:bg-transparent dark:text-white ;
   margin-top: 2px;
 }
 

src/components/Icon/Icon.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 function Icon({
   className,
-  size,
+  size = 21,
   type,
   color,
   strokeWidth,
@@ -24,7 +24,7 @@ function Icon({
 
   return (
     <FeatherIcon
-      stroke={stroke ? stroke : color}
+      stroke={stroke ? stroke : color ? color : 'currentColor'}
       className={`${className}`}
       strokeWidth={strokeWidth}
       size={size}

src/components/Typography/Link.css

@@ -1,3 +1,3 @@
 a.sbui-typography {
-  @apply text-sm text-brand-700 dark:text-brand-700;
+  @apply text-sm text-brand-700 dark:text-brand-700 cursor-pointer;
 }

src/components/Typography/Link.tsx

@@ -1,3 +1,4 @@
+import { HandlerFunction } from '@storybook/addon-actions'
 import React from 'react'
 import './Link.css'
 
@@ -7,14 +8,15 @@ interface Props {
   href?: string
   className?: string
   style?: React.CSSProperties
+  onClick?: HandlerFunction
 }
 
 function Link({
   children,
   target = '_blank',
   href,
   className,
-
+  onClick,
   style,
 }: Props) {
   let classes = ['sbui-typography sbui-typography-link']
@@ -24,6 +26,7 @@ function Link({
 
   return (
     <a
+      onClick={onClick}
       className={classes.join(' ')}
       href={href}
       target={target}