From 4b56a031445a6d6e2eeff07b633faa7bf58a9da1 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 13 Dec 2024 13:56:42 -0500 Subject: [PATCH] Convert component shadow styles to CSS files too --- src/components/checkbox/checkbox.ts | 2 +- src/components/color-picker/color-picker.ts | 2 +- src/components/input/input.ts | 2 +- src/components/radio-group/radio-group.ts | 2 +- src/components/range/range.ts | 2 +- src/components/select/select.ts | 2 +- src/components/switch/switch.ts | 2 +- src/components/textarea/textarea.ts | 2 +- src/internal/webawesome-element.ts | 8 ++- src/styles/component.styles.ts | 17 ------ src/styles/form-control.styles.ts | 61 --------------------- src/styles/shadow/component.css | 13 +++++ src/styles/shadow/form-control.css | 57 +++++++++++++++++++ 13 files changed, 83 insertions(+), 89 deletions(-) delete mode 100644 src/styles/component.styles.ts delete mode 100644 src/styles/form-control.styles.ts create mode 100644 src/styles/shadow/component.css create mode 100644 src/styles/shadow/form-control.css diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 5f2748221..b0730c505 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -12,7 +12,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './checkbox.css'; import type { PropertyValues } from 'lit'; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index efb944c49..116444dc6 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -22,7 +22,7 @@ import { WaInputEvent } from '../../events/input.js'; import { WaInvalidEvent } from '../../events/invalid.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './color-picker.css'; import type { PropertyValues } from 'lit'; import type WaDropdown from '../dropdown/dropdown.js'; diff --git a/src/components/input/input.ts b/src/components/input/input.ts index ed93412ae..8bc79822c 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -14,7 +14,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './input.css'; import type WaButton from '../button/button.js'; diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 5021a6414..38c8452a8 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -10,7 +10,7 @@ import { WaChangeEvent } from '../../events/change.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './radio-group.css'; import type WaRadio from '../radio/radio.js'; import type WaRadioButton from '../radio-button/radio-button.js'; diff --git a/src/components/range/range.ts b/src/components/range/range.ts index b86e899bc..5ef58d703 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -12,7 +12,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './range.css'; /** diff --git a/src/components/select/select.ts b/src/components/select/select.ts index fc900b8d0..67c44ac3a 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -22,7 +22,7 @@ import { waitForEvent } from '../../internal/event.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './select.css'; import type { TemplateResult } from 'lit'; import type { WaRemoveEvent } from '../../events/remove.js'; diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index ca91cd358..dfaf49b74 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -11,7 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './switch.css'; import type { PropertyValues } from 'lit'; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 5588efacf..cd81f9968 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -11,7 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import formControlStyles from '../../styles/form-control.styles.js'; +import formControlStyles from '../../styles/shadow/form-control.css'; import styles from './textarea.css'; /** diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 1ca0262bf..e0c0bbd30 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -2,7 +2,7 @@ import { CustomErrorValidator } from './validators/custom-error-validator.js'; import { isServer, LitElement, unsafeCSS } from 'lit'; import { property } from 'lit/decorators.js'; import { WaInvalidEvent } from '../events/invalid.js'; -import componentStyles from '../styles/component.styles.js'; +import componentStyles from '../styles/shadow/component.css'; import type { CSSResult, CSSResultGroup, PropertyValues } from 'lit'; export default class WebAwesomeElement extends LitElement { @@ -26,9 +26,11 @@ export default class WebAwesomeElement extends LitElement { : []; // Convert any string styles to Lit’s CSSResult - const shadowStyles = shadowStyle.map(style => (typeof style === 'string' ? unsafeCSS(style) : style)); + const shadowStyles = [componentStyles, ...shadowStyle].map(style => + typeof style === 'string' ? unsafeCSS(style) : style + ); - return [componentStyles, ...shadowStyles]; + return shadowStyles; } @property({ type: Boolean, reflect: true, attribute: 'did-ssr' }) didSSR = isServer || Boolean(this.shadowRoot); diff --git a/src/styles/component.styles.ts b/src/styles/component.styles.ts deleted file mode 100644 index 510b37dbd..000000000 --- a/src/styles/component.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - box-sizing: border-box !important; - } - - :host *, - :host *::before, - :host *::after { - box-sizing: inherit !important; - } - - [hidden] { - display: none !important; - } -`; diff --git a/src/styles/form-control.styles.ts b/src/styles/form-control.styles.ts deleted file mode 100644 index 99c2426df..000000000 --- a/src/styles/form-control.styles.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { css } from 'lit'; - -export default css` - .form-control .form-control__label { - display: none; - } - - .form-control .form-control__help-text { - display: none; - } - - /* Label */ - .form-control--has-label .form-control__label { - display: inline-block; - color: var(--wa-form-control-label-color); - font-weight: var(--wa-form-control-label-font-weight); - line-height: var(--wa-form-control-label-line-height); - margin-bottom: var(--wa-space-3xs); - } - - .form-control--has-label.form-control--small .form-control__label { - font-size: var(--wa-font-size-s); - } - - .form-control--has-label.form-control--medium .form-control__label { - font-size: var(--wa-font-size-m); - } - - .form-control--has-label.form-control--large .form-control__label { - font-size: var(--wa-font-size-l); - } - - :host([required]) .form-control--has-label .form-control__label::after { - content: var(--wa-form-control-required-content); - margin-inline-start: var(--wa-form-control-required-content-offset); - color: var(--wa-form-control-required-content-color); - } - - /* Help text */ - .form-control--has-help-text .form-control__help-text { - display: block; - color: var(--wa-color-text-quiet); - margin-top: var(--wa-space-3xs); - } - - .form-control--has-help-text.form-control--small .form-control__help-text { - font-size: var(--wa-font-size-xs); - } - - .form-control--has-help-text.form-control--medium .form-control__help-text { - font-size: var(--wa-font-size-s); - } - - .form-control--has-help-text.form-control--large .form-control__help-text { - font-size: var(--wa-font-size-m); - } - - .form-control--has-help-text.form-control--radio-group .form-control__help-text { - margin-top: var(--wa-space-2xs); - } -`; diff --git a/src/styles/shadow/component.css b/src/styles/shadow/component.css new file mode 100644 index 000000000..7239526e1 --- /dev/null +++ b/src/styles/shadow/component.css @@ -0,0 +1,13 @@ +:host { + box-sizing: border-box !important; +} + +:host *, +:host *::before, +:host *::after { + box-sizing: inherit !important; +} + +[hidden] { + display: none !important; +} diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css new file mode 100644 index 000000000..6b827f4d7 --- /dev/null +++ b/src/styles/shadow/form-control.css @@ -0,0 +1,57 @@ +.form-control .form-control__label { + display: none; +} + +.form-control .form-control__help-text { + display: none; +} + +/* Label */ +.form-control--has-label .form-control__label { + display: inline-block; + color: var(--wa-form-control-label-color); + font-weight: var(--wa-form-control-label-font-weight); + line-height: var(--wa-form-control-label-line-height); + margin-bottom: var(--wa-space-3xs); +} + +.form-control--has-label.form-control--small .form-control__label { + font-size: var(--wa-font-size-s); +} + +.form-control--has-label.form-control--medium .form-control__label { + font-size: var(--wa-font-size-m); +} + +.form-control--has-label.form-control--large .form-control__label { + font-size: var(--wa-font-size-l); +} + +:host([required]) .form-control--has-label .form-control__label::after { + content: var(--wa-form-control-required-content); + margin-inline-start: var(--wa-form-control-required-content-offset); + color: var(--wa-form-control-required-content-color); +} + +/* Help text */ +.form-control--has-help-text .form-control__help-text { + display: block; + color: var(--wa-color-text-quiet); + margin-top: var(--wa-space-3xs); +} + +.form-control--has-help-text.form-control--small .form-control__help-text { + font-size: var(--wa-font-size-xs); +} + +.form-control--has-help-text.form-control--medium .form-control__help-text { + font-size: var(--wa-font-size-s); +} + +.form-control--has-help-text.form-control--large .form-control__help-text { + font-size: var(--wa-font-size-m); +} + +.form-control--has-help-text.form-control--radio-group .form-control__help-text { + margin-top: var(--wa-space-2xs); +}