@primer/view-components 0.19.1-rc.cc8be3e8 → 0.20.0-rc.0f57965c

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 (31) hide show
  1. package/app/assets/javascripts/app/components/primer/alpha/action_list.d.ts +16 -0
  2. package/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +3 -0
  3. package/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  4. package/app/assets/javascripts/primer_view_components.js +1 -1
  5. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. package/app/assets/styles/primer_view_components.css +1 -1
  7. package/app/assets/styles/primer_view_components.css.map +1 -1
  8. package/app/components/primer/alpha/action_list.css +1 -1
  9. package/app/components/primer/alpha/action_list.css.json +2 -0
  10. package/app/components/primer/alpha/action_list.d.ts +16 -0
  11. package/app/components/primer/alpha/action_list.js +69 -0
  12. package/app/components/primer/alpha/banner.css +1 -1
  13. package/app/components/primer/alpha/dialog.css +1 -1
  14. package/app/components/primer/alpha/dialog.css.json +2 -0
  15. package/app/components/primer/alpha/text_field.css +1 -1
  16. package/app/components/primer/alpha/text_field.css.json +2 -0
  17. package/app/components/primer/beta/breadcrumbs.css +1 -1
  18. package/app/components/primer/beta/button.css +1 -1
  19. package/app/components/primer/beta/button.css.json +1 -0
  20. package/app/components/primer/beta/flash.css +1 -1
  21. package/app/components/primer/beta/nav_list.d.ts +3 -0
  22. package/app/components/primer/beta/nav_list.js +25 -2
  23. package/app/components/primer/beta/nav_list_group_element.js +4 -1
  24. package/app/components/primer/primer.d.ts +1 -0
  25. package/app/components/primer/primer.js +1 -0
  26. package/lib/primer/forms/primer_text_field.js +2 -2
  27. package/package.json +2 -2
  28. package/static/arguments.json +7 -7
  29. package/static/constants.json +15 -0
  30. package/static/info_arch.json +150 -7
  31. package/static/previews.json +143 -0
@@ -249,9 +249,9 @@
249
249
  },
250
250
  {
251
251
  "name": "truncate_label",
252
- "type": "Boolean",
253
- "default": "`false`",
254
- "description": "Truncate label with ellipsis."
252
+ "type": "Boolean | Symbol",
253
+ "default": "`:none`",
254
+ "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
255
255
  },
256
256
  {
257
257
  "name": "href",
@@ -2494,7 +2494,7 @@
2494
2494
  "name": "full_width",
2495
2495
  "type": "Boolean",
2496
2496
  "default": "N/A",
2497
- "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
2497
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
2498
2498
  },
2499
2499
  {
2500
2500
  "name": "name",
@@ -2624,7 +2624,7 @@
2624
2624
  "name": "full_width",
2625
2625
  "type": "Boolean",
2626
2626
  "default": "N/A",
2627
- "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
2627
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
2628
2628
  },
2629
2629
  {
2630
2630
  "name": "name",
@@ -2814,13 +2814,13 @@
2814
2814
  "name": "size",
2815
2815
  "type": "Symbol",
2816
2816
  "default": "`:medium`",
2817
- "description": "What size toggle switch to render. One of `:end` or `:start`."
2817
+ "description": "What size toggle switch to render. One of `:medium` or `:small`."
2818
2818
  },
2819
2819
  {
2820
2820
  "name": "status_label_position",
2821
2821
  "type": "Symbol",
2822
2822
  "default": "`:start`",
2823
- "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
2823
+ "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
2824
2824
  },
2825
2825
  {
2826
2826
  "name": "system_arguments",
@@ -95,6 +95,7 @@
95
95
  "DEFAULT_DESCRIPTION_SCHEME": "block",
96
96
  "DEFAULT_SCHEME": "default",
97
97
  "DEFAULT_SIZE": "medium",
98
+ "DEFAULT_TRUNCATION_BEHAVIOR": "none",
98
99
  "DESCRIPTION_SCHEME_MAPPINGS": {
99
100
  "inline": "ActionListItem-descriptionWrap--inline",
100
101
  "block": "ActionListItem-descriptionWrap"
@@ -120,6 +121,20 @@
120
121
  "medium",
121
122
  "large",
122
123
  "xlarge"
124
+ ],
125
+ "TRUNCATION_BEHAVIOR_MAPPINGS": {
126
+ "none": null,
127
+ "false": null,
128
+ "show_tooltip": "ActionListItem-label--truncate",
129
+ "truncate": "ActionListItem-label--truncate",
130
+ "true": "ActionListItem-label--truncate"
131
+ },
132
+ "TRUNCATION_BEHAVIOR_OPTIONS": [
133
+ "none",
134
+ false,
135
+ "show_tooltip",
136
+ "truncate",
137
+ true
123
138
  ]
124
139
  },
