@rogieking/figui3 6.16.0 → 6.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/components.css +45 -2
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-lab.css +1 -1
- package/dist/fig-lab.js +86 -14
- package/dist/fig.css +1 -1
- package/dist/fig.js +22 -22
- package/fig-lab.css +273 -7
- package/fig-lab.js +951 -11
- package/fig.js +36 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1178,9 +1178,13 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
|
|
|
1178
1178
|
<fig-menu-item value="paste">Paste</fig-menu-item>
|
|
1179
1179
|
<fig-menu-separator></fig-menu-separator>
|
|
1180
1180
|
<fig-menu-item value="delete" disabled>Delete</fig-menu-item>
|
|
1181
|
+
<fig-menu-separator label="More"></fig-menu-separator>
|
|
1182
|
+
<fig-menu-item value="settings">Settings</fig-menu-item>
|
|
1181
1183
|
</fig-menu>
|
|
1182
1184
|
```
|
|
1183
1185
|
|
|
1186
|
+
`fig-menu-separator` accepts optional `label` — renders the rule, then secondary group text underneath.
|
|
1187
|
+
|
|
1184
1188
|
---
|
|
1185
1189
|
|
|
1186
1190
|
#### Header
|
package/components.css
CHANGED
|
@@ -5345,7 +5345,7 @@ fig-menu {
|
|
|
5345
5345
|
}
|
|
5346
5346
|
|
|
5347
5347
|
fig-menu-item {
|
|
5348
|
-
--fig-menu-item-padding: var(--spacer-
|
|
5348
|
+
--fig-menu-item-padding: var(--spacer-4);
|
|
5349
5349
|
display: flex;
|
|
5350
5350
|
align-items: center;
|
|
5351
5351
|
gap: var(--spacer-2);
|
|
@@ -5383,8 +5383,51 @@ fig-menu-item {
|
|
|
5383
5383
|
}
|
|
5384
5384
|
|
|
5385
5385
|
fig-menu-separator {
|
|
5386
|
+
--fig-menu-separator-color: var(--figma-color-border);
|
|
5387
|
+
--fig-menu-separator-label-color: var(--figma-color-text-secondary);
|
|
5388
|
+
|
|
5386
5389
|
display: block;
|
|
5387
5390
|
height: 1px;
|
|
5388
|
-
background: var(--figma-color-border);
|
|
5389
5391
|
margin: var(--spacer-2) 0;
|
|
5392
|
+
padding: 0;
|
|
5393
|
+
border: 0;
|
|
5394
|
+
background: var(--fig-menu-separator-color);
|
|
5395
|
+
color: var(--fig-menu-separator-label-color);
|
|
5396
|
+
font-weight: var(--body-medium-fontWeight);
|
|
5397
|
+
pointer-events: none;
|
|
5398
|
+
user-select: none;
|
|
5399
|
+
|
|
5400
|
+
/* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
|
|
5401
|
+
&[label]:not([label=""]) {
|
|
5402
|
+
display: flex;
|
|
5403
|
+
flex-direction: column;
|
|
5404
|
+
gap: var(--spacer-2);
|
|
5405
|
+
height: auto;
|
|
5406
|
+
margin: var(--spacer-2) 0;
|
|
5407
|
+
margin-bottom: var(--spacer-1);
|
|
5408
|
+
padding: 0 var(--fig-menu-item-padding, var(--spacer-4));
|
|
5409
|
+
background: transparent;
|
|
5410
|
+
|
|
5411
|
+
&::before {
|
|
5412
|
+
content: "";
|
|
5413
|
+
display: block;
|
|
5414
|
+
height: 1px;
|
|
5415
|
+
margin-inline: calc(-1 * var(--fig-menu-item-padding, var(--spacer-4)));
|
|
5416
|
+
background: var(--fig-menu-separator-color);
|
|
5417
|
+
}
|
|
5418
|
+
|
|
5419
|
+
&::after {
|
|
5420
|
+
content: attr(label);
|
|
5421
|
+
display: block;
|
|
5422
|
+
color: var(--fig-menu-separator-label-color);
|
|
5423
|
+
line-height: var(--spacer-4);
|
|
5424
|
+
min-height: var(--spacer-4);
|
|
5425
|
+
}
|
|
5426
|
+
}
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
dialog[is="fig-popup"][theme="menu"] fig-menu-separator,
|
|
5430
|
+
fig-select-options > fig-menu-separator {
|
|
5431
|
+
--fig-menu-separator-color: var(--figma-color-border-menu);
|
|
5432
|
+
--fig-menu-separator-label-color: var(--figma-color-text-menu-secondary);
|
|
5390
5433
|
}
|