Skip to content

refactor: Input & DatePicker - Svelte 5 & afterLabel snippet#3479

Open
tegan-temporal wants to merge 6 commits into
mainfrom
tegan/date-picker-refactor
Open

refactor: Input & DatePicker - Svelte 5 & afterLabel snippet#3479
tegan-temporal wants to merge 6 commits into
mainfrom
tegan/date-picker-refactor

Conversation

@tegan-temporal
Copy link
Copy Markdown
Contributor

@tegan-temporal tegan-temporal commented May 29, 2026

Description & motivation 💭

Refactor DatePicker and Input to Svelte 5 syntax AND add a afterLabel snippet prop.

The point of the refactor is to support tooltips next to the label like this:

Screenshot 2026-05-29 at 11 02 04 AM

The label on inputs no longer has flex-grow on it. I didn't find any cases where it would be an issue... if I didn't remove it, I would have to render the afterLabel snippet inside the <label> which would be wonky when it comes to click handlers and I wanted to avoid that.

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

  • Find various Inputs and a DatePickers and double check they still look correct.

Checklists

Draft Checklist

Merge Checklist

Requires a follow up Cloud UI PR since the Svelte 5 refactor is breaking: https://github.com/temporalio/cloud-ui/pull/2708

Issue(s)

Related to https://temporalio.atlassian.net/browse/DT-3906
and https://temporalio.atlassian.net/browse/DT-3565

@tegan-temporal tegan-temporal self-assigned this May 29, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment May 29, 2026 6:37pm

Request Review

@@ -92,7 +92,7 @@
id="advanced-search"
placeholder={translate('common.query')}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'string | null' is not assignable to type 'string | undefined'.

@@ -107,7 +107,7 @@
label={translate('common.workflow-id')}
labelHidden
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'string | undefined' is not assignable to type 'string'.

@@ -117,7 +117,7 @@
label={translate('common.workflow-type')}
labelHidden
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'string | undefined' is not assignable to type 'string'.

value = $bindable(),
label,
afterLabel,
labelHidden = false,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'null' is not assignable to type '"search" | "link" | "success" | "error" | "action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | ... 140 more ... | "xmark-square"'.


<div class={merge('group flex flex-col gap-1', className)}>
<Label {required} {label} hidden={labelHidden} for={id} />
<div class="flex items-center justify-start gap-2">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ⚠️ Type 'boolean | null' is not assignable to type 'boolean | undefined'.

@temporal-cicd
Copy link
Copy Markdown
Contributor

temporal-cicd Bot commented May 29, 2026

Warnings
⚠️

📊 Strict Mode: 58 errors in 11 files (6.5% of 887 total)

src/lib/holocene/input/input.svelte (2)
  • L48:4: Type 'null' is not assignable to type '"search" | "link" | "success" | "error" | "action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | ... 140 more ... | "xmark-square"'.
  • L96:27: Type 'boolean | null' is not assignable to type 'boolean | undefined'.
src/lib/components/search.svelte (1)
  • L48:4: Type '"search" | null' is not assignable to type '"search" | "link" | "success" | "error" | "action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | ... 141 more ... | undefined'.
src/lib/components/search-attribute-filter/dropdown-filter-chip.svelte (1)
  • L335:12: Type 'null' is not assignable to type 'string'.
src/lib/components/workflow/filter-bar/view-modal.svelte (7)
  • L48:4: Type 'boolean | undefined' is not assignable to type 'boolean'.
  • L104:8: Type 'string | null' is not assignable to type 'string'.
  • L116:8: Type 'string | null' is not assignable to type 'string'.
  • L143:6: Type 'string | null' is not assignable to type 'string'.
  • L151:4: Cannot invoke an object which is possibly 'undefined'.
  • L151:17: Argument of type 'SavedQuery | undefined' is not assignable to parameter of type 'SavedQuery'.
  • L157:7: Type 'boolean | undefined' is not assignable to type 'boolean'.
src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte (5)
  • L143:6: Type 'ClientValidationAdapter<{ encoding: "json/plain" | "json/protobuf"; namespace: string; identity: string; activityId: string; taskQueue: string; activityType: string; initialInterval: string; maximumInterval: string; ... 11 more ...; idConflictPolicy?: string | undefined; }, { ...; }>' is not assignable to type 'ClientValidationAdapter<Partial<{ input: string; messageType: string; scheduleToStartTimeout: string; summary: string; details: string; heartbeatTimeout: string; initialInterval: string; backoffCoefficient: null; ... 11 more ...; scheduleToCloseTimeout: string | undefined; }>, Record<...>> | ValidatorsOption<...> | ...'.
  • L318:11: Type 'string | undefined' is not assignable to type 'string'.
  • L330:11: Type 'string | undefined' is not assignable to type 'string'.
  • L396:13: Type 'null' is not assignable to type 'string'.
  • L398:13: Type 'null' is not assignable to type 'string'.