125
140
  "Primer::Alpha::ActionMenu": {
@@ -746,6 +746,58 @@
746
746
  "color-contrast"
747
747
  ]
748
748
  }
749
+ },
750
+ {
751
+ "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
752
+ "name": "long_label_with_tooltip",
753
+ "snapshot": "true",
754
+ "skip_rules": {
755
+ "wont_fix": [
756
+ "region"
757
+ ],
758
+ "will_fix": [
759
+ "color-contrast"
760
+ ]
761
+ }
762
+ },
763
+ {
764
+ "preview_path": "primer/alpha/action_list/long_label_wrap",
765
+ "name": "long_label_wrap",
766
+ "snapshot": "false",
767
+ "skip_rules": {
768
+ "wont_fix": [
769
+ "region"
770
+ ],
771
+ "will_fix": [
772
+ "color-contrast"
773
+ ]
774
+ }
775
+ },
776
+ {
777
+ "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
778
+ "name": "long_label_truncate_no_tooltip",
779
+ "snapshot": "false",
780
+ "skip_rules": {
781
+ "wont_fix": [
782
+ "region"
783
+ ],
784
+ "will_fix": [
785
+ "color-contrast"
786
+ ]
787
+ }
788
+ },
789
+ {
790
+ "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
791
+ "name": "long_label_show_tooltip_with_truncate_label",
792
+ "snapshot": "false",
793
+ "skip_rules": {
794
+ "wont_fix": [
795
+ "region"
796
+ ],
797
+ "will_fix": [
798
+ "color-contrast"
799
+ ]
800
+ }
749
801
  }
750
802
  ],
751
803
  "subcomponents": [
@@ -813,9 +865,9 @@
813
865
  },
814
866
  {
815
867
  "name": "truncate_label",
816
- "type": "Boolean",
817
- "default": "`false`",
818
- "description": "Truncate label with ellipsis."
868
+ "type": "Boolean | Symbol",
869
+ "default": "`:none`",
870
+ "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
819
871
  },
820
872
  {
821
873
  "name": "href",
@@ -7127,6 +7179,19 @@
7127
7179
  ]
7128
7180
  }
7129
7181
  },
7182
+ {
7183
+ "preview_path": "primer/alpha/select/not_full_width",
7184
+ "name": "not_full_width",
7185
+ "snapshot": "true",
7186
+ "skip_rules": {
7187
+ "wont_fix": [
7188
+ "region"
7189
+ ],
7190
+ "will_fix": [
7191
+ "color-contrast"
7192
+ ]
7193
+ }
7194
+ },
7130
7195
  {
7131
7196
  "preview_path": "primer/alpha/select/disabled",
7132
7197
  "name": "disabled",
@@ -7562,7 +7627,7 @@
7562
7627
  "name": "full_width",
7563
7628
  "type": "Boolean",
7564
7629
  "default": "N/A",
7565
- "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
7630
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
7566
7631
  },
7567
7632
  {
7568
7633
  "name": "name",
@@ -7745,6 +7810,19 @@
7745
7810
  ]
7746
7811
  }
7747
7812
  },
7813
+ {
7814
+ "preview_path": "primer/alpha/text_area/not_full_width",
7815
+ "name": "not_full_width",
7816
+ "snapshot": "true",
7817
+ "skip_rules": {
7818
+ "wont_fix": [
7819
+ "region"
7820
+ ],
7821
+ "will_fix": [
7822
+ "color-contrast"
7823
+ ]
7824
+ }
7825
+ },
7748
7826
  {
7749
7827
  "preview_path": "primer/alpha/text_area/disabled",
7750
7828
  "name": "disabled",
@@ -7813,7 +7891,7 @@
7813
7891
  "name": "full_width",
7814
7892
  "type": "Boolean",
7815
7893
  "default": "N/A",
7816
- "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
7894
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
7817
7895
  },
