feature: Add pickerType prop with custom popper-based dropdown to modus-wc-time-input - #1201
Draft
ElishaSamPeterPrabhu wants to merge 6 commits into
Draft
feature: Add pickerType prop with custom popper-based dropdown to modus-wc-time-input#1201ElishaSamPeterPrabhu wants to merge 6 commits into
ElishaSamPeterPrabhu wants to merge 6 commits into
Conversation
…us-wc-time-input - Add pickerType?: 'picker' | 'datalist' prop; when undefined, native browser time picker is preserved (backwards compatible) - Add use12Hour?: boolean prop for 12-hour AM/PM format display in picker columns - picker type: renders side-by-side scrollable columns (hours, minutes, optional seconds, optional AM/PM) - datalist type: renders flat popper panel from datalistOptions with hardcoded 'Other' option for free-text entry - Use @popperjs/core with placement: bottom-start, strategy: fixed, offset [0, 4] and flip modifier - Close dropdown on outside click (@listen('click', { target: 'document' })) and Escape key - When pickerType is set, render type="text" readonly input to suppress native picker - Add dropdown panel SCSS with design tokens: border-radius 16px, primary-pale selected highlight (#DCEDF9) - Add WithPicker, WithPickerSeconds, WithPickerDatalist stories - Add comprehensive unit and snapshot tests covering picker/datalist rendering, selection, AM/PM toggling, and dropdown state Co-authored-by: Elisha Sam Peter Prabhu <ElishaSamPeterPrabhu@users.noreply.github.com>
ElishaSamPeterPrabhu
had a problem deploying
to
qa-review
June 25, 2026 07:46 — with 
GitHub Actions
Failure
GitHub Actions
Failure
Contributor
🚀 Blazor Story PreviewPreview is available at: https://trimble-oss.github.io/modus-wc-2.0/pr-preview/pr-1201/blazor/ |
- SCSS: replace #ffffff with #fff and rgba() with rgb() to satisfy stylelint color rules
- Spec: replace (instance as any) casts with bracket notation instance['prop'] following codebase convention
- Spec: remove unnecessary 'as HTMLButtonElement' assertions on querySelectorAll('button') results
- Run prettier on spec and tsx files
Co-authored-by: Elisha Sam Peter Prabhu <ElishaSamPeterPrabhu@users.noreply.github.com>
Contributor
🚀 Storybook PreviewPreview is available at: https://trimble-oss.github.io/modus-wc-2.0/pr-preview/pr-1201/ |
SCSS/design tokens (from Figma node 44494:96164): - Panel padding: 8px (--t-spacing/2) all sides - Column gap: 12px between picker columns - Column max-height: 220px (6 items × 40px – 5 × 4px overlap = correct height matching 236px total panel) - Item margin-bottom: -4px (last child: 0) matching Figma negative overlap pattern - Item line-height: 24px - Colors mapped to --modus-wc-color-base-200 (border), --modus-wc-color-base-content (text), --rounded-box (radius) - Datalist panel: overflow hidden instead of explicit padding Coverage (100% on all metrics): - Add tests for disconnectedCallback popper cleanup - Add tests for handleFreeInputChange and handleFreeInputBlur - Add tests for handlePickerHour AM branches (hour=12→midnight, hour≠12→direct) - Add tests for handlePickerSecond - Add tests for handlePickerAmPm no-op (AM when AM) and PM→AM - Add tests for disabled/readOnly click early return - Add tests for empty value display - Simplify parseTimeValue to destructuring with defaults; mark unreachable defaults and setTimeout with istanbul ignore next Co-authored-by: Elisha Sam Peter Prabhu <ElishaSamPeterPrabhu@users.noreply.github.com>
- Make renderPickerColumn generic <T extends number | string> to fix type mismatch between handlers (number) and AM/PM handler (string) - Explicitly type ampmItems value as 'AM' | 'PM' literal union - Fix pre-existing modus-wc-autocomplete.spec.ts cast via unknown to unblock stencil build (unrelated to time-picker feature) Co-authored-by: Elisha Sam Peter Prabhu <ElishaSamPeterPrabhu@users.noreply.github.com>
Co-authored-by: Elisha Sam Peter Prabhu <ElishaSamPeterPrabhu@users.noreply.github.com>
ElishaSamPeterPrabhu
had a problem deploying
to
qa-review
June 25, 2026 14:47 — with
GitHub Actions
Failure
GitHub Actions
Failure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📄 Summary of Changes
Adds a new optional
pickerTypeprop tomodus-wc-time-inputthat renders a custom Popper.js-powered dropdown instead of the native browser time picker. The default behavior (nopickerType) is fully backwards compatible.New props:
pickerType?: 'picker' | 'datalist'— controls which custom dropdown to renderuse12Hour?: boolean(HTML attribute:use12-hour) — shows AM/PM column in picker modepicker type renders side-by-side scrollable columns:
use12Hour)showSecondsis trueuse12Houris truevar(--modus-wc-color-primary-pale, #DCEDF9)datalist type renders a flat popper panel:
datalistOptionsShared dropdown behavior:
@popperjs/corewithplacement: 'bottom-start',strategy: 'fixed',offset: [0, 4], flip modifier (matchingmodus-wc-datelifecycle pattern)pickerTypeis set, renders<input type="text" readonly>to prevent native browser pickerDesign tokens (from Figma node 44494:96164):
--modus-wc-color-base-pagebackground,1px solid var(--modus-wc-color-base-200)border,var(--rounded-box, 16px)border-radius, shadow8px(--t-spacing/2from Figma)12pxbetween picker columns220px(6 items × 40px − 5 × 4px negative overlap = correct height; total panel including padding = 236px matching Figma)padding: 8px 16px,border-radius: var(--modus-wc-border-radius-btn, 8px),font-size: var(--modus-wc-font-size-sm, 14px),line-height: 24px,margin-bottom: -4px(last-child resets to 0)var(--modus-wc-color-primary-pale, #DCEDF9)var(--modus-wc-color-base-content, #171c1e)Files changed:
modus-wc-time-input.tsx— new props, popper lifecycle, picker/datalist render methodsmodus-wc-time-input.scss— dropdown panel and item styles with correct Figma tokensmodus-wc-time-input.stories.ts—WithPicker,WithPickerSeconds,WithPickerDataliststoriesmodus-wc-time-input.spec.ts— comprehensive tests covering all branches; 100% coverage💭 Type of Change
📋 Test Plan
All 1495 unit tests pass with 100% code coverage on
modus-wc-time-input.tsx(statements, branches, functions, lines). Tests cover:pickerTypeis undefinedpickerTypeis setdisconnectedCallback✅ Self Code Review Checklist
🔗 Work Item
Issue #