Skip to content

Commit c74e74b

Browse files
marcjulianashley-hunter
marcjulian
and
ashley-hunter
authored
feat: dropdown menu polishing (#1017)
* refactor(dropdown-menu): change components to directes if possible * update input types # Conflicts: # libs/helm/menu/src/lib/hlm-menu-bar.ts # libs/helm/menu/src/lib/hlm-menu-group.ts # libs/helm/menu/src/lib/hlm-menu-label.ts # libs/helm/menu/src/lib/hlm-menu-separator.ts # libs/helm/menu/src/lib/hlm-menu-shortcut.ts # libs/helm/menu/src/lib/hlm-menu.ts # libs/helm/menu/src/lib/hlm-sub-menu.ts * docs(dropdown-menu): update imports * docs(dropdown-menu): add checkboxes and radio-group examples * feat(dropdown-menu): update styles, add data-slot * feat(dropdown-menu): update snapshot * fix(dropdown-menu): update storybook sideOffset args # Conflicts: # apps/ui-storybook/.storybook/tailwind.css * feat(menubar): generate helm menubar entrypoint * feat(dropdown-menu): generate helm dropdown-menu entrypoint * feat(context-menu): generate helm context-menu entrypoint * docs: add about section * feat(dropdown-menu): move menu-align to core, update type imports * fix(dropdown-menu): lint issues * feat(dropdown-menu): update snapshot * feat(cli): remove context and menubar special case in ui cli * feat(cli): load importAlias in healthcheck and pass to fix context * feat(cli): pass importAlias to healtcheck detect too * add components.json to healthcheck generator test * return default importAlias in case components.json is missing/invalid * feat(cli): add hlm-menu healtcheck and update imports * docs(context-menu): update preview * feat(dropdown-menu): simplify radio and checkbox selector by removing item * feat(dropdown-menu): add migration for hlm-menu and tests * feat(dropdown-menu): add more migration and tests, skip menu components * feat(dropdown-menu): allow trigger to select not only button (like hlm-avatar) * feat(cli): handle more menu imports * docs(dropdown-menu): dogfooding healthcheck migration * docs(dropdown-menu): improve dropdown side/alignment * feat(dropdown-menu): avoid icon color overwrite * docs: remove old menu import * feat(dropdown-menu): remove helm/brain menu package * docs: update api primitives * docs: add new flag to menu components * fix(dialog): resolving dialog change detection issues (#2) * fix(dialog): resolving dialog change detection issues * refactor: removing unused code * fix: updating snapshot * refactor: improving type safety * feat(dropdown-menu): add disabled prop to menu-item, change selector to button * docs: remove resolved comment --------- Co-authored-by: Ashley Hunter <[email protected]>
1 parent e2ed1b0 commit c74e74b

File tree

126 files changed

+2795
-2529
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

126 files changed

+2795
-2529
lines changed

‎apps/app/src/app/core/models/ui-docs.model.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export type Primitives =
3333
| 'checkbox'
3434
| 'collapsible'
3535
| 'command'
36+
| 'context-menu'
3637
| 'date-picker'
3738
| 'dialog'
3839
| 'empty'
@@ -44,8 +45,9 @@ export type Primitives =
4445
| 'input-group'
4546
| 'input-otp'
4647
| 'item'
48+
| 'dropdown-menu'
4749
| 'label'
48-
| 'menu'
50+
| 'menubar'
4951
| 'pagination'
5052
| 'popover'
5153
| 'progress'

‎apps/app/src/app/pages/(blocks-preview)/blocks-preview/shared/sidebar/nav-projects.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import {
1010
lucideShare,
1111
lucideTrash2,
1212
} from '@ng-icons/lucide';
13-
import { BrnMenuImports } from '@spartan-ng/brain/menu';
14-
import { HlmMenuImports } from '@spartan-ng/helm/menu';
13+
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
1514
import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
1615

1716
@Component({
1817
selector: 'spartan-nav-projects',
19-
imports: [HlmSidebarImports, NgIcon, RouterLink, BrnMenuImports, HlmMenuImports],
18+
imports: [HlmSidebarImports, NgIcon, RouterLink, HlmDropdownMenuImports],
2019
providers: [
2120
provideIcons({ lucideFrame, lucideChartPie, lucideMap, lucideEllipsis, lucideFolder, lucideShare, lucideTrash2 }),
2221
],
@@ -34,8 +33,8 @@ import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
3433
<button
3534
hlmSidebarMenuAction
3635
showOnHover
37-
[brnMenuTriggerFor]="menu"
38-
[brnMenuTriggerData]="{ $implicit: { project } }"
36+
[hlmDropdownMenuTrigger]="menu"
37+
[hlmDropdownMenuTriggerData]="{ $implicit: { project } }"
3938
[side]="_menuSide()"
4039
[align]="_menuAlign()"
4140
>
@@ -54,25 +53,25 @@ import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
5453
</hlm-sidebar-group>
5554
5655
<ng-template #menu let-ctx>
57-
<hlm-menu class="w-48">
58-
<hlm-menu-group>
59-
<hlm-menu-label>{{ ctx.project.name }}</hlm-menu-label>
60-
</hlm-menu-group>
61-
<hlm-menu-separator />
62-
<button hlmMenuItem>
56+
<hlm-dropdown-menu class="w-48">
57+
<hlm-dropdown-menu-group>
58+
<hlm-dropdown-menu-label>{{ ctx.project.name }}</hlm-dropdown-menu-label>
59+
</hlm-dropdown-menu-group>
60+
<hlm-dropdown-menu-separator />
61+
<button hlmDropdownMenuItem>
6362
<ng-icon name="lucideFolder" />
6463
View Project
6564
</button>
66-
<button hlmMenuItem>
65+
<button hlmDropdownMenuItem>
6766
<ng-icon name="lucideShare" />
6867
Share Project
6968
</button>
70-
<hlm-menu-separator />
71-
<button hlmMenuItem>
69+
<hlm-dropdown-menu-separator />
70+
<button hlmDropdownMenuItem>
7271
<ng-icon name="lucideTrash2" />
7372
Delete Project
7473
</button>
75-
</hlm-menu>
74+
</hlm-dropdown-menu>
7675
</ng-template>
7776
`,
7877
})

‎apps/app/src/app/pages/(blocks-preview)/blocks-preview/shared/sidebar/nav-user.ts‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,13 @@ import {
88
lucideLogOut,
99
lucideSparkles,
1010
} from '@ng-icons/lucide';
11-
import { BrnMenuImports } from '@spartan-ng/brain/menu';
1211
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
13-
import { HlmMenuImports } from '@spartan-ng/helm/menu';
12+
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
1413
import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
1514

1615
@Component({
1716
selector: 'spartan-nav-user',
18-
imports: [HlmSidebarImports, HlmAvatarImports, NgIcon, HlmMenuImports, BrnMenuImports],
17+
imports: [HlmSidebarImports, HlmAvatarImports, NgIcon, HlmDropdownMenuImports],
1918
providers: [
2019
provideIcons({
2120
lucideChevronsUpDown,
@@ -31,7 +30,7 @@ import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
3130
@let u = user();
3231
<ul hlmSidebarMenu>
3332
<li hlmSidebarMenuItem>
34-
<button hlmSidebarMenuButton size="lg" [brnMenuTriggerFor]="menu" [side]="_menuSide()" align="end">
33+
<button hlmSidebarMenuButton size="lg" [hlmDropdownMenuTrigger]="menu" [side]="_menuSide()" align="end">
3534
<hlm-avatar class="rounded-lg">
3635
<img [src]="u.avatar" [alt]="u.name" hlmAvatarImage />
3736
<span class="rounded-lg bg-[#FD005B] text-white" hlmAvatarFallback>RG</span>
@@ -46,8 +45,8 @@ import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
4645
</ul>
4746
4847
<ng-template #menu>
49-
<hlm-menu class="min-w-56 rounded-lg">
50-
<hlm-menu-label>
48+
<hlm-dropdown-menu class="min-w-56 rounded-lg">
49+
<hlm-dropdown-menu-label>
5150
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
5251
<hlm-avatar class="rounded-lg">
5352
<img [src]="u.avatar" [alt]="u.name" hlmAvatarImage />
@@ -58,35 +57,35 @@ import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
5857
<span class="truncate text-xs">{{ u.email }}</span>
5958
</div>
6059
</div>
61-
</hlm-menu-label>
62-
<hlm-menu-separator />
63-
<hlm-menu-group>
64-
<button hlmMenuItem>
60+
</hlm-dropdown-menu-label>
61+
<hlm-dropdown-menu-separator />
62+
<hlm-dropdown-menu-group>
63+
<button hlmDropdownMenuItem>
6564
<ng-icon name="lucideSparkles" />
6665
Upgrade to Pro
6766
</button>
68-
</hlm-menu-group>
69-
<hlm-menu-separator />
70-
<hlm-menu-group>
71-
<button hlmMenuItem>
67+
</hlm-dropdown-menu-group>
68+
<hlm-dropdown-menu-separator />
69+
<hlm-dropdown-menu-group>
70+
<button hlmDropdownMenuItem>
7271
<ng-icon name="lucideBadgeCheck" />
7372
Account
7473
</button>
75-
<button hlmMenuItem>
74+
<button hlmDropdownMenuItem>
7675
<ng-icon name="lucideCreditCard" />
7776
Billing
7877
</button>
79-
<button hlmMenuItem>
78+
<button hlmDropdownMenuItem>
8079
<ng-icon name="lucideBell" />
8180
Notifications
8281
</button>
83-
</hlm-menu-group>
84-
<hlm-menu-separator />
85-
<button hlmMenuItem>
82+
</hlm-dropdown-menu-group>
83+
<hlm-dropdown-menu-separator />
84+
<button hlmDropdownMenuItem>
8685
<ng-icon name="lucideLogOut" />
8786
Log out
8887
</button>
89-
</hlm-menu>
88+
</hlm-dropdown-menu>
9089
</ng-template>
9190
`,
9291
})

‎apps/app/src/app/pages/(components)/components/(breadcrumb)/breadcrumb--dropdown.example.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { Component } from '@angular/core';
22
import { NgIcon, provideIcons } from '@ng-icons/core';
33
import { lucideChevronDown, lucideSlash } from '@ng-icons/lucide';
4-
import { BrnMenuImports } from '@spartan-ng/brain/menu';
54
import { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';
5+
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
66
import { HlmIconImports } from '@spartan-ng/helm/icon';
7-
import { HlmMenuImports } from '@spartan-ng/helm/menu';
87

98
@Component({
109
selector: 'spartan-breadcrumb-dropdown',
11-
imports: [HlmBreadCrumbImports, NgIcon, HlmIconImports, BrnMenuImports, HlmMenuImports],
10+
imports: [HlmBreadCrumbImports, NgIcon, HlmIconImports, HlmDropdownMenuImports],
1211
providers: [provideIcons({ lucideChevronDown, lucideSlash })],
1312
template: `
1413
<nav hlmBreadcrumb>
@@ -20,22 +19,22 @@ import { HlmMenuImports } from '@spartan-ng/helm/menu';
2019
<ng-icon hlm size="sm" name="lucideSlash" />
2120
</li>
2221
<li hlmBreadcrumbItem>
23-
<button class="flex items-center gap-1" [brnMenuTriggerFor]="breadcrumbDropdown">
22+
<button class="flex items-center gap-1" [hlmDropdownMenuTrigger]="breadcrumbDropdown">
2423
Components
2524
<ng-icon hlm size="sm" name="lucideChevronDown" />
2625
</button>
2726
<ng-template #breadcrumbDropdown>
28-
<hlm-menu>
29-
<button hlmMenuItem id="document">
27+
<hlm-dropdown-menu>
28+
<button hlmDropdownMenuItem id="document">
3029
<span>Documentation</span>
3130
</button>
32-
<button hlmMenuItem id="themes">
31+
<button hlmDropdownMenuItem id="themes">
3332
<span>Themes</span>
3433
</button>
35-
<button hlmMenuItem id="github">
34+
<button hlmDropdownMenuItem id="github">
3635
<span>Github</span>
3736
</button>
38-
</hlm-menu>
37+
</hlm-dropdown-menu>
3938
</ng-template>
4039
</li>
4140
<li hlmBreadcrumbSeparator>

‎apps/app/src/app/pages/(components)/components/(breadcrumb)/breadcrumb.preview.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { Component } from '@angular/core';
2-
import { BrnMenuImports } from '@spartan-ng/brain/menu';
32
import { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';
4-
import { HlmMenuImports } from '@spartan-ng/helm/menu';
3+
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
54

65
@Component({
76
selector: 'spartan-breadcrumb-preview',
8-
imports: [HlmBreadCrumbImports, BrnMenuImports, HlmMenuImports],
7+
imports: [HlmBreadCrumbImports, HlmDropdownMenuImports],
98
template: `
109
<nav hlmBreadcrumb>
1110
<ol hlmBreadcrumbList>
@@ -14,22 +13,22 @@ import { HlmMenuImports } from '@spartan-ng/helm/menu';
1413
</li>
1514
<li hlmBreadcrumbSeparator></li>
1615
<li hlmBreadcrumbItem>
17-
<button [brnMenuTriggerFor]="breadcrumbDropdown">
16+
<button [hlmDropdownMenuTrigger]="breadcrumbDropdown">
1817
<hlm-breadcrumb-ellipsis class="size-4" />
1918
<span class="sr-only">Toggle menu</span>
2019
</button>
2120
<ng-template #breadcrumbDropdown>
22-
<hlm-menu>
23-
<button hlmMenuItem id="document">
21+
<hlm-dropdown-menu>
22+
<button hlmDropdownMenuItem id="document">
2423
<span>Documentation</span>
2524
</button>
26-
<button hlmMenuItem id="themes">
25+
<button hlmDropdownMenuItem id="themes">
2726
<span>Themes</span>
2827
</button>
29-
<button hlmMenuItem id="github">
28+
<button hlmDropdownMenuItem id="github">
3029
<span>Github</span>
3130
</button>
32-
</hlm-menu>
31+
</hlm-dropdown-menu>
3332
</ng-template>
3433
</li>
3534
<li hlmBreadcrumbSeparator></li>

‎apps/app/src/app/pages/(components)/components/(button-group)/button-group--dropdown-menu.example.ts‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,14 @@ import {
1010
lucideUserRoundX,
1111
lucideVolumeOff,
1212
} from '@ng-icons/lucide';
13-
import { BrnMenuImports } from '@spartan-ng/brain/menu';
1413
import { HlmButtonImports } from '@spartan-ng/helm/button';
1514
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
15+
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
1616
import { HlmIconImports } from '@spartan-ng/helm/icon';
17-
import { HlmMenuImports } from '@spartan-ng/helm/menu';
1817

1918
@Component({
2019
selector: 'spartan-button-group-dropdown-menu',
21-
imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, BrnMenuImports, HlmMenuImports],
20+
imports: [HlmIconImports, HlmButtonImports, HlmButtonGroupImports, HlmDropdownMenuImports],
2221
providers: [
2322
provideIcons({
2423
lucideChevronDown,
@@ -34,46 +33,50 @@ import { HlmMenuImports } from '@spartan-ng/helm/menu';
3433
template: `
3534
<div hlmButtonGroup>
3635
<button hlmBtn variant="outline">Follow</button>
37-
<button hlmBtn variant="outline" size="icon" [brnMenuTriggerFor]="menu" align="end">
36+
<button hlmBtn variant="outline" size="icon" [hlmDropdownMenuTrigger]="menu" align="end">
3837
<ng-icon hlm name="lucideChevronDown" size="sm" />
3938
</button>
4039
</div>
4140
<ng-template #menu>
42-
<hlm-menu class="w-[49] [--radius:1rem]">
43-
<hlm-menu-group>
44-
<button hlmMenuItem>
41+
<hlm-dropdown-menu class="w-[49] [--radius:1rem]">
42+
<hlm-dropdown-menu-group>
43+
<button hlmDropdownMenuItem>
4544
<ng-icon hlm name="lucideVolumeOff" size="sm" />
4645
<span>Muted Conversation</span>
4746
</button>
48-
<button hlmMenuItem>
47+
<button hlmDropdownMenuItem>
4948
<ng-icon hlm name="lucideCheck" size="sm" />
5049
<span>Mark as Read</span>
5150
</button>
52-
<button hlmMenuItem>
51+
<button hlmDropdownMenuItem>
5352
<ng-icon hlm name="lucideTriangleAlert" size="sm" />
5453
<span>Report Conversation</span>
5554
</button>
56-
<button hlmMenuItem>
55+
<button hlmDropdownMenuItem>
5756
<ng-icon hlm name="lucideUserRoundX" size="sm" />
5857
<span>Block User</span>
5958
</button>
60-
<button hlmMenuItem>
59+
<button hlmDropdownMenuItem>
6160
<ng-icon hlm name="lucideShare" size="sm" />
6261
<span>Share Conversation</span>
6362
</button>
64-
<button hlmMenuItem>
63+
<button hlmDropdownMenuItem>
6564
<ng-icon hlm name="lucideCopy" size="sm" />
6665
<span>Copy Conversation</span>
6766
</button>
68-
</hlm-menu-group>
69-
<hlm-menu-separator />
70-
<hlm-menu-group>
71-
<button hlmMenuItem variant="destructive" class="hover:bg-destructive/10 dark:hover:bg-destructive/40">
67+
</hlm-dropdown-menu-group>
68+
<hlm-dropdown-menu-separator />
69+
<hlm-dropdown-menu-group>
70+
<button
71+
hlmDropdownMenuItem
72+
variant="destructive"
73+
class="hover:bg-destructive/10 dark:hover:bg-destructive/40"
74+
>
7275
<ng-icon hlm name="lucideTrash" size="sm" class="!text-destructive" />
7376
<span>Delete Conversation</span>
7477
</button>
75-
</hlm-menu-group>
76-
</hlm-menu>
78+
</hlm-dropdown-menu-group>
79+
</hlm-dropdown-menu>
7780
</ng-template>
7881
`,
7982
})

0 commit comments

Comments
 (0)