diff --git a/19dee3-virtual-try-on-application/virtual-try-on-app.gts b/19dee3-virtual-try-on-application/virtual-try-on-app.gts index c6b3cd33..393d2663 100644 --- a/19dee3-virtual-try-on-application/virtual-try-on-app.gts +++ b/19dee3-virtual-try-on-application/virtual-try-on-app.gts @@ -726,8 +726,8 @@ class IsolatedTemplate extends Component { this.newItemName = (event.target as HTMLInputElement).value; } - @action setCategory(cat: string): void { - this.newItemCategory = cat; + @action setCategory(cat: string | null): void { + this.newItemCategory = cat ?? ''; } @action stopModalPropagation(event: Event): void { diff --git a/46f065-popover/example/popover-playground-example.gts b/46f065-popover/example/popover-playground-example.gts index 649f8018..56c3db60 100644 --- a/46f065-popover/example/popover-playground-example.gts +++ b/46f065-popover/example/popover-playground-example.gts @@ -36,11 +36,16 @@ import CodeSnippet from '@cardstack/catalog/components/code-snippet'; * between them. */ class PopoverPlaygroundIsolated extends Component { - kindOptions = ['details', 'edit', 'tools']; - anchoringOptions = ['beside', 'overlay', 'center']; - sizeOptions = ['compact', 'comfortable', 'spacious', 'auto']; - backdropOptions = ['none', 'tint', 'blur', 'dim']; - elevationOptions = ['flat', 'raised', 'elevated', 'floating']; + kindOptions: PopoverKind[] = ['details', 'edit', 'tools']; + anchoringOptions: PopoverAnchoring[] = ['beside', 'overlay', 'center']; + sizeOptions: PopoverSize[] = ['compact', 'comfortable', 'spacious', 'auto']; + backdropOptions: PopoverBackdrop[] = ['none', 'tint', 'blur', 'dim']; + elevationOptions: PopoverElevation[] = [ + 'flat', + 'raised', + 'elevated', + 'floating', + ]; keyboardOptions = ['none', 'pick', 'edit']; trapFocusOptions = ['off', 'on']; @@ -90,7 +95,8 @@ class PopoverPlaygroundIsolated extends Component { return this.pickOptions[this.pickIndex] ?? '—'; } - setPickByLabel = (label: string): void => { + setPickByLabel = (label: string | null): void => { + if (label === null) return; const index = this.pickOptions.indexOf(label); if (index >= 0) this.pickIndex = index; }; @@ -135,15 +141,15 @@ class PopoverPlaygroundIsolated extends Component { return this.arrowOn ? true : undefined; } - setPlacement = (value: Placement): void => { - this.placement = value; + setPlacement = (value: Placement | null): void => { + if (value) this.placement = value; }; - setOffset = (value: string): void => { - this.offset = Number(value); + setOffset = (value: string | null): void => { + if (value !== null) this.offset = Number(value); }; - setArrow = (value: string): void => { + setArrow = (value: string | null): void => { this.arrowOn = value === 'on'; }; @@ -205,29 +211,29 @@ class PopoverPlaygroundIsolated extends Component { return lines.join('\n'); } - setKind = (value: PopoverKind): void => { - this.kind = value; + setKind = (value: PopoverKind | null): void => { + if (value) this.kind = value; }; - setAnchoring = (value: PopoverAnchoring): void => { - this.anchoring = value; + setAnchoring = (value: PopoverAnchoring | null): void => { + if (value) this.anchoring = value; }; - setSize = (value: PopoverSize): void => { - this.size = value; + setSize = (value: PopoverSize | null): void => { + if (value) this.size = value; }; - setBackdrop = (value: PopoverBackdrop): void => { - this.backdrop = value; + setBackdrop = (value: PopoverBackdrop | null): void => { + if (value) this.backdrop = value; }; - setElevation = (value: PopoverElevation): void => { - this.elevation = value; + setElevation = (value: PopoverElevation | null): void => { + if (value) this.elevation = value; }; - setKeyboard = (value: string): void => { + setKeyboard = (value: string | null): void => { this.keyboard = - value === 'none' ? undefined : (value as PopoverKeyboardModel); + !value || value === 'none' ? undefined : (value as PopoverKeyboardModel); }; get keyboardChoice(): string { @@ -245,12 +251,12 @@ class PopoverPlaygroundIsolated extends Component { return this.trapFocusOn ? true : undefined; } - setTrapFocus = (value: string): void => { + setTrapFocus = (value: string | null): void => { this.trapFocusOn = value === 'on'; }; - setAutoFocus = (value: string): void => { - this.autoFocusChoice = value; + setAutoFocus = (value: string | null): void => { + this.autoFocusChoice = value ?? 'default'; }; escalationOptions = ['off', 'on']; @@ -259,7 +265,7 @@ class PopoverPlaygroundIsolated extends Component { return this.escalationEnabled ? 'on' : 'off'; } - setEscalation = (value: string): void => { + setEscalation = (value: string | null): void => { this.escalationEnabled = value === 'on'; }; diff --git a/aef6db-stepper/example/stepper-playground-example.gts b/aef6db-stepper/example/stepper-playground-example.gts index 4dc68375..a2bb3b13 100644 --- a/aef6db-stepper/example/stepper-playground-example.gts +++ b/aef6db-stepper/example/stepper-playground-example.gts @@ -38,13 +38,13 @@ class StepperPlaygroundIsolated extends Component { @tracked modalOn = false; @tracked jumpOn = false; - setModal = (value: string): void => { + setModal = (value: string | null): void => { this.modalOn = value === 'modal'; // Re-open the demo when switching into modal so there is something // to see behind the knob. if (this.modalOn) this.dismissed = false; }; - setJump = (value: string): void => { + setJump = (value: string | null): void => { this.jumpOn = value === 'on'; }; @@ -67,8 +67,8 @@ class StepperPlaygroundIsolated extends Component { setName = (event: Event): void => { this.name = (event.target as HTMLInputElement).value; }; - setWorkspace = (value: string): void => { - this.workspace = value; + setWorkspace = (value: string | null): void => { + this.workspace = value ?? undefined; }; invite = (): void => { this.invited += 1; diff --git a/catalog-app/listing/listing.gts b/catalog-app/listing/listing.gts index aebb3d17..59bc45f0 100644 --- a/catalog-app/listing/listing.gts +++ b/catalog-app/listing/listing.gts @@ -392,7 +392,10 @@ class EmbeddedTemplate extends Component { }} data-test-spec-card={{spec.id}} > - + {{/let}} {{/each}} @@ -747,6 +750,7 @@ class EmbeddedTemplate extends Component { gap: 0.75rem; } .include-card { + min-height: 3.5rem; border: 1px solid var(--border, #e7e3d8); border-radius: 0.5rem; } diff --git a/fields/audio/components/base-audio-player.gts b/fields/audio/components/base-audio-player.gts index a0e350c4..7fa41419 100644 --- a/fields/audio/components/base-audio-player.gts +++ b/fields/audio/components/base-audio-player.gts @@ -321,8 +321,8 @@ export class BaseAudioPlayer extends GlimmerComponent } @action - handleSpeedChange(selected: { value: number }): void { - if (!this.audioElement) return; + handleSpeedChange(selected: { value: number } | null): void { + if (!this.audioElement || !selected) return; this.playbackRate = selected.value; this.audioElement.playbackRate = this.playbackRate; } diff --git a/fields/contact-link/contact-link.gts b/fields/contact-link/contact-link.gts index 12c486fd..de100df1 100644 --- a/fields/contact-link/contact-link.gts +++ b/fields/contact-link/contact-link.gts @@ -97,7 +97,9 @@ export default class ContactLinkField extends FieldDef { options = this.args.model.items ?? []; - onSelect = (option: ContactLink) => (this.args.model.label = option.label); + onSelect = (option: ContactLink | null) => { + this.args.model.label = option?.label; + }; get selectedOption() { return this.options?.find(