Bugfix/dropdown menu trigger as child remove class names (#6614)

* Fix UsernameTextfield to take right height

* Remove className side-effect

* Incorrect resolution version fixed

* Converted mobile DropdownMenuTrigger styles into Button

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -245,8 +245,13 @@ function EventTypeSingleLayout({
           <VerticalDivider className="hidden lg:block" />
 
           <Dropdown>
-            <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
+            <DropdownMenuTrigger asChild>
-              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
+              <Button
+                className="lg:hidden"
+                StartIcon={Icon.FiMoreHorizontal}
+                variant="icon"
+                color="secondary"
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem className="focus:ring-gray-100">

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -131,7 +131,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             autoCapitalize="none"
             autoCorrect="none"
             className={classNames(
-              "mb-0 mt-0 h-6 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
+              "mb-0 mt-0 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""

package.json

@@ -84,7 +84,7 @@
     "turbo": "^1.4.3"
   },
   "resolutions": {
-    "@apidevtools/json-schema-ref-parser": "9.1.0",
+    "@apidevtools/json-schema-ref-parser": "9.0.9",
     "@types/node": "16.9.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6"

packages/features/ee/teams/components/MemberListItem.tsx

@@ -149,13 +149,11 @@ export default function MemberListItem(props: Props) {
               </Tooltip>
               {editMode && (
                 <Dropdown>
-                  <DropdownMenuTrigger
+                  <DropdownMenuTrigger asChild>
-                    asChild
-                    className="h-[36px] w-[36px] bg-transparent px-0 py-0 hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0">
                     <Button
+                      className="radix-state-open:rounded-r-md"
                       color="secondary"
                       variant="icon"
-                      className="rounded-r-md"
                       StartIcon={Icon.FiMoreHorizontal}
                     />
                   </DropdownMenuTrigger>

packages/features/ee/teams/components/TeamListItem.tsx

@@ -185,8 +185,9 @@ export default function TeamListItem(props: Props) {
                   </Tooltip>
                 )}
                 <Dropdown>
-                  <DropdownMenuTrigger asChild className="radix-state-open:rounded-r-md">
+                  <DropdownMenuTrigger asChild>
                     <Button
+                      className="radix-state-open:rounded-r-md"
                       type="button"
                       color="secondary"
                       variant="icon"

packages/features/eventtypes/components/CreateEventTypeButton.tsx

@@ -1,12 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import classNames from "@calcom/lib/classNames";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -293,10 +291,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
       ) : (
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button
+            <Button variant="fab" StartIcon={Icon.FiPlus}>
-              EndIcon={Icon.FiChevronDown}
-              variant="fab"
-              className="radix-state-open:!bg-brand-500 radix-state-open:ring-2 radix-state-open:ring-brand-500 ring-offset-2 focus:border-none">
               {t("new")}
             </Button>
           </DropdownMenuTrigger>
@@ -331,80 +326,3 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
     </>
   );
 }
-
-type CreateEventTypeTrigger = {
-  isIndividualTeam?: boolean;
-  // EventTypeParent can be a profile (as first option) or a team for the rest.
-  options: EventTypeParent[];
-  hasTeams: boolean;
-  // set true for use on the team settings page
-  canAddEvents: boolean;
-  openModal: (option: EventTypeParent) => void;
-};
-
-export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
-  const { t } = useLocale();
-
-  return (
-    <>
-      {!props.hasTeams || props.isIndividualTeam ? (
-        <Button
-          onClick={() => props.openModal(props.options[0])}
-          data-testid="new-event-type"
-          StartIcon={Icon.FiPlus}
-          disabled={!props.canAddEvents}>
-          {t("new_event_type_btn")}
-        </Button>
-      ) : (
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button EndIcon={Icon.FiChevronDown}>{t("new_event_type_btn")}</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {props.options.map((option) => (
-              <CreateEventTeamsItem
-                key={option.slug}
-                option={option}
-                openModal={() => props.openModal(option)}
-              />
-            ))}
-          </DropdownMenuContent>
-        </Dropdown>
-      )}
-    </>
-  );
-}
-
-function CreateEventTeamsItem(props: {
-  openModal: (option: EventTypeParent) => void;
-  option: EventTypeParent;
-}) {
-  const session = useSession();
-  const membershipQuery = trpc.viewer.teams.getMembershipbyUser.useQuery({
-    memberId: session.data?.user?.id as number,
-    teamId: props.option.teamId as number,
-  });
-
-  const isDisabled = membershipQuery.data?.role === "MEMBER";
-
-  return (
-    <DropdownMenuItem
-      key={props.option.slug}
-      className={classNames(
-        "cursor-pointer px-3 py-2  focus:outline-none",
-        isDisabled ? "cursor-default !text-gray-300" : "hover:bg-neutral-100"
-      )}
-      disabled={isDisabled}
-      onSelect={() => props.openModal(props.option)}>
-      <Avatar
-        alt={props.option.name || ""}
-        imageSrc={props.option.image}
-        size="sm"
-        className="inline ltr:mr-2 rtl:ml-2"
-      />
-      {props.option.name ? props.option.name : props.option.slug}
-    </DropdownMenuItem>
-  );
-}

packages/features/schedules/components/ScheduleListItem.tsx

@@ -72,8 +72,14 @@ export function ScheduleListItem({
           </Link>
         </div>
         <Dropdown>
-          <DropdownMenuTrigger asChild className="mx-5">
+          <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+            <Button
+              className="mx-5"
+              type="button"
+              variant="icon"
+              color="secondary"
+              StartIcon={Icon.FiMoreHorizontal}
+            />
           </DropdownMenuTrigger>
           {!isLoading && data && (
             <DropdownMenuContent>

packages/ui/components/form/dropdown/Dropdown.tsx

@@ -14,11 +14,10 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
   ({ className = "", ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Trigger
       {...props}
-      className={
+      className={classNames(
-        props.asChild
+        !props.asChild &&
-          ? classNames("rounded-md ring-0", className)
+          `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 ring-0 hover:bg-gray-50 focus:bg-gray-100 group-hover:text-black ${className}`
-          : `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 ring-0 hover:bg-gray-50 focus:bg-gray-100 group-hover:text-black ${className}`
+      )}
-      }
       ref={forwardedRef}
     />
   )