feat(textarea): introduce isClearable

[IsDyh01]

Closes #2348 Closes #2112

📝 Description

Currently, the input component has a clear button function, while the textarea component does not

⛳️ Current behavior (updates)

The textarea component does not have a clear button

🚀 New behavior

Add Clear button functionality for the textarea component。If there is no content in the textarea, the clear button will not be displayed. If there is content, the clear button will be displayed after the content. Click the clear button to clear the text in the textarea and call the callback function

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Added a clearable feature to the Textarea component, allowing users to easily clear the text using a clear button.
  • Enhanced the Textarea story with a new Clearable variant, increasing interactivity and usability.
  • Introduced a new example component demonstrating the clearable Textarea in action.
  • Added a header wrapper property to the input component for improved layout styling.

• Tests

  • Introduced tests to ensure that the clearable Textarea component works as expected, including verification of the clear button functionality and the onClear event handler.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 05df8bab0539792889ef45731c53ee5597dac58b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@nextui-org/input	Patch
@nextui-org/shared-icons	Patch
@nextui-org/theme	Patch
@nextui-org/accordion	Patch
@nextui-org/autocomplete	Patch
@nextui-org/drawer	Patch
@nextui-org/modal	Patch
@nextui-org/select	Patch
@nextui-org/react	Patch
@nextui-org/alert	Patch
@nextui-org/breadcrumbs	Patch
@nextui-org/calendar	Patch
@nextui-org/chip	Patch
@nextui-org/date-picker	Patch
@nextui-org/link	Patch
@nextui-org/pagination	Patch
@nextui-org/snippet	Patch
@nextui-org/table	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 6:52pm
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 6:52pm

[vercel[bot]]

@IsDyh01 is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (5)

• main
• canary
• fix/.*
• chore/.*
• feat/.*

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The update introduces a clear button to the Textarea component in the documentation, detailing its functionality when the isClearable property is set to true. A new headerWrapper slot has been added to enhance the component's structure. Additionally, the package.json for the @nextui-org/input package has been updated to require a newer version of the @nextui-org/theme peer dependency. The useInput hook has been modified to support new methods and conditional class applications.

Changes

File	Change Summary
apps/docs/content/docs/components/textarea.mdx	Added documentation for the clear button functionality and updated Textarea Props to include isClearable.
packages/components/input/package.json	Updated peer dependency version for @nextui-org/theme from >=2.1.0 to >=2.2.12.
packages/components/input/src/use-input.ts	Added getHeaderWrapperProps method and updated existing methods for conditional class handling based on isMultiline.
packages/core/theme/src/components/input.ts	Introduced headerWrapper slot for layout customization in the input component.
packages/utilities/shared-icons/src/index.ts	Added export for the trash icon from the ./trash module.

Assessment against linked issues

Objective	Addressed	Explanation
Add clear button to Textarea (2348)	✅
Implement isClearable in Textarea (2112)	✅

Possibly related PRs

• #3643: This PR addresses the behavior of the clear button in the input component, ensuring it is only active when the input is editable, which is directly related to the isClearable property introduced in the main PR.
• #3774: This PR ensures that the clear button does not receive focus when the input is disabled, which is relevant to the isClearable functionality in the main PR.
• #3912: This PR removes a pseudo cancel button from the input component, which relates to the clear button functionality discussed in the main PR.
• #3966: This PR fixes a sliding issue caused by the helper wrapper in input components, which may indirectly affect the layout and behavior of the clear button when isClearable is true.

Suggested labels

📋 Scope : Docs, 👀 Status: To Review

Suggested reviewers

• wingkwong
• jrgarciadev

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[awesome-pro]

@IsDyh01 kindly run pnpm changeset command before commit to add the changeset file then again add, commit push

[IsDyh01]

Ok, I will deal with these problems as soon as possible

[IsDyh01]

The scrollbar style seems to come with the browser, and you can't change its position, such as padding and margin

[wingkwong]

Actually it's possible if you change the padding of the outer container. However, we'll revisit the design first. Please check with the failed test case first.

[IsDyh01]

This commit fixes the test case failed issue, makes the textarea component support isClearable prop, and finally adds docs to the component

[wingkwong]

@IsDyh01 Just discussed with the designer, here's the new design.

