From 809bd19a92b38b6ea1080cd4cc299c5374fb83c7 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 27 Jun 2024 12:05:50 -0400 Subject: [PATCH] add test for min / maxlength --- docs/docs/form-controls.md | 2 +- docs/docs/theming/color.md | 75 ++++++++++++++++++++++++++---- src/components/input/input.test.ts | 34 ++++++++++++++ src/internal/webawesome-element.ts | 4 -- 4 files changed, 101 insertions(+), 14 deletions(-) diff --git a/docs/docs/form-controls.md b/docs/docs/form-controls.md index fd3aafcc9..9db42078e 100644 --- a/docs/docs/form-controls.md +++ b/docs/docs/form-controls.md @@ -176,4 +176,4 @@ These attributes map to the browser's built-in pseudo classes for validation: [` :::info In the future, data attribute selectors will be replaced with custom states such as `:state(valid)` and `:state(invalid)`. Web Awesome is using data attributes as a workaround until browsers fully support [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states). -::: +::: \ No newline at end of file diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 196ef4beb..7fe64f1cb 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -30,17 +30,17 @@ layout: page-outline border-color: transparent; } .color-mix-example { - background-image: - linear-gradient(to right, - color-mix(in oklab, transparent, var(--mix-color)) 25%, - color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%, - color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%, - var(--wa-color-brand-fill-loud) 75%, + background-image: + linear-gradient(to right, + color-mix(in oklab, transparent, var(--mix-color)) 25%, + color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%, + color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%, + var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud)) ; border: none; color: var(--wa-color-brand-on-loud); - text-align: center; + text-align: center; } @@ -428,7 +428,7 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co ### Overlays -Overlays provide a backdrop to isolate content, often allowing background context to show through. +Overlays provide a backdrop to isolate content, often allowing background context to show through. | Custom Property | Preview | | --------------------------- | ----------------------------------------------------------------------------------- | @@ -492,4 +492,61 @@ Finally, each color is named according to how much attention it draws. Here, we | `--wa-color-*-border-loud` |
|
|
|
|
| | `--wa-color-*-on-quiet` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| | `--wa-color-*-on-normal` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| -| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| \ No newline at end of file +| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| + + + + \ No newline at end of file diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index fbc66afea..121f058bc 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -498,5 +498,39 @@ describe('', async () => { expect(el.checkValidity()).to.be.true; }); + it("Should be invalid if minlength is not met", async () => { + const el = await fixture(html` `); + + el.input.focus(); + await el.updateComplete; + expect(el.checkValidity()).to.be.false; + + await sendKeys({ type: '12' }); + await el.updateComplete; + await aTimeout(10); + + expect(el.checkValidity()).to.be.false; + expect(el.validity.tooShort).to.be.true; + }) + + it("Should be invalid if maxlength is not met", async () => { + const el = await fixture(html` `); + + await el.updateComplete; + + // There's a fun problem around programmaticly setting values and default values from attributes. + // The TLDR is this input is valid, until the user starts typing. + expect(el.checkValidity()).to.be.true; + + el.input.focus(); + await sendKeys({ press: 'ArrowRight' }); + await sendKeys({ press: 'Backspace' }); + await el.updateComplete; + await aTimeout(10); + + expect(el.checkValidity()).to.be.false; + expect(el.validity.tooLong).to.be.true; + }) + await runFormControlBaseTests('wa-input'); }); diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 361f39896..d26f0a5bd 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -175,10 +175,6 @@ export class WebAwesomeFormAssociatedElement this.valueHasChanged = true; } - if (this.input) { - this.input.value = this.value; - } - const value = this.value; // Accounts for the snowflake case on ``