openproject-primer_view_components 0.23.0 → 0.24.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +33 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_list.d.ts +16 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +3 -0
  5. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  6. data/app/assets/javascripts/primer_view_components.js +1 -1
  7. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  8. data/app/assets/styles/primer_view_components.css +1 -1
  9. data/app/assets/styles/primer_view_components.css.map +1 -1
  10. data/app/components/primer/alpha/action_list/item.rb +19 -6
  11. data/app/components/primer/alpha/action_list.css +1 -1
  12. data/app/components/primer/alpha/action_list.css.json +2 -0
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.d.ts +16 -0
  15. data/app/components/primer/alpha/action_list.html.erb +19 -17
  16. data/app/components/primer/alpha/action_list.js +69 -0
  17. data/app/components/primer/alpha/action_list.pcss +8 -0
  18. data/app/components/primer/alpha/action_list.ts +58 -0
  19. data/app/components/primer/alpha/banner.css +1 -1
  20. data/app/components/primer/alpha/banner.css.map +1 -1
  21. data/app/components/primer/alpha/banner.pcss +4 -4
  22. data/app/components/primer/alpha/dialog.css +1 -1
  23. data/app/components/primer/alpha/dialog.css.json +2 -0
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/dialog.pcss +9 -0
  26. data/app/components/primer/alpha/dropdown.css +1 -1
  27. data/app/components/primer/alpha/dropdown.css.map +1 -1
  28. data/app/components/primer/alpha/dropdown.pcss +1 -1
  29. data/app/components/primer/alpha/text_field.css +1 -1
  30. data/app/components/primer/alpha/text_field.css.json +2 -0
  31. data/app/components/primer/alpha/text_field.css.map +1 -1
  32. data/app/components/primer/alpha/text_field.pcss +10 -0
  33. data/app/components/primer/alpha/toggle_switch.rb +2 -2
  34. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +9 -9
  35. data/app/components/primer/beta/breadcrumbs.css +1 -1
  36. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  37. data/app/components/primer/beta/breadcrumbs.pcss +3 -1
  38. data/app/components/primer/beta/button.css +1 -1
  39. data/app/components/primer/beta/button.css.json +1 -0
  40. data/app/components/primer/beta/button.css.map +1 -1
  41. data/app/components/primer/beta/button.pcss +4 -0
  42. data/app/components/primer/beta/flash.css +1 -1
  43. data/app/components/primer/beta/flash.css.map +1 -1
  44. data/app/components/primer/beta/flash.pcss +4 -4
  45. data/app/components/primer/beta/nav_list.d.ts +3 -0
  46. data/app/components/primer/beta/nav_list.html.erb +1 -1
  47. data/app/components/primer/beta/nav_list.js +25 -2
  48. data/app/components/primer/beta/nav_list.ts +18 -1
  49. data/app/components/primer/beta/nav_list_group_element.js +4 -1
  50. data/app/components/primer/beta/nav_list_group_element.ts +3 -0
  51. data/app/components/primer/beta/popover.css +1 -1
  52. data/app/components/primer/beta/popover.css.map +1 -1
  53. data/app/components/primer/beta/popover.pcss +3 -0
  54. data/app/components/primer/beta/popover.rb +0 -1
  55. data/app/components/primer/open_project/page_header.css +1 -1
  56. data/app/components/primer/open_project/page_header.css.json +2 -4
  57. data/app/components/primer/open_project/page_header.css.map +1 -1
  58. data/app/components/primer/open_project/page_header.html.erb +15 -3
  59. data/app/components/primer/open_project/page_header.pcss +4 -17
  60. data/app/components/primer/open_project/page_header.rb +17 -28
  61. data/app/components/primer/primer.d.ts +1 -0
  62. data/app/components/primer/primer.js +1 -0
  63. data/app/components/primer/primer.ts +1 -0
  64. data/app/forms/auto_complete_form.rb +18 -0
  65. data/app/forms/select_form.rb +10 -0
  66. data/lib/primer/forms/auto_complete.html.erb +6 -0
  67. data/lib/primer/forms/auto_complete.rb +56 -0
  68. data/lib/primer/forms/builder.rb +19 -0
  69. data/lib/primer/forms/check_box_group.html.erb +4 -4
  70. data/lib/primer/forms/check_box_group.rb +0 -3
  71. data/lib/primer/forms/dsl/auto_complete_input.rb +33 -0
  72. data/lib/primer/forms/dsl/check_box_group_input.rb +8 -0
  73. data/lib/primer/forms/dsl/input.rb +8 -2
  74. data/lib/primer/forms/dsl/input_methods.rb +9 -0
  75. data/lib/primer/forms/dsl/radio_button_group_input.rb +8 -0
  76. data/lib/primer/forms/dsl/select_input.rb +5 -1
  77. data/lib/primer/forms/form_control.rb +1 -2
  78. data/lib/primer/forms/primer_text_field.js +2 -2
  79. data/lib/primer/forms/primer_text_field.ts +2 -2
  80. data/lib/primer/forms/radio_button_group.html.erb +4 -4
  81. data/lib/primer/forms/radio_button_group.rb +0 -3
  82. data/lib/primer/forms/select.html.erb +1 -0
  83. data/lib/primer/forms/select.rb +9 -5
  84. data/lib/primer/view_components/version.rb +1 -1
  85. data/previews/primer/alpha/action_list_preview.rb +42 -0
  86. data/previews/primer/alpha/select_preview.rb +12 -1
  87. data/previews/primer/alpha/text_area_preview.rb +7 -1
  88. data/previews/primer/alpha/text_field_preview.rb +7 -1
  89. data/previews/primer/beta/nav_list_preview.rb +43 -0
  90. data/previews/primer/forms_preview/auto_complete_form.html.erb +3 -0
  91. data/previews/primer/forms_preview/select_form.html.erb +1 -1
  92. data/previews/primer/forms_preview.rb +2 -0
  93. data/previews/primer/open_project/page_header_preview/actions.html.erb +9 -7
  94. data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +8 -6
  95. data/previews/primer/open_project/page_header_preview/playground.html.erb +4 -4
  96. data/previews/primer/open_project/page_header_preview.rb +11 -15
  97. data/static/arguments.json +7 -7
  98. data/static/classes.json +2 -5
  99. data/static/constants.json +22 -13
  100. data/static/info_arch.json +158 -21
  101. data/static/previews.json +147 -4
  102. metadata +11 -2
@@ -0,0 +1,18 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative "../../previews/primer/url_helpers"
4
+
5
+ # :nodoc:
6
+ class AutoCompleteForm < ApplicationForm
7
+ form do |auto_complete_form|
8
+ auto_complete_form.auto_complete(
9
+ name: :fruit,
10
+ label: "Fruit",
11
+ caption: "Please enter your favorite fruit",
12
+ src: Primer::UrlHelpers.autocomplete_index_path,
13
+ validation_message: "Something went wrong"
14
+ )
15
+
16
+ auto_complete_form.submit(label: "Submit", name: :submit)
17
+ end
18
+ end
@@ -8,5 +8,15 @@ class SelectForm < ApplicationForm
8
8
  city_list.option(label: "Bellevue", value: "bellevue")
9
9
  city_list.option(label: "Seattle", value: "seattle")
10
10
  end
11
+
12
+ select_form.select_list(name: "been", label: "Places you've been", caption: "Select all that apply", multiple: true, include_hidden: false) do |been_list|
13
+ been_list.option(label: "Lima, Peru", value: "lima")
14
+ been_list.option(label: "Tokyo, Japan", value: "tokyo")
15
+ been_list.option(label: "Reykjavík, Iceland", value: "reykjavik")
16
+ been_list.option(label: "Chiang Mai, Thailand", value: "chiang_mai")
17
+ been_list.option(label: "Queenstown, New Zealand", value: "queenstown")
18
+ end
19
+
20
+ select_form.submit(name: :submit, label: "Submit")
11
21
  end
12
22
  end
