Rounded divider + Fixing button group (#4233)

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

@@ -7,7 +7,15 @@ import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { Form } from "@calcom/ui/form/fields";
 import { showToast } from "@calcom/ui/v2";
-import { ButtonGroup, TextAreaField, TextField, Tooltip, DropdownMenuSeparator, Button } from "@calcom/ui/v2";
+import {
+  ButtonGroup,
+  TextAreaField,
+  TextField,
+  Tooltip,
+  DropdownMenuSeparator,
+  Button,
+  VerticalDivider,
+} from "@calcom/ui/v2";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { ShellMain } from "@calcom/ui/v2/core/Shell";
 import Banner from "@calcom/ui/v2/core/banner";
@@ -37,15 +45,14 @@ const Actions = ({
     <div className="flex items-center">
       <div className="hidden md:inline-flex md:items-center ">
         <FormAction
-          className="self-center border-r-2 border-gray-300 pr-5 "
+          className="self-center pr-2 "
           data-testid="toggle-form"
           action="toggle"
           routingForm={form}
         />
+        <VerticalDivider />
       </div>
-      <ButtonGroup
-        combined
-        containerProps={{ className: "px-4 border-gray-300 hidden md:inline-flex items-center" }}>
+      <ButtonGroup combined containerProps={{ className: "hidden md:inline-flex items-center" }}>
         <Tooltip content={t("preview")}>
           <FormAction
             routingForm={form}
@@ -173,7 +180,7 @@ const Actions = ({
           </div>
         </FormActionsDropdown>
       </div>
-      <div className="mr-4 h-5 border-0 border-gray-300 md:border-l-2" />
+      <VerticalDivider />
       <Button data-testid="update-form" loading={mutation.isLoading} type="submit" color="primary">
         {t("save")}
       </Button>

packages/ui/v2/core/Button.tsx

@@ -28,6 +28,7 @@ export type ButtonBaseProps = {
   shallow?: boolean;
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
+  /** @deprecated This has now been replaced by button group. */
   combined?: boolean;
   flex?: boolean;
 };
@@ -89,9 +90,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         size === "base" && "h-9 px-4 py-2.5  ",
         size === "lg" && "h-[36px] px-4 py-2.5 ",
         size === "icon" && "flex justify-center h-[36px] w-[36px] ",
-        combined
-          ? "rounded-none first:border-r-0 last:border-l-0 first:rounded-l-md last:rounded-r-md "
-          : "rounded-md",
+        combined ? "" : "rounded-md",
         // different styles depending on color
         // set not-allowed cursor if disabled
         disabled ? variantDisabledClassName[color] : variantClassName[color],

packages/ui/v2/core/ButtonGroup.tsx

@@ -4,11 +4,26 @@ import classNames from "@calcom/lib/classNames";
 
 type Props = { children: React.ReactNode; combined?: boolean; containerProps?: JSX.IntrinsicElements["div"] };
 
+/**
+ * Breakdown of Tailwind Magic below
+ * [&_button]:border-l-0 [&_a]:border-l-0 -> Selects all buttons/a tags and applies a border left of 0
+ * [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l -> Selects the first child of the content
+ * ounds the left side
+ * [&>*:last-child]:rounded-r-md -> Selects the last child of the content and rounds the right side
+ * We dont need to add border to the right as we never remove it
+ */
+
 export default function ButtonGroup({ children, combined = false, containerProps }: Props) {
   return (
     <div
       {...containerProps}
-      className={classNames("flex", !combined && "space-x-2", containerProps?.className)}>
+      className={classNames(
+        "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",
+        containerProps?.className
+      )}>
       {children}
     </div>
   );

packages/ui/v2/core/VerticalDivider.tsx

@@ -9,6 +9,7 @@ export default function VerticalDivider({ className, ...props }: JSX.IntrinsicEl
       width="2"
       height="16"
       viewBox="0 0 2 16"
+      ry="6"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
       <rect width="2" height="16" rx="1" fill="#D1D5DB" />

packages/ui/v2/core/index.ts

@@ -23,6 +23,7 @@ export { default as ColorPicker } from "./colorpicker";
 export * from "./form";
 export { default as showToast } from "./notifications";
 export { default as LinkIconButton } from "./LinkIconButton";
+export { default as VerticalDivider } from "./VerticalDivider";
 export * from "./skeleton";
 export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
 export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";