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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +17 -0
  3. data/app/assets/styles/primer_view_components.css +1 -1
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/text_field.css +1 -1
  6. data/app/components/primer/alpha/text_field.css.json +12 -0
  7. data/app/components/primer/alpha/text_field.css.map +1 -1
  8. data/app/components/primer/alpha/text_field.pcss +31 -0
  9. data/app/components/primer/open_project/page_header.css +1 -1
  10. data/app/components/primer/open_project/page_header.css.json +4 -1
  11. data/app/components/primer/open_project/page_header.css.map +1 -1
  12. data/app/components/primer/open_project/page_header.html.erb +9 -1
  13. data/app/components/primer/open_project/page_header.pcss +19 -1
  14. data/app/components/primer/open_project/page_header.rb +38 -0
  15. data/app/forms/custom_width_fields_form.rb +26 -0
  16. data/lib/primer/forms/dsl/input.rb +19 -0
  17. data/lib/primer/forms/select.rb +4 -1
  18. data/lib/primer/forms/text_field.rb +9 -7
  19. data/lib/primer/view_components/version.rb +1 -1
  20. data/previews/primer/alpha/select_preview.rb +5 -2
  21. data/previews/primer/alpha/text_field_preview.rb +5 -2
  22. data/previews/primer/forms_preview/custom_width_fields_form.html.erb +3 -0
  23. data/previews/primer/forms_preview.rb +2 -0
  24. data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +25 -0
  25. data/previews/primer/open_project/page_header_preview/playground.html.erb +32 -0
  26. data/previews/primer/open_project/page_header_preview.rb +48 -9
  27. data/static/classes.json +9 -0
  28. data/static/constants.json +16 -0
  29. data/static/info_arch.json +52 -2
  30. data/static/previews.json +26 -0
  31. metadata +6 -2
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 14
8
+ MINOR = 16
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -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,3 @@
1
+ <%= primer_form_with(url: "/foo") do |f| %>
2
+ <%= render(CustomWidthFieldsForm.new(f)) %>
3
+ <% end %>
@@ -7,6 +7,8 @@ module Primer
7
7
 
8
8
  def multi_text_field_form; end
9
9
 
10
+ def custom_width_fields_form; end
11
+
10
12
  def text_field_and_checkbox_form; end
11
13
 
12
14
  def horizontal_form; end
@@ -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
- render(Primer::OpenProject::PageHeader.new) do |header|
35
- header.with_title(variant: variant) { title }
36
- header.with_description { description }
37
- header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button
38
- header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs
39
- end
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
  ],
@@ -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"
@@ -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.14.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-09 00:00:00.000000000 Z
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