src/lib/components/workflow/workflow-filters.svelte (6)
  • L93:6: Type 'string | null' is not assignable to type 'string | undefined'.
  • L108:13: Type 'string | undefined' is not assignable to type 'string'.
  • L118:13: Type 'string | undefined' is not assignable to type 'string'.
  • L127:16: Type 'null' is not assignable to type 'SelectOptionValue'.
  • L138:13: Type 'WorkflowStatus | undefined' is not assignable to type 'SelectOptionValue'.
  • L142:19: Type 'string | null' is not assignable to type 'SelectOptionValue'.
src/lib/components/workflow/filter-bar/manual-query.svelte (1)
  • L25:20: Argument of type 'string | null' is not assignable to parameter of type 'string'.
src/lib/holocene/api-pagination.svelte (11)
  • L57:13: Type 'undefined' is not assignable to type '(error: Error) => void | undefined'.
  • L59:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'.
  • L60:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'.
  • L62:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'.
  • L74:13: Type 'undefined' is not assignable to type 'string'.
  • L87:15: Type 'undefined' is not assignable to type 'Error'.
  • L110:20: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'.
  • L113:6: Type 'unknown' is not assignable to type 'Error'.
  • L129:22: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'.
  • L192:20: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'.
  • L195:6: Type 'unknown' is not assignable to type 'Error'.
src/lib/holocene/date-picker.stories.svelte (1)
  • L53:25: Binding element 'canvasElement' implicitly has an 'any' type.
src/lib/pages/schedule-view.svelte (19)
  • L138:18: Property 'message' does not exist on type '{}'.
  • L300:20: 'schedule.schedule' is possibly 'undefined'.
  • L300:20: 'schedule.schedule.state' is possibly 'null' or 'undefined'.
  • L400:12: Type 'IScheduleActionResult[] | null | undefined' is not assignable to type 'IScheduleActionResult[] | undefined'.
  • L404:12: Type 'ITimestamp[] | null | undefined' is not assignable to type 'ITimestamp[] | undefined'.
  • L407:12: Type 'IScheduleSpec | null | undefined' is not assignable to type 'IScheduleSpec'.
  • L408:12: Type 'IScheduleState | null | undefined' is not assignable to type 'IScheduleState'.
  • L409:12: Type 'ISchedulePolicies | null | undefined' is not assignable to type 'ISchedulePolicies'.
  • L410:12: Type 'string | null | undefined' is not assignable to type 'string | undefined'.
  • L419:12: Type 'IPayloads | null | undefined' is not assignable to type 'IPayloads'.
  • L421:34: Type 'IScheduleSpec | null | undefined' is not assignable to type 'IScheduleSpec'.
  • L429:19: 'schedule.schedule' is possibly 'undefined'.
  • L429:19: 'schedule.schedule.state' is possibly 'null' or 'undefined'.
  • L438:9: 'schedule.schedule' is possibly 'undefined'.
  • L438:9: 'schedule.schedule.state' is possibly 'null' or 'undefined'.
  • L444:11: 'schedule.schedule' is possibly 'undefined'.
  • L444:11: 'schedule.schedule.state' is possibly 'null' or 'undefined'.
  • L453:11: 'schedule.schedule' is possibly 'undefined'.
  • L453:11: 'schedule.schedule.state' is possibly 'null' or 'undefined'.
src/lib/pages/start-workflow.svelte (4)
  • L139:17: Property 'message' does not exist on type '{}'.
  • L161:20: 'pollers' is possibly 'null' or 'undefined'.
  • L240:20: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  • L322:15: Type 'SearchAttributeInput[]' is not assignable to type '{ type: "Unspecified" | "Keyword" | "Text" | "Int" | "Double" | "Bool" | "KeywordList" | "Datetime"; label: string; value?: any; }[]'.

Generated by 🚫 dangerJS against 4152ab6

@tegan-temporal tegan-temporal marked this pull request as ready for review May 29, 2026 18:24
@tegan-temporal tegan-temporal requested a review from a team as a code owner May 29, 2026 18:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant