From cf3474770146abd202da20f6ef86de53219c468a Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Wed, 18 Dec 2024 17:08:38 -0500 Subject: [PATCH] fix layout demo and custom states support (#318) * fix demo * fix linting errors * remove jinja, run prettier * prettier --- docs/_includes/sidebar.njk | 4 ++-- docs/assets/examples/page-demo/demo.js | 14 +++++++++++--- docs/docs/components/cheatsheet.njk | 16 +++++++++++----- src/components/select/select.css | 2 +- src/components/select/select.test.ts | 2 +- src/components/textarea/textarea.css | 2 +- src/components/textarea/textarea.ts | 4 ++-- src/internal/webawesome-element.ts | 2 +- src/styles/themes/brutalist.css | 4 ++-- src/styles/themes/classic.css | 6 +++--- src/styles/themes/playful.css | 4 ++-- 11 files changed, 37 insertions(+), 23 deletions(-) diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 8831366d1..be48258cf 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -20,7 +20,7 @@ {# Components #} - +

Components @@ -50,7 +50,7 @@ - +

Essentials diff --git a/docs/assets/examples/page-demo/demo.js b/docs/assets/examples/page-demo/demo.js index dbb451bcd..52348f7b5 100644 --- a/docs/assets/examples/page-demo/demo.js +++ b/docs/assets/examples/page-demo/demo.js @@ -1,4 +1,3 @@ -await customElements.whenDefined('wa-checkbox'); let container = document.getElementById('page_slots_demo'); let fieldset = container.querySelector('fieldset'); @@ -10,7 +9,16 @@ let includes = `${stylesheets} `; -function render() { +async function render() { + await customElements.whenDefined('wa-checkbox'); + + // Let checkboxes update their "state" + await Promise.allSettled( + Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => { + return checkbox.updateComplete; + }), + ); + let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)')); let slotsHTML = slots .map(slot => { @@ -39,5 +47,5 @@ function render() { iframe.srcdoc = `${includes}${slotsHTML}`; } } +await render(); fieldset?.addEventListener('input', render); -render(); diff --git a/docs/docs/components/cheatsheet.njk b/docs/docs/components/cheatsheet.njk index bcf7eb2eb..73d5a2013 100644 --- a/docs/docs/components/cheatsheet.njk +++ b/docs/docs/components/cheatsheet.njk @@ -64,15 +64,21 @@ table code { {{ name }}{{ "()" if type == "method" }} + {% set componentLinks = [] %} + {% for component in thingComponents %} + {%- set link -%} + <{{ component.tagName }}> + {%- endset -%} + {# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #} + {% set componentLinks = (componentLinks.push(link), componentLinks) %} + {%- endfor -%} {% if thingComponents.length > 1 %}
{{ thingComponents.length }} components - {% endif %} - {% for component in thingComponents %} - <{{ component.tagName }}> - {%- endfor -%} - {% if thingComponents.length > 1 %} + {{ componentLinks | safe }}
+ {% else %} + {{ componentLinks | safe }} {% endif %} diff --git a/src/components/select/select.css b/src/components/select/select.css index 5d01cd7b1..abe54eb77 100644 --- a/src/components/select/select.css +++ b/src/components/select/select.css @@ -9,7 +9,7 @@ display: block; } -:host([appearance=filled]) { +:host([appearance='filled']) { --background-color: var(--wa-color-neutral-fill-quiet); --border-color: var(--background-color); } diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index f0cb8bf3a..5ac9ba31c 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -485,7 +485,7 @@ describe('', () => { Option 2 Option 3 - Reset + Reset `); diff --git a/src/components/textarea/textarea.css b/src/components/textarea/textarea.css index ae5859119..a67f65a29 100644 --- a/src/components/textarea/textarea.css +++ b/src/components/textarea/textarea.css @@ -9,7 +9,7 @@ display: block; } -:host([appearance=filled]) { +:host([appearance='filled']) { --background-color: var(--wa-color-neutral-fill-quiet); --border-color: var(--background-color); } diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 05842c24d..d4d53bd79 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -335,8 +335,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement { 'textarea--small': this.size === 'small', 'textarea--medium': this.size === 'medium', 'textarea--large': this.size === 'large', - 'textarea--standard': this.appearance !== "filled", - 'textarea--filled': this.appearance === "filled", + 'textarea--standard': this.appearance !== 'filled', + 'textarea--filled': this.appearance === 'filled', 'textarea--disabled': this.disabled, 'textarea--focused': this.hasFocus, 'textarea--empty': !this.value, diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 347fef985..acb223a51 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -115,7 +115,7 @@ export default class WebAwesomeElement extends LitElement { /** Checks if states are supported by the element */ private hasStatesSupport(): boolean { - return this.internals?.states instanceof Set; + return Boolean(this.internals?.states); } /** Adds a custom state to the element. */ diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css index b1f5134b4..7b158c0f7 100644 --- a/src/styles/themes/brutalist.css +++ b/src/styles/themes/brutalist.css @@ -601,8 +601,8 @@ /* preventing shadows on all form input types */ wa-input:not(:focus), - wa-input:not([appearance=filled]):not([disabled]), - wa-select:not([appearance=filled]):not([disabled]) { + wa-input:not([appearance='filled']):not([disabled]), + wa-select:not([appearance='filled']):not([disabled]) { --box-shadow: var(--wa-shadow-level-0); --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width); } diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css index d3c98cca4..465a42629 100644 --- a/src/styles/themes/classic.css +++ b/src/styles/themes/classic.css @@ -434,9 +434,9 @@ wa-drawer { --spacing: var(--wa-space-l); } -wa-input:not([appearance=filled]), -wa-select:not([appearance=filled]), -wa-textarea:not([appearance=filled]) { +wa-input:not([appearance='filled']), +wa-select:not([appearance='filled']), +wa-textarea:not([appearance='filled']) { --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) color-mix(in oklab, var(--wa-color-focus), transparent 50%); --wa-focus-ring-offset: 0; diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css index 31a21ba62..5fda48d5a 100644 --- a/src/styles/themes/playful.css +++ b/src/styles/themes/playful.css @@ -500,9 +500,9 @@ /* preventing shadows on all form input types */ wa-input:not(:focus), - wa-input:not([appearance=filled]):not([disabled]), + wa-input:not([appearance='filled']):not([disabled]), wa-checkbox:not([checked]):not([indeterminate]), - wa-select:not([appearance=filled]):not([disabled]) { + wa-select:not([appearance='filled']):not([disabled]) { --box-shadow: var(--wa-shadow-level-0); }