From 5969d4cbdb354821b61289615c5d0f1ffad70fb8 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Mon, 1 Jul 2024 16:05:10 -0400 Subject: [PATCH] Add copy-button to swatches, and fix min / maxlength on input (#152) * add test for min / maxlength * prettier * fix accessibility issue in tab group * add changelog entry gp * fix swatches for things that dont have background colors --- docs/docs/form-controls.md | 2 +- docs/docs/resources/changelog.md | 2 + docs/docs/theming/color.md | 97 +++++++++++++++++++++------ src/components/input/input.test.ts | 34 ++++++++++ src/components/tab-group/tab-group.ts | 3 +- src/internal/webawesome-element.ts | 4 -- 6 files changed, 116 insertions(+), 26 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/resources/changelog.md b/docs/docs/resources/changelog.md index 737ae5214..5e4150711 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -15,6 +15,8 @@ During the alpha period, things might break! We take breaking changes very serio ## Next - Fixed a bug where `` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22) +- Fixed a bug in `` in Firefox where the overflow container would keep focus. [#14](https://github.com/shoelace-style/webawesome-alpha/issues/14) +- Fixed a bug in `` where `minlength` and `maxlength` were not being properly validated. [#35](https://github.com/shoelace-style/webawesome-alpha/issues/35) ## 1.0.0-alpha.1 diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 196ef4beb..8faa41b44 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -5,6 +5,8 @@ layout: page-outline --- @@ -422,13 +424,13 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co | Custom Property | Preview | | ------------------------ | ---------------------------------------------------------- | -| `--wa-color-text-normal` |
AaBb
| -| `--wa-color-text-quiet` |
AaBb
| -| `--wa-color-text-link` |
AaBb
| +| `--wa-color-text-normal` |
AaBb
| +| `--wa-color-text-quiet` |
AaBb
| +| `--wa-color-text-link` |
AaBb
| ### 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 | | --------------------------- | ----------------------------------------------------------------------------------- | @@ -451,7 +453,7 @@ Web Awesome uses a single focus color for predictable keyboard navigation. This | Custom Property | Preview | | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | -| `--wa-color-focus` |
| +| `--wa-color-focus` |
| #### Hover and Active @@ -459,8 +461,8 @@ Web Awesome leverages `color-mix()` to achieve consistent hover and active state | Custom Property | Preview | | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | -| `--wa-color-mix-hover` |
mixed
| -| `--wa-color-mix-active` |
mixed
| +| `--wa-color-mix-hover` |
mixed
| +| `--wa-color-mix-active` |
mixed
| ## Semantic Colors @@ -487,9 +489,64 @@ Finally, each color is named according to how much attention it draws. Here, we | `--wa-color-*-fill-quiet` |
|
|
|
|
| | `--wa-color-*-fill-normal` |
|
|
|
|
| | `--wa-color-*-fill-loud` |
|
|
|
|
| -| `--wa-color-*-border-quiet` |
|
|
|
|
| -| `--wa-color-*-border-normal` |
|
|
|
|
| -| `--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-*-border-quiet` |
|
|
|
|
| +| `--wa-color-*-border-normal` |
|
|
|
|
| +| `--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 diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index fbc66afea..2455118d2 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/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 009697368..5e3e8f509 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -393,7 +393,8 @@ export default class WaTabGroup extends WebAwesomeElement { ` : ''} -
+ +
this.activeTab?.focus({ preventScroll: true })}>
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 50ce2629b..4d2a2f988 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 ``