@rogieking/figui3 2.22.1 → 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 +7 -0
- package/index.html +209 -0
- 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>
|
package/index.html
CHANGED
|
@@ -463,6 +463,84 @@
|
|
|
463
463
|
</fig-button>
|
|
464
464
|
</fig-field>
|
|
465
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
|
+
|
|
466
544
|
<h3>Button Types</h3>
|
|
467
545
|
<fig-field direction="horizontal">
|
|
468
546
|
<label>Select (with dropdown)</label>
|
|
@@ -572,6 +650,56 @@
|
|
|
572
650
|
</fig-button>
|
|
573
651
|
</fig-button-combo>
|
|
574
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>
|
|
575
703
|
<fig-field direction="horizontal">
|
|
576
704
|
<label>Disabled combo</label>
|
|
577
705
|
<fig-button-combo>
|
|
@@ -3272,6 +3400,87 @@
|
|
|
3272
3400
|
</svg>
|
|
3273
3401
|
</fig-segment>
|
|
3274
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>
|
|
3275
3484
|
</section>
|
|
3276
3485
|
<hr>
|
|
3277
3486
|
|
package/package.json
CHANGED