Skip to content

feat(dropdown): add noMenu input and custom icon support (#599, #601)#682

Open
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:fix/599-601-dropdown-no-menu-custom-icon
Open

feat(dropdown): add noMenu input and custom icon support (#599, #601)#682
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:fix/599-601-dropdown-no-menu-custom-icon

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Fixes #599 and #601

Problem

  1. [Feat] Possibilità di utilizzare il componente <it-dropdown> senza menù #599: The <it-dropdown> component always renders the .dropdown-menu element, even when no menu items are provided. This makes it impossible to use the dropdown button appearance without an attached menu (e.g. to trigger a modal on click).

  2. [Feat] Possibilità di personalizzare l'icona (e la sua dimensione) usata dal componente <it-dropdown> #601: The dropdown icon is hardcoded to expand at size sm with rotation animation. Users cannot customize the icon, its size, or disable the rotation.

Solution

Added four new inputs to ItDropdownComponent:

Input Type Default Description
noMenu boolean false Hides the dropdown menu entirely
iconName IconName 'expand' Custom icon name
iconSize IconSize 'sm' Custom icon size
staticIcon boolean false Disables icon rotation animation

When noMenu is true:

  • The .dropdown-menu div is not rendered
  • data-bs-toggle="dropdown" and aria-haspopup attributes are removed
  • The Bootstrap Dropdown plugin is not initialized
  • The button/link still renders normally with full styling

All defaults preserve existing behavior — fully backward compatible.

Usage examples

<it-dropdown [noMenu]="true" (click)="openModal()">
  <span button>Open Modal</span>
</it-dropdown>

<it-dropdown [iconName]="'it-settings'" [iconSize]="'lg'" [staticIcon]="true">
  <span button>Settings</span>
  <it-dropdown-item list>Option 1</it-dropdown-item>
</it-dropdown>

Verification

  • ✅ 135/135 tests passing (26 new tests)
  • ✅ 0 lint errors (8 pre-existing warnings)
  • ✅ Double gate passed (2 consecutive clean runs)
  • ✅ Works in button, link, and nav modes
  • ✅ Combined features work (noMenu + custom icon)

⚠️ This reopens #638 which was accidentally closed due to fork deletion.

giulio-leone and others added 2 commits March 25, 2026 10:57
…talia#601)

Add three new inputs to ItDropdownComponent:
- noMenu: hides the dropdown menu, rendering only the styled button
- iconName/iconSize: allow customizing the dropdown toggle icon
- staticIcon: disables the rotation animation on open/close

When noMenu is true, data-bs-toggle and aria-haspopup are removed
and the Bootstrap Dropdown plugin is not initialized.

All new inputs have backward-compatible defaults (expand icon, sm size,
rotation enabled, menu visible).

Includes 26 new tests covering all combinations.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Showcase three dropdown variants: noMenu (action button without menu),
custom icon (it-settings), and combined noMenu with custom icon.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@vercel

vercel Bot commented Mar 25, 2026

Copy link
Copy Markdown

@giulio-leone is attempting to deploy a commit to the dip-trasformazione-digitale Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Mar 27, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
design-angular-kit Error Error Mar 27, 2026 3:49pm

Request Review

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.

[Feat] Possibilità di utilizzare il componente <it-dropdown> senza menù

1 participant