Skip to content

Commit 4029a7c

Browse files
Shrinks99Shrinks99
authored
hardcode dropdown elevation → floating (#55)
1 parent e21fada commit 4029a7c

13 files changed

Lines changed: 39 additions & 190 deletions

File tree

‎packages/demo/src/components/demo/dropdown-menu.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,9 @@ import {
1717
DropdownMenuSubTrigger,
1818
} from "@eqtylab/equality";
1919
import { Settings, User, LogOut } from "lucide-react";
20-
import type { Elevation } from "@eqtylab/equality";
2120

2221
export const DropdownMenuDemo = ({
2322
variant = "default",
24-
elevation,
2523
}: {
2624
variant?:
2725
| "default"
@@ -31,7 +29,6 @@ export const DropdownMenuDemo = ({
3129
| "with-shortcuts"
3230
| "with-submenu"
3331
| "with-groups";
34-
elevation?: Elevation;
3532
}) => {
3633
const [showStatusBar, setShowStatusBar] = useState(true);
3734
const [showActivityBar, setShowActivityBar] = useState(false);
@@ -46,7 +43,7 @@ export const DropdownMenuDemo = ({
4643
Open Menu
4744
</Button>
4845
</DropdownMenuTrigger>
49-
<DropdownMenuContent align="start" elevation={elevation}>
46+
<DropdownMenuContent align="start">
5047
<DropdownMenuItem>Profile</DropdownMenuItem>
5148
<DropdownMenuItem>Settings</DropdownMenuItem>
5249
<DropdownMenuItem>Logout</DropdownMenuItem>
@@ -63,7 +60,7 @@ export const DropdownMenuDemo = ({
6360
Account Menu
6461
</Button>
6562
</DropdownMenuTrigger>
66-
<DropdownMenuContent align="start" elevation={elevation}>
63+
<DropdownMenuContent align="start">
6764
<DropdownMenuLabel>My Account</DropdownMenuLabel>
6865
<DropdownMenuSeparator />
6966
<DropdownMenuItem>
@@ -178,7 +175,7 @@ export const DropdownMenuDemo = ({
178175
More Options
179176
</Button>
180177
</DropdownMenuTrigger>
181-
<DropdownMenuContent align="start" elevation={elevation}>
178+
<DropdownMenuContent align="start">
182179
<DropdownMenuItem>Back</DropdownMenuItem>
183180
<DropdownMenuItem>Forward</DropdownMenuItem>
184181
<DropdownMenuItem>Reload</DropdownMenuItem>
@@ -210,7 +207,7 @@ export const DropdownMenuDemo = ({
210207
File Menu
211208
</Button>
212209
</DropdownMenuTrigger>
213-
<DropdownMenuContent align="start" elevation={elevation}>
210+
<DropdownMenuContent align="start">
214211
<DropdownMenuGroup>
215212
<DropdownMenuLabel>File</DropdownMenuLabel>
216213
<DropdownMenuItem>

‎packages/demo/src/content/components/dropdown-menu.mdx‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -36,45 +36,3 @@ import { ELEVATION } from "@eqtylab/equality";
3636
### With Groups
3737

3838
<DropdownMenuDemo client:only="react" variant="with-groups" />
39-
40-
## Elevations
41-
42-
### Sunken
43-
44-
<DropdownMenuDemo
45-
client:only="react"
46-
variant="with-submenu"
47-
elevation={ELEVATION.SUNKEN}
48-
/>
49-
50-
### Base (default)
51-
52-
<DropdownMenuDemo
53-
client:only="react"
54-
variant="with-submenu"
55-
elevation={ELEVATION.BASE}
56-
/>
57-
58-
### Raised
59-
60-
<DropdownMenuDemo
61-
client:only="react"
62-
variant="with-submenu"
63-
elevation={ELEVATION.RAISED}
64-
/>
65-
66-
### Overlay
67-
68-
<DropdownMenuDemo
69-
client:only="react"
70-
variant="with-submenu"
71-
elevation={ELEVATION.OVERLAY}
72-
/>
73-
74-
### Floating
75-
76-
<DropdownMenuDemo
77-
client:only="react"
78-
variant="with-submenu"
79-
elevation={ELEVATION.FLOATING}
80-
/>

‎packages/demo/src/pages/getting-started/elevation.mdx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Use for UI that overlays the page and requires clear separation from the underly
7070

7171
### Floating
7272

73-
An elevated surface reserved for UI that must remain visually dominant, even over modals or dropdowns.
73+
An elevated surface reserved for UI that _must_ remain visually dominant over all other elements.
7474

7575
<DialogWithTableDemo client:only="react" />
7676

@@ -88,28 +88,24 @@ import { ELEVATION } from "@eqtylab/equality";
8888

8989
The following components have an `elevation` prop:
9090

91-
| Component | Default Elevation | Notes |
92-
| --------------- | ----------------- | ------------------------------------------ |
93-
| Card | Raised | |
94-
| DisplayField | Base | |
95-
| Dropdown Menu | Overlay | in `DropdownContent` component |
96-
| Filter Dropdown | Overlay | for dropdown with `dropdownElevation` prop |
97-
| Icon | Sunken | |
98-
| Info Card | Raised | |
99-
| Metric Card | Raised | |
100-
| Pagination | Overlay | for dropdown with `dropdownElevation` prop |
101-
| Radio Dropdown | Overlay | for dropdown with `dropdownElevation` prop |
102-
| Select | Overlay | in `SelectContent` component |
103-
| Sort Selector | Overlay | for dropdown with `dropdownElevation` prop |
104-
| Table | Base | |
91+
| Component | Default Elevation | Notes |
92+
| ------------ | ----------------- | ---------------------------- |
93+
| Card | Raised | |
94+
| DisplayField | Base | |
95+
| Icon | Sunken | |
96+
| Info Card | Raised | |
97+
| Metric Card | Raised | |
98+
| Select | Overlay | in `SelectContent` component |
99+
| Table | Base | |
105100

106101
### Components with a set fixed elevation
107102

108-
| Component | Elevation |
109-
| ------------ | --------- |
110-
| Alert Dialog | Overlay |
111-
| Dialog | Overlay |
112-
| Drawer | Overlay |
113-
| Popover | Overlay |
114-
| Sheet | Overlay |
115-
| Tooltip | Overlay |
103+
| Component | Elevation |
104+
| ------------- | --------- |
105+
| Alert Dialog | Overlay |
106+
| Dialog | Overlay |
107+
| Drawer | Overlay |
108+
| Dropdown Menu | Floating |
109+
| Popover | Floating |
110+
| Sheet | Overlay |
111+
| Tooltip | Overlay |

‎packages/ui/src/components/dropdown-menu/dropdown-menu.module.css‎

Lines changed: 1 addition & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -68,59 +68,6 @@
6868
@apply ml-auto;
6969
}
7070

71-
/* ELEVATIONS */
72-
73-
.dropdown-menu-content--sunken,
74-
.dropdown-menu-content--sunken .dropdown-menu-sub-content {
75-
@apply bg-background-sunken shadow-shadow-sunken border-border-sunken;
76-
}
77-
.dropdown-menu-content--sunken .dropdown-menu-trigger,
78-
.dropdown-menu-content--sunken .dropdown-menu-item,
79-
.dropdown-menu-content--sunken .dropdown-menu-checkbox-item,
80-
.dropdown-menu-content--sunken .dropdown-menu-radio-item {
81-
--mix-color: var(--color-background-sunken);
82-
}
83-
84-
.dropdown-menu-content--base,
85-
.dropdown-menu-content--base .dropdown-menu-sub-content {
86-
@apply bg-background shadow-shadow-base border-border-base;
87-
}
88-
.dropdown-menu-content--base .dropdown-menu-trigger,
89-
.dropdown-menu-content--base .dropdown-menu-item,
90-
.dropdown-menu-content--base .dropdown-menu-checkbox-item,
91-
.dropdown-menu-content--base .dropdown-menu-radio-item {
92-
--mix-color: var(--color-background);
93-
}
94-
95-
.dropdown-menu-content--raised,
96-
.dropdown-menu-content--raised .dropdown-menu-sub-content {
97-
@apply bg-background-raised shadow-shadow-raised border-border-raised;
98-
}
99-
.dropdown-menu-content--raised .dropdown-menu-trigger,
100-
.dropdown-menu-content--raised .dropdown-menu-item,
101-
.dropdown-menu-content--raised .dropdown-menu-checkbox-item,
102-
.dropdown-menu-content--raised .dropdown-menu-radio-item {
103-
--mix-color: var(--color-background-raised);
104-
}
105-
106-
.dropdown-menu-content--overlay,
107-
.dropdown-menu-content--overlay .dropdown-menu-sub-content {
108-
@apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
109-
}
110-
.dropdown-menu-content--overlay .dropdown-menu-trigger,
111-
.dropdown-menu-content--overlay .dropdown-menu-item,
112-
.dropdown-menu-content--overlay .dropdown-menu-checkbox-item,
113-
.dropdown-menu-content--overlay .dropdown-menu-radio-item {
114-
--mix-color: var(--color-background-overlay);
115-
}
116-
117-
.dropdown-menu-content--floating,
118-
.dropdown-menu-content--floating .dropdown-menu-sub-content {
71+
.dropdown-menu-content {
11972
@apply bg-background-floating shadow-shadow-floating border-border-floating;
12073
}
121-
.dropdown-menu-content--floating .dropdown-menu-trigger,
122-
.dropdown-menu-content--floating .dropdown-menu-item,
123-
.dropdown-menu-content--floating .dropdown-menu-checkbox-item,
124-
.dropdown-menu-content--floating .dropdown-menu-radio-item {
125-
--mix-color: var(--color-background-floating);
126-
}

‎packages/ui/src/components/dropdown-menu/dropdown-menu.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import * as React from 'react';
22
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
3-
import { VariantProps } from 'class-variance-authority';
43
import { Check, ChevronRight, Circle } from 'lucide-react';
54

65
import styles from '@/components/dropdown-menu/dropdown-menu.module.css';
7-
import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
86
import { cn, getThemeProviderRoot } from '@/lib/utils';
97

108
const CheckIcon = Check as React.ComponentType<{ className?: string }>;
@@ -60,26 +58,15 @@ const DropdownMenuSubContent = React.forwardRef<
6058
));
6159
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
6260

63-
const dropdownMenuContentElevationVariants = generateElevationVariants(
64-
styles,
65-
'dropdown-menu-content',
66-
ELEVATION.OVERLAY
67-
);
68-
6961
const DropdownMenuContent = React.forwardRef<
7062
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
71-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
72-
VariantProps<typeof dropdownMenuContentElevationVariants>
73-
>(({ className, sideOffset = 4, elevation = ELEVATION.OVERLAY, ...props }, ref) => (
63+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
64+
>(({ className, sideOffset = 4, ...props }, ref) => (
7465
<DropdownMenuPortal>
7566
<DropdownMenuPrimitive.Content
7667
ref={ref}
7768
sideOffset={sideOffset}
78-
className={cn(
79-
styles['dropdown-menu-content'],
80-
dropdownMenuContentElevationVariants({ elevation }),
81-
className
82-
)}
69+
className={cn(styles['dropdown-menu-content'], className)}
8370
{...props}
8471
/>
8572
</DropdownMenuPortal>

‎packages/ui/src/components/filter-dropdown/filter-dropdown.module.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@
99
@apply flex items-center gap-1;
1010
}
1111

12-
.selected-filters-count {
13-
@apply bg-brand-primary text-text-primary;
14-
@apply rounded-full px-2 py-0.5;
15-
@apply text-xs font-medium;
16-
}
17-
1812
.chevron-icon {
1913
@apply text-text-secondary;
2014
}

‎packages/ui/src/components/filter-dropdown/filter-dropdown.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { ChevronDown } from 'lucide-react';
33

4+
import { Badge } from '@/components/badge/badge';
45
import { Button } from '@/components/button/button';
56
import {
67
DropdownMenu,
@@ -11,7 +12,6 @@ import {
1112
DropdownMenuTrigger,
1213
} from '@/components/dropdown-menu/dropdown-menu';
1314
import styles from '@/components/filter-dropdown/filter-dropdown.module.css';
14-
import { ELEVATION, Elevation } from '@/lib/elevations';
1515
import { cn } from '@/lib/utils';
1616

1717
const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
@@ -25,7 +25,6 @@ interface FilterDropdownProps {
2525
label: string;
2626
options: FilterOption[];
2727
selectedFilters: string[];
28-
dropdownElevation?: Elevation;
2928
onToggleFilter: (value: string) => void;
3029
onClearAll: () => void;
3130
buttonClassName?: string;
@@ -36,7 +35,6 @@ const FilterDropdown = ({
3635
label,
3736
options,
3837
selectedFilters,
39-
dropdownElevation = ELEVATION.OVERLAY,
4038
onToggleFilter,
4139
onClearAll,
4240
buttonClassName,
@@ -56,17 +54,14 @@ const FilterDropdown = ({
5654
<Button variant="tertiary" className={cn(styles['selector-button'], buttonClassName)}>
5755
<span className={styles['selector-button-inner']}>
5856
{label}
59-
{hasSelectedFilters && (
60-
<span className={styles['selected-filters-count']}>{selectedFilters.length}</span>
61-
)}
57+
{hasSelectedFilters && <Badge variant="primary">{selectedFilters.length}</Badge>}
6258
</span>
6359
<ChevronDownIcon className={styles['chevron-icon']} />
6460
</Button>
6561
</DropdownMenuTrigger>
6662
<DropdownMenuContent
6763
align="end"
6864
className={cn(styles['dropdown-menu-content'], contentClassName)}
69-
elevation={dropdownElevation}
7065
>
7166
<DropdownMenuLabel>
7267
Filters

‎packages/ui/src/components/pagination/pagination.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
SelectTrigger,
1111
SelectValue,
1212
} from '@/components/select/select';
13-
import { ELEVATION, Elevation } from '@/lib/elevations';
1413
import { cn } from '@/lib/utils';
1514

1615
const ChevronLeftIcon = ChevronLeft as React.ComponentType<{ className?: string }>;
@@ -26,7 +25,6 @@ interface PaginationProps {
2625
itemsPerPageOptions?: number[];
2726
showInfo?: boolean;
2827
maxVisiblePages?: number;
29-
dropdownElevation?: Elevation;
3028
className?: string;
3129
type?: string;
3230
scrollTargetRef?: React.RefObject<HTMLElement | null> | string;
@@ -42,7 +40,6 @@ const Pagination = ({
4240
itemsPerPageOptions = [10, 25, 50, 100],
4341
showInfo = true,
4442
maxVisiblePages = 5,
45-
dropdownElevation = ELEVATION.OVERLAY,
4643
className = '',
4744
type = '',
4845
scrollTargetRef,
@@ -149,7 +146,7 @@ const Pagination = ({
149146
<SelectTrigger>
150147
<SelectValue />
151148
</SelectTrigger>
152-
<SelectContent elevation={dropdownElevation}>
149+
<SelectContent>
153150
{itemsPerPageOptions.map((option) => (
154151
<SelectItem key={option} value={option.toString()}>
155152
{option}

‎packages/ui/src/components/popover/popover.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@reference '../../theme/theme.module.css';
22

33
.popover-content {
4-
@apply bg-background-overlay text-text-primary outline-hidden;
5-
@apply border-border-overlay border;
6-
@apply shadow-shadow-overlay shadow-sm;
4+
@apply bg-background-floating text-text-primary outline-hidden;
5+
@apply border-border-floating border;
6+
@apply shadow-shadow-floating shadow-sm;
77
@apply z-modal w-72 rounded-md p-4;
88
@apply origin-(--radix-popover-content-transform-origin);
99
@apply animate-popup-content;

‎packages/ui/src/components/radio-dropdown/radio-dropdown.module.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
@apply capitalize;
66
}
77

8-
.selected-count {
9-
@apply bg-brand-primary text-text-primary;
10-
@apply rounded-full px-2 py-0.5;
11-
@apply text-xs font-medium;
12-
}
13-
148
.chevron-icon {
159
@apply text-text-secondary;
1610
}

0 commit comments

Comments
 (0)