feat: created TextArea component by Kiru2115 · Pull Request #23 · Generacja-Innowacja/athena

Kiru2115 · 2026-02-20T09:07:01Z

Changes

What has been done in this PR?

added characterLimitVisibility to provide multiple styles
added all TextArea variants
added stories.tsx
added test.tsx

How to test

Describe how to test the changes manually

yarn storybook
yarn test
...

Checklist

Check if the code follows the standards

Follows front-end standards
No unused code / console.log / leftover comments
Component is exported in the main.ts file (if applicable)
Resolved merge conflicts (if applicable)
Added / updated unit tests (if applicable)
Added / updated storybook stories (if applicable)

- Added new props to TextArea for error handling, character limits, and helper text. - Implemented a render function in stories to manage state and args. - Created comprehensive tests for rendering, character limits, error states, and onChange behavior.

- Added export for the Textarea component to make it available for use in other parts of the application.

src/components/ui/TextArea/TextArea.tsx

- Renamed the Textarea component to TextArea for consistency. - Updated exports, stories, and tests to reflect the new naming convention. - Enhanced the TextArea component with additional props and improved test coverage.

prewendowski · 2026-02-24T10:51:20Z

Missclick

whit33y

Few bugs that I found right now. I will do further more accurate review later.

whit33y · 2026-02-24T11:04:45Z

src/components/ui/TextArea/TextArea.tsx

+  isRequired?: boolean;
+  isError?: boolean;
+  errorText?: string;
+  helper?: string;


Story says:
helper: optional, React.ReactNode (so we can pass strings and react nodes).
So it cannot be string as we can pass "<a" for example.

whit33y · 2026-02-24T11:05:56Z

src/components/ui/TextArea/TextArea.tsx

+        {isRequired && <span className="text-red-500 ml-1 size-4">*</span>}
+        {""}
+      </p>
+      <textarea


We should pass isRequired here too I guess

whit33y · 2026-02-24T11:06:49Z

src/components/ui/TextArea/TextArea.tsx

+  variant?: TextAreaVariant;
+  value?: string;
+  onChange: (value: string) => void;
+  placeholder: string;


Story says:
placeholder optional

whit33y · 2026-02-24T11:09:56Z

src/components/ui/TextArea/TextArea.tsx

