Skip to content

Commit 6fc88e2

Browse files
codingwolf-atcodingwolf-at
committed
refactor: replace TextArea usage with TextAreaGroup in forms
Updated various forms across the application to utilize TextAreaGroup for better structure and error handling. This change enhances the consistency of the description fields in forms, ensuring they are wrapped in a Field component for validation and styling. The updates were made in the CreateApiTokenForm, CycleForm, ModuleForm, ProjectDetailsForm, and others.
1 parent d5f0df8 commit 6fc88e2

12 files changed

Lines changed: 152 additions & 132 deletions

File tree

‎apps/web/core/components/api-token/modal/form.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import { CalendarOutline } from "@makeplane/propel/icons";
1111
// types
1212
import { Field } from "@makeplane/propel/components/field";
1313
import { Input, InputGroup } from "@makeplane/propel/components/input";
14+
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
1415
import { useTranslation } from "@plane/i18n";
1516
import { Button } from "@plane/propel/button";
1617
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
1718
import type { IApiToken } from "@plane/types";
1819
// ui
1920
import { Switch } from "@makeplane/propel/components/switch";
20-
import { CustomSelect, TextArea } from "@plane/ui";
21+
import { CustomSelect } from "@plane/ui";
2122
import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils";
2223
// components
2324
import { DateDropdown } from "@/components/dropdowns/date";
@@ -166,13 +167,17 @@ export function CreateApiTokenForm(props: Props) {
166167
control={control}
167168
name="description"
168169
render={({ field: { value, onChange } }) => (
169-
<TextArea
170-
value={value}
171-
onChange={onChange}
172-
hasError={Boolean(errors.description)}
173-
placeholder={t("description")}
174-
className="min-h-24 w-full resize-none text-14"
175-
/>
170+
<Field name="description" invalid={Boolean(errors.description)}>
171+
<TextAreaGroup>
172+
<TextArea
173+
size="lg"
174+
surface="field"
175+
value={value}
176+
onChange={onChange}
177+
placeholder={t("description")}
178+
/>
179+
</TextAreaGroup>
180+
</Field>
176181
)}
177182
/>
178183
<div className="flex items-center justify-between gap-2">

‎apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ import { MembersOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/pro
1212
import { EEstimateSystem } from "@plane/constants";
1313
import { useTranslation } from "@plane/i18n";
1414
import { Avatar } from "@makeplane/propel/components/avatar";
15+
import { TextArea } from "@makeplane/propel/components/text-area";
1516
import type { ICycle } from "@plane/types";
16-
// plane ui
17-
import { TextArea } from "@plane/ui";
1817
// helpers
1918
import { getFileURL } from "@plane/utils";
2019
// hooks
@@ -68,13 +67,7 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
6867
: `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
6968
return (
7069
<div className="flex w-full flex-col gap-5">
71-
{cycleDetails?.description && (
72-
<TextArea
73-
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"
74-
value={cycleDetails.description}
75-
disabled
76-
/>
77-
)}
70+
{cycleDetails?.description && <TextArea size="lg" surface="inline" value={cycleDetails.description} disabled />}
7871

7972
<div className="flex flex-col gap-5 pt-2.5 pb-6">
8073
<div className="flex items-center justify-start gap-1">

‎apps/web/core/components/cycles/form.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ import { Controller, useForm } from "react-hook-form";
99
// plane imports
1010
import { Field } from "@makeplane/propel/components/field";
1111
import { Input, InputGroup } from "@makeplane/propel/components/input";
12+
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
1213
import { ETabIndices } from "@plane/constants";
1314
// types
1415
import { useTranslation } from "@plane/i18n";
1516
import { Button } from "@plane/propel/button";
1617
import type { ICycle } from "@plane/types";
17-
// ui
18-
import { TextArea } from "@plane/ui";
1918
import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
2019
// components
2120
import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -139,15 +138,19 @@ export function CycleForm(props: Props) {
139138
name="description"
140139
control={control}
141140
render={({ field: { value, onChange } }) => (
142-
<TextArea
143-
name="description"
144-
placeholder={t("description")}
145-
className="min-h-24 w-full resize-none text-14"
146-
hasError={Boolean(errors?.description)}
147-
value={value}
148-
onChange={onChange}
149-
tabIndex={getIndex("description")}
150-
/>
141+
<Field name="description" invalid={Boolean(errors?.description)}>
142+
<TextAreaGroup>
143+
<TextArea
144+
size="lg"
145+
surface="field"
146+
name="description"
147+
placeholder={t("description")}
148+
value={value}
149+
onChange={onChange}
150+
tabIndex={getIndex("description")}
151+
/>
152+
</TextAreaGroup>
153+
</Field>
151154
)}
152155
/>
153156
</div>

‎apps/web/core/components/issues/title-input.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66

77
import { useState, useEffect, useCallback, useRef } from "react";
88
import { observer } from "mobx-react";
9+
import { Field } from "@makeplane/propel/components/field";
10+
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
911
import { useTranslation } from "@plane/i18n";
1012
import type { TNameDescriptionLoader } from "@plane/types";
11-
// components
12-
import { TextArea } from "@plane/ui";
1313
// types
1414
import { cn } from "@plane/utils";
1515
import useDebounce from "@/hooks/use-debounce";
@@ -39,7 +39,6 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
3939
issueId,
4040
issueOperations,
4141
projectId,
42-
className,
4342
containerClassName,
4443
} = props;
4544
const { t } = useTranslation();
@@ -132,7 +131,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
132131
);
133132

134133
const handleTitleChange = useCallback(
135-
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
134+
(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
136135
setIsSubmitting("submitting");
137136
const titleFromEvent = e.target.value;
138137
setTitle(titleFromEvent);
@@ -147,26 +146,25 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
147146
return (
148147
<div className="flex flex-col gap-1.5">
149148
<div className={cn("relative", containerClassName)}>
150-
<TextArea
151-
id="title-input"
152-
className={cn(
153-
"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",
154-
{
155-
"mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
156-
},
157-
className
158-
)}
159-
disabled={disabled}
160-
value={title}
161-
onChange={handleTitleChange}
162-
maxLength={255}
163-
placeholder={t("issue.title.label")}
164-
onFocus={() => setIsLengthVisible(true)}
165-
onBlur={() => setIsLengthVisible(false)}
166-
/>
149+
<Field name="title" invalid={title?.length === 0}>
150+
<TextAreaGroup>
151+
<TextArea
152+
size="2xl"
153+
surface="field"
154+
id="title-input"
155+
disabled={disabled}
156+
value={title}
157+
onChange={handleTitleChange}
158+
maxLength={255}
159+
placeholder={t("issue.title.label")}
160+
onFocus={() => setIsLengthVisible(true)}
161+
onBlur={() => setIsLengthVisible(false)}
162+
/>
163+
</TextAreaGroup>
164+
</Field>
167165
<div
168166
className={cn(
169-
"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",
167+
"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",
170168
{
171169
"opacity-100": isLengthVisible,
172170
}

‎apps/web/core/components/modules/analytics-sidebar/root.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ import { ModuleStatusIcon } from "@plane/propel/icons";
2626
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
2727
import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
2828
// plane ui
29-
import { Loader, CustomSelect, TextArea } from "@plane/ui";
29+
import { Loader, CustomSelect } from "@plane/ui";
30+
import { TextArea } from "@makeplane/propel/components/text-area";
3031
// components
3132
// helpers
3233
import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -233,15 +234,11 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
233234
)}
234235
/>
235236
</div>
236-
<h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
237+
<h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
237238
</div>
238239

239240
{moduleDetails.description && (
240-
<TextArea
241-
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"
242-
value={moduleDetails.description}
243-
disabled
244-
/>
241+
<TextArea size="lg" surface="inline" value={moduleDetails.description} disabled />
245242
)}
246243

247244
<div className="flex flex-col gap-5 pt-2.5 pb-6">

‎apps/web/core/components/modules/form.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@ import { Controller, useForm } from "react-hook-form";
99
// plane imports
1010
import { Field } from "@makeplane/propel/components/field";
1111
import { Input, InputGroup } from "@makeplane/propel/components/input";
12+
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
1213
import { ETabIndices } from "@plane/constants";
1314
import { useTranslation } from "@plane/i18n";
1415
import { Button } from "@plane/propel/button";
1516
import type { IModule } from "@plane/types";
16-
// ui
17-
import { TextArea } from "@plane/ui";
1817
import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
1918
// components
2019
import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -150,16 +149,20 @@ export function ModuleForm(props: Props) {
150149
name="description"
151150
control={control}
152151
render={({ field: { value, onChange } }) => (
153-
<TextArea
154-
id="description"
155-
name="description"
156-
value={value}
157-
onChange={onChange}
158-
placeholder={t("description")}
159-
className="min-h-24 w-full resize-none text-14"
160-
hasError={Boolean(errors?.description)}
161-
tabIndex={getIndex("description")}
162-
/>
152+
<Field name="description" invalid={Boolean(errors?.description)}>
153+
<TextAreaGroup>
154+
<TextArea
155+
size="lg"
156+
surface="field"
157+
id="description"
158+
name="description"
159+
value={value}
160+
onChange={onChange}
161+
placeholder={t("description")}
162+
tabIndex={getIndex("description")}
163+
/>
164+
</TextAreaGroup>
165+
</Field>
163166
)}
164167
/>
165168
</div>

‎apps/web/core/components/pages/editor/title.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66

77
import { useState } from "react";
88
import { observer } from "mobx-react";
9+
import { TextArea } from "@makeplane/propel/components/text-area";
910
// editor
1011
import type { EditorRefApi } from "@plane/editor";
11-
// ui
12-
import { TextArea } from "@plane/ui";
1312
import { cn, getPageName } from "@plane/utils";
1413
// helpers
1514
// hooks
@@ -35,23 +34,24 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
3534
});
3635

3736
return (
38-
<div className="relative w-full flex-shrink-0 py-3">
37+
<div className="relative w-full shrink-0 py-3">
3938
{readOnly ? (
4039
<h6
4140
className={cn(
4241
titleFontClassName,
4342
{
4443
"text-placeholder": !title,
4544
},
46-
"break-words"
45+
"wrap-break-word"
4746
)}
4847
>
4948
{getPageName(title)}
5049
</h6>
5150
) : (
5251
<div className="relative">
5352
<TextArea
54-
className={cn(titleFontClassName, "block w-full resize-none rounded-none border-none p-0 outline-none")}
53+
size={fontSize === "small-font" ? "xl" : "2xl"}
54+
surface="inline"
5555
placeholder="Untitled"
5656
onKeyDown={(e) => {
5757
if (e.key === "Enter") {
@@ -68,7 +68,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
6868
/>
6969
<div
7070
className={cn(
71-
"pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
71+
"pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
7272
{
7373
"opacity-100": isLengthVisible,
7474
}

‎apps/web/core/components/project-states/create-update/form.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import { useEffect, useState } from "react";
88
import { TwitterPicker } from "react-color";
99
import { Field } from "@makeplane/propel/components/field";
1010
import { Input, InputGroup } from "@makeplane/propel/components/input";
11+
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
1112
import { Button } from "@plane/propel/button";
1213
import type { IState } from "@plane/types";
13-
import { Popover, TextArea } from "@plane/ui";
14+
import { Popover } from "@plane/ui";
1415
type TStateForm = {
1516
data: Partial<IState>;
1617
onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
@@ -91,15 +92,19 @@ export function StateForm(props: TStateForm) {
9192
</Field>
9293

9394
{/* description */}
94-
<TextArea
95-
id="description"
96-
name="description"
97-
placeholder="Describe this state for your members."
98-
value={formData?.description}
99-
onChange={(e) => handleFormData("description", e.target.value)}
100-
hasError={(errors && Boolean(errors.description)) || false}
101-
className="min-h-14 w-full resize-none text-13"
102-
/>
95+
<Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
96+
<TextAreaGroup>
97+
<TextArea
98+
size="lg"
99+
surface="field"
100+
id="description"
101+
name="description"
102+
placeholder="Describe this state for your members."
103+
value={formData?.description}
104+
onChange={(e) => handleFormData("description", e.target.value)}
105+
/>
106+
</TextAreaGroup>
107+
</Field>
103108

104109
<div className="flex items-center space-x-2">
105110
<Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>

0 commit comments

Comments
 (0)