Add rounded-none to combined buttons by default (#4330)

* Add rounded-none to combined buttons by default

* Remove combined

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/storybook/stories/ButtonGroup.stories.tsx

@@ -28,13 +28,14 @@ export const Default = () => (
 export const Combined = () => (
   <div className="flex flex-col space-y-2">
     <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" combined />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
+      <Button StartIcon={Trash2} size="icon" color="secondary" />
+      <Button StartIcon={Navigation2} size="icon" color="secondary" />
+      <Button StartIcon={Clipboard} size="icon" color="secondary" />
     </ButtonGroup>
     <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
+      <Button StartIcon={ArrowLeft} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
     </ButtonGroup>
   </div>
 );

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -184,7 +184,6 @@ function EventTypeSingleLayout({
                 href={permalink}
                 rel="noreferrer"
                 StartIcon={Icon.FiExternalLink}
-                combined
               />
             </Tooltip>
 
@@ -200,12 +199,11 @@ function EventTypeSingleLayout({
               }}
             />
             {/* TODO: Implement embed here @hariom */}
-            {/* <Button color="secondary" size="icon" StartIcon={Icon.FiCode} combined /> */}
+            {/* <Button color="secondary" size="icon" StartIcon={Icon.FiCode} /> */}
             <Button
               color="secondary"
               size="icon"
               StartIcon={Icon.FiTrash}
-              combined
               tooltip={t("delete")}
               disabled={!hasPermsToDelete}
               onClick={() => setDeleteDialogOpen(true)}

packages/app-store/ee/routing_forms/components/SingleForm.tsx

@@ -63,7 +63,6 @@ const Actions = ({
             rel="noreferrer"
             action="preview"
             StartIcon={Icon.FiExternalLink}
-            combined
           />
         </Tooltip>
         <FormAction
@@ -74,7 +73,6 @@ const Actions = ({
           type="button"
           StartIcon={Icon.FiLink}
           tooltip={t("copy_link")}
-          combined
         />
         <Tooltip content="Download Responses">
           <FormAction
@@ -85,7 +83,6 @@ const Actions = ({
             size="icon"
             type="button"
             StartIcon={Icon.FiDownload}
-            combined
           />
         </Tooltip>
         <FormAction
@@ -95,7 +92,6 @@ const Actions = ({
           size="icon"
           StartIcon={Icon.FiCode}
           tooltip={t("embed")}
-          combined
         />
         <FormAction
           routingForm={form}
@@ -106,7 +102,6 @@ const Actions = ({
           color="secondary"
           type="button"
           tooltip={t("delete")}
-          combined
         />
       </ButtonGroup>
       <div className="flex md:hidden">
@@ -118,8 +113,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={Icon.FiExternalLink}
-            combined>
+            StartIcon={Icon.FiExternalLink}>
             Preview
           </FormAction>
           <FormAction

packages/ui/v2/core/ButtonGroup.tsx

@@ -21,7 +21,7 @@ export default function ButtonGroup({ children, combined = false, containerProps
         "flex",
         !combined
           ? "space-x-2"
-          : "[&_button]:border-l-0 [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l [&_a]:border-l-0  [&>*:last-child]:rounded-r-md",
+          : "[&_button]:rounded-none [&_button]:border-l-0 [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l [&_a]:rounded-none  [&_a]:border-l-0 [&>*:last-child]:rounded-r-md",
         containerProps?.className
       )}>
       {children}