Skip to content

Commit 3cc6a5a

Browse files
ecklfecklf
authored
Merge pull request #53 from ecklf/develop
update class naming, add named group / peer support
2 parents 7983b90 + 156624d commit 3cc6a5a

File tree

3 files changed

+301
-270
lines changed

3 files changed

+301
-270
lines changed

‎src/__snapshots__/index.test.ts.snap‎

Lines changed: 73 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,114 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`should generate dimension origins 1`] = `
4-
".w-radix-context-menu {
5-
width: var(--radix-context-menu-content-available-width)
6-
}
7-
.max-w-radix-context-menu-content-available-width {
3+
exports[`should generate [width|height] \`content-available\` and \`trigger\` utilities 1`] = `
4+
".max-w-radix-context-menu-content-available {
85
max-width: var(--radix-context-menu-content-available-width)
96
}
10-
.h-radix-context-menu-content-available-height {
7+
.h-radix-context-menu-content-available {
118
height: var(--radix-context-menu-content-available-height)
129
}
13-
.max-h-radix-context-menu-content-available-height {
10+
.max-h-radix-context-menu-content-available {
1411
max-height: var(--radix-context-menu-content-available-height)
1512
}
16-
.w-radix-context-menu-trigger-width {
13+
.w-radix-context-menu-trigger {
1714
width: var(--radix-context-menu-trigger-width)
1815
}
19-
.h-radix-context-menu-trigger-height {
16+
.h-radix-context-menu-trigger {
2017
height: var(--radix-context-menu-trigger-height)
2118
}
22-
.w-radix-dropdown-menu {
23-
width: var(--radix-dropdown-menu-content-available-width)
24-
}
25-
.max-w-radix-dropdown-menu-content-available-width {
19+
.max-w-radix-dropdown-menu-content-available {
2620
max-width: var(--radix-dropdown-menu-content-available-width)
2721
}
28-
.h-radix-dropdown-menu-content-available-height {
22+
.h-radix-dropdown-menu-content-available {
2923
height: var(--radix-dropdown-menu-content-available-height)
3024
}
31-
.max-h-radix-dropdown-menu-content-available-height {
25+
.max-h-radix-dropdown-menu-content-available {
3226
max-height: var(--radix-dropdown-menu-content-available-height)
3327
}
34-
.w-radix-dropdown-menu-trigger-width {
28+
.w-radix-dropdown-menu-trigger {
3529
width: var(--radix-dropdown-menu-trigger-width)
3630
}
37-
.h-radix-dropdown-menu-trigger-height {
31+
.h-radix-dropdown-menu-trigger {
3832
height: var(--radix-dropdown-menu-trigger-height)
3933
}
40-
.w-radix-hover-card {
41-
width: var(--radix-hover-card-content-available-width)
42-
}
43-
.max-w-radix-hover-card-content-available-width {
34+
.max-w-radix-hover-card-content-available {
4435
max-width: var(--radix-hover-card-content-available-width)
4536
}
46-
.h-radix-hover-card-content-available-height {
37+
.h-radix-hover-card-content-available {
4738
height: var(--radix-hover-card-content-available-height)
4839
}
49-
.max-h-radix-hover-card-content-available-height {
40+
.max-h-radix-hover-card-content-available {
5041
max-height: var(--radix-hover-card-content-available-height)
5142
}
52-
.w-radix-hover-card-trigger-width {
43+
.w-radix-hover-card-trigger {
5344
width: var(--radix-hover-card-trigger-width)
5445
}
55-
.h-radix-hover-card-trigger-height {
46+
.h-radix-hover-card-trigger {
5647
height: var(--radix-hover-card-trigger-height)
5748
}
58-
.w-radix-menubar {
59-
width: var(--radix-menubar-content-available-width)
60-
}
61-
.max-w-radix-menubar-content-available-width {
49+
.max-w-radix-menubar-content-available {
6250
max-width: var(--radix-menubar-content-available-width)
6351
}
64-
.h-radix-menubar-content-available-height {
52+
.h-radix-menubar-content-available {
6553
height: var(--radix-menubar-content-available-height)
6654
}
67-
.max-h-radix-menubar-content-available-height {
55+
.max-h-radix-menubar-content-available {
6856
max-height: var(--radix-menubar-content-available-height)
6957
}
70-
.w-radix-menubar-trigger-width {
58+
.w-radix-menubar-trigger {
7159
width: var(--radix-menubar-trigger-width)
7260
}
73-
.h-radix-menubar-trigger-height {
61+
.h-radix-menubar-trigger {
7462
height: var(--radix-menubar-trigger-height)
7563
}
76-
.w-radix-popover {
77-
width: var(--radix-popover-content-available-width)
78-
}
79-
.max-w-radix-popover-content-available-width {
64+
.max-w-radix-popover-content-available {
8065
max-width: var(--radix-popover-content-available-width)
8166
}
82-
.h-radix-popover-content-available-height {
67+
.h-radix-popover-content-available {
8368
height: var(--radix-popover-content-available-height)
8469
}
85-
.max-h-radix-popover-content-available-height {
70+
.max-h-radix-popover-content-available {
8671
max-height: var(--radix-popover-content-available-height)
8772
}
88-
.w-radix-popover-trigger-width {
73+
.w-radix-popover-trigger {
8974
width: var(--radix-popover-trigger-width)
9075
}
91-
.h-radix-popover-trigger-height {
76+
.h-radix-popover-trigger {
9277
height: var(--radix-popover-trigger-height)
9378
}
94-
.w-radix-select {
95-
width: var(--radix-select-content-available-width)
96-
}
97-
.max-w-radix-select-content-available-width {
79+
.max-w-radix-select-content-available {
9880
max-width: var(--radix-select-content-available-width)
9981
}
100-
.h-radix-select-content-available-height {
82+
.h-radix-select-content-available {
10183
height: var(--radix-select-content-available-height)
10284
}
103-
.max-h-radix-select-content-available-height {
85+
.max-h-radix-select-content-available {
10486
max-height: var(--radix-select-content-available-height)
10587
}
106-
.w-radix-select-trigger-width {
88+
.w-radix-select-trigger {
10789
width: var(--radix-select-trigger-width)
10890
}
109-
.h-radix-select-trigger-height {
91+
.h-radix-select-trigger {
11092
height: var(--radix-select-trigger-height)
11193
}
112-
.w-radix-tooltip {
113-
width: var(--radix-tooltip-content-available-width)
114-
}
115-
.max-w-radix-tooltip-content-available-width {
94+
.max-w-radix-tooltip-content-available {
11695
max-width: var(--radix-tooltip-content-available-width)
11796
}
118-
.h-radix-tooltip-content-available-height {
97+
.h-radix-tooltip-content-available {
11998
height: var(--radix-tooltip-content-available-height)
12099
}
121-
.max-h-radix-tooltip-content-available-height {
100+
.max-h-radix-tooltip-content-available {
122101
max-height: var(--radix-tooltip-content-available-height)
123102
}
124-
.w-radix-tooltip-trigger-width {
103+
.w-radix-tooltip-trigger {
125104
width: var(--radix-tooltip-trigger-width)
126105
}
127-
.h-radix-tooltip-trigger-height {
106+
.h-radix-tooltip-trigger {
128107
height: var(--radix-tooltip-trigger-height)
129108
}"
130109
`;
131110

132-
exports[`should generate stateful data attributes 1`] = `
133-
".radix-state-open\\:opacity-50[data-state="open"] {
134-
opacity: 0.5
135-
}
136-
.group[data-state="open"] .group-radix-state-open\\:cursor-not-allowed {
137-
cursor: not-allowed
138-
}
139-
.peer[data-state="open"] ~ .peer-radix-state-open\\:cursor-not-allowed {
140-
cursor: not-allowed
141-
}"
142-
`;
143-
144-
exports[`should generate static data attributes 1`] = `
145-
".radix-disabled\\:opacity-50[data-disabled] {
146-
opacity: 0.5
147-
}
148-
.group[data-disabled] .group-radix-disabled\\:cursor-not-allowed {
149-
cursor: not-allowed
150-
}
151-
.peer[data-disabled] ~ .peer-radix-disabled\\:cursor-not-allowed {
152-
cursor: not-allowed
153-
}
154-
.radix-highlighted\\:opacity-50[data-highlighted] {
155-
opacity: 0.5
156-
}
157-
.group[data-highlighted] .group-radix-highlighted\\:cursor-not-allowed {
158-
cursor: not-allowed
159-
}
160-
.peer[data-highlighted] ~ .peer-radix-highlighted\\:cursor-not-allowed {
161-
cursor: not-allowed
162-
}
163-
.radix-placeholder\\:opacity-50[data-placeholder] {
164-
opacity: 0.5
165-
}
166-
.group[data-placeholder] .group-radix-placeholder\\:cursor-not-allowed {
167-
cursor: not-allowed
168-
}
169-
.peer[data-placeholder] ~ .peer-radix-placeholder\\:cursor-not-allowed {
170-
cursor: not-allowed
171-
}"
172-
`;
173-
174-
exports[`should generate tooltip dimensions 1`] = `
111+
exports[`should generate [width|height] utilities 1`] = `
175112
".w-radix-accordion-content {
176113
width: var(--radix-accordion-content-width)
177114
}
@@ -192,7 +129,31 @@ exports[`should generate tooltip dimensions 1`] = `
192129
}"
193130
`;
194131

195-
exports[`should generate tooltip transoforms 1`] = `
132+
exports[`should generate \`content-transform-origin\` utilities 1`] = `
133+
".origin-radix-context-menu {
134+
transform-origin: var(--radix-context-menu-content-transform-origin)
135+
}
136+
.origin-radix-dropdown-menu {
137+
transform-origin: var(--radix-dropdown-menu-content-transform-origin)
138+
}
139+
.origin-radix-hover-card {
140+
transform-origin: var(--radix-hover-card-content-transform-origin)
141+
}
142+
.origin-radix-menubar {
143+
transform-origin: var(--radix-menubar-content-transform-origin)
144+
}
145+
.origin-radix-popover {
146+
transform-origin: var(--radix-popover-content-transform-origin)
147+
}
148+
.origin-radix-select {
149+
transform-origin: var(--radix-select-content-transform-origin)
150+
}
151+
.origin-radix-tooltip {
152+
transform-origin: var(--radix-tooltip-content-transform-origin)
153+
}"
154+
`;
155+
156+
exports[`should generate tooltip transform utilities 1`] = `
196157
".translate-x-radix-toast-swipe-end-x {
197158
transform: translateX(var(--radix-toast-swipe-end-x))
198159
}
@@ -207,23 +168,20 @@ exports[`should generate tooltip transoforms 1`] = `
207168
}"
208169
`;
209170

210-
exports[`should generate transform origins 1`] = `
211-
".origin-radix-context-menu {
212-
transform-origin: var(--radix-context-menu-content-transform-origin)
213-
}
214-
.origin-radix-hover-card {
215-
transform-origin: var(--radix-hover-card-content-transform-origin)
171+
exports[`should generate value data attribute variants 1`] = `
172+
".radix-state-open\\:opacity-50[data-state="open"] {
173+
opacity: 0.5
216174
}
217-
.origin-radix-menubar {
218-
transform-origin: var(--radix-menubar-content-transform-origin)
175+
.group\\/named[data-state="open"] .group-radix-state-open\\/named\\:cursor-not-allowed {
176+
cursor: not-allowed
219177
}
220-
.origin-radix-popover {
221-
transform-origin: var(--radix-popover-content-transform-origin)
178+
.group[data-state="open"] .group-radix-state-open\\:cursor-not-allowed {
179+
cursor: not-allowed
222180
}
223-
.origin-radix-select {
224-
transform-origin: var(--radix-select-content-transform-origin)
181+
.peer\\/named[data-state="open"] ~ .peer-radix-state-open\\/named\\:cursor-not-allowed {
182+
cursor: not-allowed
225183
}
226-
.origin-radix-tooltip {
227-
transform-origin: var(--radix-tooltip-content-transform-origin)
184+
.peer[data-state="open"] ~ .peer-radix-state-open\\:cursor-not-allowed {
185+
cursor: not-allowed
228186
}"
229187
`;

0 commit comments

Comments
 (0)