feat(Button): Glass button & Neutral color button (#362)

* using dialog element

* fix ModalLegacy story meta

* add glass button & neutral color

Author: yoshi6jp

generators/options/colorOptions.js

@@ -18,6 +18,7 @@ export const colorOptions = {
       'success',
       'warning',
       'error',
+      'neutral',
       'primary',
       'secondary',
       'accent',

src/Button/Button.stories.tsx

@@ -29,6 +29,9 @@ export const Colors: Story<ButtonProps> = (args) => {
     <div>
       <div>
         <Button {...args}>Default</Button>
+        <Button {...args} color="neutral">
+          Neutral
+        </Button>
         <Button {...args} color="primary">
           Primary
         </Button>
@@ -60,7 +63,7 @@ export const Colors: Story<ButtonProps> = (args) => {
   )
 }
 Colors.args = {
-  className: "m-1"
+  className: 'm-1',
 }
 
 export const Variants: Story<ButtonProps> = (args) => {
@@ -120,3 +123,20 @@ export const AsHref: Story<ButtonProps> = (args) => {
     </div>
   )
 }
+
+export const Glass: Story<ButtonProps> = (args) => {
+  return (
+    <div
+      className="w-full flex justify-center py-8 rounded-md"
+      style={{
+        backgroundImage:
+          'url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg)',
+      }}
+    >
+      <Button {...args}>Glass button</Button>
+    </div>
+  )
+}
+Glass.args = {
+  glass: true,
+}

src/Button/Button.tsx

@@ -20,6 +20,7 @@ export type ButtonProps = Omit<
     size?: ComponentSize
     variant?: 'outline' | 'link'
     color?: ComponentColor
+    glass?: boolean
     wide?: boolean
     fullWidth?: boolean
     responsive?: boolean
@@ -39,6 +40,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       size,
       variant,
       color,
+      glass,
       startIcon,
       endIcon,
       wide,
@@ -67,6 +69,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         'btn-square': shape === 'square',
         'btn-outline': variant === 'outline',
         'btn-link': variant === 'link',
+        'btn-neutral': color === 'neutral',
         'btn-primary': color === 'primary',
         'btn-secondary': color === 'secondary',
         'btn-accent': color === 'accent',
@@ -75,6 +78,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         'btn-warning': color === 'warning',
         'btn-error': color === 'error',
         'btn-ghost': color === 'ghost',
+        glass: glass,
         'btn-wide': wide,
         'btn-block': fullWidth,
         'btn-xs md:btn-sm lg:btn-md xl:btn-lg': responsive,

src/constants.ts

@@ -7,7 +7,12 @@ export const componentStatuses = [
   'warning',
   'error',
 ] as const
-export const brandColors = ['primary', 'secondary', 'accent'] as const
+export const brandColors = [
+  'neutral',
+  'primary',
+  'secondary',
+  'accent',
+] as const
 export const componentColors = [
   ...brandColors,
   'ghost',