Skip to content

refactor: migrate web TextArea to @makeplane/propel TextArea #9747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
codingwolf-at wants to merge 10 commits into
base: preview
Choose a base branch
from
Open

refactor: migrate web TextArea to @makeplane/propel TextArea #9747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d5f0df8
chore: update @makeplane/propel version in pnpm-lock.yaml to 0.3.0
codingwolf-at Sep 3, 2026
6fc88e2
refactor: replace TextArea usage with TextAreaGroup in forms
codingwolf-at Sep 3, 2026
531ded0
refactor: enhance TextArea components across forms with auto-resize a…
codingwolf-at Sep 3, 2026
706b6d8
refactor: remove unnecessary containerClassName from TextArea components
codingwolf-at Sep 3, 2026
eae4153
refactor: remove maxRows from TextArea components in Cycle and Module…
codingwolf-at Sep 3, 2026
ddec0f3
refactor: remove className prop from IssueTitleInput component
codingwolf-at Sep 3, 2026
5d978e1
refactor: remove PageEditorTitle component to streamline editor funct…
codingwolf-at Sep 3, 2026
af26810
fix: ensure description field in StateForm defaults to an empty string
codingwolf-at Sep 3, 2026
55e0483
refactor: simplify IssueTitleInput component by removing TextAreaGroup
codingwolf-at Sep 3, 2026
c2d4014
refactor: streamline description rendering in ModuleAnalyticsSidebar
codingwolf-at Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions apps/web/core/components/api-token/modal/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ import { CalendarOutline } from "@makeplane/propel/icons";
// types
import { Field } from "@makeplane/propel/components/field";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IApiToken } from "@plane/types";
// ui
import { Switch } from "@makeplane/propel/components/switch";
import { CustomSelect, TextArea } from "@plane/ui";
import { CustomSelect } from "@plane/ui";
import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
Expand Down Expand Up @@ -166,13 +167,19 @@ export function CreateApiTokenForm(props: Props) {
control={control}
name="description"
render={({ field: { value, onChange } }) => (
<TextArea
value={value}
onChange={onChange}
hasError={Boolean(errors.description)}
placeholder={t("description")}
className="min-h-24 w-full resize-none text-14"
/>
<Field name="description" invalid={Boolean(errors.description)}>
<TextAreaGroup resize="none">
<TextArea
size="lg"
surface="field"
autoResize
maxRows={8}
value={value}
onChange={onChange}
placeholder={t("description")}
/>
</TextAreaGroup>
</Field>
)}
/>
<div className="flex items-center justify-between gap-2">
Expand Down
9 changes: 2 additions & 7 deletions apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import { MembersOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/pro
import { EEstimateSystem } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Avatar } from "@makeplane/propel/components/avatar";
import { TextArea } from "@makeplane/propel/components/text-area";
import type { ICycle } from "@plane/types";
// plane ui
import { TextArea } from "@plane/ui";
// helpers
import { getFileURL } from "@plane/utils";
// hooks
Expand Down Expand Up @@ -69,11 +68,7 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
return (
<div className="flex w-full flex-col gap-5">
{cycleDetails?.description && (
<TextArea
className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
value={cycleDetails.description}
disabled
/>
<TextArea size="lg" surface="inline" autoResize value={cycleDetails.description} disabled />
)}

<div className="flex flex-col gap-5 pt-2.5 pb-6">
Expand Down
27 changes: 16 additions & 11 deletions apps/web/core/components/cycles/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@ import { Controller, useForm } from "react-hook-form";
// plane imports
import { Field } from "@makeplane/propel/components/field";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
import { ETabIndices } from "@plane/constants";
// types
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import type { ICycle } from "@plane/types";
// ui
import { TextArea } from "@plane/ui";
import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
// components
import { DateRangeDropdown } from "@/components/dropdowns/date-range";
Expand Down Expand Up @@ -139,15 +138,21 @@ export function CycleForm(props: Props) {
name="description"
control={control}
render={({ field: { value, onChange } }) => (
<TextArea
name="description"
placeholder={t("description")}
className="min-h-24 w-full resize-none text-14"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
tabIndex={getIndex("description")}
/>
<Field name="description" invalid={Boolean(errors?.description)}>
<TextAreaGroup resize="none">
<TextArea
size="lg"
surface="field"
autoResize
maxRows={8}
name="description"
placeholder={t("description")}
value={value}
onChange={onChange}
tabIndex={getIndex("description")}
/>
</TextAreaGroup>
</Field>
)}
/>
</div>
Expand Down
1 change: 0 additions & 1 deletion apps/web/core/components/inbox/content/issue-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,6 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
issueOperations={issueOperations}
disabled={!isEditable}
value={issue.name}
containerClassName="-ml-3"
/>

{loader === "issue-loading" || issue.description_html === undefined ? (
Expand Down
1 change: 0 additions & 1 deletion apps/web/core/components/issues/issue-detail/main-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,6 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
issueOperations={issueOperations}
disabled={isArchived || !isEditable}
value={issue.name}
containerClassName="-ml-3"
/>

<DescriptionInput
Expand Down
1 change: 0 additions & 1 deletion apps/web/core/components/issues/peek-overview/issue-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
issueOperations={issueOperations}
disabled={disabled || isArchived}
value={issue.name}
containerClassName="-ml-3"
/>

<DescriptionInput
Expand Down
45 changes: 22 additions & 23 deletions apps/web/core/components/issues/title-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@

import { useState, useEffect, useCallback, useRef } from "react";
import { observer } from "mobx-react";
import { Field } from "@makeplane/propel/components/field";
import { TextArea } from "@makeplane/propel/components/text-area";
import { useTranslation } from "@plane/i18n";
import type { TNameDescriptionLoader } from "@plane/types";
// components
import { TextArea } from "@plane/ui";
// types
import { cn } from "@plane/utils";
import useDebounce from "@/hooks/use-debounce";
Expand All @@ -25,7 +25,6 @@ export type IssueTitleInputProps = {
issueOperations: TIssueOperations;
projectId: string;
issueId: string;
className?: string;
containerClassName?: string;
};

Expand All @@ -39,7 +38,6 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
issueId,
issueOperations,
projectId,
className,
containerClassName,
} = props;
const { t } = useTranslation();
Expand Down Expand Up @@ -132,7 +130,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
);

const handleTitleChange = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
setIsSubmitting("submitting");
const titleFromEvent = e.target.value;
setTitle(titleFromEvent);
Expand All @@ -147,26 +145,27 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
return (
<div className="flex flex-col gap-1.5">
<div className={cn("relative", containerClassName)}>
<TextArea
id="title-input"
className={cn(
"block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium ring-0 outline-none",
{
"mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
},
className
)}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder={t("issue.title.label")}
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
<Field name="title" invalid={title?.length === 0}>

@anmolsinghbhatia anmolsinghbhatia Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue title changes from a 20px borderless heading to a bordered 90px-tall field with 16px regular text. Long titles also begin scrolling after four rows. Was this intentional ??

@codingwolf-at codingwolf-at Sep 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in 55e04833a5 — switched to surface="inline" with unbounded autoResize so the title stays heading-like and grows with content.

<div className="flex w-full">
<TextArea
size="2xl"
surface="inline"
autoResize
rows={1}
id="title-input"
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder={t("issue.title.label")}
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
</div>
</Field>
<div
className={cn(
"pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
"pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
{
"opacity-100": isLengthVisible,
}
Expand Down
16 changes: 6 additions & 10 deletions apps/web/core/components/modules/analytics-sidebar/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ import { ModuleStatusIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// plane ui
import { Loader, CustomSelect, TextArea } from "@plane/ui";
import { Loader, CustomSelect } from "@plane/ui";
import { TextArea } from "@makeplane/propel/components/text-area";
// components
// helpers
import { getDate, renderFormattedPayloadDate } from "@plane/utils";
Expand Down Expand Up @@ -233,17 +234,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
)}
/>
</div>
<h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
<h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
{moduleDetails.description && (
<TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
)}
</div>

{moduleDetails.description && (
<TextArea
className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
value={moduleDetails.description}
disabled
/>
)}

<div className="flex flex-col gap-5 pt-2.5 pb-6">
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
Expand Down
29 changes: 17 additions & 12 deletions apps/web/core/components/modules/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ import { Controller, useForm } from "react-hook-form";
// plane imports
import { Field } from "@makeplane/propel/components/field";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
import { ETabIndices } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import type { IModule } from "@plane/types";
// ui
import { TextArea } from "@plane/ui";
import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
// components
import { DateRangeDropdown } from "@/components/dropdowns/date-range";
Expand Down Expand Up @@ -150,16 +149,22 @@ export function ModuleForm(props: Props) {
name="description"
control={control}
render={({ field: { value, onChange } }) => (
<TextArea
id="description"
name="description"
value={value}
onChange={onChange}
placeholder={t("description")}
className="min-h-24 w-full resize-none text-14"
hasError={Boolean(errors?.description)}
tabIndex={getIndex("description")}
/>
<Field name="description" invalid={Boolean(errors?.description)}>
<TextAreaGroup resize="none">
<TextArea
size="lg"
surface="field"
autoResize
maxRows={8}
id="description"
name="description"
value={value}
onChange={onChange}
placeholder={t("description")}
tabIndex={getIndex("description")}
/>
</TextAreaGroup>
</Field>
)}
/>
</div>
Expand Down
90 changes: 0 additions & 90 deletions apps/web/core/components/pages/editor/title.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading