feat: add transitions to more components (#15916)

* add transitions to more components

* chore: Remove duplicate class

apps/web/components/apps/installation/EventTypesStepCard.tsx

@@ -99,7 +99,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
       <input
         id={`${id}`}
         checked={selected}
-        className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+        className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
         type="checkbox"
       />
       <label htmlFor={`${id}`} className="cursor-pointer text-sm">

apps/web/components/booking/BookingListItem.tsx

@@ -378,7 +378,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
+      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col transition sm:flex-row">
         <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
           <Link href={bookingLink}>
             <div className="cursor-pointer py-4">
@@ -721,7 +721,7 @@ const Attendee = (attendeeProps: AttendeeProps & NoShowProps) => {
         <button
           data-testid="guest"
           onClick={(e) => e.stopPropagation()}
-          className="radix-state-open:text-blue-500 hover:text-blue-500">
+          className="radix-state-open:text-blue-500 transition hover:text-blue-500">
           {noShow ? (
             <s>
               {name || email} <Icon name="eye-off" className="inline h-4" />
@@ -839,7 +839,7 @@ const GroupedAttendees = (groupedAttendeeProps: GroupedAttendeeProps) => {
         <button
           data-testid="more-guests"
           onClick={(e) => e.stopPropagation()}
-          className="radix-state-open:text-blue-500 hover:text-blue-500 focus:outline-none">
+          className="radix-state-open:text-blue-500 transition hover:text-blue-500 focus:outline-none">
           {t("plus_more", { count: attendees.length - 1 })}
         </button>
       </DropdownMenuTrigger>
@@ -900,7 +900,7 @@ const GroupedGuests = ({ guests }: { guests: AttendeeProps[] }) => {
       <DropdownMenuTrigger asChild>
         <button
           onClick={(e) => e.stopPropagation()}
-          className="radix-state-open:text-blue-500 hover:text-blue-500 focus:outline-none">
+          className="radix-state-open:text-blue-500 transition hover:text-blue-500 focus:outline-none">
           {t("plus_more", { count: guests.length - 1 })}
         </button>
       </DropdownMenuTrigger>

apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx

@@ -77,7 +77,7 @@ export const OAuthClientForm = ({
             <input
               {...register(`${permissionKey}Read`)}
               id={`${permissionKey}Read`}
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
               type="checkbox"
               disabled={!!defaultValues}
             />
@@ -89,7 +89,7 @@ export const OAuthClientForm = ({
             <input
               {...register(`${permissionKey}Write`)}
               id={`${permissionKey}Write`}
-              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+              className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
               type="checkbox"
               disabled={!!defaultValues}
             />
@@ -224,7 +224,7 @@ export const OAuthClientForm = ({
           <input
             {...register("areEmailsEnabled")}
             id="areEmailsEnabled"
-            className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
+            className="bg-default border-default h-4 w-4 shrink-0 cursor-pointer rounded-[4px] border ring-offset-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
             type="checkbox"
             disabled={isFormDisabled}
           />

apps/web/components/ui/form/CheckboxField.tsx

@@ -48,7 +48,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
+                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded transition"
                   />
                 </div>
                 <span className="ms-2 text-sm">{description}</span>

packages/app-store/ics-feedcalendar/pages/setup/index.tsx

@@ -94,7 +94,6 @@ export default function ICSFeedSetup() {
 
                 <div className="mt-3 flex items-center">
                   <CheckboxField
-                    type="checkbox"
                     id="skipWriting"
                     checked={skipWriting}
                     onChange={(e) => setSkipWriting(e.target.checked)}

packages/features/ee/organizations/components/TeamInviteFromOrg.tsx

@@ -85,7 +85,7 @@ function UserToInviteItem({
           id={`${member.user.id}`}
           checked={isSelected}
           type="checkbox"
-          className="text-emphasis focus:ring-emphasis dark:text-muted border-default hover:bg-subtle inline-flex h-4 w-4 place-self-center justify-self-end rounded checked:bg-gray-800"
+          className="text-emphasis focus:ring-emphasis dark:text-muted border-default hover:bg-subtle inline-flex h-4 w-4 place-self-center justify-self-end rounded transition checked:bg-gray-800"
           onChange={() => {
             onChange();
           }}

packages/features/ee/workflows/pages/index.tsx

@@ -153,7 +153,7 @@ const Filter = (props: {
           <input
             id="yourWorkflows"
             type="checkbox"
-            className="text-emphasis focus:ring-emphasis dark:text-muted border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
+            className="text-emphasis focus:ring-emphasis dark:text-muted border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded transition "
             checked={!!checked.userId}
             onChange={(e) => {
               if (e.target.checked) {
@@ -217,7 +217,7 @@ const Filter = (props: {
                   }
                 }
               }}
-              className="text-emphasis focus:ring-emphasis dark:text-muted border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
+              className="text-emphasis focus:ring-emphasis dark:text-muted border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded transition "
             />
           </div>
         ))}

packages/features/embed/Embed.tsx

@@ -122,7 +122,7 @@ const ChooseEmbedTypesDialogContent = ({ types }: { types: EmbedTypes }) => {
                 embedType: embed.type,
               });
             }}>
-            <div className="bg-default order-none box-border flex-none rounded-md border border-solid dark:bg-transparent dark:invert">
+            <div className="bg-default order-none box-border flex-none rounded-md border border-solid transition dark:bg-transparent dark:invert">
               {embed.illustration}
             </div>
             <div className="text-emphasis mt-4 font-semibold">{embed.title}</div>

packages/features/filters/components/TeamsFilter.tsx

@@ -164,7 +164,7 @@ export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label,
             {...rest}
             ref={ref}
             type="checkbox"
-            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded hover:cursor-pointer"
+            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded transition hover:cursor-pointer"
           />
         </div>
       </label>

packages/features/form-builder/Components.tsx

@@ -349,7 +349,7 @@ export const Components: Record<FieldType, Component> = {
                     }
                     setValue(newValue);
                   }}
-                  className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:bg-darkgray-100 dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded ltr:mr-2 rtl:ml-2"
+                  className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:bg-darkgray-100 dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded transition ltr:mr-2 rtl:ml-2"
                   value={option.value}
                   checked={value.includes(option.value)}
                 />

packages/features/shell/Shell.tsx

@@ -448,7 +448,7 @@ function UserDropdown({ small }: UserDropdownProps) {
               </span>
               <Icon
                 name="chevron-down"
-                className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 rtl:mr-4"
+                className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
                 aria-hidden="true"
               />
             </span>
@@ -1250,7 +1250,7 @@ function ProfileDropdown() {
             </span>
             <Icon
               name="chevron-down"
-              className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 rtl:mr-4"
+              className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
               aria-hidden="true"
             />
           </span>

packages/ui/components/form/checkbox/Checkbox.tsx

@@ -80,7 +80,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     disabled={disabled}
                     id={rest.id ? rest.id : id}
                     className={classNames(
-                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
+                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded transition checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
                       !error && disabled
                         ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
                         : "hover:bg-subtle hover:border-emphasis checked:bg-gray-800",

packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx

@@ -41,7 +41,7 @@ const InputOption: React.FC<OptionProps<Option, boolean, GroupBase<Option>>> = (
       innerProps={props}>
       <input
         type="checkbox"
-        className="text-emphasis focus:ring-emphasis dark:text-muted border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2"
+        className="text-emphasis focus:ring-emphasis dark:text-muted border-default h-4 w-4 rounded transition ltr:mr-2 rtl:ml-2"
         checked={isSelected}
         readOnly
       />

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

@@ -87,7 +87,7 @@ export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuC
             aria-readonly
             checked={false}
             type="checkbox"
-            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default ml-auto h-4 w-4 rounded hover:cursor-pointer"
+            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default ml-auto h-4 w-4 rounded transition hover:cursor-pointer"
           />
         )}
         <DropdownMenuPrimitive.ItemIndicator asChild>
@@ -97,7 +97,7 @@ export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuC
             aria-label={typeof children === "string" ? `Active ${children}` : undefined}
             checked={true}
             type="checkbox"
-            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded hover:cursor-pointer"
+            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded transition hover:cursor-pointer"
           />
         </DropdownMenuPrimitive.ItemIndicator>
       </DropdownMenuPrimitive.CheckboxItem>

packages/ui/components/form/inputs/Input.tsx

@@ -186,8 +186,8 @@ export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(f
   return (
     <div
       dir="ltr"
-      className="focus-within:ring-brand-default group relative mx-3 mb-1 mt-2.5 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
-      <div className="addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default flex h-7 items-center justify-center rounded-l-md border border-r-0">
+      className="focus-within:ring-brand-default group relative mx-3 mb-1 mt-2.5 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
+      <div className="addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default flex h-7 items-center justify-center rounded-l-md border border-r-0 transition">
         <Icon name="search" className="ms-3 h-4 w-4" data-testid="search-icon" />
       </div>
       <Input

packages/ui/components/form/inputs/TextField.tsx

@@ -37,7 +37,7 @@ const Addon = ({ isFilled, children, className, error, onClickAddon }: AddonProp
   <div
     onClick={onClickAddon && onClickAddon}
     className={classNames(
-      "addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3",
+      "addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3 transition",
       isFilled && "bg-subtle",
       onClickAddon && "cursor-pointer disabled:hover:cursor-not-allowed",
       className

packages/ui/components/form/select/Select.tsx

@@ -63,7 +63,7 @@ export const Select = <
         dropdownIndicator: () => "text-default",
         control: (state) =>
           cx(
-            "bg-default border-default !min-h-9 h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal dark:focus:border-emphasis focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default hover:border-emphasis rounded-md border",
+            "bg-default border-default !min-h-9 h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal dark:focus:border-emphasis focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default hover:border-emphasis rounded-md transition border",
             state.isMulti
               ? variant === "checkbox"
                 ? "px-3 py-2 h-fit"

packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx

@@ -54,7 +54,7 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
   }
   const commonClass = classNames(
     getVariantStyles(variant).commonClass,
-    "inline-flex items-center justify-center rounded text-sm font-medium  leading-4",
+    "inline-flex items-center justify-center rounded text-sm font-medium leading-4 transition",
     disabled && "cursor-not-allowed"
   );