@rogieking/figui3 2.22.0 → 2.22.2
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/components.css +8 -0
- package/fig.js +56 -42
- package/index.html +213 -2
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -2630,6 +2630,14 @@ fig-segmented-control {
|
|
|
2630
2630
|
}
|
|
2631
2631
|
}
|
|
2632
2632
|
|
|
2633
|
+
&[size="large"] {
|
|
2634
|
+
height: var(--spacer-5);
|
|
2635
|
+
|
|
2636
|
+
& fig-segment {
|
|
2637
|
+
padding: 0 var(--spacer-3);
|
|
2638
|
+
}
|
|
2639
|
+
}
|
|
2640
|
+
|
|
2633
2641
|
&[disabled]:not([disabled="false"]) {
|
|
2634
2642
|
pointer-events: none;
|
|
2635
2643
|
|
package/fig.js
CHANGED
|
@@ -73,6 +73,13 @@ class FigButton extends HTMLElement {
|
|
|
73
73
|
width: 100%;
|
|
74
74
|
min-width: 0;
|
|
75
75
|
}
|
|
76
|
+
:host([size="large"]) button {
|
|
77
|
+
height: var(--spacer-5);
|
|
78
|
+
padding: 0 var(--spacer-3);
|
|
79
|
+
}
|
|
80
|
+
:host([size="large"][icon]) button {
|
|
81
|
+
padding: 0;
|
|
82
|
+
}
|
|
76
83
|
</style>
|
|
77
84
|
<button type="${this.type}">
|
|
78
85
|
<slot></slot>
|
|
@@ -1072,7 +1079,7 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1072
1079
|
constructor() {
|
|
1073
1080
|
super();
|
|
1074
1081
|
this.#boundReposition = this.#queueReposition.bind(this);
|
|
1075
|
-
this.#boundScroll = this.#
|
|
1082
|
+
this.#boundScroll = () => { if (this.open) this.#positionPopup(); };
|
|
1076
1083
|
this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
|
|
1077
1084
|
this.#boundPointerDown = this.#handlePointerDown.bind(this);
|
|
1078
1085
|
this.#boundPointerMove = this.#handlePointerMove.bind(this);
|
|
@@ -1265,7 +1272,7 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1265
1272
|
}
|
|
1266
1273
|
|
|
1267
1274
|
window.addEventListener("resize", this.#boundReposition);
|
|
1268
|
-
window.addEventListener("scroll", this.#boundScroll, true);
|
|
1275
|
+
window.addEventListener("scroll", this.#boundScroll, { capture: true, passive: true });
|
|
1269
1276
|
}
|
|
1270
1277
|
|
|
1271
1278
|
#teardownObservers() {
|
|
@@ -1282,7 +1289,7 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1282
1289
|
this.#mutationObserver = null;
|
|
1283
1290
|
}
|
|
1284
1291
|
window.removeEventListener("resize", this.#boundReposition);
|
|
1285
|
-
window.removeEventListener("scroll", this.#boundScroll, true);
|
|
1292
|
+
window.removeEventListener("scroll", this.#boundScroll, { capture: true, passive: true });
|
|
1286
1293
|
}
|
|
1287
1294
|
|
|
1288
1295
|
#handleOutsidePointerDown(event) {
|
|
@@ -1542,9 +1549,8 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1542
1549
|
const opp = { top: "bottom", bottom: "top", left: "right", right: "left", center: "center" };
|
|
1543
1550
|
|
|
1544
1551
|
if (shorthand) {
|
|
1545
|
-
const
|
|
1546
|
-
|
|
1547
|
-
: ["left", "right"];
|
|
1552
|
+
const isHorizontal = shorthand === "left" || shorthand === "right";
|
|
1553
|
+
const perp = isHorizontal ? ["top", "bottom"] : ["left", "right"];
|
|
1548
1554
|
return [
|
|
1549
1555
|
{ v: vertical, h: horizontal, s: shorthand },
|
|
1550
1556
|
{ v: vertical, h: horizontal, s: opp[shorthand] },
|
|
@@ -1587,32 +1593,19 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1587
1593
|
let top;
|
|
1588
1594
|
let left;
|
|
1589
1595
|
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
left: anchorRect.right + offset.xPx,
|
|
1597
|
-
};
|
|
1598
|
-
}
|
|
1599
|
-
if (shorthand === "left") {
|
|
1600
|
-
return {
|
|
1601
|
-
top: anchorRect.top,
|
|
1602
|
-
left: anchorRect.left - popupRect.width - offset.xPx,
|
|
1603
|
-
};
|
|
1604
|
-
}
|
|
1605
|
-
if (shorthand === "top") {
|
|
1606
|
-
return {
|
|
1607
|
-
top: anchorRect.top - popupRect.height - offset.yPx,
|
|
1608
|
-
left: anchorRect.left,
|
|
1609
|
-
};
|
|
1596
|
+
if (shorthand === "left" || shorthand === "right") {
|
|
1597
|
+
left = shorthand === "left"
|
|
1598
|
+
? anchorRect.left - popupRect.width - offset.xPx
|
|
1599
|
+
: anchorRect.right + offset.xPx;
|
|
1600
|
+
top = anchorRect.top;
|
|
1601
|
+
return { top, left };
|
|
1610
1602
|
}
|
|
1611
|
-
if (shorthand === "bottom") {
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1603
|
+
if (shorthand === "top" || shorthand === "bottom") {
|
|
1604
|
+
top = shorthand === "top"
|
|
1605
|
+
? anchorRect.top - popupRect.height - offset.yPx
|
|
1606
|
+
: anchorRect.bottom + offset.yPx;
|
|
1607
|
+
left = anchorRect.left;
|
|
1608
|
+
return { top, left };
|
|
1616
1609
|
}
|
|
1617
1610
|
|
|
1618
1611
|
if (vertical === "top") {
|
|
@@ -1757,17 +1750,38 @@ class FigPopup extends HTMLDialogElement {
|
|
|
1757
1750
|
for (const { v, h, s } of candidates) {
|
|
1758
1751
|
const coords = this.#computeCoords(anchorRect, popupRect, v, h, offset, s);
|
|
1759
1752
|
const placementSide = this.#getPlacementSide(v, h, s);
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
this.#
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1753
|
+
|
|
1754
|
+
if (s) {
|
|
1755
|
+
// Shorthand: clamp cross-axis to viewport, check primary axis fit
|
|
1756
|
+
const clamped = this.#clamp(coords, popupRect);
|
|
1757
|
+
const primaryFits = (s === "left" || s === "right")
|
|
1758
|
+
? (coords.left >= this.#viewportPadding && coords.left + popupRect.width <= window.innerWidth - this.#viewportPadding)
|
|
1759
|
+
: (coords.top >= this.#viewportPadding && coords.top + popupRect.height <= window.innerHeight - this.#viewportPadding);
|
|
1760
|
+
if (primaryFits) {
|
|
1761
|
+
this.style.left = `${clamped.left}px`;
|
|
1762
|
+
this.style.top = `${clamped.top}px`;
|
|
1763
|
+
this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, placementSide);
|
|
1764
|
+
return;
|
|
1765
|
+
}
|
|
1766
|
+
const score = this.#overflowScore(coords, popupRect);
|
|
1767
|
+
if (score < bestScore) {
|
|
1768
|
+
bestScore = score;
|
|
1769
|
+
best = clamped;
|
|
1770
|
+
bestSide = placementSide;
|
|
1771
|
+
}
|
|
1772
|
+
} else {
|
|
1773
|
+
if (this.#fits(coords, popupRect)) {
|
|
1774
|
+
this.style.left = `${coords.left}px`;
|
|
1775
|
+
this.style.top = `${coords.top}px`;
|
|
1776
|
+
this.#updatePopoverBeak(anchorRect, popupRect, coords.left, coords.top, placementSide);
|
|
1777
|
+
return;
|
|
1778
|
+
}
|
|
1779
|
+
const score = this.#overflowScore(coords, popupRect);
|
|
1780
|
+
if (score < bestScore) {
|
|
1781
|
+
bestScore = score;
|
|
1782
|
+
best = coords;
|
|
1783
|
+
bestSide = placementSide;
|
|
1784
|
+
}
|
|
1771
1785
|
}
|
|
1772
1786
|
}
|
|
1773
1787
|
|
package/index.html
CHANGED
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
nav {
|
|
26
26
|
position: fixed;
|
|
27
|
-
width:
|
|
27
|
+
width: 20vw;
|
|
28
|
+
min-width: 128px;
|
|
29
|
+
max-width: 320px;
|
|
28
30
|
height: 100vh;
|
|
29
31
|
overflow-y: auto;
|
|
30
32
|
background: var(--figma-color-bg-secondary);
|
|
@@ -105,7 +107,7 @@
|
|
|
105
107
|
}
|
|
106
108
|
|
|
107
109
|
main {
|
|
108
|
-
margin-left:
|
|
110
|
+
margin-left: clamp(128px, 20vw, 320px);
|
|
109
111
|
padding: 24px 32px;
|
|
110
112
|
max-width: 800px;
|
|
111
113
|
min-height: 100vh;
|
|
@@ -461,6 +463,84 @@
|
|
|
461
463
|
</fig-button>
|
|
462
464
|
</fig-field>
|
|
463
465
|
|
|
466
|
+
<h3>Large Icon Buttons</h3>
|
|
467
|
+
<fig-field direction="horizontal">
|
|
468
|
+
<label>Large icon</label>
|
|
469
|
+
<fig-button icon="true"
|
|
470
|
+
size="large">
|
|
471
|
+
<svg width="16"
|
|
472
|
+
height="16"
|
|
473
|
+
viewBox="0 0 16 16"
|
|
474
|
+
fill="none"
|
|
475
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
476
|
+
<path fill-rule="evenodd"
|
|
477
|
+
clip-rule="evenodd"
|
|
478
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
479
|
+
fill="currentColor" />
|
|
480
|
+
</svg>
|
|
481
|
+
</fig-button>
|
|
482
|
+
</fig-field>
|
|
483
|
+
<fig-field direction="horizontal">
|
|
484
|
+
<label>Large icon (secondary)</label>
|
|
485
|
+
<fig-button variant="secondary"
|
|
486
|
+
icon="true"
|
|
487
|
+
size="large">
|
|
488
|
+
<svg width="16"
|
|
489
|
+
height="16"
|
|
490
|
+
viewBox="0 0 16 16"
|
|
491
|
+
fill="none"
|
|
492
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
493
|
+
<path fill-rule="evenodd"
|
|
494
|
+
clip-rule="evenodd"
|
|
495
|
+
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
496
|
+
fill="currentColor" />
|
|
497
|
+
</svg>
|
|
498
|
+
</fig-button>
|
|
499
|
+
</fig-field>
|
|
500
|
+
<fig-field direction="horizontal">
|
|
501
|
+
<label>Large icon (ghost)</label>
|
|
502
|
+
<fig-button variant="ghost"
|
|
503
|
+
icon="true"
|
|
504
|
+
size="large">
|
|
505
|
+
<svg width="16"
|
|
506
|
+
height="16"
|
|
507
|
+
viewBox="0 0 16 16"
|
|
508
|
+
fill="none"
|
|
509
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
510
|
+
<path fill-rule="evenodd"
|
|
511
|
+
clip-rule="evenodd"
|
|
512
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
513
|
+
fill="currentColor" />
|
|
514
|
+
</svg>
|
|
515
|
+
</fig-button>
|
|
516
|
+
</fig-field>
|
|
517
|
+
<fig-field direction="horizontal">
|
|
518
|
+
<label>Large icon (input)</label>
|
|
519
|
+
<fig-button variant="input"
|
|
520
|
+
icon="true"
|
|
521
|
+
size="large">
|
|
522
|
+
<span class="fig-mask-icon"
|
|
523
|
+
style="--icon: var(--icon-chevron); --size: 1rem"></span>
|
|
524
|
+
</fig-button>
|
|
525
|
+
</fig-field>
|
|
526
|
+
<fig-field direction="horizontal">
|
|
527
|
+
<label>Large icon (link)</label>
|
|
528
|
+
<fig-button variant="link"
|
|
529
|
+
icon="true"
|
|
530
|
+
size="large">
|
|
531
|
+
<svg width="16"
|
|
532
|
+
height="16"
|
|
533
|
+
viewBox="0 0 16 16"
|
|
534
|
+
fill="none"
|
|
535
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
536
|
+
<path fill-rule="evenodd"
|
|
537
|
+
clip-rule="evenodd"
|
|
538
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
539
|
+
fill="currentColor" />
|
|
540
|
+
</svg>
|
|
541
|
+
</fig-button>
|
|
542
|
+
</fig-field>
|
|
543
|
+
|
|
464
544
|
<h3>Button Types</h3>
|
|
465
545
|
<fig-field direction="horizontal">
|
|
466
546
|
<label>Select (with dropdown)</label>
|
|
@@ -570,6 +650,56 @@
|
|
|
570
650
|
</fig-button>
|
|
571
651
|
</fig-button-combo>
|
|
572
652
|
</fig-field>
|
|
653
|
+
<fig-field direction="horizontal">
|
|
654
|
+
<label>Input combo</label>
|
|
655
|
+
<fig-button-combo>
|
|
656
|
+
<fig-button variant="input">Input</fig-button>
|
|
657
|
+
<fig-button variant="input"
|
|
658
|
+
icon="true"
|
|
659
|
+
type="select">
|
|
660
|
+
<svg width="24"
|
|
661
|
+
height="24"
|
|
662
|
+
viewBox="0 0 24 24"
|
|
663
|
+
fill="none"
|
|
664
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
665
|
+
<path fill-rule="evenodd"
|
|
666
|
+
clip-rule="evenodd"
|
|
667
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
668
|
+
fill="currentColor"
|
|
669
|
+
fill-opacity="0.9" />
|
|
670
|
+
</svg>
|
|
671
|
+
<fig-dropdown>
|
|
672
|
+
<option>Option One</option>
|
|
673
|
+
<option>Option Two</option>
|
|
674
|
+
</fig-dropdown>
|
|
675
|
+
</fig-button>
|
|
676
|
+
</fig-button-combo>
|
|
677
|
+
</fig-field>
|
|
678
|
+
<fig-field direction="horizontal">
|
|
679
|
+
<label>Ghost combo</label>
|
|
680
|
+
<fig-button-combo>
|
|
681
|
+
<fig-button variant="ghost">Ghost</fig-button>
|
|
682
|
+
<fig-button variant="ghost"
|
|
683
|
+
icon="true"
|
|
684
|
+
type="select">
|
|
685
|
+
<svg width="24"
|
|
686
|
+
height="24"
|
|
687
|
+
viewBox="0 0 24 24"
|
|
688
|
+
fill="none"
|
|
689
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
690
|
+
<path fill-rule="evenodd"
|
|
691
|
+
clip-rule="evenodd"
|
|
692
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
693
|
+
fill="currentColor"
|
|
694
|
+
fill-opacity="0.9" />
|
|
695
|
+
</svg>
|
|
696
|
+
<fig-dropdown>
|
|
697
|
+
<option>Option One</option>
|
|
698
|
+
<option>Option Two</option>
|
|
699
|
+
</fig-dropdown>
|
|
700
|
+
</fig-button>
|
|
701
|
+
</fig-button-combo>
|
|
702
|
+
</fig-field>
|
|
573
703
|
<fig-field direction="horizontal">
|
|
574
704
|
<label>Disabled combo</label>
|
|
575
705
|
<fig-button-combo>
|
|
@@ -3270,6 +3400,87 @@
|
|
|
3270
3400
|
</svg>
|
|
3271
3401
|
</fig-segment>
|
|
3272
3402
|
</fig-segmented-control>
|
|
3403
|
+
|
|
3404
|
+
<h3>Large</h3>
|
|
3405
|
+
<fig-segmented-control size="large">
|
|
3406
|
+
<fig-segment selected>One</fig-segment>
|
|
3407
|
+
<fig-segment>Two</fig-segment>
|
|
3408
|
+
<fig-segment>Three</fig-segment>
|
|
3409
|
+
</fig-segmented-control>
|
|
3410
|
+
|
|
3411
|
+
<h3>Large (Two Options)</h3>
|
|
3412
|
+
<fig-segmented-control size="large">
|
|
3413
|
+
<fig-segment selected>Left</fig-segment>
|
|
3414
|
+
<fig-segment>Right</fig-segment>
|
|
3415
|
+
</fig-segmented-control>
|
|
3416
|
+
|
|
3417
|
+
<h3>Large (With Icons)</h3>
|
|
3418
|
+
<fig-segmented-control size="large">
|
|
3419
|
+
<fig-segment selected>
|
|
3420
|
+
<svg width="24"
|
|
3421
|
+
height="24"
|
|
3422
|
+
viewBox="0 0 24 24"
|
|
3423
|
+
fill="none"
|
|
3424
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
3425
|
+
<path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z"
|
|
3426
|
+
fill="black"
|
|
3427
|
+
fill-opacity="0.9" />
|
|
3428
|
+
</svg>
|
|
3429
|
+
</fig-segment>
|
|
3430
|
+
<fig-segment>
|
|
3431
|
+
<svg width="24"
|
|
3432
|
+
height="24"
|
|
3433
|
+
viewBox="0 0 24 24"
|
|
3434
|
+
fill="none"
|
|
3435
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
3436
|
+
<path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z"
|
|
3437
|
+
fill="black"
|
|
3438
|
+
fill-opacity="0.9" />
|
|
3439
|
+
</svg>
|
|
3440
|
+
</fig-segment>
|
|
3441
|
+
</fig-segmented-control>
|
|
3442
|
+
|
|
3443
|
+
<h3>Large (Many Options)</h3>
|
|
3444
|
+
<fig-segmented-control size="large">
|
|
3445
|
+
<fig-segment>XS</fig-segment>
|
|
3446
|
+
<fig-segment>S</fig-segment>
|
|
3447
|
+
<fig-segment selected>M</fig-segment>
|
|
3448
|
+
<fig-segment>L</fig-segment>
|
|
3449
|
+
<fig-segment>XL</fig-segment>
|
|
3450
|
+
</fig-segmented-control>
|
|
3451
|
+
|
|
3452
|
+
<h3>Large Disabled (Text)</h3>
|
|
3453
|
+
<fig-segmented-control size="large" disabled>
|
|
3454
|
+
<fig-segment>List</fig-segment>
|
|
3455
|
+
<fig-segment selected>Grid</fig-segment>
|
|
3456
|
+
<fig-segment>Board</fig-segment>
|
|
3457
|
+
</fig-segmented-control>
|
|
3458
|
+
|
|
3459
|
+
<h3>Large Disabled (Icons)</h3>
|
|
3460
|
+
<fig-segmented-control size="large" disabled>
|
|
3461
|
+
<fig-segment selected>
|
|
3462
|
+
<svg width="24"
|
|
3463
|
+
height="24"
|
|
3464
|
+
viewBox="0 0 24 24"
|
|
3465
|
+
fill="none"
|
|
3466
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
3467
|
+
<path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z"
|
|
3468
|
+
fill="black"
|
|
3469
|
+
fill-opacity="0.9" />
|
|
3470
|
+
</svg>
|
|
3471
|
+
</fig-segment>
|
|
3472
|
+
<fig-segment>
|
|
3473
|
+
<svg width="24"
|
|
3474
|
+
height="24"
|
|
3475
|
+
viewBox="0 0 24 24"
|
|
3476
|
+
fill="none"
|
|
3477
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
3478
|
+
<path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z"
|
|
3479
|
+
fill="black"
|
|
3480
|
+
fill-opacity="0.9" />
|
|
3481
|
+
</svg>
|
|
3482
|
+
</fig-segment>
|
|
3483
|
+
</fig-segmented-control>
|
|
3273
3484
|
</section>
|
|
3274
3485
|
<hr>
|
|
3275
3486
|
|
package/package.json
CHANGED