Skip to content

Fix caret CSS in collapse, Menu and Tree items - #1333

Open
Kavin-Trimble wants to merge 2 commits into
mainfrom
1309-fix-chevron-icon-for-parent-menu-items
Open

Fix caret CSS in collapse, Menu and Tree items#1333
Kavin-Trimble wants to merge 2 commits into
mainfrom
1309-fix-chevron-icon-for-parent-menu-items

Conversation

@Kavin-Trimble

@Kavin-Trimble Kavin-Trimble commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

📄 Summary of Changes

Fix caret CSS in collapse, Menu and Tree items
Fix side nav visiblity of caret

💭 Type of Change

  • Bug fix (fixes an issue)
  • New feature (adds functionality)
  • Configuration change (modifies scaling or properties of existing infrastructure & services)
  • Documentation change
  • Other

📋 Test Plan

✅ Self Code Review Checklist

PR authors and reviewers, please verify that all of these items have been completed.

  • My code is clean and readable
  • I followed standard conventions
  • Component code is WCAG 2.2 compliant (if applicable)
  • I have made theme files changes (if applicable)
  • I have made documentation changes (if applicable)
  • I have made Storybook changes including usage documentation (if applicable)
  • I have tested the component thoroughly in Storybook including RTL rendering (if applicable)

🔗 Work Item

Issue #1309

Copilot AI lite review requested due to automatic review settings August 4, 2026 05:32
@Kavin-Trimble
Kavin-Trimble requested a review from a team as a code owner August 4, 2026 05:32
@Kavin-Trimble Kavin-Trimble linked an issue Aug 4, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

🚀 Storybook Preview

Preview is available at: https://trimble-oss.github.io/modus-wc-2.0/pr-preview/pr-1333/

Copilot AI left a comment

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.

Pull request overview

This PR updates caret/chevron styling across Collapse, Menu Item, and Tree Item to replace DaisyUI’s box-shadow-based caret with a consistent equal-stroke chevron, and adjusts Side Navigation behavior so the submenu caret is hidden when the rail is collapsed (where submenu expansion is blocked).

Changes:

  • Replace DaisyUI box-shadow caret rendering with border-based “equal-stroke” chevrons for menu and tree item dropdown toggles.
  • Refactor Collapse chevron styling via a shared SCSS mixin and ensure open/closed rotation states remain correct for left/right chevrons.
  • Hide submenu caret in collapsed side navigation rail to avoid clipping and reflect the non-expandable state.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/components/modus-wc-tree-item/modus-wc-tree-item.scss Overrides dropdown caret styling to use border strokes (no box-shadow) while preserving DaisyUI sizing/rotation behavior.
src/components/modus-wc-side-navigation/modus-wc-side-navigation.scss Hides submenu caret when side nav is collapsed to prevent clipping and match blocked expansion behavior.
src/components/modus-wc-menu-item/modus-wc-menu-item.scss Updates dropdown toggle caret styling to border-based chevron for consistent appearance.
src/components/modus-wc-collapse/modus-wc-collapse.scss Introduces a mixin to standardize chevron stroke rendering and applies it to left/right collapse arrows with correct open-state rotation.

@github-actions

github-actions Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

🚀 Blazor Story Preview

Preview is available at: https://trimble-oss.github.io/modus-wc-2.0/pr-preview/pr-1333/blazor/

Comment thread src/components/modus-wc-collapse/modus-wc-collapse.scss Outdated

@ElishaSamPeterPrabhu ElishaSamPeterPrabhu left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The alignment is off even with the new approach:

Image

Copilot AI review requested due to automatic review settings August 4, 2026 10:51

Copilot AI left a comment

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.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

@Kavin-Trimble

Copy link
Copy Markdown
Contributor Author

The alignment is off even with the new approach:

Image

@ElishaSamPeterPrabhu
Now I have reverted our before/after implementations to use the same box shadow instead of the border as DaisyUI. But still, the legs are looking different lengths.
And I have tried some workarounds to match their sizes by modifying the height/width, and it is not the right way, as the height and width are supposed to be the same for the geometrical representation.
Could you take a look and suggest a way if you have any, or can we go with icons for this?

@ElishaSamPeterPrabhu

Copy link
Copy Markdown
Collaborator

The alignment is off even with the new approach:
Image

@ElishaSamPeterPrabhu Now I have reverted our before/after implementations to use the same box shadow instead of the border as DaisyUI. But still, the legs are looking different lengths. And I have tried some workarounds to match their sizes by modifying the height/width, and it is not the right way, as the height and width are supposed to be the same for the geometrical representation. Could you take a look and suggest a way if you have any, or can we go with icons for this?

As discussed and decided offline, let's go with the png approach.

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.

Request to change the chevron icon for parent menu items

3 participants