• if clearable is true, the clear button will be placed at the top right. please notice the icon is different. see below for the svg code.
• the clear button will be horizontally aligned with the label and the scrollbar won't be overlap with it.

You may check the below screenshot for reference.

The clear button svg:

<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M14.0071 3.8847L14.0087 3.88486C14.0648 3.8902 14.1093 3.93884 14.108 3.99818C14.0999 4.04945 14.0549 4.08666 14.0067 4.08666H14.0066H14.0064H14.0063H14.0062H14.0061H14.006H14.0059H14.0057H14.0056H14.0055H14.0054H14.0053H14.0052H14.005H14.0049H14.0048H14.0047H14.0046H14.0045H14.0044H14.0042H14.0041H14.004H14.0039H14.0038H14.0037H14.0036H14.0034H14.0033H14.0032H14.0031H14.003H14.0029H14.0028H14.0027H14.0025H14.0024H14.0023H14.0022H14.0021H14.002H14.0019H14.0018H14.0017H14.0015H14.0014H14.0013H14.0012H14.0011H14.001H14.0009H14.0008H14.0007H14.0005H14.0004H14.0003H14.0002H14.0001H14H13.9999H13.9998H13.9997H13.9996H13.9995H13.9993H13.9992H13.9991H13.999H13.9989H13.9988H13.9987H13.9986H13.9985H13.9984H13.9983H13.9982H13.9981H13.9979H13.9978H13.9977H13.9976H13.9975H13.9974H13.9973H13.9972H13.9971H13.997H13.9969H13.9968H13.9967H13.9966H13.9965H13.9964H13.9962H13.9961H13.996H13.9959H13.9958H13.9957H13.9956H13.9955H13.9954H13.9953H13.9952H13.9951H13.995H13.9949H13.9948H13.9947H13.9946H13.9945H13.9944H13.9943H13.9942H13.9941H13.9939H13.9938H13.9937H13.9936H13.9935H13.9934H13.9933H13.9932H13.9931H13.993H13.9929H13.9928H13.9927H13.9926H13.9925H13.9924H13.9923H13.9922H13.9921H13.992H13.9919H13.9918H13.9917H13.9916H13.9915H13.9914H13.9913H13.9912H13.9911H13.991H13.9909H13.9908H13.9907H13.9906H13.9905H13.9904H13.9903H13.9902H13.9901H13.99H13.9899H13.9898H13.9897H13.9896H13.9895H13.9894H13.9893H13.9892H13.9891H13.989H13.9889H13.9888H13.9887H13.9886H13.9885H13.9884H13.9883H13.9882H13.9881H13.988H13.9879H13.9878H13.9877H13.9876H13.9875H13.9874H13.9873H13.9872H13.9871H13.987H13.9869H13.9868H13.9867H13.9866H13.9865H13.9864H13.9863H13.9862H13.9861H13.986H13.9859H13.9858H13.9857H13.9856H13.9855H13.9854H13.9853H13.9852H13.9851H13.985H13.9849H13.9848H13.9847H13.9846H13.9845H13.9844H13.9843H13.9842H13.9841H13.984H13.9839H13.9838H13.9837H13.9836H13.9835H13.9834H13.9833H13.9832H13.9831H13.983H13.9829H13.9828H13.9827H13.9826H13.9825H13.9824H13.9823H13.9823H13.9822H13.9821H13.982H13.9819H13.9818H13.9817H13.9816H13.9815H13.9814H13.9813H13.9812H13.9811H13.981H13.9809H13.9808H13.9807H13.9806H13.9805H13.9804H13.9803H13.9802H13.9801H13.98H13.9799H13.9798H13.9797H13.9796H13.9795H13.9794H13.9793H13.9792H13.9791H13.979H13.9789H13.9788H13.9787H13.9786H13.9785H13.9784H13.9783H13.9782H13.9781H13.9781H13.978H13.9779H13.9778H13.9777H13.9776H13.9775H13.9774H13.9773H13.9772H13.9771H13.977H13.9769H13.9768H13.9767H13.9766H13.9765H13.9764H13.9763H13.9762H13.9761H13.976H13.9759H13.9758H13.9757H13.9756H13.9755H13.9754H13.9753H13.9752H13.9751H13.975H13.9749H13.9748H13.9747H13.9746H13.9745H13.9744H13.9743H13.9742H13.9741H13.974H13.9739H13.9738H13.9737H13.9736H13.9735H13.9734H13.9733H13.9733C10.4314 3.7333 6.88973 3.59909 3.36755 3.94858C3.36742 3.94859 3.36729 3.9486 3.36717 3.94862L2.00875 4.0818C2.00861 4.08181 2.00848 4.08182 2.00835 4.08183C1.94717 4.08747 1.90326 4.04725 1.89811 3.99449C1.8929 3.9411 1.93182 3.89052 1.99126 3.88486L1.99237 3.88475L3.35187 3.75147C3.35194 3.75146 3.35201 3.75145 3.35208 3.75145C3.96457 3.69218 4.57811 3.65256 5.19909 3.6125L5.51656 3.59202L5.56806 3.27809L5.708 2.42509C5.76399 2.08568 5.81767 1.81209 5.98475 1.60624C6.12965 1.42771 6.42122 1.23333 7.12 1.23333H8.86667C9.56355 1.23333 9.85752 1.43445 10.0046 1.61915C10.1739 1.83176 10.2261 2.10927 10.2786 2.43103L10.2785 2.43103L10.2789 2.4334L10.42 3.26694V3.61839L10.7978 3.63938C11.8728 3.6991 12.9403 3.77868 14.0071 3.8847Z"
    fill="#A1A1AA"
    stroke="#A1A1AA"
    strokeWidth="0.8"
  />
  <path
    d="M12.2134 5.56667C12.3292 5.56667 12.4438 5.61405 12.5285 5.70064C12.6088 5.78957 12.6542 5.90963 12.6474 6.03693C12.6474 6.03722 12.6473 6.03752 12.6473 6.03782L12.2342 12.8669C12.1959 13.3993 12.1525 13.8463 11.9087 14.1798C11.69 14.4792 11.2352 14.7733 10.14 14.7733H5.86004C4.76563 14.7733 4.31057 14.4779 4.09155 14.1776C3.8475 13.843 3.80414 13.3957 3.76583 12.8668L3.35272 6.03052C3.35271 6.03034 3.3527 6.03016 3.35269 6.02998C3.34597 5.90978 3.39108 5.78807 3.47441 5.69749C3.54714 5.61844 3.66453 5.56667 3.7867 5.56667H12.2134ZM6.8867 12.2333H9.1067C9.60095 12.2333 10.0067 11.8276 10.0067 11.3333C10.0067 10.8391 9.60095 10.4333 9.1067 10.4333H6.8867C6.39246 10.4333 5.9867 10.8391 5.9867 11.3333C5.9867 11.8276 6.39246 12.2333 6.8867 12.2333ZM6.33337 9.56667H9.6667C10.161 9.56667 10.5667 9.16092 10.5667 8.66667C10.5667 8.17242 10.161 7.76667 9.6667 7.76667H6.33337C5.83912 7.76667 5.43337 8.17242 5.43337 8.66667C5.43337 9.16092 5.83912 9.56667 6.33337 9.56667Z"
    fill="#A1A1AA"
    stroke="#A1A1AA"
    strokeWidth="0.8"
  />
</svg>;

[IsDyh01]

ok，I will modify it as soon as possible.

[IsDyh01]

currently behavior

[wingkwong]

@IsDyh01 the case without label fails

[IsDyh01]

[IsDyh01]

Excuse me, do you have time to go over this pr？

[IsDyh01]

I'm very sorry for the late revision. I had something to do in the last two weeks

[IsDyh01]

@wingkwong I've merged the latest code.

[jrgarciadev]

@IsDyh01 the clear button should be visible only when the textarea has some content

please take a look at the input behavior https://nextui.org/docs/components/input#clear-button

[IsDyh01]

@IsDyh01 the clear button should be visible only when the textarea has some content

please take a look at the input behavior https://nextui.org/docs/components/input#clear-button

I already took care of it

[wingkwong]

mark it on hold until the doc structure revamp pr got merged to beta branch

[jrgarciadev]

@IsDyh01 I added some comments

[IsDyh01]

ok, I will modify it as soon as possible.

[jrgarciadev]

Hey @IsDyh01 thanks for this contribution, however, I'm closing this PR in favor of this one https://github.com/nextui-org/nextui/pull/4172 (I had to some a couple of fixes)