Request to add disable feature for RuxTextarea component

[berkaybaltas1]

Greetings!

I would like to request a new feature for RuxTextarea. The feature I am requesting is the ability to disable the RuxTextarea. Currently, I am encountering an issue where assigning a className to the RuxTextarea and setting the resize property to none does not prevent the component from being resizable. Additionally, I am unable to modify the height of the RuxTextarea, while the width can be edited. Although I have attempted to use the rows prop to adjust the height, it has not worked for some unknown reason. I would greatly appreciate it if this feature could be implemented. Thank you!

[micahjones13]

Hey @berkaybaltas1, great request!

Our rux-textarea uses the native textarea under the hood, and we expose that element using the textarea CSS shadow part. You can change that CSS by targeting that shadow part; for example:

rux-textarea::part(textarea) {
    resize: none;
    height: 200px;
}

I recognize that it's odd to have the height CSS shadow dom encapsulated but not the width, I'll talk with the team about that.
Also, here's a codesandbox using react and adding a class to change the resize and height properties, just in case it's helpful. Let me know if this helps!

[micahjones13]

Also, when using shadow parts it's important to keep in mind that we may change some internal CSS properties that are publicly exposed as shadow parts as part of a minor version release. You can read more about that here: https://www.astrouxds.com/releases/#minor

[berkaybaltas1]

Thank you for the prompt response and the helpful information, @micahjones13. I tried out the code snippet that you provided, and it worked perfectly. I was also able to target a specific element by replacing rux-textarea::part(textarea) with myClassName::part(textarea).

If possible, could you please provide a link or resource to the official documentation that explains the usage of shadow parts in more detail? I would like to share this information with my team and ensure that we are using Astro to it's fullest protentional. Thanks again!

[micahjones13]

Of course, I apologize for not linking to that in the first place. Here you go! https://astro-components.netlify.app/?path=/story/astro-uxds-customization--page#using-css-shadow-parts

[berkaybaltas1]

Thank you!