feat(text-area): add calcite-text-area component #5644
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
enhancement
anveshmekala
changed the title
anveshmekala
added
pr ready for visual snapshots
jcfranco
approved these changes
Mar 21, 2023
There was a problem hiding this comment.
Awesome work, @anveshmekala!
One the last comments are addressed, this is good to merge! 🎉
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
geospatialem
added a commit
that referenced
this pull request
Mar 23, 2023
…nts (#6634) **Related Issue:** n/a ## Summary Document API consistency across components, in particular while working through the new component, `textarea`. cc: #5644 Update includes consistency with `input`, `input-number`, and `input-text` (in alignment with `textarea`) for the following: 1. `autofocus` prop: > When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. 2. `selectText()` method: > Selects the text of the component's `value`.
benelan
approved these changes
Mar 23, 2023
| /** Selects the text of the component's `value`. */ | ||
| @Method() | ||
| async selectText(): Promise<void> { | ||
| this.textAreaEl.select(); |
There was a problem hiding this comment.
Should selectText await componentLoaded(this) like setFocus does?
There was a problem hiding this comment.
i think its better to add it .
anveshmekala
added
pr ready for visual snapshots
github-actions
bot
added this to the 2023 March Priorities - No breaking changes milestone
benelan
added a commit
that referenced
this pull request
Mar 27, 2023
…ocus-revert * origin/master: (30 commits) fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (`dist-custom-elements`) (#6666) fix(tile-select): fix click not firing in custom-elements build (#6665) fix(card): provide more meaningful screen reader label for selectable cards (deprecates `deselect` message override) (#6657) fix(pagination): add current page information for screen readers (#6637) chore: update jsbin sample to CC 1.0 breaking changes and latest jsapi version (#6651) feat(text-area): add calcite-text-area component (#5644) chore(release): 1.1.1-next.2 fix(tile): adds styling to `tile` where `link` is present for additional distinction (#6628) docs(input, input-number, input-text): api consistency across components (#6634) docs(accordion-item): add actions-start and actions-end slots (#6631) docs(modal): kebab-case slot names and sticky context (#6625) chore(release): 1.1.1-next.1 fix: restore form control validation in Safari (#6623) chore(linting): fix linting errors (#6613) build(deps): Bump eslint-plugin-react from 7.31.11 to 7.32.2 (#6619) build(deps): Bump eslint from 8.35.0 to 8.36.0 (#6620) build(deps): Bump @types/lodash-es from 4.17.6 to 4.17.7 (#6621) build: fix peer dependency resolution error (#6611) ci: update user-defined priority (#6609) build: update browserslist db (#6527) ...
benelan
added a commit
that referenced
this pull request
Mar 28, 2023
**Related Issue:** #5644 ## Summary Component methods need to be private if they are using a 3rd party package like lodash. Otherwise the package's types are included in dist and we would need to move the package's types from devDeps to deps.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #863
Summary
This PR will add new component
calcite-text-areawhich will replace<calcite-input type="textarea" />calcite-text-area
Usage
Basic
Properties
autofocusautofocustrue, the component is focused on page load.booleanfalsecolumnscolumnsnumberundefineddisableddisabledtrue, interaction is prevented and the component is displayed with lower opacity.booleanfalsegroupSeparatorgroup-separatortrue, number values are displayed with a group separator corresponding to the language and country format.booleanfalselabellabelstringundefinedmaxLengthmax-lengthnumberundefinedmessageOverrides{ invalid?: string; overLimit?: string; }undefinednamenamestringundefinednumberingSystemnumbering-system"arab" | "arabext" | "bali" | "beng" | "deva" | "fullwide" | "gujr" | "guru" | "hanidec" | "khmr" | "knda" | "laoo" | "latn" | "limb" | "mlym" | "mong" | "mymr" | "orya" | "tamldec" | "telu" | "thai" | "tibt"undefinedplaceholderplaceholderstringundefinedreadonlyreadonlytrue, the component's value can be read, but cannot be modified.booleanfalserequiredrequiredtrue, the component must have a value in order for the form to submit.booleanfalseresizeresizetrue, disables horizontally and vertically resizing the component."both" | "horizontal" | "none" | "vertical""both"rowsrowsnumberundefinedscalescale"l" | "m" | "s""m"valuevaluestringundefinedwrapwrap"hard" | "soft""soft"Events
calciteTextAreaChangevalueis typed and committed.CustomEvent<void>calciteTextAreaInputvalueis typed.CustomEvent<void>Methods
selectText() => Promise<void>Selects all text of the component's
value.Returns
Type:
Promise<void>setFocus() => Promise<void>Sets focus on the component.
Returns
Type:
Promise<void>Slots
"footer-end""footer-start"Known limitations:
when the
calcite-text-areawith fixed height and width is wrapped inside a flex container with height and width, resizing behavior doesn't restrict the component from increasing both height and width.