7818
7896
  {
7819
7897
  "name": "name",
@@ -8090,6 +8168,19 @@
8090
8168
  ]
8091
8169
  }
8092
8170
  },
8171
+ {
8172
+ "preview_path": "primer/alpha/text_field/not_full_width",
8173
+ "name": "not_full_width",
8174
+ "snapshot": "true",
8175
+ "skip_rules": {
8176
+ "wont_fix": [
8177
+ "region"
8178
+ ],
8179
+ "will_fix": [
8180
+ "color-contrast"
8181
+ ]
8182
+ }
8183
+ },
8093
8184
  {
8094
8185
  "preview_path": "primer/alpha/text_field/disabled",
8095
8186
  "name": "disabled",
@@ -8319,13 +8410,13 @@
8319
8410
  "name": "size",
8320
8411
  "type": "Symbol",
8321
8412
  "default": "`:medium`",
8322
- "description": "What size toggle switch to render. One of `:end` or `:start`."
8413
+ "description": "What size toggle switch to render. One of `:medium` or `:small`."
8323
8414
  },
8324
8415
  {
8325
8416
  "name": "status_label_position",
8326
8417
  "type": "Symbol",
8327
8418
  "default": "`:start`",
8328
- "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
8419
+ "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
8329
8420
  },
8330
8421
  {
8331
8422
  "name": "system_arguments",
@@ -13115,6 +13206,58 @@
13115
13206
  "color-contrast"
13116
13207
  ]
13117
13208
  }
13209
+ },
13210
+ {
13211
+ "preview_path": "primer/beta/nav_list/long_label_with_tooltip",
13212
+ "name": "long_label_with_tooltip",
13213
+ "snapshot": "true",
13214
+ "skip_rules": {
13215
+ "wont_fix": [
13216
+ "region"
13217
+ ],
13218
+ "will_fix": [
13219
+ "color-contrast"
13220
+ ]
13221
+ }
13222
+ },
13223
+ {
13224
+ "preview_path": "primer/beta/nav_list/long_label_wrap",
13225
+ "name": "long_label_wrap",
13226
+ "snapshot": "false",
13227
+ "skip_rules": {
13228
+ "wont_fix": [
13229
+ "region"
13230
+ ],
13231
+ "will_fix": [
13232
+ "color-contrast"
13233
+ ]
13234
+ }
13235
+ },
13236
+ {
13237
+ "preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
13238
+ "name": "long_label_truncate_no_tooltip",
13239
+ "snapshot": "false",
13240
+ "skip_rules": {
13241
+ "wont_fix": [
13242
+ "region"
13243
+ ],
13244
+ "will_fix": [
13245
+ "color-contrast"
13246
+ ]
13247
+ }
13248
+ },
13249
+ {
13250
+ "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
13251
+ "name": "long_label_show_tooltip_no_truncate_label",
13252
+ "snapshot": "false",
13253
+ "skip_rules": {
13254
+ "wont_fix": [
13255
+ "region"
13256
+ ],
13257
+ "will_fix": [
13258
+ "color-contrast"
13259
+ ]
13260
+ }
13118
13261
  }
13119
13262
  ],
13120
13263
  "subcomponents": [
@@ -376,6 +376,58 @@
376
376
  "color-contrast"
377
377
  ]
378
378
  }
379
+ },
380
+ {
381
+ "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
382
+ "name": "long_label_with_tooltip",
383
+ "snapshot": "true",
384
+ "skip_rules": {
385
+ "wont_fix": [
386
+ "region"
387
+ ],
388
+ "will_fix": [
389
+ "color-contrast"
390
+ ]
391
+ }
392
+ },
393
+ {
394
+ "preview_path": "primer/alpha/action_list/long_label_wrap",
395
+ "name": "long_label_wrap",
396
+ "snapshot": "false",
397
+ "skip_rules": {
398
+ "wont_fix": [
399
+ "region"
400
+ ],
401
+ "will_fix": [
402
+ "color-contrast"
403
+ ]
404
+ }
405
+ },
406
+ {
407
+ "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
408
+ "name": "long_label_truncate_no_tooltip",
409
+ "snapshot": "false",
410
+ "skip_rules": {
411
+ "wont_fix": [
412
+ "region"
413
+ ],
414
+ "will_fix": [
415
+ "color-contrast"
416
+ ]
417
+ }
418
+ },
419
+ {
420
+ "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
421
+ "name": "long_label_show_tooltip_with_truncate_label",
422
+ "snapshot": "false",
423
+ "skip_rules": {
424
+ "wont_fix": [
425
+ "region"
426
+ ],
427
+ "will_fix": [
428
+ "color-contrast"
429
+ ]
430
+ }
379
431
  }
