calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

New Component: calcite-textarea

Open asangma opened this issue 4 years ago • 25 comments

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.

image

Related:

  • #2866
  • #3312

asangma avatar Aug 13 '20 16:08 asangma

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.

macandcheese avatar Aug 13 '20 16:08 macandcheese

Agreed! would be cool for Bold Italic/etc actions too

bstifle avatar Aug 13 '20 19:08 bstifle

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.

asangma avatar Aug 13 '20 23:08 asangma

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.

macandcheese avatar Aug 13 '20 23:08 macandcheese

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?

asangma avatar Aug 14 '20 16:08 asangma

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 avatar Aug 14 '20 16:08 macandcheese

@macandcheese did you wanna take this one on?

asangma avatar Aug 21 '20 16:08 asangma

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.

macandcheese avatar Aug 21 '20 16:08 macandcheese

Cool. Thanks. If I can step to it sooner, I'll grab it. I'll assign us both for now.

asangma avatar Aug 21 '20 22:08 asangma

🤜 🤛

macandcheese avatar Aug 21 '20 22:08 macandcheese

@asangma have you had a chance to take a 👀 at this? Thanks!

macandcheese avatar Oct 19 '20 16:10 macandcheese

@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 avatar Oct 23 '20 12:10 ajturner

@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.

asangma avatar Nov 05 '20 21:11 asangma

@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.

macandcheese avatar Nov 05 '20 22:11 macandcheese

@bstifle I added a design to the first comment if you wanna have a look.

asangma avatar May 17 '21 17:05 asangma

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.

macandcheese avatar May 17 '21 17:05 macandcheese

re: custom resize handle. Sounds good.

re: char count Whooops! Lemme add that.

asangma avatar May 17 '21 17:05 asangma

agreed on resize handle!

bstifle avatar May 17 '21 17:05 bstifle

Updated.

asangma avatar May 17 '21 17:05 asangma

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.

macandcheese avatar May 17 '21 17:05 macandcheese

@julio8a @caripizza Pinging y'all for triaging this one.

asangma avatar Jun 02 '21 21:06 asangma

Thx Alan! @jcfranco and I will be doing triage.

julio8a avatar Jun 02 '21 21:06 julio8a

Would be nice to have this available early enough for integration and testing for the ArcGIS Online 9.3 release.

asangma avatar Jun 03 '21 14:06 asangma

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.

macandcheese avatar Jan 11 '22 19:01 macandcheese

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?

macandcheese avatar Mar 18 '22 18:03 macandcheese

Will continue the work on the new calcite-textarea component in February's priorities.

geospatialem avatar Jan 25 '23 20:01 geospatialem

Installed and assigned for verification.

github-actions[bot] avatar Mar 23 '23 23:03 github-actions[bot]

Verified on master. Adding a new component page for next week's doc release.

image

geospatialem avatar Mar 24 '23 17:03 geospatialem