openproject-primer_view_components 0.14.0 → 0.16.0
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 +17 -0
- 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/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +12 -0
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +31 -0
- data/app/components/primer/open_project/page_header.css +1 -1
- data/app/components/primer/open_project/page_header.css.json +4 -1
- data/app/components/primer/open_project/page_header.css.map +1 -1
- data/app/components/primer/open_project/page_header.html.erb +9 -1
- data/app/components/primer/open_project/page_header.pcss +19 -1
- data/app/components/primer/open_project/page_header.rb +38 -0
- data/app/forms/custom_width_fields_form.rb +26 -0
- data/lib/primer/forms/dsl/input.rb +19 -0
- data/lib/primer/forms/select.rb +4 -1
- data/lib/primer/forms/text_field.rb +9 -7
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/select_preview.rb +5 -2
- data/previews/primer/alpha/text_field_preview.rb +5 -2
- data/previews/primer/forms_preview/custom_width_fields_form.html.erb +3 -0
- data/previews/primer/forms_preview.rb +2 -0
- data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +25 -0
- data/previews/primer/open_project/page_header_preview/playground.html.erb +32 -0
- data/previews/primer/open_project/page_header_preview.rb +48 -9
- data/static/classes.json +9 -0
- data/static/constants.json +16 -0
- data/static/info_arch.json +52 -2
- data/static/previews.json +26 -0
- metadata +6 -2
@@ -17,6 +17,7 @@ module Primer
|
|
17
17
|
# @param disabled toggle
|
18
18
|
# @param invalid toggle
|
19
19
|
# @param validation_message text
|
20
|
+
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
20
21
|
def playground(
|
21
22
|
name: "my-select-list",
|
22
23
|
id: "my-select-list",
|
@@ -28,7 +29,8 @@ module Primer
|
|
28
29
|
full_width: false,
|
29
30
|
disabled: false,
|
30
31
|
invalid: false,
|
31
|
-
validation_message: nil
|
32
|
+
validation_message: nil,
|
33
|
+
input_width: nil
|
32
34
|
)
|
33
35
|
system_arguments = {
|
34
36
|
name: name,
|
@@ -41,7 +43,8 @@ module Primer
|
|
41
43
|
full_width: full_width,
|
42
44
|
disabled: disabled,
|
43
45
|
invalid: invalid,
|
44
|
-
validation_message: validation_message
|
46
|
+
validation_message: validation_message,
|
47
|
+
input_width: input_width
|
45
48
|
}
|
46
49
|
|
47
50
|
render(Primer::Alpha::Select.new(**system_arguments)) do |component|
|
@@ -23,6 +23,7 @@ module Primer
|
|
23
23
|
# @param inset toggle
|
24
24
|
# @param monospace toggle
|
25
25
|
# @param leading_visual_icon octicon
|
26
|
+
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
26
27
|
def playground(
|
27
28
|
name: "my-text-field",
|
28
29
|
id: "my-text-field",
|
@@ -40,7 +41,8 @@ module Primer
|
|
40
41
|
placeholder: nil,
|
41
42
|
inset: false,
|
42
43
|
monospace: false,
|
43
|
-
leading_visual_icon: nil
|
44
|
+
leading_visual_icon: nil,
|
45
|
+
input_width: nil
|
44
46
|
)
|
45
47
|
system_arguments = {
|
46
48
|
name: name,
|
@@ -58,7 +60,8 @@ module Primer
|
|
58
60
|
validation_message: validation_message,
|
59
61
|
placeholder: placeholder,
|
60
62
|
inset: inset,
|
61
|
-
monospace: monospace
|
63
|
+
monospace: monospace,
|
64
|
+
input_width: input_width
|
62
65
|
}
|
63
66
|
|
64
67
|
if leading_visual_icon
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<%= render(Primer::OpenProject::PageHeader.new) do |component| %>
|
2
|
+
<% component.with_title(tag: :h1) do %>
|
3
|
+
A title
|
4
|
+
<% end %>
|
5
|
+
<% component.with_description do %>
|
6
|
+
A description with actions
|
7
|
+
<% end %>
|
8
|
+
<% component.with_parent_link(href: "#") do %>
|
9
|
+
Parent link
|
10
|
+
<% end %>
|
11
|
+
<% component.with_context_bar_actions do %>
|
12
|
+
<%= render(Primer::Alpha::ActionMenu.new) do |component| %>
|
13
|
+
<% component.with_show_button { "Menu" } %>
|
14
|
+
<% component.with_item(label: "Item", tag: :button, value: "") %>
|
15
|
+
<% component.with_item(
|
16
|
+
label: "Show dialog",
|
17
|
+
tag: :button,
|
18
|
+
content_arguments: { "data-show-dialog-id": "my-dialog" },
|
19
|
+
value: "",
|
20
|
+
scheme: :danger
|
21
|
+
) %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<%= render Primer::OpenProject::PageHeader.new do |header| %>
|
2
|
+
<%= header.with_title(variant: variant) { title } %>
|
3
|
+
<%= header.with_description { description } %>
|
4
|
+
<%= header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button %>
|
5
|
+
<%= header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs %>
|
6
|
+
<%= header.with_parent_link(href: "#") { "Parent link" } if with_parent_link %>
|
7
|
+
<% if with_actions %>
|
8
|
+
<% header.with_actions do %>
|
9
|
+
<%= render(Primer::Alpha::ActionMenu.new) do |component| %>
|
10
|
+
<% component.with_show_button { "Menu" } %>
|
11
|
+
<% component.with_item(label: "Item", tag: :button, value: "") %>
|
12
|
+
<% component.with_item(
|
13
|
+
label: "Show dialog",
|
14
|
+
tag: :button,
|
15
|
+
content_arguments: { "data-show-dialog-id": "my-dialog" },
|
16
|
+
value: "",
|
17
|
+
scheme: :danger
|
18
|
+
) %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
<% end %>
|
22
|
+
<% if with_context_bar_actions %>
|
23
|
+
<% header.with_context_bar_actions do %>
|
24
|
+
<%= render(Primer::Beta::IconButton.new(
|
25
|
+
scheme: :default,
|
26
|
+
size: :small,
|
27
|
+
icon: "pencil",
|
28
|
+
"aria-label": "aria_label"
|
29
|
+
)) %>
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|
@@ -21,22 +21,32 @@ module Primer
|
|
21
21
|
# @param with_back_button [Boolean]
|
22
22
|
# @param back_button_size [Symbol] select [small, medium, large]
|
23
23
|
# @param with_breadcrumbs [Boolean]
|
24
|
+
# @param with_actions [Boolean]
|
25
|
+
# @param with_context_bar_actions [Boolean]
|
26
|
+
# @param with_parent_link [Boolean]
|
24
27
|
def playground(
|
25
28
|
variant: :medium,
|
26
29
|
title: "Hello",
|
27
30
|
description: "Last updated 5 minutes ago by XYZ.",
|
28
31
|
with_back_button: false,
|
29
32
|
back_button_size: :medium,
|
30
|
-
with_breadcrumbs: false
|
33
|
+
with_breadcrumbs: false,
|
34
|
+
with_actions: false,
|
35
|
+
with_context_bar_actions: false,
|
36
|
+
with_parent_link: false
|
31
37
|
)
|
32
38
|
breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
|
33
39
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
+
render_with_template(locals: { variant: variant,
|
41
|
+
title: title,
|
42
|
+
description: description,
|
43
|
+
with_back_button: with_back_button,
|
44
|
+
back_button_size: back_button_size,
|
45
|
+
with_breadcrumbs: with_breadcrumbs,
|
46
|
+
with_parent_link: with_parent_link,
|
47
|
+
with_actions: with_actions,
|
48
|
+
with_context_bar_actions: with_context_bar_actions,
|
49
|
+
breadcrumb_items: breadcrumb_items })
|
40
50
|
end
|
41
51
|
|
42
52
|
# @label Large
|
@@ -52,7 +62,11 @@ module Primer
|
|
52
62
|
render_with_template(locals: {})
|
53
63
|
end
|
54
64
|
|
55
|
-
# @label With back button
|
65
|
+
# @label With back button (on wide)
|
66
|
+
# **Back button** is only shown on **wider than narrow screens** by default.
|
67
|
+
# If you want to override that behaviour please use the system_argument: **display**
|
68
|
+
# e.g. **component.with\_breadcrumbs(display: [:block, :block])**
|
69
|
+
#
|
56
70
|
# @param href [String] text
|
57
71
|
# @param size [Symbol] select [small, medium, large]
|
58
72
|
# @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
|
@@ -63,7 +77,11 @@ module Primer
|
|
63
77
|
end
|
64
78
|
end
|
65
79
|
|
66
|
-
# @label With breadcrumbs
|
80
|
+
# @label With breadcrumbs (on wide)
|
81
|
+
# **Breadcrumbs** are only shown on **wider than narrow screens** by default.
|
82
|
+
# If you want to override that behaviour please use the system_argument: **display**
|
83
|
+
# e.g. **component.with\_breadcrumbs(display: [:block, :block])**
|
84
|
+
#
|
67
85
|
def breadcrumbs
|
68
86
|
breadcrumb_items = [
|
69
87
|
{ href: "/foo", text: "Foo" },
|
@@ -75,6 +93,27 @@ module Primer
|
|
75
93
|
header.with_breadcrumbs(breadcrumb_items)
|
76
94
|
end
|
77
95
|
end
|
96
|
+
|
97
|
+
# @label With parent link (on narrow)
|
98
|
+
# **Parent link** is only shown on **narrow screens** by default.
|
99
|
+
# If you want to override that behaviour please use the system_argument: **display**
|
100
|
+
# e.g. **component.with\_parent\_link(display: [:block, :block])**
|
101
|
+
#
|
102
|
+
def parent_link
|
103
|
+
render(Primer::OpenProject::PageHeader.new) do |header|
|
104
|
+
header.with_title { "A title" }
|
105
|
+
header.with_parent_link(href: "test") { "Parent link" }
|
106
|
+
end
|
107
|
+
end
|
108
|
+
|
109
|
+
# @label With context bar actions (on narrow)
|
110
|
+
# **Context bar actions** are only shown on **narrow screens** by default.
|
111
|
+
# If you want to override that behaviour please use the system_argument: **display**
|
112
|
+
# e.g. **component.with\_context\_bar\_actions(display: [:block, :block])**
|
113
|
+
#
|
114
|
+
def context_bar_actions
|
115
|
+
render_with_template(locals: {})
|
116
|
+
end
|
78
117
|
end
|
79
118
|
end
|
80
119
|
end
|
data/static/classes.json
CHANGED
@@ -441,9 +441,18 @@
|
|
441
441
|
"PageHeader-breadcrumbs": [
|
442
442
|
"Primer::OpenProject::PageHeader"
|
443
443
|
],
|
444
|
+
"PageHeader-contextBar": [
|
445
|
+
"Primer::OpenProject::PageHeader"
|
446
|
+
],
|
447
|
+
"PageHeader-contextBarActions": [
|
448
|
+
"Primer::OpenProject::PageHeader"
|
449
|
+
],
|
444
450
|
"PageHeader-description": [
|
445
451
|
"Primer::OpenProject::PageHeader"
|
446
452
|
],
|
453
|
+
"PageHeader-parentLink": [
|
454
|
+
"Primer::OpenProject::PageHeader"
|
455
|
+
],
|
447
456
|
"PageHeader-title": [
|
448
457
|
"Primer::OpenProject::PageHeader"
|
449
458
|
],
|
data/static/constants.json
CHANGED
@@ -1370,9 +1370,25 @@
|
|
1370
1370
|
"medium",
|
1371
1371
|
"large"
|
1372
1372
|
],
|
1373
|
+
"DEFAULT_BACK_BUTTON_DISPLAY": [
|
1374
|
+
"none",
|
1375
|
+
"flex"
|
1376
|
+
],
|
1373
1377
|
"DEFAULT_BACK_BUTTON_ICON": "arrow-left",
|
1374
1378
|
"DEFAULT_BACK_BUTTON_SIZE": "medium",
|
1379
|
+
"DEFAULT_BREADCRUMBS_DISPLAY": [
|
1380
|
+
"none",
|
1381
|
+
"flex"
|
1382
|
+
],
|
1383
|
+
"DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY": [
|
1384
|
+
"block",
|
1385
|
+
"none"
|
1386
|
+
],
|
1375
1387
|
"DEFAULT_HEADER_VARIANT": "medium",
|
1388
|
+
"DEFAULT_PARENT_LINK_DISPLAY": [
|
1389
|
+
"block",
|
1390
|
+
"none"
|
1391
|
+
],
|
1376
1392
|
"HEADER_VARIANT_OPTIONS": [
|
1377
1393
|
"large",
|
1378
1394
|
"medium"
|
data/static/info_arch.json
CHANGED
@@ -15473,9 +15473,21 @@
|
|
15473
15473
|
}
|
15474
15474
|
]
|
15475
15475
|
},
|
15476
|
+
{
|
15477
|
+
"name": "context_bar_actions",
|
15478
|
+
"description": "Context Bar Actions\nBy default shown on narrow screens. Can be overridden with system_argument: display",
|
15479
|
+
"parameters": [
|
15480
|
+
{
|
15481
|
+
"name": "system_arguments",
|
15482
|
+
"type": "Hash",
|
15483
|
+
"default": "N/A",
|
15484
|
+
"description": "{{link_to_system_arguments_docs}}"
|
15485
|
+
}
|
15486
|
+
]
|
15487
|
+
},
|
15476
15488
|
{
|
15477
15489
|
"name": "back_button",
|
15478
|
-
"description": "Optional back button prepend the title",
|
15490
|
+
"description": "Optional back button prepend the title\nBy default shown on wider screens. Can be overridden with system_argument: display",
|
15479
15491
|
"parameters": [
|
15480
15492
|
{
|
15481
15493
|
"name": "size",
|
@@ -15497,9 +15509,21 @@
|
|
15497
15509
|
}
|
15498
15510
|
]
|
15499
15511
|
},
|
15512
|
+
{
|
15513
|
+
"name": "parent_link",
|
15514
|
+
"description": "Optional parent link in the context area\nBy default shown on narrow screens. Can be overridden with system_argument: display",
|
15515
|
+
"parameters": [
|
15516
|
+
{
|
15517
|
+
"name": "system_arguments",
|
15518
|
+
"type": "Hash",
|
15519
|
+
"default": "N/A",
|
15520
|
+
"description": "{{link_to_system_arguments_docs}}"
|
15521
|
+
}
|
15522
|
+
]
|
15523
|
+
},
|
15500
15524
|
{
|
15501
15525
|
"name": "breadcrumbs",
|
15502
|
-
"description": "Optional breadcrumbs above the title row",
|
15526
|
+
"description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
|
15503
15527
|
"parameters": [
|
15504
15528
|
{
|
15505
15529
|
"name": "items",
|
@@ -15610,6 +15634,32 @@
|
|
15610
15634
|
"color-contrast"
|
15611
15635
|
]
|
15612
15636
|
}
|
15637
|
+
},
|
15638
|
+
{
|
15639
|
+
"preview_path": "primer/open_project/page_header/parent_link",
|
15640
|
+
"name": "parent_link",
|
15641
|
+
"snapshot": "false",
|
15642
|
+
"skip_rules": {
|
15643
|
+
"wont_fix": [
|
15644
|
+
"region"
|
15645
|
+
],
|
15646
|
+
"will_fix": [
|
15647
|
+
"color-contrast"
|
15648
|
+
]
|
15649
|
+
}
|
15650
|
+
},
|
15651
|
+
{
|
15652
|
+
"preview_path": "primer/open_project/page_header/context_bar_actions",
|
15653
|
+
"name": "context_bar_actions",
|
15654
|
+
"snapshot": "false",
|
15655
|
+
"skip_rules": {
|
15656
|
+
"wont_fix": [
|
15657
|
+
"region"
|
15658
|
+
],
|
15659
|
+
"will_fix": [
|
15660
|
+
"color-contrast"
|
15661
|
+
]
|
15662
|
+
}
|
15613
15663
|
}
|
15614
15664
|
],
|
15615
15665
|
"subcomponents": [
|
data/static/previews.json
CHANGED
@@ -4781,6 +4781,32 @@
|
|
4781
4781
|
"color-contrast"
|
4782
4782
|
]
|
4783
4783
|
}
|
4784
|
+
},
|
4785
|
+
{
|
4786
|
+
"preview_path": "primer/open_project/page_header/parent_link",
|
4787
|
+
"name": "parent_link",
|
4788
|
+
"snapshot": "false",
|
4789
|
+
"skip_rules": {
|
4790
|
+
"wont_fix": [
|
4791
|
+
"region"
|
4792
|
+
],
|
4793
|
+
"will_fix": [
|
4794
|
+
"color-contrast"
|
4795
|
+
]
|
4796
|
+
}
|
4797
|
+
},
|
4798
|
+
{
|
4799
|
+
"preview_path": "primer/open_project/page_header/context_bar_actions",
|
4800
|
+
"name": "context_bar_actions",
|
4801
|
+
"snapshot": "false",
|
4802
|
+
"skip_rules": {
|
4803
|
+
"wont_fix": [
|
4804
|
+
"region"
|
4805
|
+
],
|
4806
|
+
"will_fix": [
|
4807
|
+
"color-contrast"
|
4808
|
+
]
|
4809
|
+
}
|
4784
4810
|
}
|
4785
4811
|
]
|
4786
4812
|
},
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: openproject-primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.16.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-11-
|
12
|
+
date: 2023-11-17 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionview
|
@@ -493,6 +493,7 @@ files:
|
|
493
493
|
- app/forms/check_box_group_form.rb
|
494
494
|
- app/forms/check_box_with_nested_form.rb
|
495
495
|
- app/forms/composed_form.rb
|
496
|
+
- app/forms/custom_width_fields_form.rb
|
496
497
|
- app/forms/example_toggle_switch_form.rb
|
497
498
|
- app/forms/example_toggle_switch_form/example_field_caption.html.erb
|
498
499
|
- app/forms/first_name_form.rb
|
@@ -831,6 +832,7 @@ files:
|
|
831
832
|
- previews/primer/forms_preview/check_box_group_form.html.erb
|
832
833
|
- previews/primer/forms_preview/check_box_with_nested_form.html.erb
|
833
834
|
- previews/primer/forms_preview/composed_form.html.erb
|
835
|
+
- previews/primer/forms_preview/custom_width_fields_form.html.erb
|
834
836
|
- previews/primer/forms_preview/example_toggle_switch_form.html.erb
|
835
837
|
- previews/primer/forms_preview/horizontal_form.html.erb
|
836
838
|
- previews/primer/forms_preview/immediate_validation_form.html.erb
|
@@ -850,6 +852,8 @@ files:
|
|
850
852
|
- previews/primer/open_project/grid_layout_preview.rb
|
851
853
|
- previews/primer/open_project/page_header_preview.rb
|
852
854
|
- previews/primer/open_project/page_header_preview/actions.html.erb
|
855
|
+
- previews/primer/open_project/page_header_preview/context_bar_actions.html.erb
|
856
|
+
- previews/primer/open_project/page_header_preview/playground.html.erb
|
853
857
|
- previews/primer/url_helpers.rb
|
854
858
|
- static/arguments.json
|
855
859
|
- static/assets/view-components.svg
|