Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(text-area): add support for minLength #10970

Draft
wants to merge 14 commits into
base: dev
Choose a base branch
from
Draft

feat(text-area): add support for minLength #10970

wants to merge 14 commits into from
+121 −27

Conversation

Elijbet
Copy link
Contributor

@Elijbet Elijbet commented Dec 4, 2024

Related Issue: #8626

Summary

Add support for minlength to text-area.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 4, 2024
@Elijbet Elijbet marked this pull request as ready for review December 4, 2024 21:52
driskull
driskull requested changes Dec 6, 2024
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great @Elijbet! 🌮

Just a few minor suggestions.

packages/calcite-components/src/components/text-area/assets/t9n/messages.json Outdated Show resolved Hide resolved
packages/calcite-components/src/components/text-area/resources.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/components/text-area/text-area.tsx Outdated Show resolved Hide resolved
@Elijbet Elijbet mentioned this pull request Dec 7, 2024
Merged
@jcfranco jcfranco changed the title feat(text-area): add support for minlength to text-area feat(text-area): add support for minLength Dec 11, 2024
jcfranco
jcfranco approved these changes Dec 11, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had a few comments, but this looks great, @Elijbet!

Can you also add a screenshot test? We can tweak the Exceeding Max Length Test Only story to include both min and max tests (along with proper rename).

packages/calcite-components/src/components/text-area/text-area.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/text-area/text-area.tsx Show resolved Hide resolved
packages/calcite-components/src/components/text-area/text-area.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/text-area/text-area.e2e.ts Outdated Show resolved Hide resolved
@Elijbet Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 16, 2024
anveshmekala
anveshmekala reviewed Dec 17, 2024
View reviewed changes
packages/calcite-components/src/components/text-area/text-area.tsx
return result;
}

private replacePlaceholdersInLongMessages(): string {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: can we use a different name here to be more meaningful.

replaceMaxLengthPlaceHolderMessage( ) or getMaxLengthMessage( ).

anveshmekala
anveshmekala reviewed Dec 17, 2024
View reviewed changes
packages/calcite-components/src/components/text-area/text-area.tsx
}

private isCharacterLimitExceeded(): boolean {
private replacePlaceholdersInShortMessages(): string {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: can we use a different name here to be more meaningful.

replaceMinLengthPlaceHolderMessage( ) or getMinLengthMessage( ).

anveshmekala
anveshmekala reviewed Dec 17, 2024
View reviewed changes
packages/calcite-components/src/components/text-area/text-area.tsx
return this.messages.tooLong
.replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
.replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
private replacePlaceholders(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: can we retain the name replacePlaceholdersInMessages() . Helps providing context of placeHolders and avoid confusing with place-holder property of text-area.

anveshmekala
anveshmekala approved these changes Dec 17, 2024
View reviewed changes
Copy link
Contributor

@anveshmekala anveshmekala left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great ! 🏆

Recommend a11y review.

driskull
driskull approved these changes Dec 17, 2024
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

anveshmekala
anveshmekala reviewed Dec 17, 2024
View reviewed changes
packages/calcite-components/src/components/text-area/assets/t9n/messages.json
@@ -1,4 +1,5 @@
{
"invalid": "Invalid",
"tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
"tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}.",
"tooShort": "The current character length is {currentLength}, which is less than the minimum character length of {minLength}."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please refrain from using this message string in component code while translations are pending to avoid errors for non-en locales.

Currently, we don't provide fallback values for new strings added in existing bundles. Fallback is used only for new components/ new bundles.

Once translations are back one can access the this.messages.tooShort prop in component.

cc @jcfranco

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anveshmekala Can you create an issue for us to explore an option for us to use messages regardless of translation status?

Elijbet added a commit that referenced this pull request Dec 18, 2024
@Elijbet
chore(text-area): add new string for when character length is `tooSho…
38accc3 
…rt` (#11006)

**Related Issue:** #10970

## Summary
Check in new string.
@Elijbet
Copy link
Contributor Author

Elijbet commented Dec 23, 2024

This PR is blocked due to #8626 (comment). It can still be partially adopted once element internals work is in.

@Elijbet Elijbet added the blocked This issue is blocked by another issue. label Dec 23, 2024
@Elijbet Elijbet marked this pull request as draft December 23, 2024 20:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@anveshmekala anveshmekala anveshmekala approved these changes

@geospatialem geospatialem geospatialem left review comments

@jcfranco jcfranco jcfranco approved these changes

@driskull driskull driskull approved these changes

@benelan benelan Awaiting requested review from benelan benelan is a code owner

Assignees

@Elijbet Elijbet

Labels
blocked This issue is blocked by another issue. enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@Elijbet @jcfranco @driskull @geospatialem @anveshmekala