Skip to content

fix(HMX-9126): Fix zeta select input and option for long inputs#194

Merged
thelukewalton merged 3 commits intomainfrom
HMX-9126
Apr 7, 2026
Merged

fix(HMX-9126): Fix zeta select input and option for long inputs#194
thelukewalton merged 3 commits intomainfrom
HMX-9126

Conversation

@thelukewalton
Copy link
Copy Markdown
Collaborator

No description provided.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

Visit the preview URL for this PR (updated for commit b3b88df):

https://zeta-web-main--pr-194-hmx-9126-d2b4wefg.web.app

(expires Tue, 14 Apr 2026 10:45:10 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: cc82fb52ba05c9ecc7f0b92ab81ac4a31b88d893

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR addresses truncation/overflow issues for long placeholder/selected text in zeta-select-input and long option labels in zeta-option by introducing dedicated part wrappers and corresponding truncation styles.

Changes:

  • Wrap select input display text in a new part="input-text" span and add ellipsis truncation styling.
  • Wrap option slot content in a new part="option-text" span and add multi-line clamping styling.
  • Add/extend tests for the new parts and update the Storybook story to exercise long option content.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/test/select-input/select-input.test.ts Updates assertions and adds coverage for the new input-text part behavior.
src/test/select-input/option.test.ts Adds new tests validating option-text part and interaction events.
src/stories/components/Select Input/select-input.stories.ts Adjusts story layout and adds a long option label to demo truncation behavior.
src/components/select-input/select-input.ts Introduces @part input-text and renders placeholder/selected text inside it.
src/components/select-input/select-input.styles.js Adds truncation styling for [part="input-text"] and prevents icon shrinking.
src/components/select-input/option.ts Wraps option slot in part="option-text" span.
src/components/select-input/option.styles.js Attempts to set host display and adds line-clamp styling for [part="option-text"].

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/select-input/option.styles.js Outdated
Comment thread src/components/select-input/option.styles.js
Comment thread src/components/select-input/option.ts Outdated
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

PR Checks Complete

✅ Analysis

  • ✅ ESLint
  • ✅ Lit Analyzer
  • ✅ TypeDoc
  • ✅ Formatting

  • ✅ Prettier
  • ✅ Testing

  • ✅ Install PlayWright Browsers
  • ✅ Testing
  • 📈 Coverage: from 0% to 93.23%
     ➡️ See Details
    FileLinesBranchesFunctions
    src/events.ts 95.95% 142/148 91.30% 21/23 76.92% 10/13
    src/index.ts 100.00% 163/163 0% 0/0 0% 0/0
    src/components/base-toggle-form-element.ts 89.29% 50/56 90.00% 9/10 75.00% 3/4
    src/components/accordion/accordion.ts 100.00% 89/89 88.24% 15/17 100.00% 6/6
    src/components/accordion/accordion-item/accordion-item.ts 100.00% 136/136 97.30% 36/37 100.00% 11/11
    src/components/action-menu/action-menu-button.ts 95.92% 94/98 90.91% 10/11 85.71% 6/7
    src/components/avatar/avatar.ts 98.51% 66/67 100.00% 2/2 100.00% 2/2
    src/components/avatar-rail/avatar-rail.ts 81.08% 30/37 0% 0/0 0.00% 0/2
    src/components/badges/indicators/indicators.ts 100.00% 95/95 94.74% 18/19 100.00% 5/5
    src/components/badges/label/label.ts 100.00% 39/39 66.67% 2/3 100.00% 2/2
    src/components/badges/priority-pill/priority-pill.ts 97.70% 85/87 88.24% 15/17 100.00% 4/4
    src/components/badges/status-label/status-label.ts 100.00% 69/69 88.89% 8/9 100.00% 2/2
    src/components/badges/tag/tag.ts 100.00% 54/54 66.67% 4/6 100.00% 3/3
    src/components/bottom-sheets/bottom-sheet.ts 100.00% 65/65 100.00% 13/13 100.00% 3/3
    src/components/breadcrumbs/breadcrumb.ts 90.00% 72/80 70.00% 7/10 75.00% 3/4
    src/components/breadcrumbs/breadcrumb-item/breadcrumb-item.ts 100.00% 33/33 50.00% 1/2 100.00% 1/1
    src/components/button/base-button.ts 90.32% 56/62 87.50% 7/8 66.67% 4/6
    src/components/button/button.ts 100.00% 93/93 88.89% 8/9 100.00% 2/2
    src/components/button-group/button-group.ts 88.24% 30/34 0.00% 0/1 0.00% 0/2
    src/components/button-group/button-group-item/button-group-item.ts 44.30% 35/79 0.00% 0/1 0.00% 0/4
    src/components/button/icon-button/icon-button.ts 100.00% 28/28 50.00% 1/2 100.00% 1/1
    src/components/button/tile-button/tile-button.ts 100.00% 91/91 83.33% 5/6 100.00% 3/3
    src/components/card/card.ts 93.94% 31/33 0.00% 0/1 0.00% 0/1
    src/components/card/card-body/card-body.ts 91.30% 21/23 0% 0/0 0.00% 0/1
    src/components/card/card-container/card-container.ts 100.00% 84/84 93.33% 14/15 100.00% 3/3
    src/components/card/card-footer/card-footer.ts 91.30% 21/23 0% 0/0 0.00% 0/1
    src/components/card/card-header/card-header.ts 100.00% 42/42 100.00% 1/1 100.00% 1/1
    src/components/chart-card/chart-card.ts 99.43% 175/176 90.00% 36/40 100.00% 11/11
    src/components/checkbox/checkbox.ts 100.00% 56/56 100.00% 1/1 100.00% 1/1
    src/components/chips/assist-chip/assist-chip.ts 94.59% 35/37 50.00% 2/4 100.00% 2/2
    src/components/chips/base-chips/base-chip.ts 81.82% 9/11 100.00% 2/2 50.00% 1/2
    src/components/chips/filter-chip/filter-chip.ts 93.18% 41/44 66.67% 4/6 66.67% 2/3
    src/components/chips/input-chip/input-chip.ts 100.00% 29/29 50.00% 1/2 100.00% 1/1
    src/components/chips/status-chip/status-chip.ts 85.19% 23/27 0.00% 0/1 0.00% 0/2
    src/components/dialog/dialog.ts 100.00% 209/209 80.77% 21/26 87.50% 7/8
    src/components/dropdown/droppable.ts 77.96% 145/186 96.30% 26/27 69.23% 9/13
    src/components/dropdown/dropdown-menu/dropdown-menu-button.ts 93.41% 241/258 88.37% 38/43 100.00% 10/10
    src/components/dropdown/menu-item/dropdown-menu-item.ts 86.05% 37/43 50.00% 1/2 50.00% 1/2
    src/components/empty-state/empty-state.ts 100.00% 46/46 50.00% 1/2 100.00% 1/1
    src/components/fab/fab.ts 100.00% 53/53 90.00% 9/10 100.00% 3/3
    src/components/file-upload/file-upload.ts 59.74% 92/154 40.00% 2/5 22.22% 2/9
    src/components/global-header/global-header.ts 99.19% 244/246 44.00% 11/25 100.00% 7/7
    src/components/grid-menu-item/grid-menu-item.ts 100.00% 41/41 50.00% 2/4 100.00% 2/2
    src/components/icon/icon.ts 100.00% 59/59 75.00% 3/4 100.00% 1/1
    src/components/illustration/illustration.ts 95.96% 95/99 42.86% 3/7 100.00% 3/3
    src/components/in-page-banner/in-page-banner.ts 100.00% 108/108 88.24% 15/17 100.00% 3/3
    src/components/list/list.ts 86.67% 26/30 0% 0/0 0.00% 0/2
    src/components/list/list-item/list-item.ts 100.00% 39/39 100.00% 1/1 100.00% 1/1
    src/components/login-page/login-page.ts 64.15% 34/53 0.00% 0/1 0.00% 0/2
    src/components/navigation-bar/navigation-bar.ts 100.00% 31/31 100.00% 2/2 100.00% 2/2
    src/components/navigation-drawer/navigation-drawer.ts 100.00% 62/62 66.67% 2/3 100.00% 2/2
    src/components/navigation-drawer/navigation-drawer-footer/navigation-drawer-footer.ts 82.95% 73/88 50.00% 2/4 50.00% 2/4
    src/components/navigation-drawer/navigation-drawer-header/navigation-drawer-header.ts 56.25% 27/48 0% 0/0 0.00% 0/2
    src/components/navigation-drawer/navigation-drawer-item/navigation-drawer-item.ts 100.00% 45/45 66.67% 2/3 100.00% 2/2
    src/components/navigation-drawer/navigation-drawer-sub-item/navigation-drawer-sub-item.ts 100.00% 38/38 66.67% 2/3 100.00% 2/2
    src/components/navigation-profile/navigation-profile.ts 100.00% 35/35 50.00% 1/2 100.00% 1/1
    src/components/navigation-rail/navigation-rail-item.ts 100.00% 47/47 66.67% 2/3 100.00% 2/2
    src/components/navigation-rail/navigation-rail.ts 100.00% 27/27 50.00% 1/2 100.00% 1/1
    src/components/pagination/pagination.ts 98.51% 132/134 88.89% 24/27 100.00% 7/7
    src/components/progress-indicators/progress-bar/progress-bar.ts 93.51% 72/77 37.50% 3/8 100.00% 3/3
    src/components/progress-indicators/progress-circle/progress-circle.ts 97.10% 134/138 75.00% 18/24 100.00% 7/7
    src/components/radio-button/radio-button-controller.ts 100.00% 32/32 100.00% 8/8 100.00% 5/5
    src/components/radio-button/radio-button.ts 100.00% 35/35 100.00% 2/2 100.00% 2/2
    src/components/search/search.ts 85.34% 99/116 86.67% 13/15 87.50% 7/8
    src/components/segmented-control/segmented-control.ts 91.75% 89/97 75.00% 15/20 100.00% 6/6
    src/components/segmented-control/segmented-item.ts 100.00% 30/30 66.67% 2/3 100.00% 2/2
    src/components/select-input/option.ts 100.00% 69/69 88.89% 8/9 100.00% 6/6
    src/components/select-input/select-input.ts 90.94% 261/287 74.07% 40/54 100.00% 16/16
    src/components/shimmer/shimmer.ts 100.00% 28/28 100.00% 1/1 100.00% 1/1
    src/components/slider/slider.ts 82.19% 263/320 89.19% 33/37 85.71% 18/21
    src/components/slider/range-selector/range-selector.ts 98.30% 173/176 96.43% 27/28 91.67% 11/12
    src/components/slider/slider-input-field/slider-input-field.ts 100.00% 104/104 80.00% 8/10 100.00% 5/5
    src/components/snackbar/snackbar.ts 97.18% 69/71 71.43% 5/7 100.00% 2/2
    src/components/stepper/stepper-item.ts 100.00% 99/99 88.89% 8/9 100.00% 4/4
    src/components/stepper/stepper.ts 100.00% 76/76 100.00% 10/10 100.00% 4/4
    src/components/stepper-input/stepper-input.ts 93.18% 164/176 84.62% 22/26 66.67% 8/12
    src/components/switch/switch.ts 97.92% 94/96 90.00% 9/10 100.00% 3/3
    src/components/system-banner/system-banner.ts 65.00% 39/60 0.00% 0/1 0.00% 0/2
    src/components/tab-bar/tab-bar.ts 93.10% 27/29 0% 0/0 0.00% 0/1
    src/components/tab-bar/tab-item/tab-item.ts 84.38% 27/32 0.00% 0/1 0.00% 0/2
    src/components/text-input/text-input.ts 85.08% 211/248 96.36% 53/55 75.00% 12/16
    src/components/tooltip/tooltip.ts 69.44% 25/36 0.00% 0/1 0.00% 0/2
    src/components/top-appbar/top-appbar.ts 100.00% 48/48 100.00% 7/7 100.00% 3/3
    src/components/upload-item/upload-item.ts 100.00% 66/66 88.89% 8/9 100.00% 4/4
    src/mixins/contour.ts 100.00% 49/49 100.00% 4/4 100.00% 3/3
    src/mixins/contourable-three.ts 100.00% 64/64 75.00% 3/4 100.00% 3/3
    src/mixins/flavor.ts 100.00% 43/43 100.00% 4/4 100.00% 3/3
    src/mixins/form-field.ts 97.62% 492/504 100.00% 101/101 75.00% 18/24
    src/mixins/interactive.ts 89.29% 75/84 100.00% 11/11 100.00% 5/5
    src/mixins/mixins.ts 100.00% 7/7 0% 0/0 0% 0/0
    src/mixins/navigate.ts 100.00% 34/34 100.00% 3/3 100.00% 2/2
    src/mixins/popup.ts 96.88% 124/128 100.00% 25/25 92.86% 13/14
    src/mixins/size.ts 100.00% 25/25 100.00% 2/2 100.00% 2/2
    src/test/utils.ts 98.44% 189/192 96.55% 28/29 100.00% 20/20
    src/test/accessibility-utils/accessibility-test-runner.ts 68.57% 48/70 75.00% 9/12 50.00% 1/2
    src/test/text-input/setup.ts 100.00% 61/61 100.00% 2/2 100.00% 1/1
    src/utils/utils.ts 100.00% 10/10 100.00% 1/1 100.00% 1/1
  • @thelukewalton thelukewalton merged commit 005a206 into main Apr 7, 2026
    10 checks passed
    @thelukewalton thelukewalton deleted the HMX-9126 branch April 7, 2026 12:35
    thelukewalton added a commit that referenced this pull request Apr 7, 2026
    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [1.2.6](zeta-web-v1.2.5...zeta-web-v1.2.6)
    (2026-04-07)
    
    
    ### 🪲 Bug Fixes
    
    * **HMX-9126:** Fix zeta select input and option for long inputs
    ([#194](#194))
    ([005a206](005a206))
    
    
    ### ⛓️ Dependencies
    
    * Update deps
    ([8659827](8659827))
    
    
    ### 🧹 Miscellaneous Chores
    
    * **deps-dev:** bump vite from 6.4.1 to 6.4.2
    ([#195](#195))
    ([0411cb5](0411cb5))
    
    ---
    This PR was generated with [Release
    Please](https://github.com/googleapis/release-please). See
    [documentation](https://github.com/googleapis/release-please#release-please).
    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.

    3 participants