Migrate Textarea to Label #153

clintcs · 2024-05-28T15:07:03Z

🚀 Description

Textarea

Migrates it to Label.
Description and character count are now read by screenreaders.
Adds spellcheck and autocapitalize attributes.
Adds a gap between the description and character count for long descriptions.
Renames label-position to orientation to bring it in line with Label and the other components.
Removes various test associated with the existence of an "error" class. The bulk of this logic is now handled by Label.
Boldens the character count when exceeded.

Input

Only bolden the character count when it's invalid. Not when Input is invalid for other reasons.

Label

Adds support for part::tooltip-and-label-container for Textarea's vertically aligned label and tooltip.

📋 Checklist

I have read and followed the Contributing Guidelines.
I have added tests to cover new or updated functionality.
I have created or updated stories in Storybook to document the new functionality.
I have included a changeset with this Pull Request if it adds/updates/removes functionality for consumers.
I have scheduled a Design Review for these changes, if one is required.
I have followed the ARIA Authoring Practices Guide and/or met with the Accessibility Team to ensure this functionality is accessible.

🔬 How to Test

Textarea's looks like production except for spacing changes.
Textarea's description is announced by VoiceOver.
Textarea's label is announced by VoiceOver even when hidden.
Input's character count is only bold when the max count is exceeded.

We're planning to cut a release after this. I'd appreciate a second set of eyes on both components 🙏.

Known Issues

I found a few bugs while doing the migration that you may come across while testing. I'll create a ticket:

Input isn't invalid when its character count is exceeded.
Input and Textarea continue to show error feedback when required is removed programatically.
Input still shows error feedback when a single character is entered.

📸 Images/Videos of Functionality

N/A

changeset-bot · 2024-05-28T15:07:07Z

🦋 Changeset detected

Latest commit: b25e585

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

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/glide-core-components	Minor

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

github-actions · 2024-05-28T15:10:39Z

Preview URL

https://glide-core.crowdstrike-ux.workers.dev/migrate-textarea-to-label

clintcs · 2024-05-28T15:24:15Z

packages/components/src/label.styles.ts

    .control {
      display: block;

-      &.error {


This won't work in this case because the <textarea> has a container. Input and Textarea are back to coloring their own borders.

clintcs · 2024-05-28T15:26:13Z

packages/components/src/label.ts

          'tooltip-and-label': true,
          hidden: this.hide,
        })}
+        part="tooltip-and-label-container"


We don't have much of a use for parts externally because we don't consumers to arbitrarily style components. But Label is private. This allows Textarea's one-off, vertically aligned label-and-tooltip to exist without Label explicitly accommodating it.

clintcs · 2024-05-28T15:29:00Z

packages/components/src/textarea.test.basics.ts

  expect(element).to.have.attribute('rows', '2');

  expect(textarea).to.exist;
-  expect(textarea?.textContent).to.equal('value');


Lit doesn't support expressions inside <textarea>.

clintcs · 2024-05-28T15:29:28Z

packages/components/src/textarea.test.basics.ts

  expect(label?.textContent?.trim()).to.be.equal('label');
 });

-it('renders a visually hidden label when attribute `hide-label` is set', async () => {


All now the responsibility of Label.

clintcs · 2024-05-28T15:30:20Z

packages/components/src/textarea.ts

-          })}
          ?disabled=${this.disabled}
-          aria-describedby="description"
+          aria-describedby="meta"


Renamed to match Input.

clintcs · 2024-05-28T15:31:31Z

packages/components/src/input.ts

Got rid of the <div class="component" data-test="component"> wrapper.

clintcs · 2024-05-28T15:34:56Z

packages/components/src/input.styles.ts

-      }
-
-      .character-count {
-        font-weight: var(--cs-font-weight-bold);


The character count should only be bold when the count is invalid, not when Textarea is invalid for other reasons. I moved this below where it's only applied then. I moved the .input-box border coloring closer to .input-box for consistency.

clintcs · 2024-05-28T15:35:18Z

packages/components/src/input.styles.ts

    display: flex;
    gap: var(--cs-spacing-xxs);
    line-height: var(--cs-body-xs-line-height);
-    overflow: hidden;


clintcs · 2024-05-28T15:52:15Z

packages/components/src/checkbox.ts

  @state()
  private isReportValidityOrSubmit = false;

-  #componentElementRef = createRef<HTMLDivElement>();


ynotdraw

One thing I noticed is that when hide-label is added, the textarea no longer takes up 100% of the width when comparing with /main. Is that intentional? Looks like the same thing on Input as well.

Before	After

clintcs · 2024-05-28T20:04:39Z

One thing I noticed is that when hide-label is added, the textarea no longer takes up 100% of the width when comparing with /main. Is that intentional? Looks like the same thing on Input as well.

Great catch! I pushed a fix.

Migrate Textarea to Label

1c59fe2

clintcs force-pushed the migrate-textarea-to-label branch from ab5a931 to 1c59fe2 Compare May 28, 2024 15:21

clintcs commented May 28, 2024

View reviewed changes

clintcs marked this pull request as ready for review May 28, 2024 18:41

clintcs requested review from danwenzel, dylankcrwd and ynotdraw as code owners May 28, 2024 18:41

ynotdraw reviewed May 28, 2024

View reviewed changes

Allow control to grow when label is hidden

b25e585

ynotdraw approved these changes May 28, 2024

View reviewed changes

clintcs merged commit 73cc661 into main May 28, 2024

clintcs deleted the migrate-textarea-to-label branch May 28, 2024 21:07

github-actions bot mentioned this pull request May 28, 2024

Release Preview #135

Merged

Migrate Textarea to Label #153

Migrate Textarea to Label #153

Uh oh!

Conversation

clintcs commented May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Description

Textarea

Input

Label

📋 Checklist

🔬 How to Test

Known Issues

📸 Images/Videos of Functionality

Uh oh!

changeset-bot bot commented May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 28, 2024

Preview URL

Uh oh!

clintcs May 28, 2024

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024

Choose a reason for hiding this comment

Uh oh!

clintcs May 28, 2024

Choose a reason for hiding this comment

Uh oh!

ynotdraw left a comment

Choose a reason for hiding this comment

Uh oh!

clintcs commented May 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

clintcs commented May 28, 2024 •

edited

Loading

changeset-bot bot commented May 28, 2024 •

edited

Loading

clintcs May 28, 2024 •

edited

Loading

clintcs May 28, 2024 •

edited

Loading

clintcs May 28, 2024 •

edited

Loading

clintcs May 28, 2024 •

edited

Loading

clintcs May 28, 2024 •

edited

Loading