Refactor/button group (#114)

* refactor(component): refactoring Daisy Button props

* fix(component): fixed support for custom classes

Author: fabiobiondi

packages/daisy/src/components/button-group/button-group.tsx

@@ -1,12 +1,14 @@
 import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
 import { ButtonGroup as HeadlessButtonGroup } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
 
 export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
 
 export const ButtonGroup = component$(
   (props: ButtonGroupProps) => {
+    const { class: cls, ...rest } = props;
     return (
-      <HeadlessButtonGroup {...props} class="btn-group" >
+      <HeadlessButtonGroup class={clsq('btn-group', cls)} {...rest}>
         <Slot />
       </HeadlessButtonGroup>
     );

packages/headless/src/components/button-group/button-group.tsx

@@ -5,9 +5,9 @@ export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
 export const ButtonGroup = component$(
   (props: ButtonGroupProps) => {
     return (
-      <div {...props}>
+      <span {...props}>
         <Slot />
-      </div>
+      </span>
     );
   }
 );

packages/website/src/routes/docs/daisy/button-group/button-group.css

@@ -0,0 +1,7 @@
+.custom-btn-group {
+  background-color: #dedede;
+  padding: 1rem;
+  border-radius: 2rem;
+  margin: 1rem 0;
+  display: inline-block;
+}

packages/website/src/routes/docs/daisy/button-group/index.tsx

@@ -1,7 +1,9 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Button, ButtonGroup } from '@qwik-ui/theme-daisy';
+import styles from './button-group.css?inline';
 
 export default component$(() => {
+  useStyles$(styles);
   return (
     <>
       <h2>This is the documentation for the ButtonGroup</h2>
@@ -13,12 +15,26 @@ export default component$(() => {
         <Button>BUTTON 3</Button>
       </ButtonGroup>
 
+      <hr/>
+      <h1>With custom class</h1>
+      <ButtonGroup class="custom-btn-group">
+        <Button variant="accent">BUTTON 1</Button>
+        <Button variant="accent">BUTTON 2</Button>
+        <Button variant="accent">BUTTON 3</Button>
+      </ButtonGroup>
       <hr/>
       <h1>With custom styles</h1>
-      <ButtonGroup style="border: 0.2rem solid black; padding: 1rem;">
-        <Button>BUTTON 1</Button>
-        <Button>BUTTON 2</Button>
-        <Button>BUTTON 3</Button>
+      <ButtonGroup style="background-color: lightgray; padding: 1rem; display: inline-block; margin: 1rem 0;">
+        <Button variant="secondary">BUTTON 1</Button>
+        <Button variant="secondary">BUTTON 2</Button>
+        <Button variant="secondary">BUTTON 3</Button>
+      </ButtonGroup>
+
+      <h1>With button events</h1>
+      <ButtonGroup>
+        <Button variant="info" onClick$={() => window.alert('1') }>BUTTON 1</Button>
+        <Button variant="info" onClick$={() => window.alert('2') }>BUTTON 2</Button>
+        <Button variant="info" onClick$={() => window.alert('3') }>BUTTON 3</Button>
       </ButtonGroup>
     </>
   );

packages/website/src/routes/docs/headless/button-group/button-group.css

@@ -1,5 +1,8 @@
 .custom-btn-group {
   display: inline-flex;
+  gap: 2rem;
+  background-color: #dedede;
   padding: 1rem;
-  gap: 3rem;
+  border-radius: 2rem;
+  margin: 1rem 0;
 }

packages/website/src/routes/docs/headless/button-group/index.tsx

@@ -17,12 +17,20 @@ export default component$(() => {
       </ButtonGroup>
 
       <hr/>
-      <h1>With custom styles</h1>
-      <ButtonGroup class="custom-btn-group" style="border: 2px solid black">
+      <h1>With custom class</h1>
+      <ButtonGroup class="custom-btn-group" >
         <Button>BUTTON 1</Button>
         <Button>BUTTON 2</Button>
         <Button>BUTTON 3</Button>
       </ButtonGroup>
+
+      <hr/>
+      <h1>With custom styles</h1>
+      <ButtonGroup style="border: 2px solid black; display: inline-flex; gap: 2rem; padding: 1rem">
+        <Button style="color: red">BUTTON 1</Button>
+        <Button>BUTTON 2</Button>
+        <Button>BUTTON 3</Button>
+      </ButtonGroup>
     </>
   );
 });