380
432
  ]
381
433
  },
@@ -4577,6 +4629,58 @@
4577
4629
  "color-contrast"
4578
4630
  ]
4579
4631
  }
4632
+ },
4633
+ {
4634
+ "preview_path": "primer/beta/nav_list/long_label_with_tooltip",
4635
+ "name": "long_label_with_tooltip",
4636
+ "snapshot": "true",
4637
+ "skip_rules": {
4638
+ "wont_fix": [
4639
+ "region"
4640
+ ],
4641
+ "will_fix": [
4642
+ "color-contrast"
4643
+ ]
4644
+ }
4645
+ },
4646
+ {
4647
+ "preview_path": "primer/beta/nav_list/long_label_wrap",
4648
+ "name": "long_label_wrap",
4649
+ "snapshot": "false",
4650
+ "skip_rules": {
4651
+ "wont_fix": [
4652
+ "region"
4653
+ ],
4654
+ "will_fix": [
4655
+ "color-contrast"
4656
+ ]
4657
+ }
4658
+ },
4659
+ {
4660
+ "preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
4661
+ "name": "long_label_truncate_no_tooltip",
4662
+ "snapshot": "false",
4663
+ "skip_rules": {
4664
+ "wont_fix": [
4665
+ "region"
4666
+ ],
4667
+ "will_fix": [
4668
+ "color-contrast"
4669
+ ]
4670
+ }
4671
+ },
4672
+ {
4673
+ "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
4674
+ "name": "long_label_show_tooltip_no_truncate_label",
4675
+ "snapshot": "false",
4676
+ "skip_rules": {
4677
+ "wont_fix": [
4678
+ "region"
4679
+ ],
4680
+ "will_fix": [
4681
+ "color-contrast"
4682
+ ]
4683
+ }
4580
4684
  }
4581
4685
  ]
4582
4686
  },
@@ -5451,6 +5555,19 @@
5451
5555
  ]
5452
5556
  }
5453
5557
  },
5558
+ {
5559
+ "preview_path": "primer/alpha/select/not_full_width",
5560
+ "name": "not_full_width",
5561
+ "snapshot": "true",
5562
+ "skip_rules": {
5563
+ "wont_fix": [
5564
+ "region"
5565
+ ],
5566
+ "will_fix": [
5567
+ "color-contrast"
5568
+ ]
5569
+ }
5570
+ },
5454
5571
  {
5455
5572
  "preview_path": "primer/alpha/select/disabled",
5456
5573
  "name": "disabled",
@@ -5975,6 +6092,19 @@
5975
6092
  ]
5976
6093
  }
5977
6094
  },
6095
+ {
6096
+ "preview_path": "primer/alpha/text_area/not_full_width",
6097
+ "name": "not_full_width",
6098
+ "snapshot": "true",
6099
+ "skip_rules": {
6100
+ "wont_fix": [
6101
+ "region"
6102
+ ],
6103
+ "will_fix": [
6104
+ "color-contrast"
6105
+ ]
6106
+ }
6107
+ },
5978
6108
  {
5979
6109
  "preview_path": "primer/alpha/text_area/disabled",
5980
6110
  "name": "disabled",
@@ -6139,6 +6269,19 @@
6139
6269
  ]
6140
6270
  }
6141
6271
  },
6272
+ {
6273
+ "preview_path": "primer/alpha/text_field/not_full_width",
6274
+ "name": "not_full_width",
6275
+ "snapshot": "true",
6276
+ "skip_rules": {
6277
+ "wont_fix": [
6278
+ "region"
6279
+ ],
6280
+ "will_fix": [
6281
+ "color-contrast"
6282
+ ]
6283
+ }
6284
+ },
6142
6285
  {
6143
6286
  "preview_path": "primer/alpha/text_field/disabled",
6144
6287
  "name": "disabled",