+  disabled: "text-gray-400",
+};
+
+export interface TextAreaProps {


Story says:
extend Props type with React.ComponentProps<"textarea"> so all the additional props will be passed!

whit33y · 2026-02-24T11:13:09Z

src/components/ui/TextArea/TextArea.tsx

+        disabled={isDisabled}
+        className={cn(
+          TextAreaVariants({
+            variant: isError ? "error" : "default",


Logical problem. Check what will happen if we pass disabled for example?

(issue, non-blocking, logic) - The "disabled" styling variant was never being applied

Suggested change

variant: isError ? "error" : "default",

variant: disabled

? "disabled"

: isError

? "error"

: variant || "default",

- Renamed `isDisabled` prop to `disabled` for consistency. - Updated the TextArea component to accept `placeholder` as an optional prop. - Adjusted related tests and stories to reflect the prop changes and ensure accurate rendering.

whit33y

Here you have solution to problem with this React.Component props and few style bugs that I found.
Take a closer look in Figma and analyze all colors and fonts because I may have missed something.

whit33y · 2026-02-24T18:12:01Z

src/components/ui/TextArea/TextArea.tsx

+  disabled: "text-gray-400",
+};
+
+export interface TextAreaProps {


Suggested change

export interface TextAreaProps {

export interface TextAreaProps

extends Omit<React.ComponentProps<"textarea">, "onChange">

whit33y · 2026-02-24T18:20:21Z

src/components/ui/TextArea/TextArea.tsx

+
+  return (
+    <div>
+      <p className={cn("text-[16px]", labelVariants[variant ?? "default"])}>


Suggested change

<p className={cn("text-[16px]", labelVariants[variant ?? "default"])}>

<p className={cn("font-bold", labelVariants[variant ?? "default"])}>

Default text size is 16px so this isn't necessary.

whit33y · 2026-02-24T18:26:41Z

src/components/ui/TextArea/TextArea.tsx

+import { cn } from "@/lib/utils";
+
+const TextAreaVariants = cva(
+  "px-3 py-2 w-[346px] h-[122px] text-gi-primary rounded-3xl  h-30.5 ",


You added text-gi-primary here so its not necessary to add it separated to all variants underneath

whit33y · 2026-02-24T18:29:13Z

src/components/ui/TextArea/TextArea.tsx

+
+type TextAreaVariant = VariantProps<typeof TextAreaVariants>["variant"];
+
+const labelVariants: Record<string, string> = {


I think we need to specify rest of variant text-colors here beacuse in storybook hover color is black but in figma is text-gi-primary:

…ling - Added 'hover' and 'focus' variants to label styles for improved UI feedback. - Updated TextAreaProps interface to extend textarea props more clearly. - Changed label class to 'font-bold' for better emphasis.

oskarbarcz · 2026-02-25T12:49:44Z

src/components/ui/TextArea/TextArea.tsx

+      variant: {
+        default:
+          "text-gi-primary border-[1px] border-gi-primary/10 focus:ring-0 focus:outline-none",
+        hover:


issue(blocking): hover & focus are states, not variants, all variants should react on focus and hover

- Removed 'hover' and 'focus' variants from the TextArea component for a cleaner design. - Updated story options to reflect the changes in available variants. - Adjusted styling for default, disabled, and error states to enhance consistency.

- Changed expected label class from 'text-gray-400' to 'text-gi-primary/50' to align with recent styling updates.

- Simplified the variant selection logic to handle 'disabled' and 'error' states more clearly. - Ensured that the default variant is applied when neither 'disabled' nor 'error' is active.

- Removed the variant prop from stories and tests, replacing it with direct usage of disabled and isError props. - Updated the TextArea component to compute the variant based on the disabled and isError states for better clarity. - Adjusted story args to include a default value and character limit visibility for enhanced usability.

- Added a 'helper' argType to the TextArea stories for improved prop handling. - Updated story args to include a default helper text for better usability. - Cleaned up formatting in the TextArea component for consistency.

github-actions · 2026-02-25T19:54:37Z

Coverage Report

Coverage after merging feat/TextArea into main will be:

	Hit/ Total	Coverage
🟰 Statements	`36 / 36`	100% 🥳
🌿 Branches	`48 / 51`	94.12% 🥳
🔢 Functions	`9 / 9`	100% 🥳
📝 Elements	`93 / 96`	96.88% 🥳

Kiru2115 added 5 commits February 18, 2026 14:05

Initial Stages of TextArea

d42da83

feat: checkbox with variants

1ac53b3

feat/done - without .test.tsx

1371c77

feat: export Textarea component from the UI library

937ff50

- Added export for the Textarea component to make it available for use in other parts of the application.

prewendowski reviewed Feb 24, 2026

View reviewed changes

src/components/ui/TextArea/TextArea.tsx Outdated Show resolved Hide resolved

src/components/ui/TextArea/TextArea.tsx Show resolved Hide resolved

prewendowski linked an issue Feb 24, 2026 that may be closed by this pull request

TextArea #10

Open

prewendowski closed this Feb 24, 2026

prewendowski reopened this Feb 24, 2026

whit33y requested changes Feb 24, 2026

View reviewed changes

prewendowski changed the title ~~Feat/text area~~ feat: created TextArea component Feb 24, 2026

refactor: update TextArea component props and tests

56107ca

- Renamed `isDisabled` prop to `disabled` for consistency. - Updated the TextArea component to accept `placeholder` as an optional prop. - Adjusted related tests and stories to reflect the prop changes and ensure accurate rendering.

whit33y requested changes Feb 24, 2026

View reviewed changes

Kiru2115 self-assigned this Feb 25, 2026

oskarbarcz reviewed Feb 25, 2026

View reviewed changes

Kiru2115 added 5 commits February 25, 2026 13:57

fix: update TextArea test to reflect new label styling

6b5c36c

- Changed expected label class from 'text-gray-400' to 'text-gi-primary/50' to align with recent styling updates.

refactor: update TextArea variant logic for improved clarity

1d5d94f

- Simplified the variant selection logic to handle 'disabled' and 'error' states more clearly. - Ensured that the default variant is applied when neither 'disabled' nor 'error' is active.

refactor: enhance TextArea stories with helper text and argTypes

e0f79ce

- Added a 'helper' argType to the TextArea stories for improved prop handling. - Updated story args to include a default helper text for better usability. - Cleaned up formatting in the TextArea component for consistency.

	export interface TextAreaProps {
	export interface TextAreaProps
	extends Omit<React.ComponentProps<"textarea">, "onChange">

	<p className={cn("text-[16px]", labelVariants[variant ?? "default"])}>
	<p className={cn("font-bold", labelVariants[variant ?? "default"])}>


		type TextAreaVariant = VariantProps<typeof TextAreaVariants>["variant"];

		const labelVariants: Record<string, string> = {

Conversation

Kiru2115 commented Feb 20, 2026 • edited by szaszuke Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How to test

Checklist

Uh oh!

Uh oh!

Uh oh!

prewendowski commented Feb 24, 2026

Uh oh!

whit33y left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

whit33y left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 25, 2026

Coverage Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Kiru2115 commented Feb 20, 2026 •

edited by szaszuke

Loading