primer_view_components 0.0.120 → 0.0.122
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +58 -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/item.rb +1 -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/segmented_control.rb +30 -0
- 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 +16 -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/base_component.rb +3 -3
- 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/close_button.rb +1 -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/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
- data/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
- data/app/components/primer/{local_time.ts → beta/relative_time.ts} +0 -0
- 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 +12 -3
- data/app/components/primer/primer.d.ts +1 -2
- data/app/components/primer/primer.js +1 -2
- data/app/components/primer/primer.ts +1 -2
- data/app/components/primer/truncate.css.json +13 -1
- data/app/forms/example_toggle_switch_form.rb +1 -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/app/lib/primer/view_helper.rb +0 -1
- data/lib/primer/deprecations.yml +0 -78
- data/lib/primer/form_components.rb +26 -6
- data/lib/primer/forms/acts_as_component.rb +12 -1
- 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/toggle_switch_form.rb +10 -3
- 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 -27
- 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/lib/tasks/static.rake +22 -0
- 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/auto_complete_preview.rb +6 -6
- 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/segmented_control_preview/with_label_and_caption.html.erb +9 -0
- data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb +11 -0
- data/previews/primer/alpha/segmented_control_preview.rb +7 -1
- 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 +24 -1
- data/previews/primer/alpha/toggle_switch_preview.rb +9 -9
- data/previews/primer/beta/auto_complete_preview.rb +17 -17
- 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/previews/primer/url_helpers.rb +1 -1
- data/static/arguments.json +1348 -1412
- data/static/audited_at.json +12 -21
- data/static/constants.json +20 -51
- data/static/previews.json +1812 -0
- data/static/statuses.json +10 -19
- metadata +47 -32
- data/app/components/primer/dropdown/menu.rb +0 -14
- data/app/components/primer/dropdown.rb +0 -7
- data/app/components/primer/hellip_button.rb +0 -7
- data/app/components/primer/label_component.rb +0 -7
- data/app/components/primer/link_component.rb +0 -7
- data/app/components/primer/local_time.rb +0 -63
- data/app/components/primer/markdown.rb +0 -7
- data/app/components/primer/menu_component.rb +0 -7
- data/app/components/primer/octicon_component.rb +0 -7
- data/app/components/primer/octicon_symbols_component.rb +0 -7
- data/app/components/primer/popover_component.rb +0 -8
- data/app/components/primer/spinner_component.rb +0 -7
- data/app/components/primer/state_component.rb +0 -7
- data/app/components/primer/subhead_component.rb +0 -7
- data/app/components/primer/tab_container_component.rb +0 -7
- data/app/components/primer/time_ago_component.d.ts +0 -1
- data/app/components/primer/time_ago_component.js +0 -1
- data/app/components/primer/time_ago_component.rb +0 -51
- data/app/components/primer/time_ago_component.ts +0 -1
- data/app/components/primer/timeline_item_component.rb +0 -13
- data/previews/primer/local_time_component_preview.rb +0 -57
- data/previews/primer/time_ago_component_preview.rb +0 -27
@@ -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 %>
|