From ad57941526c4f4afc0c9ca2e263d62f2fb5c03f2 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 28 Aug 2026 00:10:53 +0530 Subject: [PATCH] refactor: migrate ToggleSwitch to @makeplane/propel (#9696) * refactor: migrate web ToggleSwitch to @makeplane/propel Switch Replace @plane/ui ToggleSwitch with @makeplane/propel Switch in apps/web. Wire the package on web and import Propel styles so Switch utilities emit. * style: fix comboButton indentation in dropdowns * chore: use workspace catalog for @makeplane/propel --- .../core/components/api-token/modal/form.tsx | 10 ++- .../automation/auto-archive-automation.tsx | 11 ++- .../automation/auto-close-automation.tsx | 12 ++-- .../modals/existing-issues-list-modal.tsx | 10 ++- .../estimates/estimate-disable-switch.tsx | 13 ++-- .../home/widgets/manage/widget-item.tsx | 11 +-- .../inbox/modals/create-modal/create-root.tsx | 4 +- .../calendar/dropdowns/options-dropdown.tsx | 12 ++-- .../components/issues/issue-modal/form.tsx | 9 ++- .../pages/editor/toolbar/options-dropdown.tsx | 11 ++- .../components/power-k/ui/modal/footer.tsx | 11 +-- .../project-settings-member-defaults.tsx | 12 ++-- .../project/publish-project/modal.tsx | 9 +-- .../components/project/settings/helper.tsx | 11 +-- .../notifications/email-notification-form.tsx | 67 ++++++++++--------- .../project/content/feature-control-item.tsx | 12 +++- .../core/components/web-hooks/form/toggle.tsx | 11 +-- .../web-hooks/webhooks-list-item.tsx | 21 +++++- 18 files changed, 161 insertions(+), 96 deletions(-) diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx index d345c80d0b..1e1b96cf90 100644 --- a/apps/web/core/components/api-token/modal/form.tsx +++ b/apps/web/core/components/api-token/modal/form.tsx @@ -14,7 +14,8 @@ import { Button } from "@plane/propel/button"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { IApiToken } from "@plane/types"; // ui -import { CustomSelect, Input, TextArea, ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { CustomSelect, Input, TextArea } from "@plane/ui"; import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils"; // components import { DateDropdown } from "@/components/dropdowns/date"; @@ -240,7 +241,12 @@ export function CreateApiTokenForm(props: Props) {
- {}} size="sm" /> + {}} + aria-label={t("workspace_settings.settings.api_tokens.never_expires")} + />
{t("workspace_settings.settings.api_tokens.never_expires")}
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx index 1221e23267..e631ec2858 100644 --- a/apps/web/core/components/automation/auto-archive-automation.tsx +++ b/apps/web/core/components/automation/auto-archive-automation.tsx @@ -12,7 +12,8 @@ import { ArchiveRestore } from "lucide-react"; import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import type { IProject } from "@plane/types"; -import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { CustomSelect, Loader } from "@plane/ui"; // component import { SelectMonthModal } from "@/components/automation"; import { SettingsControlItem } from "@/components/settings/control-item"; @@ -76,7 +77,13 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro title={t("project_settings.automations.auto-archive.title")} description={t("project_settings.automations.auto-archive.description")} control={ - + } />
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx index 48c7203abd..d74ada18a6 100644 --- a/apps/web/core/components/automation/auto-close-automation.tsx +++ b/apps/web/core/components/automation/auto-close-automation.tsx @@ -13,7 +13,8 @@ import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIc import { useTranslation } from "@plane/i18n"; import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons"; import type { IProject } from "@plane/types"; -import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { CustomSelect, CustomSearchSelect, Loader } from "@plane/ui"; import { SelectMonthModal } from "@/components/automation"; import { SettingsControlItem } from "@/components/settings/control-item"; // hooks @@ -94,17 +95,18 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props: title={t("project_settings.automations.auto-close.title")} description={t("project_settings.automations.auto-close.description")} control={ - { + { if (currentProjectDetails?.close_in === 0) { void handleChange({ close_in: 1, default_state: defaultState }); } else { void handleChange({ close_in: 0, default_state: null }); } }} - size="sm" disabled={!isAdmin} + aria-label={t("project_settings.automations.auto-close.title")} /> } /> diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx index d0028c1360..646ce6c359 100644 --- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx +++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx @@ -16,7 +16,8 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import { Tooltip } from "@plane/propel/tooltip"; import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types"; // ui -import { Loader, ToggleSwitch, EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; import { generateWorkItemLink, getTabIndex } from "@plane/utils"; // helpers // hooks @@ -198,7 +199,12 @@ export function ExistingIssuesListModal(props: Props) { isWorkspaceLevel ? "text-primary" : "text-secondary" }`} > - setIsWorkspaceLevel((prevData) => !prevData)} /> + diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx index 976e4f314d..a9ea0faa35 100644 --- a/apps/web/core/components/issues/issue-modal/form.tsx +++ b/apps/web/core/components/issues/issue-modal/form.tsx @@ -20,7 +20,7 @@ import { Button } from "@plane/propel/button"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { TIssue, TWorkspaceDraftIssue } from "@plane/types"; // hooks -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; import { convertWorkItemDataToSearchResponse, getUpdateFormDataForReset, @@ -454,7 +454,12 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro }} role="button" > - {}} size="sm" /> + {}} + aria-label={t("create_more")} + /> {t("create_more")} )} diff --git a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx index b0ea592f4d..0244c5e8ff 100644 --- a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx +++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx @@ -9,7 +9,7 @@ import { observer } from "mobx-react"; import { ArrowUpToLine, Clipboard, History } from "lucide-react"; // plane imports import { TOAST_TYPE, setToast } from "@plane/propel/toast"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; // hooks import { useAppRouter } from "@/hooks/use-app-router"; import { usePageFilters } from "@/hooks/use-page-filters"; @@ -55,7 +55,7 @@ export const PageOptionsDropdown = observer(function PageOptionsDropdown(props: customContent: ( <> Full width - {}} /> + {}} aria-label="Full width" /> ), className: "flex items-center justify-between gap-2", @@ -66,7 +66,12 @@ export const PageOptionsDropdown = observer(function PageOptionsDropdown(props: customContent: ( <> Sticky toolbar - {}} /> + {}} + aria-label="Sticky toolbar" + /> ), className: "flex items-center justify-between gap-2", diff --git a/apps/web/core/components/power-k/ui/modal/footer.tsx b/apps/web/core/components/power-k/ui/modal/footer.tsx index 092e4f6da4..0a613624c0 100644 --- a/apps/web/core/components/power-k/ui/modal/footer.tsx +++ b/apps/web/core/components/power-k/ui/modal/footer.tsx @@ -7,7 +7,7 @@ import { observer } from "mobx-react"; // plane imports import { useTranslation } from "@plane/i18n"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; type Props = { isWorkspaceLevel: boolean; @@ -25,11 +25,12 @@ export const PowerKModalFooter = observer(function PowerKModalFooter(props: Prop
{t("power_k.footer.workspace_level")} - onWorkspaceLevelChange(!isWorkspaceLevel)} - disabled={!projectId} +
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx index 23184e9f41..f15d6c08bc 100644 --- a/apps/web/core/components/project/project-settings-member-defaults.tsx +++ b/apps/web/core/components/project/project-settings-member-defaults.tsx @@ -14,7 +14,8 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { IProject, IUserLite, IWorkspace } from "@plane/types"; -import { Loader, ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { Loader } from "@plane/ui"; // constants import { PROJECT_DETAILS } from "@plane/constants"; // hooks @@ -187,11 +188,12 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe description="This will allow guests to have view access to all the project work items." >
- toggleGuestViewAllIssues(!currentProjectDetails?.guest_view_all_features)} - disabled={!isAdmin} +
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx index 2ab3e2c046..7bbd38a2c7 100644 --- a/apps/web/core/components/project/publish-project/modal.tsx +++ b/apps/web/core/components/project/publish-project/modal.tsx @@ -16,7 +16,8 @@ import { GlobeIcon, NewTabIcon, CheckIcon } from "@plane/propel/icons"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types"; // ui -import { Loader, ToggleSwitch, CustomSelect, ModalCore, EModalWidth } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; +import { Loader, CustomSelect, ModalCore, EModalWidth } from "@plane/ui"; // helpers import { copyTextToClipboard } from "@plane/utils"; // hooks @@ -283,7 +284,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props: control={control} name="is_comments_enabled" render={({ field: { onChange, value } }) => ( - + )} /> @@ -293,7 +294,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props: control={control} name="is_reactions_enabled" render={({ field: { onChange, value } }) => ( - + )} /> @@ -303,7 +304,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props: control={control} name="is_votes_enabled" render={({ field: { onChange, value } }) => ( - + )} /> diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx index 858debea26..136e752298 100644 --- a/apps/web/core/components/project/settings/helper.tsx +++ b/apps/web/core/components/project/settings/helper.tsx @@ -7,7 +7,7 @@ import Link from "next/link"; import { ChevronRightIcon } from "@plane/propel/icons"; import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; import { joinUrlPath } from "@plane/utils"; type Props = { @@ -35,11 +35,12 @@ export function ProjectFeatureToggle(props: Props) { ) : ( - handleSubmit(featureItem?.key, featureItem?.property)} - disabled={disabled} + handleSubmit(featureItem?.key, featureItem?.property)} + disabled={disabled} + aria-label="Toggle project feature" /> ); } diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx index e0add312b3..006ec1f3ee 100644 --- a/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx +++ b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx @@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "@plane/i18n"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { IUserEmailNotificationSettings } from "@plane/types"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; // components import { SettingsControlItem } from "@/components/settings/control-item"; // services @@ -68,13 +68,14 @@ export const NotificationsProfileSettingsForm = observer(function NotificationsP control={control} name="property_change" render={({ field: { value, onChange } }) => ( - { - onChange(newValue); - handleSettingChange("property_change", newValue); - }} + { + onChange(newValue); + void handleSettingChange("property_change", newValue); + }} + aria-label={t("property_changes")} /> )} /> @@ -88,13 +89,14 @@ export const NotificationsProfileSettingsForm = observer(function NotificationsP control={control} name="state_change" render={({ field: { value, onChange } }) => ( - { - onChange(newValue); - handleSettingChange("state_change", newValue); - }} + { + onChange(newValue); + void handleSettingChange("state_change", newValue); + }} + aria-label={t("state_change")} /> )} /> @@ -109,13 +111,14 @@ export const NotificationsProfileSettingsForm = observer(function NotificationsP control={control} name="issue_completed" render={({ field: { value, onChange } }) => ( - { - onChange(newValue); - handleSettingChange("issue_completed", newValue); - }} + { + onChange(newValue); + void handleSettingChange("issue_completed", newValue); + }} + aria-label={t("issue_completed")} /> )} /> @@ -130,13 +133,14 @@ export const NotificationsProfileSettingsForm = observer(function NotificationsP control={control} name="comment" render={({ field: { value, onChange } }) => ( - { - onChange(newValue); - handleSettingChange("comment", newValue); - }} + { + onChange(newValue); + void handleSettingChange("comment", newValue); + }} + aria-label={t("comments")} /> )} /> @@ -150,13 +154,14 @@ export const NotificationsProfileSettingsForm = observer(function NotificationsP control={control} name="mention" render={({ field: { value, onChange } }) => ( - { - onChange(newValue); - handleSettingChange("mention", newValue); - }} + { + onChange(newValue); + void handleSettingChange("mention", newValue); + }} + aria-label={t("mentions")} /> )} /> diff --git a/apps/web/core/components/settings/project/content/feature-control-item.tsx b/apps/web/core/components/settings/project/content/feature-control-item.tsx index 4db4298ec6..ae5c8eb400 100644 --- a/apps/web/core/components/settings/project/content/feature-control-item.tsx +++ b/apps/web/core/components/settings/project/content/feature-control-item.tsx @@ -8,7 +8,7 @@ import { observer } from "mobx-react"; // plane imports import { setPromiseToast } from "@plane/propel/toast"; import type { IProject } from "@plane/types"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; // components import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item"; // hooks @@ -60,7 +60,15 @@ export const ProjectSettingsFeatureControlItem = observer(function ProjectSettin } + control={ + + } /> ); }); diff --git a/apps/web/core/components/web-hooks/form/toggle.tsx b/apps/web/core/components/web-hooks/form/toggle.tsx index 7ac83365fd..fe4eeff6d8 100644 --- a/apps/web/core/components/web-hooks/form/toggle.tsx +++ b/apps/web/core/components/web-hooks/form/toggle.tsx @@ -8,8 +8,7 @@ import type { Control } from "react-hook-form"; import { Controller } from "react-hook-form"; // constants import type { IWebhook } from "@plane/types"; -// ui -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; interface IWebHookToggle { control: Control; @@ -23,13 +22,7 @@ export function WebhookToggle({ control }: IWebHookToggle) { control={control} name="is_active" render={({ field: { onChange, value } }) => ( - { - onChange(val); - }} - size="sm" - /> + )} /> diff --git a/apps/web/core/components/web-hooks/webhooks-list-item.tsx b/apps/web/core/components/web-hooks/webhooks-list-item.tsx index 444da3c193..776100cac6 100644 --- a/apps/web/core/components/web-hooks/webhooks-list-item.tsx +++ b/apps/web/core/components/web-hooks/webhooks-list-item.tsx @@ -8,7 +8,7 @@ import Link from "next/link"; import { useParams } from "next/navigation"; // Plane imports import type { IWebhook } from "@plane/types"; -import { ToggleSwitch } from "@plane/ui"; +import { Switch } from "@makeplane/propel/components/switch"; // hooks import { useWebhook } from "@/hooks/store/use-webhook"; @@ -35,8 +35,23 @@ export function WebhooksListItem(props: IWebhookListItem) { className="flex items-center justify-between gap-4" >
{webhook.url}
-
- +
{ + e.preventDefault(); + e.stopPropagation(); + }} + onKeyDown={(e) => e.stopPropagation()} + role="presentation" + > + { + void handleToggle(); + }} + aria-label="Toggle webhook" + />