primer_view_components 0.0.121 → 0.0.122
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +20 -0
- data/app/assets/styles/primer_view_components.css +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css.json +123 -1
- data/app/components/primer/alpha/auto_complete.css.json +23 -1
- data/app/components/primer/alpha/banner.css.json +24 -1
- data/app/components/primer/alpha/button_marketing.css.json +33 -1
- data/app/components/primer/alpha/check_box.rb +74 -0
- data/app/components/primer/alpha/check_box_group.rb +36 -0
- data/app/components/primer/alpha/dialog.css.json +82 -1
- data/app/components/primer/alpha/dialog.rb +1 -1
- data/app/components/primer/alpha/dropdown.css.json +40 -1
- data/app/components/primer/alpha/form_button.rb +32 -0
- data/app/components/primer/alpha/form_control.html.erb +26 -0
- data/app/components/primer/alpha/form_control.rb +105 -0
- data/app/components/primer/alpha/layout.css.json +80 -1
- data/app/components/primer/alpha/menu.css.json +28 -1
- data/app/components/primer/alpha/multi_input.rb +81 -0
- data/app/components/primer/alpha/radio_button.rb +25 -0
- data/app/components/primer/alpha/radio_button_group.rb +36 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +31 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +43 -12
- data/app/components/primer/alpha/select.rb +37 -0
- data/app/components/primer/alpha/submit_button.rb +32 -0
- data/app/components/primer/alpha/tab_nav.css.json +24 -1
- data/app/components/primer/alpha/tab_panels.rb +7 -0
- data/app/components/primer/alpha/text_area.rb +24 -0
- data/app/components/primer/alpha/text_field.css +2 -2
- data/app/components/primer/alpha/text_field.css.json +134 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +27 -0
- data/app/components/primer/alpha/text_field.rb +15 -20
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +40 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +31 -61
- data/app/components/primer/alpha/underline_nav.css.json +28 -1
- data/app/components/primer/beta/avatar.css.json +17 -1
- data/app/components/primer/beta/avatar_stack.css.json +28 -1
- data/app/components/primer/beta/blankslate.css.json +22 -1
- data/app/components/primer/beta/border_box.css.json +54 -1
- data/app/components/primer/beta/breadcrumbs.css.json +11 -1
- data/app/components/primer/beta/button.css.json +71 -1
- data/app/components/primer/beta/counter.css.json +10 -1
- data/app/components/primer/beta/flash.css.json +27 -1
- data/app/components/primer/beta/label.css.json +25 -1
- data/app/components/primer/beta/link.css.json +19 -1
- data/app/components/primer/beta/popover.css.json +39 -1
- data/app/components/primer/beta/progress_bar.css.json +10 -1
- data/app/components/primer/beta/state.css.json +13 -1
- data/app/components/primer/beta/subhead.css.json +12 -1
- data/app/components/primer/beta/timeline_item.css.json +16 -1
- data/app/components/primer/beta/truncate.css.json +12 -1
- data/app/components/primer/component.rb +10 -2
- data/app/components/primer/truncate.css.json +13 -1
- data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
- data/app/lib/primer/css/layout.css.json +316 -1
- data/app/lib/primer/css/utilities.css.json +1659 -1
- data/lib/primer/form_components.rb +26 -6
- data/lib/primer/forms/builder.rb +1 -17
- data/lib/primer/forms/button.rb +4 -1
- data/lib/primer/forms/check_box_group.html.erb +14 -9
- data/lib/primer/forms/check_box_group.rb +5 -0
- data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
- data/lib/primer/forms/dsl/input.rb +33 -2
- data/lib/primer/forms/dsl/input_methods.rb +49 -1
- data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
- data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
- data/lib/primer/forms/dsl/text_field_input.rb +7 -5
- data/lib/primer/forms/form_control.rb +0 -1
- data/lib/primer/forms/group.html.erb +1 -1
- data/lib/primer/forms/multi.html.erb +8 -6
- data/lib/primer/forms/multi.rb +2 -0
- data/lib/primer/forms/radio_button_group.html.erb +14 -9
- data/lib/primer/forms/radio_button_group.rb +5 -0
- data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
- data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
- data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
- data/lib/primer/forms/text_area.rb +1 -1
- data/lib/primer/forms/text_field.rb +5 -1
- data/lib/primer/forms/utils.rb +20 -0
- data/lib/primer/view_components/engine.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/backend.rb +1 -15
- data/lib/primer/yard/component_manifest.rb +44 -25
- data/lib/primer/yard/component_ref.rb +40 -0
- data/lib/primer/yard/docs_helper.rb +16 -2
- data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
- data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
- data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
- data/lib/primer/yard/registry.rb +6 -21
- data/lib/primer/yard/renders_many_handler.rb +1 -1
- data/lib/primer/yard/renders_one_handler.rb +1 -1
- data/lib/primer/yard.rb +14 -0
- data/lib/tasks/docs.rake +26 -13
- data/previews/pages/forms/01_introduction.md.erb +44 -0
- data/previews/pages/forms/02_getting_started.md.erb +125 -0
- data/previews/pages/forms/03_caption_templates.md.erb +30 -0
- data/previews/pages/forms/04_after_content.md.erb +39 -0
- data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
- data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
- data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
- data/previews/pages/forms/08_validations.md.erb +28 -0
- data/previews/pages/forms/09_compound_forms.md.erb +97 -0
- data/previews/primer/alpha/check_box_group_preview.rb +89 -0
- data/previews/primer/alpha/check_box_preview.rb +62 -0
- data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
- data/previews/primer/alpha/form_control_preview.rb +106 -0
- data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
- data/previews/primer/alpha/multi_input_preview.rb +80 -0
- data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
- data/previews/primer/alpha/radio_button_preview.rb +62 -0
- data/previews/primer/alpha/select_preview.rb +130 -0
- data/previews/primer/alpha/text_area_preview.rb +87 -0
- data/previews/primer/alpha/text_field_preview.rb +10 -1
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
- data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
- data/previews/primer/forms/forms_preview.rb +3 -1
- data/static/arguments.json +1358 -1328
- data/static/audited_at.json +10 -0
- data/static/constants.json +20 -0
- data/static/previews.json +218 -40
- data/static/statuses.json +10 -0
- metadata +41 -7
|
@@ -1 +1,123 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/action_list",
|
|
3
|
+
"selectors": [
|
|
4
|
+
":root",
|
|
5
|
+
".ActionListWrap",
|
|
6
|
+
".ActionListWrap--inset",
|
|
7
|
+
".ActionListWrap--divided .ActionListItem-label:before",
|
|
8
|
+
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",
|
|
9
|
+
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",
|
|
10
|
+
".ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
|
|
11
|
+
".ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before",
|
|
12
|
+
".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before",
|
|
13
|
+
".ActionListItem:first-of-type .ActionListItem-label:before",
|
|
14
|
+
".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before",
|
|
15
|
+
".ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before",
|
|
16
|
+
".ActionListItem",
|
|
17
|
+
".ActionListItem:active",
|
|
18
|
+
".ActionListItem:hover",
|
|
19
|
+
".ActionListItem:hover .ActionListItem-descriptionWrap--inline:before",
|
|
20
|
+
".ActionListItem:hover .ActionListItem-label:before",
|
|
21
|
+
".ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
|
|
22
|
+
".ActionListItem:hover+.ActionListItem .ActionListItem-label:before",
|
|
23
|
+
".ActionListItem[hidden]+.ActionList-sectionDivider",
|
|
24
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent",
|
|
25
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover",
|
|
26
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active",
|
|
27
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):hover",
|
|
28
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible)",
|
|
29
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible)",
|
|
30
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):active",
|
|
31
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive)",
|
|
32
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive)",
|
|
33
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before",
|
|
34
|
+
".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before",
|
|
35
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before",
|
|
36
|
+
".ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before",
|
|
37
|
+
".ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark",
|
|
38
|
+
".ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark",
|
|
39
|
+
".ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark",
|
|
40
|
+
".ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark",
|
|
41
|
+
".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
|
|
42
|
+
".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
|
|
43
|
+
".ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
|
|
44
|
+
".ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
|
|
45
|
+
".ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark",
|
|
46
|
+
".ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark",
|
|
47
|
+
".ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark",
|
|
48
|
+
".ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark",
|
|
49
|
+
".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
|
|
50
|
+
".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
|
|
51
|
+
".ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect",
|
|
52
|
+
".ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect",
|
|
53
|
+
".ActionListItem[aria-selected=true]",
|
|
54
|
+
".ActionListItem[aria-selected=true]:hover",
|
|
55
|
+
".ActionListItem[aria-selected=true]+.ActionListItem:before",
|
|
56
|
+
".ActionListItem[aria-selected=true]:before",
|
|
57
|
+
".ActionListItem[aria-selected=true]:after",
|
|
58
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",
|
|
59
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",
|
|
60
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",
|
|
61
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
|
|
62
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
|
|
63
|
+
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
|
|
64
|
+
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",
|
|
65
|
+
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",
|
|
66
|
+
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",
|
|
67
|
+
".ActionListItem[aria-disabled=true]:hover",
|
|
68
|
+
".ActionListItem.ActionListItem--danger .ActionListItem-label",
|
|
69
|
+
".ActionListItem.ActionListItem--danger .ActionListItem-visual",
|
|
70
|
+
".ActionListItem.ActionListItem--danger:hover",
|
|
71
|
+
".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
|
|
72
|
+
".ActionListItem.ActionListItem--danger .ActionListContent:active",
|
|
73
|
+
".ActionListContent",
|
|
74
|
+
".ActionListContent>:not(:last-child)",
|
|
75
|
+
".ActionListContent:hover",
|
|
76
|
+
".ActionListContent[aria-disabled=true] .ActionListItem-description",
|
|
77
|
+
".ActionListContent[aria-disabled=true] .ActionListItem-label",
|
|
78
|
+
".ActionListContent[aria-disabled=true] .ActionListItem-visual",
|
|
79
|
+
".ActionListContent[aria-disabled=true]:hover",
|
|
80
|
+
".ActionListContent[aria-expanded]+.ActionList--subGroup",
|
|
81
|
+
".ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent",
|
|
82
|
+
".ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent",
|
|
83
|
+
".ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent",
|
|
84
|
+
".ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent",
|
|
85
|
+
".ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon",
|
|
86
|
+
".ActionListContent[aria-expanded=true]+.ActionList--subGroup",
|
|
87
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label",
|
|
88
|
+
".ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon",
|
|
89
|
+
".ActionListContent[aria-expanded=false]+.ActionList--subGroup",
|
|
90
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]",
|
|
91
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label",
|
|
92
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",
|
|
93
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",
|
|
94
|
+
".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",
|
|
95
|
+
".ActionListContent.ActionListContent--sizeLarge",
|
|
96
|
+
".ActionListContent.ActionListContent--sizeXLarge",
|
|
97
|
+
".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
|
|
98
|
+
".ActionListItem-action--leading",
|
|
99
|
+
".ActionListItem-visual--leading",
|
|
100
|
+
".ActionListItem-visual--trailing",
|
|
101
|
+
".ActionListItem-action--trailing",
|
|
102
|
+
".ActionListItem-descriptionWrap",
|
|
103
|
+
".ActionListItem-descriptionWrap .ActionListItem-label",
|
|
104
|
+
".ActionListItem-descriptionWrap--inline",
|
|
105
|
+
".ActionListItem-description",
|
|
106
|
+
".ActionListItem-action",
|
|
107
|
+
".ActionListItem-visual",
|
|
108
|
+
".ActionListItem-label",
|
|
109
|
+
".ActionListItem-label--truncate",
|
|
110
|
+
".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",
|
|
111
|
+
".ActionListItem--withActions",
|
|
112
|
+
".ActionListItem-trailingAction",
|
|
113
|
+
".ActionListItem--trailingActionHover .ActionListItem-trailingAction",
|
|
114
|
+
".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",
|
|
115
|
+
".ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction",
|
|
116
|
+
".ActionList-sectionDivider:not(:empty)",
|
|
117
|
+
".ActionList-sectionDivider:empty",
|
|
118
|
+
".ActionList-sectionDivider .ActionList-sectionDivider-title",
|
|
119
|
+
".ActionList-sectionDivider--filled",
|
|
120
|
+
".ActionList-sectionDivider--filled:empty",
|
|
121
|
+
".ActionList-sectionDivider--filled:first-child"
|
|
122
|
+
]
|
|
123
|
+
}
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/auto_complete",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".autocomplete-label-stacked",
|
|
5
|
+
".autocomplete-label-inline",
|
|
6
|
+
".autocomplete-body",
|
|
7
|
+
".autocomplete-embedded-icon-wrap",
|
|
8
|
+
".autocomplete-embedded-icon-wrap:focus-within",
|
|
9
|
+
".autocomplete-embedded-icon-wrap .form-control",
|
|
10
|
+
".autocomplete-embedded-icon-wrap .form-control:focus",
|
|
11
|
+
".autocomplete-embedded-icon-wrap .form-control:focus-visible",
|
|
12
|
+
".autocomplete-results",
|
|
13
|
+
".autocomplete-item",
|
|
14
|
+
".autocomplete-item:hover",
|
|
15
|
+
".autocomplete-item:hover *",
|
|
16
|
+
".autocomplete-item.navigation-focus",
|
|
17
|
+
".autocomplete-item.selected",
|
|
18
|
+
".autocomplete-item[aria-selected=true]",
|
|
19
|
+
".autocomplete-item.navigation-focus *",
|
|
20
|
+
".autocomplete-item.selected *",
|
|
21
|
+
".autocomplete-item[aria-selected=true] *"
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -1 +1,24 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/banner",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Banner",
|
|
5
|
+
".Banner .Banner-actions",
|
|
6
|
+
".Banner .Banner-visual",
|
|
7
|
+
".Banner .Banner-visual>.octicon",
|
|
8
|
+
".Banner .Banner-visual>*",
|
|
9
|
+
".Banner .Banner-message",
|
|
10
|
+
".Banner .Banner-message p:last-child",
|
|
11
|
+
".Banner .Banner-message .Banner-title:not(:only-child)",
|
|
12
|
+
".Banner .Banner-actions:last-child",
|
|
13
|
+
".Banner .Banner-close",
|
|
14
|
+
".Banner .Banner-visual .octicon",
|
|
15
|
+
".Banner.Banner--warning",
|
|
16
|
+
".Banner.Banner--warning .Banner-visual .octicon",
|
|
17
|
+
".Banner.Banner--error",
|
|
18
|
+
".Banner.Banner--error .Banner-visual .octicon",
|
|
19
|
+
".Banner.Banner--success",
|
|
20
|
+
".Banner.Banner--success .Banner-visual .octicon",
|
|
21
|
+
".Banner.Banner--full",
|
|
22
|
+
".Banner.Banner--full-whenNarrow"
|
|
23
|
+
]
|
|
24
|
+
}
|
|
@@ -1 +1,33 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/button_marketing",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".btn-mktg",
|
|
5
|
+
".btn-mktg:before",
|
|
6
|
+
".btn-mktg:hover",
|
|
7
|
+
".btn-mktg.focus:before",
|
|
8
|
+
".btn-mktg:focus-visible:before",
|
|
9
|
+
".btn-mktg:focus:before",
|
|
10
|
+
".btn-mktg:hover:before",
|
|
11
|
+
".btn-mktg:focus",
|
|
12
|
+
".btn-mktg:focus:not(:focus-visible)",
|
|
13
|
+
".btn-mktg:focus-visible",
|
|
14
|
+
".btn-mktg:active:before",
|
|
15
|
+
".btn-mktg.disabled",
|
|
16
|
+
".btn-mktg[disabled]",
|
|
17
|
+
".btn-muted-mktg",
|
|
18
|
+
".btn-muted-mktg:before",
|
|
19
|
+
".btn-muted-mktg:hover",
|
|
20
|
+
".btn-muted-mktg:active",
|
|
21
|
+
".btn-muted-mktg:disabled",
|
|
22
|
+
".btn-subtle-mktg",
|
|
23
|
+
".btn-subtle-mktg:before",
|
|
24
|
+
".btn-subtle-mktg:hover",
|
|
25
|
+
".btn-signup-mktg",
|
|
26
|
+
".btn-signup-mktg:before",
|
|
27
|
+
".btn-signup-mktg:focus",
|
|
28
|
+
".btn-signup-mktg:focus:not(:focus-visible)",
|
|
29
|
+
".btn-signup-mktg:focus-visible",
|
|
30
|
+
".btn-small-mktg",
|
|
31
|
+
".btn-large-mktg"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
CheckBox = Primer::FormComponents.from_input(Primer::Forms::Dsl::CheckBoxInput)
|
|
6
|
+
|
|
7
|
+
# Check boxes are true/false inputs rendered as `<input type="checkbox">` in HTML.
|
|
8
|
+
#
|
|
9
|
+
# ## Schemes
|
|
10
|
+
#
|
|
11
|
+
# Check boxes can submit values to the server using one of two schemes, either `:array`
|
|
12
|
+
# or `:boolean` (the default). Check boxes with a scheme of `:boolean` function like normal
|
|
13
|
+
# HTML check boxes. If they are checked, a value of "1" is sent to the server; if they are
|
|
14
|
+
# unchecked, a value of "0" is sent to the server. The checked and unchecked values can be
|
|
15
|
+
# customized via the `:value` and `:unchecked_value` arguments respectively.
|
|
16
|
+
#
|
|
17
|
+
# Whereas `:boolean` check boxes must have unique names, `:array` check boxes all have the
|
|
18
|
+
# same name. On form submission, Rails will aggregate the values of the check boxes with the
|
|
19
|
+
# same name and provide them to the controller as an array. If `:scheme:` is `:array`, the
|
|
20
|
+
# `:value` argument must also be provided. The `:unchecked_value` argument is ignored. If a
|
|
21
|
+
# check box is checked on submit, its corresponding value will appear in the array. If it is
|
|
22
|
+
# not checked, its value will not appear in the array.
|
|
23
|
+
#
|
|
24
|
+
# ## Caption templates
|
|
25
|
+
#
|
|
26
|
+
# Caption templates for `:array`-type check boxes work a little differently than they do for
|
|
27
|
+
# other input types. Because the name must be the same for all check boxes that make up an
|
|
28
|
+
# array, caption template file names are comprised of both the name _and_ the value of each
|
|
29
|
+
# check box. For example, a check box with the name `foo` and value `bar` must have a caption
|
|
30
|
+
# template named `foo_bar_caption.html.erb`.
|
|
31
|
+
#
|
|
32
|
+
# ## Nested Forms
|
|
33
|
+
#
|
|
34
|
+
# Check boxes can have "nested" forms that are rendered below the caption. A common use-case
|
|
35
|
+
# is a form that is hidden until the check box is checked. Nested forms are indented slightly
|
|
36
|
+
# to align with the label and caption.
|
|
37
|
+
#
|
|
38
|
+
# Define a nested form via the `#nested_form` method, which is expected to return an instance
|
|
39
|
+
# of a Primer form (see the usage section below).
|
|
40
|
+
#
|
|
41
|
+
# Any fields defined in the nested form are submitted along with the parent form's fields.
|
|
42
|
+
#
|
|
43
|
+
# **NOTE**: Check boxes do not automatically show or hide nested forms. If such behavior is
|
|
44
|
+
# desired, it must be done by hand.
|
|
45
|
+
#
|
|
46
|
+
# @form_usage
|
|
47
|
+
# class ExampleForm < ApplicationForm
|
|
48
|
+
# form do |example_form|
|
|
49
|
+
# example_form.check_box(attributes) do |check_box|
|
|
50
|
+
# check_box.nested_form do |builder|
|
|
51
|
+
# AnotherPrimerForm.new(builder)
|
|
52
|
+
# end
|
|
53
|
+
# end
|
|
54
|
+
# end
|
|
55
|
+
# end
|
|
56
|
+
class CheckBox < Primer::Component
|
|
57
|
+
status :alpha
|
|
58
|
+
|
|
59
|
+
# @!method initialize
|
|
60
|
+
#
|
|
61
|
+
# @macro form_input_arguments
|
|
62
|
+
#
|
|
63
|
+
# @param name [String] Value for the HTML name attribute.
|
|
64
|
+
# @param value [String] On form submission, this value will be sent to the server if the check box is checked. Defaults to "1".
|
|
65
|
+
# @param unchecked_value [String] On form submission, this value will be sent to the server if the check box is _not_ checked. Defaults to "0".
|
|
66
|
+
# @param scheme [Symbol] Controls how check box values are submitted to the server. <%= one_of(Primer::Forms::Dsl::CheckBoxInput::SCHEMES) %>.
|
|
67
|
+
|
|
68
|
+
# @!method nested_form
|
|
69
|
+
#
|
|
70
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %> that will be applied to a `<div>` element that wraps the form.
|
|
71
|
+
# @param block [Proc] This block is yielded the Rails `builder` object and is expected to return the nested form object, an instance of `Primer::Forms::Base`.
|
|
72
|
+
end
|
|
73
|
+
end
|
|
74
|
+
end
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
CheckBoxGroup = Primer::FormComponents.from_input(Primer::Forms::Dsl::CheckBoxGroupInput)
|
|
6
|
+
|
|
7
|
+
# Check box groups consist of one or more related check boxes.
|
|
8
|
+
#
|
|
9
|
+
# @form_usage
|
|
10
|
+
# class ExampleForm < ApplicationForm
|
|
11
|
+
# form do |example_form|
|
|
12
|
+
# example_form.check_box_group(attributes) do |group|
|
|
13
|
+
# group.check_box(check_box_attributes)
|
|
14
|
+
# end
|
|
15
|
+
# end
|
|
16
|
+
# end
|
|
17
|
+
class CheckBoxGroup < Primer::Component
|
|
18
|
+
status :alpha
|
|
19
|
+
|
|
20
|
+
# @!method initialize
|
|
21
|
+
#
|
|
22
|
+
# @param name [String] Value for the HTML name attribute. When provided, the check box values will be submitted in to the server in `:array` mode. See the <%= link_to_component(Primer::Alpha::CheckBox) %> for more information.
|
|
23
|
+
# @param label [String] Label text displayed above the input.
|
|
24
|
+
# @param hidden [Boolean] When set to `true`, visually hides the group.
|
|
25
|
+
# @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
|
|
26
|
+
# @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
|
|
27
|
+
|
|
28
|
+
# @!method check_box
|
|
29
|
+
#
|
|
30
|
+
# Adds a check box to the group.
|
|
31
|
+
#
|
|
32
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::CheckBox) %>.
|
|
33
|
+
# @param block [Proc] The block accepted by <%= link_to_component(Primer::Alpha::CheckBox) %>.
|
|
34
|
+
end
|
|
35
|
+
end
|
|
36
|
+
end
|
|
@@ -1 +1,82 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/dialog",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Overlay--hidden",
|
|
5
|
+
".Overlay--visibilityHidden",
|
|
6
|
+
".Overlay",
|
|
7
|
+
".Overlay.Overlay--size-auto",
|
|
8
|
+
".Overlay.Overlay--size-full",
|
|
9
|
+
".Overlay.Overlay--size-xsmall",
|
|
10
|
+
".Overlay.Overlay--size-small",
|
|
11
|
+
".Overlay.Overlay--size-small-portrait",
|
|
12
|
+
".Overlay.Overlay--size-medium",
|
|
13
|
+
".Overlay.Overlay--size-medium-portrait",
|
|
14
|
+
".Overlay.Overlay--size-large",
|
|
15
|
+
".Overlay.Overlay--size-xlarge",
|
|
16
|
+
".Overlay.Overlay--height-auto",
|
|
17
|
+
".Overlay.Overlay--height-xsmall",
|
|
18
|
+
".Overlay.Overlay--height-small",
|
|
19
|
+
".Overlay.Overlay--height-medium",
|
|
20
|
+
".Overlay.Overlay--height-large",
|
|
21
|
+
".Overlay.Overlay--height-xlarge",
|
|
22
|
+
".Overlay.Overlay--width-auto",
|
|
23
|
+
".Overlay.Overlay--width-small",
|
|
24
|
+
".Overlay.Overlay--width-medium",
|
|
25
|
+
".Overlay.Overlay--width-large",
|
|
26
|
+
".Overlay.Overlay--width-xlarge",
|
|
27
|
+
".Overlay.Overlay--width-xxlarge",
|
|
28
|
+
".Overlay.Overlay--motion-scaleFade",
|
|
29
|
+
".Overlay-form",
|
|
30
|
+
".Overlay-header",
|
|
31
|
+
".Overlay-header.Overlay-header--divided",
|
|
32
|
+
".Overlay-header.Overlay-header--divided+.Overlay-body",
|
|
33
|
+
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap",
|
|
34
|
+
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",
|
|
35
|
+
".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",
|
|
36
|
+
".Overlay-header .Overlay-headerContentWrap",
|
|
37
|
+
".Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap",
|
|
38
|
+
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",
|
|
39
|
+
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",
|
|
40
|
+
".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",
|
|
41
|
+
".Overlay-body",
|
|
42
|
+
".Overlay-body.Overlay-body--paddingCondensed",
|
|
43
|
+
".Overlay-body.Overlay-body--paddingNone",
|
|
44
|
+
".Overlay-footer",
|
|
45
|
+
".Overlay-footer.Overlay-footer--divided",
|
|
46
|
+
".Overlay-footer.Overlay-footer--alignStart",
|
|
47
|
+
".Overlay-footer.Overlay-footer--alignCenter",
|
|
48
|
+
".Overlay-footer.Overlay-footer--alignEnd",
|
|
49
|
+
".Overlay-closeButton",
|
|
50
|
+
".Overlay-closeButton:focus",
|
|
51
|
+
".Overlay-closeButton:hover",
|
|
52
|
+
".Overlay-closeButton.close-button",
|
|
53
|
+
".Overlay-backdrop--center",
|
|
54
|
+
".Overlay-backdrop--anchor",
|
|
55
|
+
".Overlay-backdrop--anchor .Overlay",
|
|
56
|
+
".Overlay-backdrop--side",
|
|
57
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-left",
|
|
58
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",
|
|
59
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-right",
|
|
60
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay",
|
|
61
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-bottom",
|
|
62
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay",
|
|
63
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-top",
|
|
64
|
+
".Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay",
|
|
65
|
+
".Overlay-backdrop--full",
|
|
66
|
+
".Overlay-backdrop--full .Overlay",
|
|
67
|
+
".Overlay-backdrop--center-whenNarrow",
|
|
68
|
+
".Overlay-backdrop--anchor-whenNarrow",
|
|
69
|
+
".Overlay-backdrop--anchor-whenNarrow .Overlay",
|
|
70
|
+
".Overlay-backdrop--side-whenNarrow",
|
|
71
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",
|
|
72
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",
|
|
73
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow",
|
|
74
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow",
|
|
75
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow",
|
|
76
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow",
|
|
77
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow",
|
|
78
|
+
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",
|
|
79
|
+
".Overlay-backdrop--full-whenNarrow",
|
|
80
|
+
".Overlay-backdrop--full-whenNarrow .Overlay"
|
|
81
|
+
]
|
|
82
|
+
}
|
|
@@ -101,7 +101,7 @@ module Primer
|
|
|
101
101
|
# <% d.with_body do %>
|
|
102
102
|
# <p>Some content</p>
|
|
103
103
|
# <% end %>
|
|
104
|
-
# <% d.
|
|
104
|
+
# <% d.with_footer do %>
|
|
105
105
|
# <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
|
|
106
106
|
# <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
|
|
107
107
|
# <% end %>
|
|
@@ -1 +1,40 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/dropdown",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".dropdown",
|
|
5
|
+
".dropdown-caret",
|
|
6
|
+
".dropdown-menu",
|
|
7
|
+
".dropdown-menu:after",
|
|
8
|
+
".dropdown-menu:before",
|
|
9
|
+
".dropdown-menu>ul",
|
|
10
|
+
".dropdown-menu-no-overflow",
|
|
11
|
+
".dropdown-menu-no-overflow .dropdown-item",
|
|
12
|
+
".dropdown-item",
|
|
13
|
+
".dropdown-item:hover",
|
|
14
|
+
".dropdown-item:hover>.octicon",
|
|
15
|
+
".dropdown-item:hover [class*=color-fg-]",
|
|
16
|
+
".dropdown-item:hover>.Label",
|
|
17
|
+
".dropdown-item.btn-link",
|
|
18
|
+
".dropdown-signout",
|
|
19
|
+
".dropdown-divider",
|
|
20
|
+
".dropdown-header",
|
|
21
|
+
".dropdown-item[aria-checked=false] .octicon-check",
|
|
22
|
+
".dropdown-menu-w",
|
|
23
|
+
".dropdown-menu-w:before",
|
|
24
|
+
".dropdown-menu-w:after",
|
|
25
|
+
".dropdown-menu-e",
|
|
26
|
+
".dropdown-menu-e:before",
|
|
27
|
+
".dropdown-menu-e:after",
|
|
28
|
+
".dropdown-menu-ne",
|
|
29
|
+
".dropdown-menu-ne:after",
|
|
30
|
+
".dropdown-menu-ne:before",
|
|
31
|
+
".dropdown-menu-s",
|
|
32
|
+
".dropdown-menu-s:before",
|
|
33
|
+
".dropdown-menu-s:after",
|
|
34
|
+
".dropdown-menu-sw",
|
|
35
|
+
".dropdown-menu-sw:before",
|
|
36
|
+
".dropdown-menu-sw:after",
|
|
37
|
+
".dropdown-menu-se:before",
|
|
38
|
+
".dropdown-menu-se:after"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
FormButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::ButtonInput)
|
|
6
|
+
|
|
7
|
+
# A button input rendered using the HTML `<button type="button">` tag.
|
|
8
|
+
#
|
|
9
|
+
# This component wraps the Primer button component and supports the same slots and arguments.
|
|
10
|
+
#
|
|
11
|
+
# @form_usage
|
|
12
|
+
# class ExampleForm < ApplicationForm
|
|
13
|
+
# form do |example_form|
|
|
14
|
+
# example_form.button(attributes)
|
|
15
|
+
# end
|
|
16
|
+
# end
|
|
17
|
+
class FormButton < Primer::Component
|
|
18
|
+
status :alpha
|
|
19
|
+
|
|
20
|
+
# @!method initialize
|
|
21
|
+
#
|
|
22
|
+
# @param name [String] Value for the HTML name attribute.
|
|
23
|
+
# @param id [String] Value for the HTML id attribute.
|
|
24
|
+
# @param class [String] CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders.
|
|
25
|
+
# @param classes [Array] CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored).
|
|
26
|
+
# @param label [String] Label text displayed above the input.
|
|
27
|
+
# @param aria [Hash] Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current="true"`.
|
|
28
|
+
# @param data [Hash] Key/value pairs that represent data attributes and their values. Eg. `data: { foo: "bar" }` becomes `data-foo="bar"`.
|
|
29
|
+
# @macro form_system_arguments
|
|
30
|
+
end
|
|
31
|
+
end
|
|
32
|
+
end
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<%= render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) do %>
|
|
2
|
+
<%= render(Primer::BaseComponent.new(tag: :label, **@label_arguments)) do %>
|
|
3
|
+
<%= @label %>
|
|
4
|
+
<% if required? %>
|
|
5
|
+
<span aria-hidden="true">*</span>
|
|
6
|
+
<% end %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% if @input_block %>
|
|
9
|
+
<%= view_context.capture { @input_block.call(@input_arguments) } %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% if @validation_message %>
|
|
12
|
+
<%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
|
|
13
|
+
<%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
|
|
14
|
+
<span><%= @validation_message %></span>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% if @init_caption || caption? %>
|
|
18
|
+
<span class="FormControl-caption" id="<%= @caption_id %>">
|
|
19
|
+
<% if caption? %>
|
|
20
|
+
<%= caption %>
|
|
21
|
+
<% else %>
|
|
22
|
+
<%= @init_caption %>
|
|
23
|
+
<% end %>
|
|
24
|
+
</span>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|