WEBDEV-8811: Migrate ia-clearable-text-input into elements - #68
Open
jbuckner wants to merge 2 commits into
Open
Conversation
Brings the component in as src/elements/ia-clearable-text-input/, the same shape as the ia-dropdown move, and points ia-dropdown-search-bar at the local copy so the external package can go. That was elements' last remaining @internetarchive dependency, so there are none left. The close icon is inlined as a Lit svg template rather than keeping @internetarchive/icon-close as a dependency, following the caret icons from the dropdown move. Dropping it also takes a second copy of Lit out of the tree: icon-close was pinned at ^1.3.4, which resolves its own lit and made the component's own test run log "Multiple versions of Lit loaded". The rendered result is unchanged, a 40px glyph on a dark circle, but the shadow DOM now holds a span and an svg instead of an <ia-icon-close> element. Tests move from web-test-runner, @open-wc/testing and sinon over to vitest and vi.fn. The a11y audit that relied on chai-a11y-axe becomes a direct assertion that the label points at the input, since elements has no axe setup. Also added a test for the clear event carrying the pre-clear value, which nothing covered before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YWG9C3uwCAtAJUABguZnV9
|
The pull_request trigger was filtered to main, so this PR got no test run at all, only the preview deploy, because it's stacked on the ia-dropdown branch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YWG9C3uwCAtAJUABguZnV9
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## WEBDEV-8812-migrate-ia-dropdown #68 +/- ##
===================================================================
+ Coverage 79.55% 79.97% +0.41%
===================================================================
Files 19 20 +1
Lines 817 844 +27
Branches 214 221 +7
===================================================================
+ Hits 650 675 +25
Misses 110 110
- Partials 57 59 +2 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What
Moves
@internetarchive/ia-clearable-text-inputintosrc/elements/ia-clearable-text-input/, the same shape as the ia-dropdown move in #NN, and pointsia-dropdown-search-barat the local copy.That was elements' last remaining
@internetarchive/*dependency, sodependenciesis now just@lit/localize,lit,magic-snowflakes, andtslib.The close icon
Inlined as a Lit
svgtemplate inassets/close.tsrather than keeping@internetarchive/icon-close, following the caret icons from the dropdown move.Worth doing beyond tidiness: icon-close was pinned at
^1.3.4, which resolves its own copy of Lit. The standalone package's own test run logsMultiple versions of Lit loaded, withlit@2.2.7at the root andlit@2.6.1nested under icon-close. Dropping the dependency removes that second copy, and it's the same duplication WEBDEV-8389 and WEBDEV-8810 were opened for. Both are moot for elements now.The rendered result is unchanged, a 40px glyph on a dark
#2c2c2ccircle with white fill, measured against the original. The one difference is the shadow DOM: a<span class="clear-icon">wrapping an<svg>instead of an<ia-icon-close>element. Nothing asserted on that element, so no test needed changing for it, but it's a real change for anyone reaching into the shadow root. The background and fill are now themeable via--clear-button-icon-backgroundand--clear-button-icon-color.Tests
Ported from web-test-runner +
@open-wc/testing+ sinon to vitest +vi.fn, keeping all ten behaviours.The a11y audit (
await expect(el).shadowDom.to.be.accessible()) relied on chai-a11y-axe, which elements doesn't have. Rather than drop the coverage or add axe to the repo, it became a direct assertion of what that test was really protecting: the label carries thescreenReaderLabeltext and itsforpoints at the input.Added one test that didn't exist before, that the
clearevent carries the value the field held before clearing.Test plan
ia-dropdown-search-bartests now resolving the local component.npm run buildandnpm run ghpages:buildclean.*-story.tsglob and appears in the nav, typing reveals the clear button, clearing empties the field and re-hides it, and the inlined icon measures 40×40 inside the 48×48 button withborder-radius: 50%,#2c2c2cbackground and white fill.Note
npm run lintfails ondemo/app-root.tsanddemo/story-template.test.tsfor formatting. Both are unformatted onmainalready and untouched here, so they're left alone. CI only runsnpm run test, which is why it hasn't surfaced.