primer_view_components 0.0.111 → 0.0.112
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +30 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.css +1 -0
- data/app/components/primer/alpha/auto_complete.css.json +1 -0
- data/app/components/primer/alpha/auto_complete.css.map +1 -0
- data/app/components/primer/alpha/auto_complete.pcss +118 -0
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +2 -3
- data/app/components/primer/alpha/button_marketing.css +1 -0
- data/app/components/primer/alpha/button_marketing.css.json +1 -0
- data/app/components/primer/alpha/button_marketing.css.map +1 -0
- data/app/components/primer/alpha/button_marketing.pcss +175 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.d.ts +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.html.erb +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.js +0 -0
- data/app/components/primer/alpha/dropdown/menu.rb +105 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.ts +0 -0
- data/app/components/primer/alpha/dropdown.css +1 -0
- data/app/components/primer/alpha/dropdown.css.json +1 -0
- data/app/components/primer/{dropdown.css.map → alpha/dropdown.css.map} +1 -1
- data/app/components/primer/{dropdown.d.ts → alpha/dropdown.d.ts} +0 -0
- data/app/components/primer/{dropdown.html.erb → alpha/dropdown.html.erb} +0 -0
- data/app/components/primer/{dropdown.js → alpha/dropdown.js} +0 -0
- data/app/components/primer/{dropdown.pcss → alpha/dropdown.pcss} +1 -1
- data/app/components/primer/alpha/dropdown.rb +154 -0
- data/app/components/primer/{dropdown.ts → alpha/dropdown.ts} +0 -0
- data/app/components/primer/alpha/tab_nav.css +1 -0
- data/app/components/primer/alpha/tab_nav.css.json +1 -0
- data/app/components/primer/alpha/tab_nav.css.map +1 -0
- data/app/components/primer/alpha/tab_nav.pcss +100 -0
- data/app/components/primer/alpha/underline_nav.css +1 -0
- data/app/components/primer/alpha/underline_nav.css.json +1 -0
- data/app/components/primer/alpha/underline_nav.css.map +1 -0
- data/app/components/primer/alpha/underline_nav.pcss +133 -0
- data/app/components/primer/beta/border_box.css +1 -0
- data/app/components/primer/beta/border_box.css.json +1 -0
- data/app/components/primer/beta/border_box.css.map +1 -0
- data/app/components/primer/beta/border_box.pcss +284 -0
- data/app/components/primer/beta/link.css +1 -0
- data/app/components/primer/beta/link.css.json +1 -0
- data/app/components/primer/beta/link.css.map +1 -0
- data/app/components/primer/beta/link.pcss +60 -0
- data/app/components/primer/{popover_component.css → beta/popover.css} +0 -0
- data/app/components/primer/beta/popover.css.json +1 -0
- data/app/components/primer/beta/popover.css.map +1 -0
- data/app/components/primer/{popover_component.html.erb → beta/popover.html.erb} +0 -0
- data/app/components/primer/{popover_component.pcss → beta/popover.pcss} +0 -0
- data/app/components/primer/beta/popover.rb +127 -0
- data/app/components/primer/component.rb +2 -2
- data/app/components/primer/dropdown/menu.rb +5 -90
- data/app/components/primer/dropdown.rb +2 -145
- data/app/components/primer/menu_component.css +1 -0
- data/app/components/primer/menu_component.css.json +1 -0
- data/app/components/primer/menu_component.css.map +1 -0
- data/app/components/primer/menu_component.pcss +119 -0
- data/app/components/primer/popover_component.rb +3 -120
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +10 -3
- data/app/components/primer/primer.ts +1 -1
- data/lib/primer/deprecations.rb +4 -2
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
- data/lib/primer/view_components/linters/severity_schema.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/previews/primer/alpha/button_marketing_preview.rb +36 -0
- data/previews/primer/alpha/dropdown_preview.rb +210 -0
- data/previews/primer/alpha/tab_nav_preview.rb +55 -0
- data/previews/primer/beta/border_box_preview.rb +65 -13
- data/previews/primer/beta/link_preview.rb +28 -0
- data/previews/primer/beta/popover_preview.rb +79 -0
- data/static/arguments.json +40 -40
- data/static/audited_at.json +4 -2
- data/static/constants.json +56 -50
- data/static/statuses.json +8 -6
- metadata +54 -23
- data/app/components/primer/dropdown.css +0 -1
- data/app/components/primer/dropdown.css.json +0 -1
- data/app/components/primer/image.rb +0 -7
- data/app/components/primer/popover_component.css.json +0 -1
- data/app/components/primer/popover_component.css.map +0 -1
- data/app/components/primer/progress_bar_component.rb +0 -7
- data/previews/primer/dropdown_preview.rb +0 -208
- data/previews/primer/popover_component_preview.rb +0 -34
data/static/constants.json
CHANGED
@@ -179,6 +179,43 @@
|
|
179
179
|
},
|
180
180
|
"Primer::Alpha::Dialog::Header": {
|
181
181
|
},
|
182
|
+
"Primer::Alpha::Dropdown": {
|
183
|
+
"Menu": "Primer::Alpha::Dropdown::Menu"
|
184
|
+
},
|
185
|
+
"Primer::Alpha::Dropdown::Menu": {
|
186
|
+
"AS_DEFAULT": "default",
|
187
|
+
"AS_OPTIONS": [
|
188
|
+
"default",
|
189
|
+
"list"
|
190
|
+
],
|
191
|
+
"DIRECTION_DEFAULT": "se",
|
192
|
+
"DIRECTION_OPTIONS": [
|
193
|
+
"se",
|
194
|
+
"sw",
|
195
|
+
"w",
|
196
|
+
"e",
|
197
|
+
"ne",
|
198
|
+
"s"
|
199
|
+
],
|
200
|
+
"Item": "Primer::Alpha::Dropdown::Menu::Item",
|
201
|
+
"SCHEME_DEFAULT": "default",
|
202
|
+
"SCHEME_MAPPINGS": {
|
203
|
+
"default": "",
|
204
|
+
"dark": "dropdown-menu-dark"
|
205
|
+
}
|
206
|
+
},
|
207
|
+
"Primer::Alpha::Dropdown::Menu::Item": {
|
208
|
+
"BUTTON_TAGS": [
|
209
|
+
"button",
|
210
|
+
"summary"
|
211
|
+
],
|
212
|
+
"TAG_DEFAULT": "a",
|
213
|
+
"TAG_OPTIONS": [
|
214
|
+
"a",
|
215
|
+
"button",
|
216
|
+
"summary"
|
217
|
+
]
|
218
|
+
},
|
182
219
|
"Primer::Alpha::HiddenTextExpander": {
|
183
220
|
},
|
184
221
|
"Primer::Alpha::Image": {
|
@@ -670,6 +707,24 @@
|
|
670
707
|
"span"
|
671
708
|
]
|
672
709
|
},
|
710
|
+
"Primer::Beta::Popover": {
|
711
|
+
"CARET_DEFAULT": "top",
|
712
|
+
"CARET_MAPPINGS": {
|
713
|
+
"top": "",
|
714
|
+
"bottom": "Popover-message--bottom",
|
715
|
+
"bottom_right": "Popover-message--bottom-right",
|
716
|
+
"bottom_left": "Popover-message--bottom-left",
|
717
|
+
"left": "Popover-message--left",
|
718
|
+
"left_bottom": "Popover-message--left-bottom",
|
719
|
+
"left_top": "Popover-message--left-top",
|
720
|
+
"right": "Popover-message--right",
|
721
|
+
"right_bottom": "Popover-message--right-bottom",
|
722
|
+
"right_top": "Popover-message--right-top",
|
723
|
+
"top_left": "Popover-message--top-left",
|
724
|
+
"top_right": "Popover-message--top-right"
|
725
|
+
},
|
726
|
+
"DEFAULT_HEADING_TAG": "h4"
|
727
|
+
},
|
673
728
|
"Primer::Beta::ProgressBar": {
|
674
729
|
"SIZE_DEFAULT": "default",
|
675
730
|
"SIZE_MAPPINGS": {
|
@@ -736,38 +791,9 @@
|
|
736
791
|
"Menu": "Primer::Dropdown::Menu"
|
737
792
|
},
|
738
793
|
"Primer::Dropdown::Menu": {
|
739
|
-
"
|
740
|
-
"AS_OPTIONS": [
|
741
|
-
"default",
|
742
|
-
"list"
|
743
|
-
],
|
744
|
-
"DIRECTION_DEFAULT": "se",
|
745
|
-
"DIRECTION_OPTIONS": [
|
746
|
-
"se",
|
747
|
-
"sw",
|
748
|
-
"w",
|
749
|
-
"e",
|
750
|
-
"ne",
|
751
|
-
"s"
|
752
|
-
],
|
753
|
-
"Item": "Primer::Dropdown::Menu::Item",
|
754
|
-
"SCHEME_DEFAULT": "default",
|
755
|
-
"SCHEME_MAPPINGS": {
|
756
|
-
"default": "",
|
757
|
-
"dark": "dropdown-menu-dark"
|
758
|
-
}
|
794
|
+
"Item": "Primer::Dropdown::Menu::Item"
|
759
795
|
},
|
760
796
|
"Primer::Dropdown::Menu::Item": {
|
761
|
-
"BUTTON_TAGS": [
|
762
|
-
"button",
|
763
|
-
"summary"
|
764
|
-
],
|
765
|
-
"TAG_DEFAULT": "a",
|
766
|
-
"TAG_OPTIONS": [
|
767
|
-
"a",
|
768
|
-
"button",
|
769
|
-
"summary"
|
770
|
-
]
|
771
797
|
},
|
772
798
|
"Primer::DropdownMenuComponent": {
|
773
799
|
"DIRECTION_DEFAULT": "se",
|
@@ -798,8 +824,6 @@
|
|
798
824
|
"danger"
|
799
825
|
]
|
800
826
|
},
|
801
|
-
"Primer::Image": {
|
802
|
-
},
|
803
827
|
"Primer::LabelComponent": {
|
804
828
|
},
|
805
829
|
"Primer::LayoutComponent": {
|
@@ -882,24 +906,6 @@
|
|
882
906
|
"Primer::OcticonSymbolsComponent": {
|
883
907
|
},
|
884
908
|
"Primer::PopoverComponent": {
|
885
|
-
"CARET_DEFAULT": "top",
|
886
|
-
"CARET_MAPPINGS": {
|
887
|
-
"top": "",
|
888
|
-
"bottom": "Popover-message--bottom",
|
889
|
-
"bottom_right": "Popover-message--bottom-right",
|
890
|
-
"bottom_left": "Popover-message--bottom-left",
|
891
|
-
"left": "Popover-message--left",
|
892
|
-
"left_bottom": "Popover-message--left-bottom",
|
893
|
-
"left_top": "Popover-message--left-top",
|
894
|
-
"right": "Popover-message--right",
|
895
|
-
"right_bottom": "Popover-message--right-bottom",
|
896
|
-
"right_top": "Popover-message--right-top",
|
897
|
-
"top_left": "Popover-message--top-left",
|
898
|
-
"top_right": "Popover-message--top-right"
|
899
|
-
},
|
900
|
-
"DEFAULT_HEADING_TAG": "h4"
|
901
|
-
},
|
902
|
-
"Primer::ProgressBarComponent": {
|
903
909
|
},
|
904
910
|
"Primer::SpinnerComponent": {
|
905
911
|
"DEFAULT_SIZE": "medium",
|
data/static/statuses.json
CHANGED
@@ -11,6 +11,9 @@
|
|
11
11
|
"Primer::Alpha::Dialog::Body": "alpha",
|
12
12
|
"Primer::Alpha::Dialog::Footer": "alpha",
|
13
13
|
"Primer::Alpha::Dialog::Header": "alpha",
|
14
|
+
"Primer::Alpha::Dropdown": "alpha",
|
15
|
+
"Primer::Alpha::Dropdown::Menu": "alpha",
|
16
|
+
"Primer::Alpha::Dropdown::Menu::Item": "alpha",
|
14
17
|
"Primer::Alpha::HiddenTextExpander": "alpha",
|
15
18
|
"Primer::Alpha::Image": "alpha",
|
16
19
|
"Primer::Alpha::ImageCrop": "alpha",
|
@@ -50,6 +53,7 @@
|
|
50
53
|
"Primer::Beta::IconButton": "beta",
|
51
54
|
"Primer::Beta::Label": "beta",
|
52
55
|
"Primer::Beta::Link": "beta",
|
56
|
+
"Primer::Beta::Popover": "beta",
|
53
57
|
"Primer::Beta::ProgressBar": "beta",
|
54
58
|
"Primer::Beta::Text": "beta",
|
55
59
|
"Primer::Beta::Truncate": "beta",
|
@@ -61,13 +65,12 @@
|
|
61
65
|
"Primer::ClipboardCopy": "beta",
|
62
66
|
"Primer::ConditionalWrapper": "alpha",
|
63
67
|
"Primer::Content": "stable",
|
64
|
-
"Primer::Dropdown": "
|
65
|
-
"Primer::Dropdown::Menu": "
|
66
|
-
"Primer::Dropdown::Menu::Item": "
|
68
|
+
"Primer::Dropdown": "deprecated",
|
69
|
+
"Primer::Dropdown::Menu": "deprecated",
|
70
|
+
"Primer::Dropdown::Menu::Item": "deprecated",
|
67
71
|
"Primer::DropdownMenuComponent": "deprecated",
|
68
72
|
"Primer::HellipButton": "alpha",
|
69
73
|
"Primer::IconButton": "deprecated",
|
70
|
-
"Primer::Image": "deprecated",
|
71
74
|
"Primer::LabelComponent": "deprecated",
|
72
75
|
"Primer::LayoutComponent": "alpha",
|
73
76
|
"Primer::LinkComponent": "deprecated",
|
@@ -77,8 +80,7 @@
|
|
77
80
|
"Primer::Navigation::TabComponent": "alpha",
|
78
81
|
"Primer::OcticonComponent": "beta",
|
79
82
|
"Primer::OcticonSymbolsComponent": "alpha",
|
80
|
-
"Primer::PopoverComponent": "
|
81
|
-
"Primer::ProgressBarComponent": "deprecated",
|
83
|
+
"Primer::PopoverComponent": "deprecated",
|
82
84
|
"Primer::SpinnerComponent": "beta",
|
83
85
|
"Primer::StateComponent": "beta",
|
84
86
|
"Primer::SubheadComponent": "beta",
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.112
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-11-
|
11
|
+
date: 2022-11-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -419,6 +419,10 @@ files:
|
|
419
419
|
- app/components/primer/alpha/action_list/heading.rb
|
420
420
|
- app/components/primer/alpha/action_list/item.html.erb
|
421
421
|
- app/components/primer/alpha/action_list/item.rb
|
422
|
+
- app/components/primer/alpha/auto_complete.css
|
423
|
+
- app/components/primer/alpha/auto_complete.css.json
|
424
|
+
- app/components/primer/alpha/auto_complete.css.map
|
425
|
+
- app/components/primer/alpha/auto_complete.pcss
|
422
426
|
- app/components/primer/alpha/auto_complete.rb
|
423
427
|
- app/components/primer/alpha/auto_complete/auto_complete.html.erb
|
424
428
|
- app/components/primer/alpha/auto_complete/item.rb
|
@@ -428,6 +432,10 @@ files:
|
|
428
432
|
- app/components/primer/alpha/banner.html.erb
|
429
433
|
- app/components/primer/alpha/banner.pcss
|
430
434
|
- app/components/primer/alpha/banner.rb
|
435
|
+
- app/components/primer/alpha/button_marketing.css
|
436
|
+
- app/components/primer/alpha/button_marketing.css.json
|
437
|
+
- app/components/primer/alpha/button_marketing.css.map
|
438
|
+
- app/components/primer/alpha/button_marketing.pcss
|
431
439
|
- app/components/primer/alpha/button_marketing.rb
|
432
440
|
- app/components/primer/alpha/dialog.html.erb
|
433
441
|
- app/components/primer/alpha/dialog.rb
|
@@ -435,6 +443,20 @@ files:
|
|
435
443
|
- app/components/primer/alpha/dialog/footer.rb
|
436
444
|
- app/components/primer/alpha/dialog/header.html.erb
|
437
445
|
- app/components/primer/alpha/dialog/header.rb
|
446
|
+
- app/components/primer/alpha/dropdown.css
|
447
|
+
- app/components/primer/alpha/dropdown.css.json
|
448
|
+
- app/components/primer/alpha/dropdown.css.map
|
449
|
+
- app/components/primer/alpha/dropdown.d.ts
|
450
|
+
- app/components/primer/alpha/dropdown.html.erb
|
451
|
+
- app/components/primer/alpha/dropdown.js
|
452
|
+
- app/components/primer/alpha/dropdown.pcss
|
453
|
+
- app/components/primer/alpha/dropdown.rb
|
454
|
+
- app/components/primer/alpha/dropdown.ts
|
455
|
+
- app/components/primer/alpha/dropdown/menu.d.ts
|
456
|
+
- app/components/primer/alpha/dropdown/menu.html.erb
|
457
|
+
- app/components/primer/alpha/dropdown/menu.js
|
458
|
+
- app/components/primer/alpha/dropdown/menu.rb
|
459
|
+
- app/components/primer/alpha/dropdown/menu.ts
|
438
460
|
- app/components/primer/alpha/hidden_text_expander.rb
|
439
461
|
- app/components/primer/alpha/image.rb
|
440
462
|
- app/components/primer/alpha/image_crop.d.ts
|
@@ -467,7 +489,11 @@ files:
|
|
467
489
|
- app/components/primer/alpha/segmented_control.ts
|
468
490
|
- app/components/primer/alpha/segmented_control/item.html.erb
|
469
491
|
- app/components/primer/alpha/segmented_control/item.rb
|
492
|
+
- app/components/primer/alpha/tab_nav.css
|
493
|
+
- app/components/primer/alpha/tab_nav.css.json
|
494
|
+
- app/components/primer/alpha/tab_nav.css.map
|
470
495
|
- app/components/primer/alpha/tab_nav.html.erb
|
496
|
+
- app/components/primer/alpha/tab_nav.pcss
|
471
497
|
- app/components/primer/alpha/tab_nav.rb
|
472
498
|
- app/components/primer/alpha/tab_panels.html.erb
|
473
499
|
- app/components/primer/alpha/tab_panels.rb
|
@@ -485,7 +511,11 @@ files:
|
|
485
511
|
- app/components/primer/alpha/tool_tip.js
|
486
512
|
- app/components/primer/alpha/tool_tip.ts
|
487
513
|
- app/components/primer/alpha/tooltip.rb
|
514
|
+
- app/components/primer/alpha/underline_nav.css
|
515
|
+
- app/components/primer/alpha/underline_nav.css.json
|
516
|
+
- app/components/primer/alpha/underline_nav.css.map
|
488
517
|
- app/components/primer/alpha/underline_nav.html.erb
|
518
|
+
- app/components/primer/alpha/underline_nav.pcss
|
489
519
|
- app/components/primer/alpha/underline_nav.rb
|
490
520
|
- app/components/primer/alpha/underline_panels.html.erb
|
491
521
|
- app/components/primer/alpha/underline_panels.rb
|
@@ -518,7 +548,11 @@ files:
|
|
518
548
|
- app/components/primer/beta/blankslate.html.erb
|
519
549
|
- app/components/primer/beta/blankslate.pcss
|
520
550
|
- app/components/primer/beta/blankslate.rb
|
551
|
+
- app/components/primer/beta/border_box.css
|
552
|
+
- app/components/primer/beta/border_box.css.json
|
553
|
+
- app/components/primer/beta/border_box.css.map
|
521
554
|
- app/components/primer/beta/border_box.html.erb
|
555
|
+
- app/components/primer/beta/border_box.pcss
|
522
556
|
- app/components/primer/beta/border_box.rb
|
523
557
|
- app/components/primer/beta/border_box/header.html.erb
|
524
558
|
- app/components/primer/beta/border_box/header.rb
|
@@ -558,7 +592,17 @@ files:
|
|
558
592
|
- app/components/primer/beta/label.css.map
|
559
593
|
- app/components/primer/beta/label.pcss
|
560
594
|
- app/components/primer/beta/label.rb
|
595
|
+
- app/components/primer/beta/link.css
|
596
|
+
- app/components/primer/beta/link.css.json
|
597
|
+
- app/components/primer/beta/link.css.map
|
598
|
+
- app/components/primer/beta/link.pcss
|
561
599
|
- app/components/primer/beta/link.rb
|
600
|
+
- app/components/primer/beta/popover.css
|
601
|
+
- app/components/primer/beta/popover.css.json
|
602
|
+
- app/components/primer/beta/popover.css.map
|
603
|
+
- app/components/primer/beta/popover.html.erb
|
604
|
+
- app/components/primer/beta/popover.pcss
|
605
|
+
- app/components/primer/beta/popover.rb
|
562
606
|
- app/components/primer/beta/progress_bar.css
|
563
607
|
- app/components/primer/beta/progress_bar.css.json
|
564
608
|
- app/components/primer/beta/progress_bar.css.map
|
@@ -586,26 +630,13 @@ files:
|
|
586
630
|
- app/components/primer/component.rb
|
587
631
|
- app/components/primer/conditional_wrapper.rb
|
588
632
|
- app/components/primer/content.rb
|
589
|
-
- app/components/primer/dropdown.css
|
590
|
-
- app/components/primer/dropdown.css.json
|
591
|
-
- app/components/primer/dropdown.css.map
|
592
|
-
- app/components/primer/dropdown.d.ts
|
593
|
-
- app/components/primer/dropdown.html.erb
|
594
|
-
- app/components/primer/dropdown.js
|
595
|
-
- app/components/primer/dropdown.pcss
|
596
633
|
- app/components/primer/dropdown.rb
|
597
|
-
- app/components/primer/dropdown.ts
|
598
|
-
- app/components/primer/dropdown/menu.d.ts
|
599
|
-
- app/components/primer/dropdown/menu.html.erb
|
600
|
-
- app/components/primer/dropdown/menu.js
|
601
634
|
- app/components/primer/dropdown/menu.rb
|
602
|
-
- app/components/primer/dropdown/menu.ts
|
603
635
|
- app/components/primer/dropdown_menu_component.html.erb
|
604
636
|
- app/components/primer/dropdown_menu_component.rb
|
605
637
|
- app/components/primer/hellip_button.rb
|
606
638
|
- app/components/primer/icon_button.html.erb
|
607
639
|
- app/components/primer/icon_button.rb
|
608
|
-
- app/components/primer/image.rb
|
609
640
|
- app/components/primer/label_component.rb
|
610
641
|
- app/components/primer/layout_component.html.erb
|
611
642
|
- app/components/primer/layout_component.rb
|
@@ -615,7 +646,11 @@ files:
|
|
615
646
|
- app/components/primer/local_time.rb
|
616
647
|
- app/components/primer/local_time.ts
|
617
648
|
- app/components/primer/markdown.rb
|
649
|
+
- app/components/primer/menu_component.css
|
650
|
+
- app/components/primer/menu_component.css.json
|
651
|
+
- app/components/primer/menu_component.css.map
|
618
652
|
- app/components/primer/menu_component.html.erb
|
653
|
+
- app/components/primer/menu_component.pcss
|
619
654
|
- app/components/primer/menu_component.rb
|
620
655
|
- app/components/primer/navigation/tab_component.html.erb
|
621
656
|
- app/components/primer/navigation/tab_component.rb
|
@@ -623,17 +658,11 @@ files:
|
|
623
658
|
- app/components/primer/octicon_component.rb
|
624
659
|
- app/components/primer/octicon_symbols_component.html.erb
|
625
660
|
- app/components/primer/octicon_symbols_component.rb
|
626
|
-
- app/components/primer/popover_component.css
|
627
|
-
- app/components/primer/popover_component.css.json
|
628
|
-
- app/components/primer/popover_component.css.map
|
629
|
-
- app/components/primer/popover_component.html.erb
|
630
|
-
- app/components/primer/popover_component.pcss
|
631
661
|
- app/components/primer/popover_component.rb
|
632
662
|
- app/components/primer/primer.d.ts
|
633
663
|
- app/components/primer/primer.js
|
634
664
|
- app/components/primer/primer.pcss
|
635
665
|
- app/components/primer/primer.ts
|
636
|
-
- app/components/primer/progress_bar_component.rb
|
637
666
|
- app/components/primer/spinner_component.html.erb
|
638
667
|
- app/components/primer/spinner_component.rb
|
639
668
|
- app/components/primer/state_component.css
|
@@ -808,6 +837,7 @@ files:
|
|
808
837
|
- lib/primer/view_components/linters/helpers/rubocop_helpers.rb
|
809
838
|
- lib/primer/view_components/linters/label_component_migration_counter.rb
|
810
839
|
- lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
|
840
|
+
- lib/primer/view_components/linters/severity_schema.rb
|
811
841
|
- lib/primer/view_components/linters/subhead_component_migration_counter.rb
|
812
842
|
- lib/primer/view_components/linters/super_in_component_templates.rb
|
813
843
|
- lib/primer/view_components/linters/tag_tree_helpers.rb
|
@@ -851,11 +881,13 @@ files:
|
|
851
881
|
- previews/primer/alpha/dialog_preview/test.html.erb
|
852
882
|
- previews/primer/alpha/dialog_preview/with_footer.html.erb
|
853
883
|
- previews/primer/alpha/dialog_preview/with_form.html.erb
|
884
|
+
- previews/primer/alpha/dropdown_preview.rb
|
854
885
|
- previews/primer/alpha/hidden_text_expander_preview.rb
|
855
886
|
- previews/primer/alpha/image_crop_preview.rb
|
856
887
|
- previews/primer/alpha/layout_preview.rb
|
857
888
|
- previews/primer/alpha/nav_list_preview.rb
|
858
889
|
- previews/primer/alpha/segmented_control_preview.rb
|
890
|
+
- previews/primer/alpha/tab_nav_preview.rb
|
859
891
|
- previews/primer/alpha/tab_panels_preview.rb
|
860
892
|
- previews/primer/alpha/text_field_preview.rb
|
861
893
|
- previews/primer/alpha/toggle_switch_preview.rb
|
@@ -894,12 +926,12 @@ files:
|
|
894
926
|
- previews/primer/beta/icon_button_preview.rb
|
895
927
|
- previews/primer/beta/label_preview.rb
|
896
928
|
- previews/primer/beta/link_preview.rb
|
929
|
+
- previews/primer/beta/popover_preview.rb
|
897
930
|
- previews/primer/beta/progress_bar_preview.rb
|
898
931
|
- previews/primer/beta/text_preview.rb
|
899
932
|
- previews/primer/beta/truncate_preview.rb
|
900
933
|
- previews/primer/clipboard_copy_preview.rb
|
901
934
|
- previews/primer/clipboard_copy_preview/element.html.erb
|
902
|
-
- previews/primer/dropdown_preview.rb
|
903
935
|
- previews/primer/forms/forms_preview.rb
|
904
936
|
- previews/primer/forms/forms_preview/after_content_form.html.erb
|
905
937
|
- previews/primer/forms/forms_preview/array_check_box_group_form.html.erb
|
@@ -926,7 +958,6 @@ files:
|
|
926
958
|
- previews/primer/menu_component_preview/default.html.erb
|
927
959
|
- previews/primer/menu_component_preview/playground.html.erb
|
928
960
|
- previews/primer/octicon_component_preview.rb
|
929
|
-
- previews/primer/popover_component_preview.rb
|
930
961
|
- previews/primer/spinner_component_preview.rb
|
931
962
|
- previews/primer/state_component_preview.rb
|
932
963
|
- previews/primer/subhead_component_preview.rb
|
@@ -1 +0,0 @@
|
|
1
|
-
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--primer-borderWidth-thicker,4px) var(--primer-borderWidth-thicker,4px) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-large);left:0;list-style:none;margin-top:2px;padding-bottom:var(--primer-control-small-paddingBlock,4px);padding-top:var(--primer-control-small-paddingBlock,4px);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:inherit}.dropdown-item{color:var(--color-fg-default);display:block;overflow:hidden;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-text-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);display:block;height:0;margin:var(--primer-stack-gap-condensed,8px) 0}.dropdown-header{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--color-border-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--color-canvas-overlay);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--color-border-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--color-canvas-overlay);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--color-border-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--color-canvas-overlay);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"dropdown","selectors":[".dropdown",".dropdown-caret",".dropdown-menu",".dropdown-menu:after",".dropdown-menu:before",".dropdown-menu>ul",".dropdown-menu-no-overflow",".dropdown-menu-no-overflow .dropdown-item",".dropdown-item",".dropdown-item:hover",".dropdown-item:hover>.octicon",".dropdown-item:hover [class*=color-text-]",".dropdown-item:hover>.Label",".dropdown-item.btn-link",".dropdown-signout",".dropdown-divider",".dropdown-header",".dropdown-item[aria-checked=false] .octicon-check",".dropdown-menu-w",".dropdown-menu-w:before",".dropdown-menu-w:after",".dropdown-menu-e",".dropdown-menu-e:before",".dropdown-menu-e:after",".dropdown-menu-ne",".dropdown-menu-ne:after",".dropdown-menu-ne:before",".dropdown-menu-s",".dropdown-menu-s:before",".dropdown-menu-s:after",".dropdown-menu-sw",".dropdown-menu-sw:before",".dropdown-menu-sw:after",".dropdown-menu-se:before",".dropdown-menu-se:after"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"popover_component","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["popover_component.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,CAGA,+CAEE,YACF,CACF","file":"popover_component.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--color-canvas-overlay);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--color-border-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--color-canvas-overlay);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--color-border-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--color-canvas-overlay);\n }\n}\n\n/* Top & Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top & Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- & Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--color-border-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--color-canvas-overlay);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--color-border-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--color-canvas-overlay);\n }\n}\n\n/* Right & Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right & Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--primer-stack-gap-condensed, 8px);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
@@ -1,208 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# @label Dropdown
|
5
|
-
class DropdownPreview < ViewComponent::Preview
|
6
|
-
# @label Playground
|
7
|
-
#
|
8
|
-
# @param with_caret [Boolean] toggle
|
9
|
-
# @param overlay [Symbol] select [none, default, dark]
|
10
|
-
def playground(overlay: :default, with_caret: false)
|
11
|
-
render(Primer::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
|
12
|
-
c.with_button { "Dropdown" }
|
13
|
-
|
14
|
-
c.with_menu(header: "Header") do |m|
|
15
|
-
m.with_item { "Item 1" }
|
16
|
-
m.with_item { "Item 2" }
|
17
|
-
m.with_item(divider: true)
|
18
|
-
m.with_item { "Item 3" }
|
19
|
-
m.with_item { "Item 4" }
|
20
|
-
end
|
21
|
-
end
|
22
|
-
end
|
23
|
-
|
24
|
-
# @label Default
|
25
|
-
#
|
26
|
-
def default
|
27
|
-
render(Primer::Dropdown.new) do |c|
|
28
|
-
c.with_button { "Dropdown" }
|
29
|
-
c.with_menu do |m|
|
30
|
-
m.with_item { "Item 1" }
|
31
|
-
m.with_item { "Item 2" }
|
32
|
-
m.with_item { "Item 3" }
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
36
|
-
|
37
|
-
# @label Menu
|
38
|
-
#
|
39
|
-
# @param as [Symbol] select [list, default]
|
40
|
-
# @param direction [Symbol] select [se, sw, w, e, ne, s]
|
41
|
-
# @param scheme [Symbol] select [default, dark]
|
42
|
-
def menu(as: :default, direction: :se, scheme: :default)
|
43
|
-
render(Primer::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
|
44
|
-
m.with_item { "Item 1" }
|
45
|
-
m.with_item { "Item 2" }
|
46
|
-
m.with_item(divider: true)
|
47
|
-
m.with_item { "Item 3" }
|
48
|
-
m.with_item { "Item 4" }
|
49
|
-
end
|
50
|
-
end
|
51
|
-
|
52
|
-
# @!group Direction
|
53
|
-
#
|
54
|
-
# @label Direction e
|
55
|
-
def direction_e
|
56
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
57
|
-
c.with_button { "Dropdown" }
|
58
|
-
c.with_menu(direction: :e) do |m|
|
59
|
-
m.with_item { "Item 1" }
|
60
|
-
m.with_item { "Item 2" }
|
61
|
-
m.with_item { "Item 3" }
|
62
|
-
end
|
63
|
-
end
|
64
|
-
end
|
65
|
-
|
66
|
-
# @label Direction ne
|
67
|
-
def direction_ne
|
68
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
69
|
-
c.with_button { "Dropdown" }
|
70
|
-
c.with_menu(direction: :ne) do |m|
|
71
|
-
m.with_item { "Item 1" }
|
72
|
-
m.with_item { "Item 2" }
|
73
|
-
m.with_item { "Item 3" }
|
74
|
-
end
|
75
|
-
end
|
76
|
-
end
|
77
|
-
|
78
|
-
# @label Direction s
|
79
|
-
def direction_s
|
80
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
81
|
-
c.with_button { "Dropdown" }
|
82
|
-
c.with_menu(direction: :s) do |m|
|
83
|
-
m.with_item { "Item 1" }
|
84
|
-
m.with_item { "Item 2" }
|
85
|
-
m.with_item { "Item 3" }
|
86
|
-
end
|
87
|
-
end
|
88
|
-
end
|
89
|
-
|
90
|
-
# @label Direction se
|
91
|
-
def direction_se
|
92
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
93
|
-
c.with_button { "Dropdown" }
|
94
|
-
c.with_menu(direction: :se) do |m|
|
95
|
-
m.with_item { "Item 1" }
|
96
|
-
m.with_item { "Item 2" }
|
97
|
-
m.with_item { "Item 3" }
|
98
|
-
end
|
99
|
-
end
|
100
|
-
end
|
101
|
-
|
102
|
-
# @label Direction sw
|
103
|
-
def direction_sw
|
104
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
105
|
-
c.with_button { "Dropdown" }
|
106
|
-
c.with_menu(direction: :sw) do |m|
|
107
|
-
m.with_item { "Item 1" }
|
108
|
-
m.with_item { "Item 2" }
|
109
|
-
m.with_item { "Item 3" }
|
110
|
-
end
|
111
|
-
end
|
112
|
-
end
|
113
|
-
|
114
|
-
# @label Direction w
|
115
|
-
def direction_w
|
116
|
-
render(Primer::Dropdown.new(display: :inline_block)) do |c|
|
117
|
-
c.with_button { "Dropdown" }
|
118
|
-
c.with_menu(direction: :w) do |m|
|
119
|
-
m.with_item { "Item 1" }
|
120
|
-
m.with_item { "Item 2" }
|
121
|
-
m.with_item { "Item 3" }
|
122
|
-
end
|
123
|
-
end
|
124
|
-
end
|
125
|
-
#
|
126
|
-
# @!endgroup
|
127
|
-
|
128
|
-
# @!group Options
|
129
|
-
#
|
130
|
-
# @label With caret
|
131
|
-
def options_with_caret
|
132
|
-
render(Primer::Dropdown.new(with_caret: true)) do |c|
|
133
|
-
c.with_button { "Dropdown" }
|
134
|
-
c.with_menu do |m|
|
135
|
-
m.with_item { "Item 1" }
|
136
|
-
m.with_item { "Item 2" }
|
137
|
-
m.with_item { "Item 3" }
|
138
|
-
end
|
139
|
-
end
|
140
|
-
end
|
141
|
-
|
142
|
-
# @label With header
|
143
|
-
def options_with_header
|
144
|
-
render(Primer::Dropdown.new) do |c|
|
145
|
-
c.with_button { "Dropdown" }
|
146
|
-
c.with_menu(header: "Header") do |m|
|
147
|
-
m.with_item { "Item 1" }
|
148
|
-
m.with_item { "Item 2" }
|
149
|
-
m.with_item { "Item 3" }
|
150
|
-
end
|
151
|
-
end
|
152
|
-
end
|
153
|
-
|
154
|
-
# @label With dividers
|
155
|
-
def options_with_dividers
|
156
|
-
render(Primer::Dropdown.new) do |c|
|
157
|
-
c.with_button { "Dropdown" }
|
158
|
-
c.with_menu do |m|
|
159
|
-
m.with_item { "Item 1" }
|
160
|
-
m.with_item { "Item 2" }
|
161
|
-
m.with_item(divider: true)
|
162
|
-
m.with_item { "Item 3" }
|
163
|
-
m.with_item { "Item 4" }
|
164
|
-
m.with_item(divider: true)
|
165
|
-
m.with_item { "Item 5" }
|
166
|
-
end
|
167
|
-
end
|
168
|
-
end
|
169
|
-
|
170
|
-
# @label As list
|
171
|
-
def options_as_list
|
172
|
-
render(Primer::Dropdown.new) do |c|
|
173
|
-
c.with_button { "Dropdown" }
|
174
|
-
c.with_menu(as: :list) do |m|
|
175
|
-
m.with_item { "Item 1" }
|
176
|
-
m.with_item { "Item 2" }
|
177
|
-
m.with_item { "Item 3" }
|
178
|
-
end
|
179
|
-
end
|
180
|
-
end
|
181
|
-
|
182
|
-
# @label Overlay none
|
183
|
-
def options_overlay_none
|
184
|
-
render(Primer::Dropdown.new(overlay: :none)) do |c|
|
185
|
-
c.with_button { "Dropdown" }
|
186
|
-
c.with_menu do |m|
|
187
|
-
m.with_item { "Item 1" }
|
188
|
-
m.with_item { "Item 2" }
|
189
|
-
m.with_item { "Item 3" }
|
190
|
-
end
|
191
|
-
end
|
192
|
-
end
|
193
|
-
|
194
|
-
# @label Overlay dark
|
195
|
-
def options_overlay_dark
|
196
|
-
render(Primer::Dropdown.new(overlay: :dark)) do |c|
|
197
|
-
c.with_button { "Dropdown" }
|
198
|
-
c.with_menu do |m|
|
199
|
-
m.with_item { "Item 1" }
|
200
|
-
m.with_item { "Item 2" }
|
201
|
-
m.with_item { "Item 3" }
|
202
|
-
end
|
203
|
-
end
|
204
|
-
end
|
205
|
-
#
|
206
|
-
# @!endgroup
|
207
|
-
end
|
208
|
-
end
|