From 6644288f2b7c6064bcaa5ad9372793ef3d66b605 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 10 Jan 2025 12:29:12 -0500 Subject: [PATCH] Experiment --- docs/_data/componentList.js | 14 +++++++++++- docs/_utils/filters.js | 12 ++++++++++ docs/docs/test/styling.njk | 36 ++++++++++++++++++++++++++++++ src/components/button/button.ts | 17 +++++++++----- src/components/tag/tag.ts | 18 +++++++++------ src/internal/styling-attributes.ts | 16 +++++++++++++ 6 files changed, 99 insertions(+), 14 deletions(-) create mode 100644 docs/docs/test/styling.njk create mode 100644 src/internal/styling-attributes.ts diff --git a/docs/_data/componentList.js b/docs/_data/componentList.js index 9148af311..238df6386 100644 --- a/docs/_data/componentList.js +++ b/docs/_data/componentList.js @@ -31,13 +31,25 @@ const components = manifest.modules.flatMap(module => { return prop.kind === 'field' && prop.privacy !== 'private'; }); - return { + let ret = { ...declaration, slug: declaration.tagName.replace(/^wa-/, ''), methods, attributes, properties, }; + + // Add named keys to these arrays + for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) { + if (ret[thing]) { + ret[thing] = ret[thing].reduce((acc, item) => { + acc[item.name] = item; + return acc; + }, ret[thing]); + } + } + + return ret; }); }); diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js index 171081a63..d6255f1b4 100644 --- a/docs/_utils/filters.js +++ b/docs/_utils/filters.js @@ -14,6 +14,18 @@ export function trimPipes(content) { return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content; } +export function stripQuotes(content) { + return content.replace(/^(['"])(.+)\1$/g, '$2'); +} + +export function getEnumValues(type) { + return type + .split('|') + .map(value => value.trim()) + .filter(Boolean) + .map(stripQuotes); +} + export function keys(obj) { return Object.keys(obj); } diff --git a/docs/docs/test/styling.njk b/docs/docs/test/styling.njk new file mode 100644 index 000000000..830e62d85 --- /dev/null +++ b/docs/docs/test/styling.njk @@ -0,0 +1,36 @@ +--- +title: Styling Tests +--- + +

Appearance and variant tests

+ +{% for component in componentsBy.attribute.variant %} +{%- if component.attributes.appearance -%} +

<{{ component.tagName }}>

+ +{% set variantValues = component.attributes.variant.type.text | getEnumValues %} +{% set appearanceValues = component.attributes.appearance.type.text | getEnumValues %} + + + + + + {% for appearance in appearanceValues %} + + {%- endfor %} + + +{% for variant in variantValues %} + + + {% for appearance in appearanceValues %} + + {%- endfor %} + +{%- endfor %} +
Variant{{ appearance }}
{{ variant }} + <{{ component.tagName }} variant={{ variant }} appearance={{ appearance }}>{{ variant }} {{ appearance }} +
+ +{% endif %} +{%- endfor %} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index dc1e7cabc..117da036f 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -5,13 +5,18 @@ import { html, literal } from 'lit/static-html.js'; import { WaBlurEvent } from '../../events/blur.js'; import { WaFocusEvent } from '../../events/focus.js'; import { WaInvalidEvent } from '../../events/invalid.js'; +import { + appearanceStyles, + sizeStyles, + variantStyles, + type AppearanceAttribute, + type SizeAttribute, + type VariantAttribute, +} from '../../internal/styling-attributes.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js'; import nativeStyles from '../../styles/native/button.css'; -import appearanceStyles from '../../styles/utilities/appearance.css'; -import sizeStyles from '../../styles/utilities/size.css'; -import variantStyles from '../../styles/utilities/variants.css'; import { LocalizeController } from '../../utilities/localize.js'; import '../icon/icon.js'; import '../spinner/spinner.js'; @@ -69,13 +74,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { @property() title = ''; // make reactive to pass through /** The button's theme variant. */ - @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; + @property({ reflect: true }) variant: VariantAttribute = 'neutral'; /** The button's visual appearance. */ - @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent'; + @property({ reflect: true }) appearance: AppearanceAttribute = 'accent'; /** The button's size. */ - @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; + @property({ reflect: true }) size: SizeAttribute = 'medium'; /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */ @property({ type: Boolean, reflect: true }) caret = false; diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index 97353e89a..828189776 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -1,10 +1,15 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { WaRemoveEvent } from '../../events/remove.js'; +import { + appearanceStyles, + sizeStyles, + variantStyles, + type AppearanceAttribute, + type SizeAttribute, + type VariantAttribute, +} from '../../internal/styling-attributes.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; -import appearanceStyles from '../../styles/utilities/appearance.css'; -import sizeStyles from '../../styles/utilities/size.css'; -import variantStyles from '../../styles/utilities/variants.css'; import { LocalizeController } from '../../utilities/localize.js'; import '../icon-button/icon-button.js'; import styles from './tag.css'; @@ -33,14 +38,13 @@ export default class WaTag extends WebAwesomeElement { private readonly localize = new LocalizeController(this); /** The tag's theme variant. */ - @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral'; + @property({ reflect: true }) variant: VariantAttribute = 'neutral'; /** The tag's visual appearance. */ - @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' = - 'outlined filled'; + @property({ reflect: true }) appearance: AppearanceAttribute = 'outlined filled'; /** The tag's size. */ - @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; + @property({ reflect: true }) size: SizeAttribute = 'medium'; /** Draws a pill-style tag with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; diff --git a/src/internal/styling-attributes.ts b/src/internal/styling-attributes.ts new file mode 100644 index 000000000..406e944b9 --- /dev/null +++ b/src/internal/styling-attributes.ts @@ -0,0 +1,16 @@ +export { default as appearanceStyles } from '../styles/utilities/appearance.css'; +export { default as sizeStyles } from '../styles/utilities/size.css'; +export { default as variantStyles } from '../styles/utilities/variants.css'; + +export type AppearanceAttribute = + | 'outlined' + | 'accent' + | 'outlined accent' + | 'accent outlined' + | 'filled' + | 'outlined filled' + | 'filled outlined' + | 'plain'; + +export type VariantAttribute = 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'; +export type SizeAttribute = 'small' | 'medium' | 'large';