fix: tab toggle component structure (#2755)

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx

@@ -14,6 +14,7 @@ import { TSurvey } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { FormControl, FormError, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
 import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { TabToggle } from "@formbricks/ui/TabToggle";
 import { CodeActionForm } from "@formbricks/ui/organisms/CodeActionForm";
 import { NoCodeActionForm } from "@formbricks/ui/organisms/NoCodeActionForm";
@@ -171,16 +172,18 @@ export const CreateNewActionTab = ({
                 name={`type`}
                 control={control}
                 render={({ field }) => (
-                  <TabToggle
-                    id="type"
-                    label="Type"
-                    options={[
-                      { value: "noCode", label: "No code" },
-                      { value: "code", label: "Code" },
-                    ]}
-                    {...field}
-                    defaultSelected={field.value}
-                  />
+                  <div>
+                    <Label className="font-semibold">Type</Label>
+                    <TabToggle
+                      id="type"
+                      options={[
+                        { value: "noCode", label: "No code" },
+                        { value: "code", label: "Code" },
+                      ]}
+                      {...field}
+                      defaultSelected={field.value}
+                    />
+                  </div>
                 )}
               />
             </div>

packages/ui/TabToggle/index.tsx

@@ -1,9 +1,6 @@
 import React, { useState } from "react";
-
 import { cn } from "@formbricks/lib/cn";
 
-import { Label } from "../Label";
-
 interface Option<T> {
   value: T;
   label: string;
@@ -14,8 +11,6 @@ interface TabToggleProps<T> {
   options: Option<T>[];
   defaultSelected?: T;
   onChange: (value: T) => void;
-  label: string;
-  subLabel?: string;
 }
 
 export const TabToggle = <T extends string | number>({
@@ -23,8 +18,6 @@ export const TabToggle = <T extends string | number>({
   options,
   defaultSelected,
   onChange,
-  label,
-  subLabel,
 }: TabToggleProps<T>) => {
   const [selectedOption, setSelectedOption] = useState<T | undefined>(defaultSelected);
 
@@ -36,9 +29,7 @@ export const TabToggle = <T extends string | number>({
 
   return (
     <div role="radiogroup" aria-labelledby={`${id}-toggle-label`} className="flex flex-col">
-      <Label className="font-semibold">{label}</Label>
-      {subLabel && <p className="text-sm font-normal text-slate-500">{subLabel}</p>}
-      <div className="mt-2 flex overflow-hidden rounded-md bg-slate-100 p-1">
+      <div className="mt-1 flex overflow-hidden rounded-md bg-slate-100 p-1">
         {options.map((option) => (
           <label
             key={option.value}

packages/ui/organisms/NoCodeActionForm/components/PageUrlSelector.tsx

@@ -63,19 +63,23 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
           control={form.control}
           name="noCodeConfig.urlFilters"
           render={() => (
-            <TabToggle
-              id="filter"
-              label="Filter"
-              subLabel="Limit the pages on which this action gets captured"
-              onChange={(value) => {
-                setFilterType(value);
-              }}
-              options={[
-                { value: "all", label: "On all pages" },
-                { value: "specific", label: "Limit to specific pages" },
-              ]}
-              defaultSelected={filterType}
-            />
+            <div>
+              <Label className="font-semibold">Filter</Label>
+              <p className="text-sm font-normal text-slate-500">
+                Limit the pages on which this action gets captured
+              </p>
+              <TabToggle
+                id="filter"
+                onChange={(value) => {
+                  setFilterType(value);
+                }}
+                options={[
+                  { value: "all", label: "On all pages" },
+                  { value: "specific", label: "Limit to specific pages" },
+                ]}
+                defaultSelected={filterType}
+              />
+            </div>
           )}
         />
       </div>

packages/ui/organisms/NoCodeActionForm/index.tsx

@@ -1,10 +1,9 @@
 import { InfoIcon } from "lucide-react";
 import { UseFormReturn } from "react-hook-form";
-
 import { TActionClassInput } from "@formbricks/types/actionClasses";
-
 import { Alert, AlertDescription, AlertTitle } from "../../Alert";
 import { FormControl, FormError, FormField, FormItem } from "../../Form";
+import { Label } from "../../Label";
 import { TabToggle } from "../../TabToggle";
 import { CssSelector } from "./components/CssSelector";
 import { InnerHtmlSelector } from "./components/InnerHtmlSelector";
@@ -25,18 +24,20 @@ export const NoCodeActionForm = ({ form }: NoCodeActionFormProps) => {
         render={({ field }) => (
           <FormItem>
             <FormControl>
-              <TabToggle
-                id="userAction"
-                {...field}
-                defaultSelected={field.value}
-                label="What is the user doing?"
-                options={[
-                  { value: "click", label: "Click" },
-                  { value: "pageView", label: "Page View" },
-                  { value: "exitIntent", label: "Exit Intent" },
-                  { value: "fiftyPercentScroll", label: "50% Scroll" },
-                ]}
-              />
+              <div>
+                <Label className="font-semibold">What is the user doing?</Label>
+                <TabToggle
+                  id="userAction"
+                  {...field}
+                  defaultSelected={field.value}
+                  options={[
+                    { value: "click", label: "Click" },
+                    { value: "pageView", label: "Page View" },
+                    { value: "exitIntent", label: "Exit Intent" },
+                    { value: "fiftyPercentScroll", label: "50% Scroll" },
+                  ]}
+                />
+              </div>
             </FormControl>
           </FormItem>
         )}