@rogieking/figui3 2.22.1 → 2.22.3

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.
Files changed (4) hide show
  1. package/components.css +10 -0
  2. package/fig.js +6 -0
  3. package/index.html +211 -0
  4. package/package.json +1 -1
package/components.css CHANGED
@@ -779,6 +779,8 @@ fig-button {
779
779
  &[size="large"][icon],
780
780
  &[size="large"][icon] > button {
781
781
  width: var(--spacer-5);
782
+ flex-basis: var(--spacer-5);
783
+ padding: 0;
782
784
  }
783
785
 
784
786
  /* Full width */
@@ -2630,6 +2632,14 @@ fig-segmented-control {
2630
2632
  }
2631
2633
  }
2632
2634
 
2635
+ &[size="large"] {
2636
+ height: var(--spacer-5);
2637
+
2638
+ & fig-segment {
2639
+ padding: 0 var(--spacer-3);
2640
+ }
2641
+ }
2642
+
2633
2643
  &[disabled]:not([disabled="false"]) {
2634
2644
  pointer-events: none;
2635
2645
 
package/fig.js CHANGED
@@ -73,6 +73,12 @@ 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
+ }
79
+ :host([size="large"][icon]) button {
80
+ padding: 0;
81
+ }
76
82
  </style>
77
83
  <button type="${this.type}">
78
84
  <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="24"
472
+ height="24"
473
+ viewBox="0 0 24 24"
474
+ fill="none"
475
+ xmlns="http://www.w3.org/2000/svg">
476
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
477
+ fill="black"
478
+ fill-opacity="0.9" />
479
+ </svg>
480
+
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="24"
489
+ height="24"
490
+ viewBox="0 0 24 24"
491
+ fill="none"
492
+ xmlns="http://www.w3.org/2000/svg">
493
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
494
+ fill="black"
495
+ fill-opacity="0.9" />
496
+ </svg>
497
+
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="24"
506
+ height="24"
507
+ viewBox="0 0 24 24"
508
+ fill="none"
509
+ xmlns="http://www.w3.org/2000/svg">
510
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
511
+ fill="black"
512
+ fill-opacity="0.9" />
513
+ </svg>
514
+
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: 1.5rem"></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="24"
532
+ height="24"
533
+ viewBox="0 0 24 24"
534
+ fill="none"
535
+ xmlns="http://www.w3.org/2000/svg">
536
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
537
+ fill="black"
538
+ fill-opacity="0.9" />
539
+ </svg>
540
+
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,89 @@
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"
3454
+ disabled>
3455
+ <fig-segment>List</fig-segment>
3456
+ <fig-segment selected>Grid</fig-segment>
3457
+ <fig-segment>Board</fig-segment>
3458
+ </fig-segmented-control>
3459
+
3460
+ <h3>Large Disabled (Icons)</h3>
3461
+ <fig-segmented-control size="large"
3462
+ disabled>
3463
+ <fig-segment selected>
3464
+ <svg width="24"
3465
+ height="24"
3466
+ viewBox="0 0 24 24"
3467
+ fill="none"
3468
+ xmlns="http://www.w3.org/2000/svg">
3469
+ <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"
3470
+ fill="black"
3471
+ fill-opacity="0.9" />
3472
+ </svg>
3473
+ </fig-segment>
3474
+ <fig-segment>
3475
+ <svg width="24"
3476
+ height="24"
3477
+ viewBox="0 0 24 24"
3478
+ fill="none"
3479
+ xmlns="http://www.w3.org/2000/svg">
3480
+ <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"
3481
+ fill="black"
3482
+ fill-opacity="0.9" />
3483
+ </svg>
3484
+ </fig-segment>
3485
+ </fig-segmented-control>
3275
3486
  </section>
3276
3487
  <hr>
3277
3488
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "2.22.1",
3
+ "version": "2.22.3",
4
4
  "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
5
5
  "author": "Rogie King",
6
6
  "license": "MIT",