Skip to content

feat(UX-1561): Make leading icon optional, make buttons stay to right#167

Merged
aygurs merged 4 commits intomainfrom
UX-1561
Jan 30, 2026
Merged

feat(UX-1561): Make leading icon optional, make buttons stay to right#167
aygurs merged 4 commits intomainfrom
UX-1561

Conversation

@aygurs
Copy link
Copy Markdown
Contributor

@aygurs aygurs commented Jan 30, 2026

Leading icon is now optional. If no 'other' button is provided, make other two buttons stay on the right.

@aygurs aygurs self-assigned this Jan 30, 2026
@aygurs aygurs requested a review from a team as a code owner January 30, 2026 10:46
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 30, 2026

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

https://zeta-web-main--pr-167-ux-1561-m7melfbu.web.app

(expires Fri, 06 Feb 2026 11:18:32 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: cc82fb52ba05c9ecc7f0b92ab81ac4a31b88d893

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 30, 2026

PR Checks Complete

✅ Analysis

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

  • ✅ Prettier
  • ✅ Testing

  • ✅ Install PlayWright Browsers
  • ✅ Testing
  • 📈 Coverage: from 0% to 93.38%
     ➡️ 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 75.00% 3/4 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% 64/64 80.00% 8/10 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% 208/208 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.10% 221/223 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% 59/59 71.43% 5/7 100.00% 4/4
    src/components/select-input/select-input.ts 96.48% 247/256 67.39% 31/46 100.00% 15/15
    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% 100/100 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
  • Comment thread src/components/dialog/dialog.ts Outdated
    Comment thread src/components/dialog/dialog.ts Outdated
    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 adds functionality to make the dialog's leading icon optional and ensures buttons stay aligned to the right when no "other" button is provided.

    Changes:

    • Added showLeadingIcon and leadingIcon properties to control header icon display
    • Added CSS rules to right-align buttons when only two buttons are present (no "other" button)
    • Updated stories to expose the new properties in Storybook

    Reviewed changes

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

    File Description
    src/stories/components/dialog.stories.ts Added new properties (showLeadingIcon, leadingIcon) to story configuration and templates for testing the optional icon feature
    src/components/dialog/dialog.ts Implemented new properties with documentation, added conditional icon rendering based on showLeadingIcon, and fallback logic for icon selection
    src/components/dialog/dialog.styles.js Added CSS rules to control footer button alignment based on button count
    Comments suppressed due to low confidence (2)

    src/components/dialog/dialog.ts:41

    • The leadingIcon property documentation should clarify the fallback behavior. When showLeadingIcon is true and leadingIcon is not provided, the component falls back to displaying an icon based on the flavor property. Consider updating the documentation to: "Icon to display in the header. If not provided, a flavor-based icon will be displayed when showLeadingIcon is true."
     * @cssproperty --dialog-title-font-size - Font size of the dialog title. Defaults to 1.25rem.
    

    src/components/dialog/dialog.ts:118

    • The JSDoc comment for leadingIcon property should clarify the fallback behavior. When this property is not provided and showLeadingIcon is true, the component will display an icon based on the flavor property. Consider updating the comment to: "Icon to display in the header. If not provided, displays a flavor-based icon when showLeadingIcon is true."
       * - `success`: Shows green verified icon.
       * - `warning`: Shows yellow warning icon.
    

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

    Comment thread src/stories/components/dialog.stories.ts
    @aygurs aygurs merged commit 319135b into main Jan 30, 2026
    9 checks passed
    @aygurs aygurs deleted the UX-1561 branch January 30, 2026 11:21
    aygurs pushed a commit that referenced this pull request Jan 30, 2026
    🤖 I have created a release *beep* *boop*
    ---
    
    
    ##
    [1.1.0](zeta-web-v1.0.1...zeta-web-v1.1.0)
    (2026-01-30)
    
    
    ### ✨ New Features
    
    * **UX-1553:** Chart Card Component
    ([#159](#159))
    ([623ad7f](623ad7f))
    * **UX-1556:** Shimmer component for Zeta Web
    ([#163](#163))
    ([999be10](999be10))
    * **UX-1561:** Make leading icon optional, make buttons stay to right
    ([#167](#167))
    ([319135b](319135b))
    
    
    ### 📈 Documentation
    
    * Add image to readme
    ([6d562b4](6d562b4))
    
    
    ### ⛓️ Dependencies
    
    * Update deps
    ([c510447](c510447))
    
    
    ### 🧹 Miscellaneous Chores
    
    * **deps-dev:** bump storybook from 8.6.14 to 8.6.15
    ([#160](#160))
    ([c8342fb](c8342fb))
    * **deps:** bump qs from 6.14.0 to 6.14.1
    ([#161](#161))
    ([b7ea2e8](b7ea2e8))
    * **deps:** bump tar from 7.5.2 to 7.5.4
    ([#164](#164))
    ([a45c558](a45c558))
    * **deps:** bump tar from 7.5.4 to 7.5.7
    ([#166](#166))
    ([69cd255](69cd255))
    
    
    ### 💄 Styles
    
    * **HMX-5599:** Update In Page Banner
    ([#165](#165))
    ([5a4b003](5a4b003))
    
    ---
    This PR was generated with [Release
    Please](https://github.com/googleapis/release-please). See
    [documentation](https://github.com/googleapis/release-please#release-please).
    @aygurs aygurs review requested due to automatic review settings March 23, 2026 22:01
    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