feat(button): add disabled state

fixes konstaui/konstaui.com#7
konstaui · May 17, 2022 · a6330f1 · a6330f1
1 parent c703b83
commit a6330f1
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 12 deletions.
diff --git a/src/react/components/Button.jsx b/src/react/components/Button.jsx
@@ -16,6 +16,8 @@ const Button = forwardRef((props, ref) => {
     ios,
     material,
 
+    disabled,
+
     // Anchor props
     href,
 
@@ -79,6 +81,18 @@ const Button = forwardRef((props, ref) => {
     activeBg: 'active:bg-primary',
     activeBgDark: 'active:bg-primary-dark',
     touchRipple: 'touch-ripple-primary',
+    disabledText: cls(
+      'text-black text-opacity-30',
+      dark('dark:text-white dark:text-opacity-30')
+    ),
+    disabledBg: cls(
+      'bg-black bg-opacity-10',
+      dark('dark:bg-white dark:bg-opacity-10')
+    ),
+    disabledBorder: cls(
+      'border-black border-opacity-10',
+      dark('dark:border-white dark:border-opacity-10')
+    ),
     ...colorsProp,
   };
 
@@ -99,7 +113,12 @@ const Button = forwardRef((props, ref) => {
   );
 
   return (
-    <Component ref={rippleElRef} className={classes} {...attrs}>
+    <Component
+      ref={rippleElRef}
+      className={classes}
+      disabled={disabled}
+      {...attrs}
+    >
       {children}
     </Component>
   );

diff --git a/src/shared/classes/ButtonClasses.js b/src/shared/classes/ButtonClasses.js
@@ -2,13 +2,14 @@ import { positionClass } from '../position-class.js';
 import { cls } from '../cls.js';
 
 export const ButtonClasses = (props, colors, classes, darkClasses) => {
-  const { inline, segmented, segmentedStrong } = props;
+  const { inline, segmented, segmentedStrong, disabled } = props;
   return {
     base: {
       common: cls(
         'uppercase flex text-center justify-center items-center appearance-none px-2 py-1 transition-colors focus:outline-none cursor-pointer select-none overflow-hidden z-10',
         inline ? 'inline-flex' : 'w-full flex',
-        positionClass('relative', classes)
+        positionClass('relative', classes),
+        disabled && 'pointer-events-none'
       ),
       ios: `duration-100 font-semibold`,
       material: `duration-300 font-medium tracking-wider`,
@@ -20,15 +21,28 @@ export const ButtonClasses = (props, colors, classes, darkClasses) => {
       rounded: segmented && !segmentedStrong ? '' : 'rounded-full',
     },
     style: {
-      fill: `text-white ${colors.bg} ${colors.activeBgDark} touch-ripple-white`,
+      fill: cls(
+        disabled
+          ? cls(colors.disabledBg, colors.disabledText)
+          : `text-white ${colors.bg} ${colors.activeBgDark} touch-ripple-white`
+      ),
       outline: cls(
-        !segmented && `border-2 ${colors.border}`,
-        colors.text,
-        colors.activeBg,
-        'active:bg-opacity-15',
-        colors.touchRipple
+        !segmented && `border-2`,
+        disabled
+          ? cls(colors.disabledText, colors.disabledBorder)
+          : cls(
+              !segmented && `${colors.border}`,
+              colors.text,
+              colors.activeBg,
+              'active:bg-opacity-15',
+              colors.touchRipple
+            )
+      ),
+      clear: cls(
+        disabled
+          ? colors.disabledText
+          : `${colors.text} ${colors.activeBg} active:bg-opacity-15 ${colors.touchRipple}`
       ),
-      clear: `${colors.text} ${colors.activeBg} active:bg-opacity-15 ${colors.touchRipple}`,
       segmentedStrong: cls(
         `active:bg-black active:bg-opacity-10`,
         darkClasses(

diff --git a/src/svelte/components/Button.svelte b/src/svelte/components/Button.svelte
@@ -18,6 +18,8 @@
   // Anchor props
   export let href = undefined;
 
+  export let disabled = false;
+
   // Style props
   export let outline = false;
   export let clear = false;
@@ -81,13 +83,25 @@
     activeBg: 'active:bg-primary',
     activeBgDark: 'active:bg-primary-dark',
     touchRipple: 'touch-ripple-primary',
+    disabledText: cls(
+      'text-black text-opacity-30',
+      dark('dark:text-white dark:text-opacity-30')
+    ),
+    disabledBg: cls(
+      'bg-black bg-opacity-10',
+      dark('dark:bg-white dark:bg-opacity-10')
+    ),
+    disabledBorder: cls(
+      'border-black border-opacity-10',
+      dark('dark:border-white dark:border-opacity-10')
+    ),
     ...colorsProp,
   };
 
   $: c = useThemeClasses(
     { ios, material },
     ButtonClasses(
-      { inline, segmented, segmentedStrong },
+      { inline, segmented, segmentedStrong, disabled },
       colors,
       className,
       dark
@@ -116,6 +130,7 @@
     this={component}
     bind:this={rippleEl.current}
     class={classes}
+    {disabled}
     {...attrs}
     on:click={onClick}
   >
@@ -126,6 +141,7 @@
     this={component}
     bind:this={rippleEl.current}
     class={classes}
+    {disabled}
     {...attrs}
     on:click={onClick}
   >

diff --git a/src/types/Button.d.ts b/src/types/Button.d.ts
@@ -45,6 +45,27 @@ interface Props {
      * @default 'touch-ripple-primary'
      */
     touchRipple?: string;
+
+    /**
+     * Disabled state button text color
+     *
+     * @default 'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
+     */
+    disabledText?: string;
+
+    /**
+     * Disabled state button bg color
+     *
+     * @default 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
+     */
+    disabledBg?: string;
+
+    /**
+     * Disabled state button border color
+     *
+     * @default 'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
+     */
+    disabledBorder?: string;
   };
   /**
    * Link's `href` attribute, when specified will also be rendered as `<a>` element
@@ -117,4 +138,11 @@ interface Props {
    * @default true
    */
   touchRipple?: boolean;
+
+  /**
+   * Makes button disabled
+   *
+   * @default false
+   */
+  disabled?: boolean;
 }
diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
@@ -1,5 +1,10 @@
 <template>
-  <component :is="Component" ref="rippleElRef" :class="classes">
+  <component
+    :is="Component"
+    ref="rippleElRef"
+    :class="classes"
+    :disabled="disabled"
+  >
     <slot />
   </component>
 </template>
@@ -83,6 +88,11 @@
         type: Boolean,
         default: true,
       },
+
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, ctx) {
       const rippleElRef = ref(null);
@@ -120,6 +130,18 @@
         activeBg: 'active:bg-primary',
         activeBgDark: 'active:bg-primary-dark',
         touchRipple: 'touch-ripple-primary',
+        disabledText: cls(
+          'text-black text-opacity-30',
+          useDarkClasses('dark:text-white dark:text-opacity-30')
+        ),
+        disabledBg: cls(
+          'bg-black bg-opacity-10',
+          useDarkClasses('dark:bg-white dark:bg-opacity-10')
+        ),
+        disabledBorder: cls(
+          'border-black border-opacity-10',
+          useDarkClasses('dark:border-white dark:border-opacity-10')
+        ),
         ...(props.colors || {}),
       }));