calcite-design-system
calcite-design-system copied to clipboard
New Component: calcite-textarea
Description
- Separate out textarea from CalciteInput.
- Retain a slot for action(s)
- Layout actions at the bottom in a sort of footer
- Add support for resize #1528
Acceptance Criteria
Relevant Info
Which Component
Example Use Case
Design and spec
Colors, placeholder color, and general spacing match CalciteInput.
Related:
- #2866
- #3312
I think this is a good time to split textarea
into its own component vs <calcite-input type=textarea>
which has always been a little weird. We will want to leave the existing input-action
slot for inputs as is.
I could see textarea component having a footer-actions
slot that is placed and spaced inside the textarea, and we could use for save / cancel functionality internally and folks could use to place items like your example, if needed.
Agreed! would be cool for Bold Italic/etc actions too
Cool. Though I suggest just using the same slot name and putting the actions at the bottom. I think if a full-on rich text editor happens, it should be its own component.
As a note, I think the input-action
name could be simplified to just action
or actions
.
It's inside input
already so the context should handle it.
Hence in the proposed TextArea component, the slot name can also be action
or actions
.
As long as we document or limit it to button components, at least for input... Action sounds like it's for the action component which is not really what we want folks to use adjacent to inputs. Even in textarea I'd suggest buttons be used.
Hmmm...isn't the idea behind the slot to allow the user to decide what goes in there?
But if you don't wanna rename the slot, I think that's OK. The input-
part just seemed unneeded to me.
If that's the convention, we'd name the slot in TextArea textarea-action
, yeah?
For the most part, yeah. But there are certainly places where we want to prevent bad UX / incentivize or recommend good practices. For the input-action
in particular, it's placed in a trailing position as a helper for constraining button heights in an [input][button] lockup. Users can always flex-position a div of their own choosing.
textarea-action
seems reasonable, if it's a full-width div perhaps a footer-leading
/ footer-trailing
paradigm for placing on either side like in calcite-card
makes sense. Keep in mind we may want to place some items in there from the component itself, like save / cancel or a character count we don't want folks to re-create on their own if we offer it.
@macandcheese did you wanna take this one on?
Unless it's needed soon, sure thing - I can get started in a week or two most likely. I'll try to make the footer slot make sense and consider component-rendered inline save / dismiss since we'll be doing that for input as well soon.
Cool. Thanks. If I can step to it sooner, I'll grab it. I'll assign us both for now.
🤜 🤛
@asangma have you had a chance to take a 👀 at this? Thanks!
@asangma I'm curious if the scope or intent of this component would be having a "text editor" inclusive text styling (similar to the text editing here in Github issues) - bold, bullets, links, etc.
@ajturner Hey...sorry for the late response. This component wouldn't include those features and would focus on adding some UI and a bit of enhancement to a native text-area.
The slots for a footer or actions is to meet the common requirement to insert field or expression references.
@ajturner That's probably a common enough use case to eventually have our own component for though... Those are used all over the place. There's likely (?) some wrappable library we can use.
@bstifle I added a design to the first comment if you wanna have a look.
Designs look good! Would prefer to keep the current custom resize handle if possible since that’s different across browsers without that.
Could you mock-up a built-in character count? Would be nice to include that in a way that played well with the slotted items.
re: custom resize handle. Sounds good.
re: char count Whooops! Lemme add that.
agreed on resize handle!
Updated.
Looks good! Maybe an option for “limit” 00 / 00 count. But can work on that later, design wouldn’t change.
Maybe there’s a way to get the resize icon to better align w the items in footer? Open to ideas for updating our custom one as long as it’s something we are displaying for consistency across browsers.
@julio8a @caripizza Pinging y'all for triaging this one.
Thx Alan! @jcfranco and I will be doing triage.
Would be nice to have this available early enough for integration and testing for the ArcGIS Online 9.3 release.
For the initial scope of this component I propose we limit the functionality to that of a native textarea, and later work on an enhancement for the footer slots, built-in character count, etc.
As a note - when this is split into its own component - handling resize options on the component level will allow us to change the custom icon affordance... Currently teams cannot adjust the resize direction / capability without hacking into shadow DOM. This has come up a few times recently. cc @jcfranco @benelan priority bump?
Will continue the work on the new calcite-textarea
component in February's priorities.
Installed and assigned for verification.
Verified on master
. Adding a new component page for next week's doc release.