@@ -0,0 +1,6 @@
1
+ <%= render(Primer::Beta::AutoComplete.new(**auto_complete_arguments)) do |autocomplete| %>
2
+ <% @input.block.call(autocomplete) if @input.block %>
3
+ <% autocomplete.with_input(**input_arguments) %>
4
+ <% end %>
5
+ <%= render(ValidationMessage.new(input: @input)) %>
6
+ <%= render(Caption.new(input: @input)) %>
@@ -0,0 +1,56 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Forms
5
+ # :nodoc:
6
+ class AutoComplete < BaseComponent
7
+ ARGUMENT_TYPES = %i(keyreq key).freeze
8
+
9
+ delegate :builder, :form, to: :@input
10
+
11
+ def initialize(input:)
12
+ @input = input
13
+ @input.merge_input_arguments!(text_field_attributes.deep_symbolize_keys)
14
+ end
15
+
16
+ def self.auto_complete_argument_names
17
+ @auto_complete_argument_names ||=
18
+ Primer::Beta::AutoComplete.instance_method(:initialize)
19
+ .parameters
20
+ .filter_map { |(type, param_name)| next param_name if ARGUMENT_TYPES.include?(type) }
21
+ end
22
+
23
+ private
24
+
25
+ def all_input_arguments
26
+ @all_input_arguments ||= @input.input_arguments.deep_dup.tap do |args|
27
+ # rails uses :class but PVC wants :classes
28
+ args[:classes] = class_names(
29
+ args[:classes],
30
+ args.delete(:class)
31
+ )
32
+ end
33
+ end
34
+
35
+ def auto_complete_arguments
36
+ all_args = all_input_arguments
37
+ all_args
38
+ .slice(*self.class.auto_complete_argument_names)
39
+ .merge(
40
+ input_name: all_args[:name],
41
+ input_id: all_args[:id],
42
+ label_text: @input.label,
43
+ list_id: "#{all_args[:id]}-list"
44
+ )
45
+ end
46
+
47
+ def input_arguments
48
+ all_input_arguments.except(*self.class.auto_complete_argument_names, :id, :name)
49
+ end
50
+
51
+ def text_field_attributes
52
+ builder.text_field_attributes(@input.name).except("size", "value")
53
+ end
54
+ end
55
+ end
56
+ end
@@ -27,6 +27,21 @@ ActionView::Helpers::Tags::Base.prepend(
27
27
 
28
28
  module Primer
29
29
  module Forms
30
+ module Tags
31
+ # :nodoc:
32
+ class TextField < ::ActionView::Helpers::Tags::TextField
33
+ def attributes
34
+ render
35
+ end
36
+
37
+ private
38
+
39
+ def tag(_name, options)
40
+ options
41
+ end
42
+ end
43
+ end
44
+
30
45
  # :nodoc:
31
46
  class Builder < ActionView::Helpers::FormBuilder
32
47
  alias primer_fields_for fields_for
@@ -57,6 +72,10 @@ module Primer
57
72
  super(*args, classify(options).merge(generate_error_markup: false), &block)
58
73
  end
59
74
 
75
+ def text_field_attributes(method, options = {})
76
+ Tags::TextField.new(@object_name, method, @template, options).attributes
77
+ end
78
+
60
79
  def text_area(*args, **options, &block)
61
80
  super(*args, classify(options).merge(generate_error_markup: false), &block)
62
81
  end
@@ -1,5 +1,5 @@
1
- <%= content_tag(:div, **@input.input_arguments) do %>
2
- <fieldset>
1
+ <div class="FormControl-check-group-wrap">
2
+ <%= content_tag(:fieldset, **@input.input_arguments) do %>
3
3
  <% if @input.label %>
4
4
  <%= content_tag(:legend, **@input.label_arguments) do %>
5
5
  <%= @input.label %>
@@ -10,11 +10,11 @@
10
10
  <%= render(check_box.to_component) %>
11
11
  <% end %>
12
12
  <% end %>
13
- </fieldset>
13
+ <% end %>
14
14
  <div class="mt-2">
15
15
  <%= render(ValidationMessage.new(input: @input)) %>
16
16
  </div>
17
17
  <div class="mt-2">
18
18
  <%= render(Caption.new(input: @input)) %>
19
19
  </div>
20
- <% end %>
20
+ </div>
@@ -8,10 +8,7 @@ module Primer
8
8
 
9
9
  def initialize(input:)
10
10
  @input = input
11
-
12
11
  @input.add_label_classes("FormControl-label", "mb-2")
13
- @input.add_input_classes("FormControl-check-group-wrap")
14
-
15
12
  Primer::Forms::Utils.classify(@input.input_arguments)
16
13
  end
17
14
  end
@@ -0,0 +1,33 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Forms
5
+ module Dsl
6
+ # :nodoc:
7
+ class AutoCompleteInput < Input
8
+ attr_reader :name, :label, :block
9
+
10
+ def initialize(name:, label:, **system_arguments, &block)
11
+ @name = name
12
+ @label = label
13
+ @block = block
14
+
15
+ super(**system_arguments)
16
+ end
17
+
18
+ def to_component
19
+ AutoComplete.new(input: self)
20
+ end
21
+
22
+ def type
23
+ :autocomplete
24
+ end
25
+
26
+ # The AutoComplete Primer component does not allow auto-focusing
27
+ def focusable?
28
+ false
29
+ end
30
+ end
31
+ end
32
+ end
33
+ end
@@ -25,6 +25,14 @@ module Primer
25
25
  :check_box_group
26
26
  end
27
27
 
28
+ def focusable?
29
+ true
30
+ end
31
+
32
+ def autofocus!
33
+ @check_boxes.first&.autofocus!
34
+ end
35
+
28
36
  def check_box(**system_arguments, &block)
29
37
  args = {
30
38
  name: @name,
@@ -31,7 +31,7 @@ module Primer
31
31
  # @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
32
32
 
33
33
  # @!macro [new] form_full_width_arguments
34
- # @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container.
34
+ # @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
35
35
 
36
36
  # @!macro [new] form_system_arguments
37
37
  # @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
@@ -67,7 +67,9 @@ module Primer
67
67
  @form = form
68
68
 
69
69
  @input_arguments = system_arguments
70
+ @input_arguments.delete(:id) unless @input_arguments[:id].present?
70
71
  @label_arguments = @input_arguments.delete(:label_arguments) || {}
72
+ @label_arguments[:for] = id if id.present?
71
73
 
72
74
  @label_arguments[:class] = class_names(
73
75
  @label_arguments[:class],
@@ -82,7 +84,7 @@ module Primer
82
84
  @caption = @input_arguments.delete(:caption)
83
85
  @validation_message = @input_arguments.delete(:validation_message)
84
86
  @invalid = @input_arguments.delete(:invalid)
85
- @full_width = @input_arguments.delete(:full_width)
87
+ @full_width = @input_arguments.delete(:full_width) { true }
86
88
  @size = @input_arguments.delete(:size)
87
89
  @input_width = @input_arguments.delete(:input_width)
88
90
 
@@ -257,6 +259,10 @@ module Primer
257
259
  input_arguments[:autofocus] = true
258
260
  end
259
261
 
262
+ def id
263
+ @input_arguments[:id]
264
+ end
265
+
260
266
  # :nocov:
261
267
  def name
262
268
  raise_for_abstract_method!(__method__)
@@ -68,6 +68,15 @@ module Primer
68
68
  add_input TextFieldInput.new(builder: builder, form: form, **options, &block)
69
69
  end
70
70
 
71
+ # Adds an autocomplete text field to this form.
72
+ #
73
+ # @param options [Hash] The options accepted by the autocomplete input (see forms docs).
74
+ # @param block [Proc] A block that will be yielded a reference to the input object so it can be customized.
75
+ def auto_complete(**options, &block)
76
+ options = decorate_options(**options)
77
+ add_input AutoCompleteInput.new(builder: builder, form: form, **options, &block)
78
+ end
79
+
71
80
  # Adds a text area to this form.
72
81
  #
73
82
  # @param options [Hash] The options accepted by the text area input (see forms docs).
@@ -25,6 +25,14 @@ module Primer
25
25
  :radio_button_group
26
26
  end
27
27
 
28
+ def autofocus!
29
+ @radio_buttons.first&.autofocus!
30
+ end
31
+
32
+ def focusable?
33
+ true
34
+ end
35
+
28
36
  def radio_button(**system_arguments, &block)
29
37
  @radio_buttons << RadioButtonInput.new(
30
38
  builder: @builder, form: @form, name: @name, disabled: disabled?,
@@ -5,7 +5,7 @@ module Primer
5
5
  module Dsl
6
6
  # :nodoc:
7
7
  class SelectInput < Input
8
- SELECT_ARGUMENTS = %i[multiple include_blank prompt].freeze
8
+ SELECT_ARGUMENTS = %i[multiple include_blank include_hidden prompt].freeze
9
9
 
10
10
  # :nodoc:
11
11
  class Option
@@ -38,6 +38,10 @@ module Primer
38
38
  yield(self) if block_given?
39
39
  end
40
40
 
41
+ def multiple?
42
+ @select_arguments.fetch(:multiple, false)
43
+ end
44
+
41
45
  def option(**system_arguments)
42
46
  @options << Option.new(**system_arguments)
43
47
  end
@@ -16,8 +16,7 @@ module Primer
16
16
  system_arguments[:class],
17
17
  system_arguments[:classes],
18
18
  "FormControl",
19
- "width-full",
20
- "FormControl--fullWidth" => @input.full_width?
19
+ "width-full FormControl--fullWidth" => @input.full_width?
21
20
  )
22
21
  }
23
22
 
@@ -29,7 +29,7 @@ class PrimerTextFieldElement extends HTMLElement {
29
29
  connectedCallback() {
30
30
  __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
31
31
  const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
32
- this.inputElement.addEventListener('auto-check-success', async (event) => {
32
+ this.addEventListener('auto-check-success', async (event) => {
33
33
  const message = await event.detail.response.text();
34
34
  if (message && message.length > 0) {
35
35
  this.setSuccess(message);
@@ -38,7 +38,7 @@ class PrimerTextFieldElement extends HTMLElement {
38
38
  this.clearError();
39
39
  }
40
40
  }, { signal });
41
- this.inputElement.addEventListener('auto-check-error', async (event) => {
41
+ this.addEventListener('auto-check-error', async (event) => {
42
42
  const errorMessage = await event.detail.response.text();
43
43
  this.setError(errorMessage);
44
44
  }, { signal });
@@ -17,7 +17,7 @@ class PrimerTextFieldElement extends HTMLElement {
17
17
  this.#abortController?.abort()
18
18
  const {signal} = (this.#abortController = new AbortController())
19
19
 
20
- this.inputElement.addEventListener(
20
+ this.addEventListener(
21
21
  'auto-check-success',
22
22
  async (event: any) => {
23
23
  const message = await event.detail.response.text()
@@ -30,7 +30,7 @@ class PrimerTextFieldElement extends HTMLElement {
30
30
  {signal},
31
31
  )
32
32
 
33
- this.inputElement.addEventListener(
33
+ this.addEventListener(
34
34
  'auto-check-error',
35
35
  async (event: any) => {
36
36
  const errorMessage = await event.detail.response.text()
@@ -1,5 +1,5 @@
1
- <%= content_tag(:div, **@input.input_arguments) do %>
2
- <fieldset>
1
+ <div class="FormControl-radio-group-wrap">
2
+ <%= content_tag(:fieldset, **@input.input_arguments) do %>
3
3
  <% if @input.label %>
4
4
  <%= content_tag(:legend, **@input.label_arguments) do %>
5
5
  <%= @input.label %>
@@ -10,11 +10,11 @@
10
10
  <%= render(radio_button.to_component) %>
11
11
  <% end %>
12
12
  <% end %>
13
- </fieldset>
13
+ <% end %>
14
14
  <div class="mt-2">
15
15
  <%= render(ValidationMessage.new(input: @input)) %>
16
16
  </div>
17
17
  <div class="mt-2">
18
18
  <%= render(Caption.new(input: @input)) %>
19
19
  </div>
20
- <% end %>
20
+ </div>
@@ -8,10 +8,7 @@ module Primer
8
8
 
9
9
  def initialize(input:)
10
10
  @input = input
11
-
12
11
  @input.add_label_classes("FormControl-label", "mb-2")
13
- @input.add_input_classes("FormControl-radio-group-wrap")
14
-
15
12
  Primer::Forms::Utils.classify(@input.input_arguments)
16
13
  end
17
14
  end
@@ -3,3 +3,4 @@
3
3
  <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
4
4
  <% end %>
5
5
  <% end %>
6
+
@@ -8,17 +8,21 @@ module Primer
8
8
 
9
9
  def initialize(input:)
10
10
  @input = input
11
- @input.add_input_classes(
12
- "FormControl-select",
13
- Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
14
- )
11
+ @input.add_input_classes("FormControl-select")
12
+
13
+ if !input.multiple?
14
+ @input.add_input_classes(
15
+ Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
16
+ )
17
+ end
15
18
 
16
19
  wrap_classes = ["FormControl-select-wrap"]
17
20
  wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
18
21
 
19
22
  @field_wrap_arguments = {
20
23
  class: class_names(wrap_classes),
21
- hidden: @input.hidden?
24
+ hidden: @input.hidden?,
25
+ data: { multiple: input.multiple? }
22
26
  }
23
27
  end
24
28
 
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 23
8
+ MINOR = 24
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -459,6 +459,48 @@ module Primer
459
459
  component.with_item(label: "Active item", href: "/", active: true)
460
460
  end
461
461
  end
462
+
463
+ # @label Long label
464
+ #
465
+ # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
466
+ # @snapshot
467
+ def long_label_with_tooltip(truncate_label: :show_tooltip)
468
+ render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
469
+ component.with_item(
470
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
471
+ truncate_label: truncate_label
472
+ )
473
+ end
474
+ end
475
+
476
+ def long_label_wrap(truncate_label: :none)
477
+ render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
478
+ component.with_item(
479
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
480
+ truncate_label: truncate_label
481
+ )
482
+ end
483
+ end
484
+
485
+ def long_label_truncate_no_tooltip(truncate_label: :truncate)
486
+ render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
487
+ component.with_item(
488
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
489
+ truncate_label: truncate_label
490
+ )
491
+ end
492
+ end
493
+
494
+ def long_label_show_tooltip_with_truncate_label(truncate_label: :none)
495
+ render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
496
+ component.with_item(
497
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
498
+ truncate_label: truncate_label
499
+ ) do |item|
500
+ item.with_tooltip(text: "this is a tooltip")
501
+ end
502
+ end
503
+ end
462
504
  end
463
505
  end
464
506
  end
@@ -26,7 +26,7 @@ module Primer
26
26
  required: false,
27
27
  visually_hide_label: false,
28
28
  size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
29
- full_width: false,
29
+ full_width: true,
30
30
  disabled: false,
31
31
  invalid: false,
32
32
  validation_message: nil,
@@ -100,6 +100,17 @@ module Primer
100
100
  end
101
101
  end
102
102
 
103
+ # @label Not full width
104
+ # @snapshot
105
+ def not_full_width
106
+ render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
107
+ component.option(label: "Lopez Island", value: "lopez")
108
+ component.option(label: "Shaw Island", value: "shaw")
109
+ component.option(label: "Orcas Island", value: "orcas")
110
+ component.option(label: "San Juan Island", value: "san_juan")
111
+ end
112
+ end
113
+
103
114
  # @label Disabled
104
115
  # @snapshot
105
116
  def disabled
@@ -23,7 +23,7 @@ module Primer
23
23
  caption: "You can trust me, I'm a website",
24
24
  required: false,
25
25
  visually_hide_label: false,
26
- full_width: false,
26
+ full_width: true,
27
27
  disabled: false,
28
28
  invalid: false,
29
29
  validation_message: nil
@@ -70,6 +70,12 @@ module Primer
70
70
  render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
71
71
  end
72
72
 
73
+ # @label Not full width
74
+ # @snapshot
75
+ def not_full_width
76
+ render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
77
+ end
78
+
73
79
  # @label Disabled
74
80
  # @snapshot
75
81
  def disabled
@@ -34,7 +34,7 @@ module Primer
34
34
  size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
35
35
  show_clear_button: false,
36
36
  clear_button_id: "my-text-field-clear-button",
37
- full_width: false,
37
+ full_width: true,
38
38
  disabled: false,
39
39
  invalid: false,
40
40
  validation_message: nil,
@@ -128,6 +128,12 @@ module Primer
128
128
  render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
129
129
  end
130
130
 
131
+ # @label Not full width
132
+ # @snapshot
133
+ def not_full_width
134
+ render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
135
+ end
136
+
131
137
  # @label Disabled
132
138
  # @snapshot
133
139
  def disabled
@@ -129,6 +129,49 @@ module Primer
129
129
  # @label Trailing action
130
130
  # @snapshot
131
131
  def trailing_action; end
132
+
133
+ # @label Long label truncate overflow
134
+ #
135
+ # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
136
+ # @snapshot
137
+ def long_label_with_tooltip(truncate_label: :show_tooltip)
138
+ render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
139
+ component.with_item(
140
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
141
+ truncate_label: truncate_label
142
+ ) do |item|
143
+ item.with_trailing_visual_icon(icon: :plus)
144
+ end
145
+ end
146
+ end
147
+
148
+ def long_label_wrap(truncate_label: :none)
149
+ render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
150
+ component.with_item(
151
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
152
+ truncate_label: truncate_label
153
+ )
154
+ end
155
+ end
156
+
157
+ def long_label_truncate_no_tooltip(truncate_label: :truncate)
158
+ render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
159
+ component.with_item(
160
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
161
+ truncate_label: truncate_label
162
+ )
163
+ end
164
+ end
165
+
166
+ def long_label_show_tooltip_no_truncate_label
167
+ render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
168
+ component.with_item(
169
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
170
+ ) do |item|
171
+ item.with_tooltip(text: "this is a tooltip")
172
+ end
173
+ end
174
+ end
132
175
  end
133
176
  end
134
177
  end
@@ -0,0 +1,3 @@
1
+ <%= primer_form_with(url: generic_form_submission_path) do |f| %>
2
+ <%= render(AutoCompleteForm.new(f)) %>
3
+ <% end %>
@@ -1,3 +1,3 @@
1
- <%= primer_form_with(url: "/foo") do |f| %>
1
+ <%= primer_form_with(url: generic_form_submission_path) do |f| %>
2
2
  <%= render(SelectForm.new(f)) %>
3
3
  <% end %>
@@ -46,5 +46,7 @@ module Primer
46
46
  def immediate_validation_form; end
47
47
 
48
48
  def example_toggle_switch_form; end
49
+
50
+ def auto_complete_form; end
49
51
  end
50
52
  end
@@ -1,15 +1,18 @@
1
1
  <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
2
- <% component.with_title(tag: :h1) do %>
2
+ <% component.with_title do %>
3
3
  A title
4
4
  <% end %>
5
5
  <% component.with_description do %>
6
6
  A description with actions
7
7
  <% end %>
8
- <% component.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(
8
+ <% component.with_action do %>
9
+ <%= render(Primer::Beta::IconButton.new(icon: 'pencil', 'aria-label': 'Edit')) %>
10
+ <% end %>
11
+ <% component.with_action do %>
12
+ <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
13
+ <% menu.with_show_button { "Menu" } %>
14
+ <% menu.with_item(label: "Item", tag: :button, value: "") %>
15
+ <% menu.with_item(
13
16
  label: "Show dialog",
14
17
  tag: :button,
15
18
  content_arguments: { "data-show-dialog-id": "my-dialog" },
@@ -19,4 +22,3 @@
19
22
  <% end %>
20
23
  <% end %>
21
24
  <% end %>
22
-