primer_view_components 0.0.83 → 0.0.84

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f590f1c0d966e26b387252db1b83998d5acfb5aacd2d5e4fd5171b52557ecce0
4
- data.tar.gz: 85257456daac921ff79dbaf22340b2ce1bad6a5faefc59d275294c339bbfd38b
3
+ metadata.gz: 965629b8d612e3a35d3e4f430e869251f1ebe91acd3178e9a8f9284fa99e0553
4
+ data.tar.gz: a9b726891d9148550e7db58845de64b762d0cccedccd6804f7208b4646c4f81a
5
5
  SHA512:
6
- metadata.gz: 351d15d09d3eca4e61a736d392a38bc0d611909f05b5edd26dcbd6edf4aff4619bfcf827cfd9a2489a3e6e63bef28375826b3757ede4e20f26ae7081a565bab3
7
- data.tar.gz: 247c094bd647052cf34a8d9c90994ca8e60ae983d3addb9540a78a1aa38b8fc3ee5ca3c7cbd6e493fda071c133b43f4de177827edb7eaaeac971aa3c59811c0e
6
+ metadata.gz: 18b4dec4a3d863d642479c36267c877c9bafc0e3900c8876c2510391ba46d51e7111adb7d84cbd8338e01921714e943d8211a76f0f8adb875d8e5b8e297ebd37
7
+ data.tar.gz: 19ce0e83e6f35918b8b7a1bb119c7670a688781fa1d61b7334be3bc0dae7cf8fb0f5f8f0ab83123219e2daff65a03d610d030755b800744baaeda3310cc1d4b1
data/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## 0.0.84
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1189](https://github.com/primer/view_components/pull/1189) [`ec3af746`](https://github.com/primer/view_components/commit/ec3af746dceb8e4a0c967fe270f149d48e81489b) Thanks [@langermank](https://github.com/langermank)! - Autocomplete design updates
8
+
9
+ * [#1229](https://github.com/primer/view_components/pull/1229) [`5631d286`](https://github.com/primer/view_components/commit/5631d286c559cf4bbb96b85c0bb41dbeda5953d4) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - component generator: correcting template and thor tasks to account for component status
10
+
11
+ - [#1232](https://github.com/primer/view_components/pull/1232) [`3a154bf4`](https://github.com/primer/view_components/commit/3a154bf4452f5ed8f7694eb917c13258d34ff6c0) Thanks [@jonrohan](https://github.com/jonrohan)! - Consolidating view_components previews into test/previews/ folder
12
+
13
+ * [#1224](https://github.com/primer/view_components/pull/1224) [`2fc38746`](https://github.com/primer/view_components/commit/2fc387460e5f185463cbca8ffe0f098a06e2dec8) Thanks [@camertron](https://github.com/camertron)! - Add the ConditionalWrapper for conditionally wrapping content
14
+
15
+ - [#1234](https://github.com/primer/view_components/pull/1234) [`ee04a4a9`](https://github.com/primer/view_components/commit/ee04a4a937c56156b3232552c7d10b0ec0336ab7) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - updating links in the contributing docs to point to correct locations
16
+
3
17
  ## 0.0.83
4
18
 
5
19
  ### Patch Changes
@@ -0,0 +1,24 @@
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
+ <label for="<%= @input_id %>" class="<%= @label_classes %>">
3
+ <% if @is_label_visible %>
4
+ <%= @label_text %>
5
+ <% else %>
6
+ <span class="sr-only"><%= @label_text %></span>
7
+ <% end %>
8
+ </label>
9
+ <span class="autocomplete-body">
10
+ <% if @with_icon %>
11
+ <div class="form-control autocomplete-embedded-icon-wrap">
12
+ <%= render Primer::OcticonComponent.new(:search) %>
13
+ <% end %>
14
+ <%= input %>
15
+ <% if @is_clearable %>
16
+ <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
17
+ <% end %>
18
+ <% if @with_icon %>
19
+ </div>
20
+ <% end %>
21
+ <%= results %>
22
+ </span>
23
+ <div id="<%= @list_id %>-feedback" class="sr-only"></div>
24
+ <% end %>
@@ -0,0 +1,46 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ class AutoComplete
6
+ # Use `AutoCompleteItem` to list results of an auto-completed search.
7
+ class Item < Primer::Component
8
+ status :alpha
9
+
10
+ # @example Default
11
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
12
+ # <% c.results(classes: "custom-class") do %>
13
+ # <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
14
+ # Apple
15
+ # <% end %>
16
+ # <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
17
+ # Orange
18
+ # <% end %>
19
+ # <% end %>
20
+ # <% end %>
21
+ #
22
+ # @param value [String] Value of the item.
23
+ # @param selected [Boolean] Whether the item is selected.
24
+ # @param disabled [Boolean] Whether the item is disabled.
25
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
26
+ def initialize(value:, selected: false, disabled: false, **system_arguments)
27
+ @system_arguments = deny_tag_argument(**system_arguments)
28
+ @system_arguments[:tag] = :li
29
+ @system_arguments[:role] = :option
30
+ @system_arguments[:"data-autocomplete-value"] = value
31
+ @system_arguments[:"aria-selected"] = true if selected
32
+ @system_arguments[:"aria-disabled"] = true if disabled
33
+ @system_arguments[:classes] = class_names(
34
+ "autocomplete-item",
35
+ system_arguments[:classes],
36
+ "disabled" => disabled
37
+ )
38
+ end
39
+
40
+ def call
41
+ render(Primer::BaseComponent.new(**@system_arguments)) { content }
42
+ end
43
+ end
44
+ end
45
+ end
46
+ end
@@ -0,0 +1,158 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
6
+ # input field. This list is populated by server search results.
7
+ # @accessibility
8
+ # Always set an accessible label to help the user interact with the component.
9
+ #
10
+ # * `label_text` is required and visible by default.
11
+ # * If you must use a non-visible label, set `is_label_visible` to `false`.
12
+ # However, please note that a visible label should almost always
13
+ # be used unless there is compelling reason not to. A placeholder is not a label.
14
+ class AutoComplete < Primer::Component
15
+ status :alpha
16
+
17
+ # Customizable results list.
18
+ #
19
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
20
+ renders_one :results, lambda { |**system_arguments|
21
+ deny_tag_argument(**system_arguments)
22
+ system_arguments[:tag] = :ul
23
+ system_arguments[:id] = @list_id
24
+ system_arguments[:classes] = class_names(
25
+ "autocomplete-results",
26
+ system_arguments[:classes]
27
+ )
28
+ Primer::BaseComponent.new(**system_arguments)
29
+ }
30
+
31
+ # Customizable input used to search for results.
32
+ # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
33
+ #
34
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
35
+ renders_one :input, lambda { |**system_arguments|
36
+ sanitized_args = deny_tag_argument(**system_arguments)
37
+ sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
38
+ deny_aria_key(
39
+ :label,
40
+ "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
41
+ **sanitized_args
42
+ )
43
+ deny_single_argument(
44
+ :id,
45
+ "`id` will always be set to @input_id.",
46
+ **sanitized_args
47
+ )
48
+ deny_single_argument(
49
+ :name,
50
+ "Set @input_name on the component initializer instead with `input_name`.",
51
+ **sanitized_args
52
+ )
53
+ sanitized_args[:id] = @input_id
54
+ sanitized_args[:name] = @input_name
55
+ sanitized_args[:tag] = :input
56
+ sanitized_args[:autocomplete] = "off"
57
+ sanitized_args[:type] = :text
58
+ sanitized_args[:classes] = class_names(
59
+ "form-control",
60
+ sanitized_args[:classes]
61
+ )
62
+ Primer::BaseComponent.new(**sanitized_args)
63
+ }
64
+
65
+ # @example Default
66
+ # @description
67
+ # Labels are stacked by default.
68
+ # @code
69
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
70
+ #
71
+ # @example With inline label
72
+ # @description
73
+ # Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
74
+ # @code
75
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
76
+ #
77
+ # @example With non-visible label
78
+ # @description
79
+ # A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
80
+ # @code
81
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
82
+ #
83
+ # @example With icon
84
+ # @description
85
+ # To display a search icon, set `with_icon` to `true`.
86
+ # @code
87
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
88
+ #
89
+ # @example With icon and non-visible label
90
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
91
+ #
92
+ # @example With clear button
93
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
94
+ #
95
+ # @example With custom classes for the input
96
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
97
+ # <% c.input(classes: "custom-class") %>
98
+ # <% end %>
99
+ #
100
+ # @example With custom classes for the results
101
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
102
+ # <% c.results(classes: "custom-class") do %>
103
+ # <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
104
+ # Apple
105
+ # <% end %>
106
+ # <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
107
+ # Orange
108
+ # <% end %>
109
+ # <% end %>
110
+ # <% end %>
111
+ #
112
+ # @param label_text [String] The label of the input.
113
+ # @param src [String] The route to query.
114
+ # @param input_id [String] Id of the input element.
115
+ # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
116
+ # @param list_id [String] Id of the list element.
117
+ # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
118
+ # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
119
+ # @param is_clearable [Boolean] Adds optional clear button.
120
+ # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
121
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
122
+ def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
123
+ @label_text = label_text
124
+ @list_id = list_id
125
+ @input_id = input_id
126
+ @input_name = input_name || input_id
127
+ @is_label_visible = is_label_visible
128
+ @with_icon = with_icon
129
+ @is_clearable = is_clearable
130
+ @label_classes = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
131
+ @system_arguments = deny_tag_argument(**system_arguments)
132
+ @system_arguments[:tag] = "auto-complete"
133
+ @system_arguments[:src] = src
134
+ @system_arguments[:for] = list_id
135
+ end
136
+
137
+ # add `input` and `results` without needing to explicitly call them in the view
138
+ def before_render
139
+ results(classes: "") unless results
140
+ input(classes: "") unless input
141
+ end
142
+
143
+ private
144
+
145
+ # Private: determines the label classes based on component configration.
146
+ #
147
+ # If the label is not visible, return an empty string.
148
+ #
149
+ # @param args [Hash] The component configuration.
150
+ # @return [String] The label classes.
151
+ def label_classes(**args)
152
+ return "" if args[:is_label_visible] == false
153
+
154
+ args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
155
+ end
156
+ end
157
+ end
158
+ end
@@ -1,24 +1,28 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <label for="<%= @input_id %>" class="<%= @label_classes %>">
3
- <% if @is_label_visible %>
2
+ <div class="<%= @form_group_classes %>">
3
+ <label for="<%= @input_id %>" class="FormControl-label <% if @visually_hide_label %>sr-only<% end %>">
4
4
  <%= @label_text %>
5
+ </label>
6
+ <% if leading_visual || @show_clear_button %>
7
+ <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-input-wrap--leadingVisual<% end %>">
8
+ <span class="FormControl-input-leadingVisualWrap">
9
+ <%= leading_visual %>
10
+ </span>
11
+ <%= input %>
12
+ <% if @show_clear_button %>
13
+ <button id="<%= @input_id %>-clear" class="FormControl-input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
14
+ <% end %>
15
+ </div>
5
16
  <% else %>
6
- <span class="sr-only"><%= @label_text %></span>
17
+ <%= input %>
7
18
  <% end %>
8
- </label>
9
- <span class="autocomplete-body">
10
- <% if @with_icon %>
11
- <div class="form-control autocomplete-embedded-icon-wrap">
12
- <%= render Primer::OcticonComponent.new(:search) %>
13
- <% end %>
14
- <%= input %>
15
- <% if @is_clearable %>
16
- <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
17
- <% end %>
18
- <% if @with_icon %>
19
+ </div>
20
+ <div class="Overlay-backdrop--anchor">
21
+ <div class="Overlay Overlay--height-auto Overlay--width-auto">
22
+ <div class="Overlay-body Overlay-body--paddingNone">
23
+ <%= results %>
19
24
  </div>
20
- <% end %>
21
- <%= results %>
22
- </span>
25
+ </div>
26
+ </div>
23
27
  <div id="<%= @list_id %>-feedback" class="sr-only"></div>
24
28
  <% end %>
@@ -0,0 +1,21 @@
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
+ <span class="ActionList-content">
3
+ <% if leading_visual %>
4
+ <span class="ActionList-item-visual ActionList-item-visual--leading">
5
+ <%= leading_visual %>
6
+ </span>
7
+ <% end %>
8
+ <% if description %>
9
+ <span class="ActionList-item-descriptionWrap <%= description_variant_class %>">
10
+ <span class="ActionList-item-label"><%= content %></span>
11
+ <span class="ActionList-item-description"><%= description %></span>
12
+ </span>
13
+ <% else %>
14
+ <span class="ActionList-item-label"><%= content %></span>
15
+ <% end %>
16
+ <% if trailing_visual %>
17
+ <span class="ActionList-item-visual ActionList-item-visual--trailing">
18
+ <%= trailing_visual %>
19
+ </span>
20
+ <% end %>
21
+ <% end %>
@@ -1,5 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ # TODO: use generic ActionList item for Autocomplete
3
4
  module Primer
4
5
  module Beta
5
6
  class AutoComplete
@@ -7,6 +8,32 @@ module Primer
7
8
  class Item < Primer::Component
8
9
  status :beta
9
10
 
11
+ ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
12
+
13
+ # The leading visual rendered before the link.
14
+ #
15
+ # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::OcticonComponent) %>
16
+ renders_one :leading_visual, types: {
17
+ icon: Primer::OcticonComponent,
18
+ avatar: lambda { |**kwargs|
19
+ Primer::Beta::Avatar.new(**{ **kwargs, size: 16 })
20
+ }
21
+ }
22
+
23
+ # The trailing visual rendered after the link.
24
+ #
25
+ # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::CounterComponent) %>
26
+ renders_one :trailing_visual, types: {
27
+ icon: Primer::OcticonComponent,
28
+ label: Primer::LabelComponent,
29
+ counter: Primer::CounterComponent
30
+ }
31
+
32
+ # Optional description
33
+ #
34
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
35
+ renders_one :description
36
+
10
37
  # @example Default
11
38
  # <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
12
39
  # Selected
@@ -18,8 +45,12 @@ module Primer
18
45
  # @param value [String] Value of the item.
19
46
  # @param selected [Boolean] Whether the item is selected.
20
47
  # @param disabled [Boolean] Whether the item is disabled.
48
+ # @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
49
+ # @param description [String] Display description text below label
21
50
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
22
- def initialize(value:, selected: false, disabled: false, **system_arguments)
51
+ def initialize(value:, selected: false, disabled: false, description_variant: :block, **system_arguments)
52
+ @description_variant = ALLOWED_DESCRIPTION_VARIANTS.include?(description_variant) ? description_variant : :block
53
+
23
54
  @system_arguments = deny_tag_argument(**system_arguments)
24
55
  @system_arguments[:tag] = :li
25
56
  @system_arguments[:role] = :option
@@ -29,14 +60,19 @@ module Primer
29
60
  @system_arguments[:"aria-disabled"] = true if disabled
30
61
 
31
62
  @system_arguments[:classes] = class_names(
32
- "autocomplete-item",
33
- system_arguments[:classes],
34
- "disabled" => disabled
63
+ "ActionList-item",
64
+ system_arguments[:classes]
35
65
  )
36
66
  end
37
67
 
38
- def call
39
- render(Primer::BaseComponent.new(**@system_arguments)) { content }
68
+ # Description variant class.
69
+ def description_variant_class
70
+ case @description_variant
71
+ when :block
72
+ "ActionList-item-blockDescription"
73
+ when :inline
74
+ "ActionList-item-descriptionWrap--inline"
75
+ end
40
76
  end
41
77
  end
42
78
  end
@@ -8,12 +8,20 @@ module Primer
8
8
  # Always set an accessible label to help the user interact with the component.
9
9
  #
10
10
  # * `label_text` is required and visible by default.
11
- # * If you must use a non-visible label, set `is_label_visible` to `false`.
11
+ # * If you must hide the label, set `visually_hide_label` to `true`.
12
12
  # However, please note that a visible label should almost always
13
13
  # be used unless there is compelling reason not to. A placeholder is not a label.
14
14
  class AutoComplete < Primer::Component
15
15
  status :beta
16
- #
16
+
17
+ DEFAULT_SIZE = :medium
18
+ SIZE_MAPPINGS = {
19
+ :small => "FormControl-small",
20
+ DEFAULT_SIZE => "FormControl-medium",
21
+ :large => "FormControl-large"
22
+ }.freeze
23
+ SIZE_OPTIONS = SIZE_MAPPINGS.keys
24
+
17
25
  # Customizable results list.
18
26
  #
19
27
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -22,13 +30,25 @@ module Primer
22
30
  system_arguments[:tag] = :ul
23
31
  system_arguments[:id] = @list_id
24
32
  system_arguments[:classes] = class_names(
25
- "autocomplete-results",
33
+ "ActionList",
26
34
  system_arguments[:classes]
27
35
  )
28
36
 
29
37
  Primer::BaseComponent.new(**system_arguments)
30
38
  }
31
39
 
40
+ # Leading visual.
41
+ #
42
+ # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
43
+ #
44
+ # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
45
+ renders_one :leading_visual, types: {
46
+ icon: lambda { |**system_arguments|
47
+ system_arguments[:classes] = class_names("FormControl-input-leadingVisual")
48
+ Primer::OcticonComponent.new(**system_arguments)
49
+ }
50
+ }
51
+
32
52
  # Customizable input used to search for results.
33
53
  # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
34
54
  #
@@ -38,7 +58,7 @@ module Primer
38
58
  sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
39
59
  deny_aria_key(
40
60
  :label,
41
- "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
61
+ "instead of `aria-label`, include `label_text` and set `visually_hide_label` to `true` on the component initializer.",
42
62
  **sanitized_args
43
63
  )
44
64
  deny_single_argument(
@@ -55,45 +75,66 @@ module Primer
55
75
  sanitized_args[:name] = @input_name
56
76
  sanitized_args[:tag] = :input
57
77
  sanitized_args[:autocomplete] = "off"
58
-
78
+ sanitized_args[:disabled] = true if @disabled
79
+ sanitized_args[:invalid] = true if @invalid
59
80
  sanitized_args[:type] = :text
60
81
  sanitized_args[:classes] = class_names(
61
- "form-control",
62
- sanitized_args[:classes]
82
+ "FormControl-input",
83
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
84
+ sanitized_args[:classes],
85
+ "FormControl-inset": @inset,
86
+ "FormControl-monospace": @monospace
63
87
  )
88
+ sanitized_args[:placeholder] = @placeholder
64
89
 
65
90
  Primer::BaseComponent.new(**sanitized_args)
66
91
  }
67
92
 
68
- # @example Default
93
+ # @example Leading visual
69
94
  # @description
70
- # Labels are stacked by default.
95
+ # Display any Octicon as a leading visual within the field
71
96
  # @code
72
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
97
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
98
+ # <% c.leading_visual_icon(icon: :search) %>
99
+ # <% end %>
73
100
  #
74
- # @example With inline label
101
+ # @example Trailing action
75
102
  # @description
76
- # Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
103
+ # Show a clear button
77
104
  # @code
78
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
105
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) %>
79
106
  #
80
- # @example With non-visible label
107
+ # @example Visually hidden label
81
108
  # @description
82
- # A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
109
+ # A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
83
110
  # @code
84
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
111
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/auto_complete", visually_hide_label: true)) do |c| %>
112
+ # <% c.leading_visual_icon(icon: :search) %>
113
+ # <% end %>
85
114
  #
86
- # @example With icon
115
+ # @example Full width field
87
116
  # @description
88
- # To display a search icon, set `with_icon` to `true`.
117
+ # To allow field to span width of its container, set `full_width` to `true`.
89
118
  # @code
90
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
119
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", full_width: true)) do |c| %>
120
+ # <% c.leading_visual_icon(icon: :search) %>
121
+ # <% end %>
91
122
  #
92
- # @example With icon and non-visible label
93
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
123
+ # @example Inset variant
124
+ # @description
125
+ # Use the `inset` variant to change the input background color to be subtle.
126
+ # @code
127
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", inset: true)) do |c| %>
128
+ # <% c.leading_visual_icon(icon: :search) %>
129
+ # <% end %>
94
130
  #
95
- # @example With clear button
96
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
131
+ # @example Monospace variant
132
+ # @description
133
+ # Use the `monospace` variant to change the input font family.
134
+ # @code
135
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", monospace: true)) do |c| %>
136
+ # <% c.leading_visual_icon(icon: :search) %>
137
+ # <% end %>
97
138
  #
98
139
  # @example With custom classes for the input
99
140
  # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
@@ -102,14 +143,7 @@ module Primer
102
143
  #
103
144
  # @example With custom classes for the results
104
145
  # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
105
- # <% c.results(classes: "custom-class") do %>
106
- # <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
107
- # Apple
108
- # <% end %>
109
- # <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |c| %>
110
- # Orange
111
- # <% end %>
112
- # <% end %>
146
+ # <% c.results(classes: "custom-class") %>
113
147
  # <% end %>
114
148
  #
115
149
  # @param label_text [String] The label of the input.
@@ -117,25 +151,43 @@ module Primer
117
151
  # @param input_id [String] Id of the input element.
118
152
  # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
119
153
  # @param list_id [String] Id of the list element.
120
- # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
121
- # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
122
- # @param is_clearable [Boolean] Adds optional clear button.
123
- # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
154
+ # @param visually_hide_label [Boolean] Controls if the label is visible. If `true`, screen reader only text will be added.
155
+ # @param show_clear_button [Boolean] Adds optional clear button.
124
156
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
125
- def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
157
+ # @param size [Hash] Input size can be small, medium (default), or large
158
+ # @param full_width [Boolean] Input can be full-width or fit to content
159
+ # @param disabled [Boolean] Disabled input
160
+ # @param invalid [Boolean] Invalid input
161
+ # @param placeholder [String] The placeholder text displayed within the input
162
+ # @param inset [Boolean] subtle input background color
163
+ # @param monospace [Boolean] monospace input font family
164
+ def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
126
165
  @label_text = label_text
127
166
  @list_id = list_id
128
167
  @input_id = input_id
129
168
  @input_name = input_name || input_id
130
- @is_label_visible = is_label_visible
131
- @with_icon = with_icon
132
- @is_clearable = is_clearable
133
-
134
- @label_classes = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
169
+ @placeholder = placeholder
170
+ @visually_hide_label = visually_hide_label
171
+ @show_clear_button = show_clear_button
135
172
  @system_arguments = deny_tag_argument(**system_arguments)
136
173
  @system_arguments[:tag] = "auto-complete"
137
174
  @system_arguments[:src] = src
138
175
  @system_arguments[:for] = list_id
176
+ @disabled = disabled
177
+ @invalid = invalid
178
+ @size = size
179
+ @inset = inset
180
+ @monospace = monospace
181
+ @full_width = full_width
182
+ @field_wrap_classes = class_names(
183
+ "FormControl-input-wrap",
184
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
185
+ "FormControl-input-wrap--trailingAction": show_clear_button
186
+ )
187
+ @form_group_classes = class_names(
188
+ "FormControl",
189
+ "FormControl--fullWidth": full_width
190
+ )
139
191
  end
140
192
 
141
193
  # add `input` and `results` without needing to explicitly call them in the view
@@ -143,20 +195,6 @@ module Primer
143
195
  results(classes: "") unless results
144
196
  input(classes: "") unless input
145
197
  end
146
-
147
- private
148
-
149
- # Private: determines the label classes based on component configration.
150
- #
151
- # If the label is not visible, return an empty string.
152
- #
153
- # @param args [Hash] The component configuration.
154
- # @return [String] The label classes.
155
- def label_classes(**args)
156
- return "" if args[:is_label_visible] == false
157
-
158
- args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
159
- end
160
198
  end
161
199
  end
162
200
  end
@@ -0,0 +1,36 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
5
+ # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
6
+ # the content is rendered.
7
+ #
8
+ # @example True conditional
9
+ # <%# condition is true, so content will be wrapped in a <span> tag
10
+ # <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
11
+ # <%# also rendered %>
12
+ # <p class="bazboo">Some text</p>
13
+ # <% end %>
14
+ #
15
+ # @example False conditional
16
+ # <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
17
+ # <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
18
+ # <%# this content will be rendered %>
19
+ # <p class="bazboo">Some text</p>
20
+ # <% end %>
21
+ #
22
+ # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
23
+ # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
24
+ class ConditionalWrapper < Primer::Component
25
+ def initialize(condition:, **base_component_arguments)
26
+ @condition = condition
27
+ @base_component_arguments = base_component_arguments
28
+ end
29
+
30
+ def call
31
+ return content unless @condition
32
+
33
+ BaseComponent.new(**@base_component_arguments).render_in(self) { content }
34
+ end
35
+ end
36
+ end
@@ -7,6 +7,8 @@ module ERBLint
7
7
  module DeprecatedComponentsHelpers
8
8
  # If there is no alternative to suggest, set the value to nil
9
9
  COMPONENT_TO_USE_INSTEAD = {
10
+ "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
11
+ "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
10
12
  "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
11
13
  "Primer::DropdownMenuComponent" => nil,
12
14
  "Primer::Tooltip" => "Primer::Alpha::Tooltip",
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 83
8
+ PATCH = 84
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
@@ -33,6 +33,16 @@ module RuboCop
33
33
  # }
34
34
  #
35
35
  DEPRECATED = {
36
+ is_label_inline: nil,
37
+ with_icon: nil,
38
+ is_label_visible: {
39
+ false => "visually_hide_label: true",
40
+ true => "visually_hide_label: false"
41
+ },
42
+ is_clearable: {
43
+ false => "show_clear_button: false",
44
+ true => "show_clear_button: true"
45
+ },
36
46
  bg: {
37
47
  white: "bg: :primary",
38
48
  gray_light: "bg: :secondary",
data/lib/tasks/docs.rake CHANGED
@@ -359,7 +359,7 @@ namespace :docs do
359
359
  task :preview do
360
360
  registry = generate_yard_registry
361
361
 
362
- FileUtils.rm_rf("demo/test/components/previews/primer/docs/")
362
+ FileUtils.rm_rf("test/previews/primer/docs/")
363
363
 
364
364
  components = Primer::Component.descendants
365
365
 
@@ -373,7 +373,7 @@ namespace :docs do
373
373
 
374
374
  yard_example_tags = initialize_method.tags(:example)
375
375
 
376
- path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview.rb")
376
+ path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview.rb")
377
377
  path.dirname.mkdir unless path.dirname.exist?
378
378
 
379
379
  File.open(path, "w") do |f|
@@ -386,7 +386,7 @@ namespace :docs do
386
386
  method_name = name.split("|").first.downcase.parameterize.underscore
387
387
  f.puts(" def #{method_name}; end")
388
388
  f.puts unless index == yard_example_tags.size - 1
389
- path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
389
+ path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
390
390
  path.dirname.mkdir unless path.dirname.exist?
391
391
  File.open(path, "w") do |view_file|
392
392
  view_file.puts(code.to_s)
data/static/arguments.yml CHANGED
@@ -210,28 +210,47 @@
210
210
  type: String
211
211
  default: N/A
212
212
  description: Id of the list element.
213
- - name: with_icon
213
+ - name: visually_hide_label
214
214
  type: Boolean
215
215
  default: "`false`"
216
- description: Controls if a search icon is visible, defaults to `false`.
217
- - name: is_label_visible
218
- type: Boolean
219
- default: "`true`"
220
- description: Controls if the label is visible. If `false`, screen reader only
221
- text will be added.
222
- - name: is_clearable
216
+ description: Controls if the label is visible. If `true`, screen reader only text
217
+ will be added.
218
+ - name: show_clear_button
223
219
  type: Boolean
224
220
  default: "`false`"
225
221
  description: Adds optional clear button.
226
- - name: is_label_inline
227
- type: Boolean
228
- default: "`false`"
229
- description: Controls if the label is inline. On smaller screens, label will always
230
- become stacked.
231
222
  - name: system_arguments
232
223
  type: Hash
233
224
  default: N/A
234
225
  description: "[System arguments](/system-arguments)"
226
+ - name: size
227
+ type: Hash
228
+ default: "`:medium`"
229
+ description: Input size can be small, medium (default), or large
230
+ - name: full_width
231
+ type: Boolean
232
+ default: "`false`"
233
+ description: Input can be full-width or fit to content
234
+ - name: disabled
235
+ type: Boolean
236
+ default: "`false`"
237
+ description: Disabled input
238
+ - name: invalid
239
+ type: Boolean
240
+ default: "`false`"
241
+ description: Invalid input
242
+ - name: placeholder
243
+ type: String
244
+ default: "`nil`"
245
+ description: The placeholder text displayed within the input
246
+ - name: inset
247
+ type: Boolean
248
+ default: "`false`"
249
+ description: subtle input background color
250
+ - name: monospace
251
+ type: Boolean
252
+ default: "`false`"
253
+ description: monospace input font family
235
254
  - component: AutoCompleteItem
236
255
  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
237
256
  parameters:
@@ -247,6 +266,14 @@
247
266
  type: Boolean
248
267
  default: "`false`"
249
268
  description: Whether the item is disabled.
269
+ - name: description_variant
270
+ type: Hash
271
+ default: "`:block`"
272
+ description: Changes the description style. Allowed values are :inline, :block
273
+ - name: description
274
+ type: String
275
+ default: N/A
276
+ description: Display description text below label
250
277
  - name: system_arguments
251
278
  type: Hash
252
279
  default: N/A
@@ -1,4 +1,6 @@
1
1
  {
2
+ "Primer::Alpha::AutoComplete": "",
3
+ "Primer::Alpha::AutoComplete::Item": "",
2
4
  "Primer::Alpha::BorderBox::Header": "",
3
5
  "Primer::Alpha::ButtonMarketing": "",
4
6
  "Primer::Alpha::Layout": "",
@@ -29,6 +31,7 @@
29
31
  "Primer::ButtonGroup": "",
30
32
  "Primer::ClipboardCopy": "",
31
33
  "Primer::CloseButton": "",
34
+ "Primer::ConditionalWrapper": "",
32
35
  "Primer::Content": "",
33
36
  "Primer::CounterComponent": "",
34
37
  "Primer::DetailsComponent": "",
data/static/classes.yml CHANGED
@@ -1,4 +1,8 @@
1
1
  ---
2
+ - ".ActionList"
3
+ - ".ActionList-content"
4
+ - ".ActionList-item"
5
+ - ".ActionList-item-label"
2
6
  - ".AvatarStack"
3
7
  - ".AvatarStack--right"
4
8
  - ".AvatarStack--three-plus"
@@ -19,6 +23,19 @@
19
23
  - ".Counter"
20
24
  - ".Counter--primary"
21
25
  - ".Counter--secondary"
26
+ - ".FormControl"
27
+ - ".FormControl--fullWidth"
28
+ - ".FormControl-input"
29
+ - ".FormControl-input-leadingVisual"
30
+ - ".FormControl-input-leadingVisualWrap"
31
+ - ".FormControl-input-trailingAction"
32
+ - ".FormControl-input-wrap"
33
+ - ".FormControl-input-wrap--leadingVisual"
34
+ - ".FormControl-input-wrap--trailingAction"
35
+ - ".FormControl-inset"
36
+ - ".FormControl-label"
37
+ - ".FormControl-medium"
38
+ - ".FormControl-monospace"
22
39
  - ".Label"
23
40
  - ".Label--accent"
24
41
  - ".Label--attention"
@@ -49,6 +66,12 @@
49
66
  - ".Link--muted"
50
67
  - ".Link--primary"
51
68
  - ".Link--secondary"
69
+ - ".Overlay"
70
+ - ".Overlay--height-auto"
71
+ - ".Overlay--width-auto"
72
+ - ".Overlay-backdrop--anchor"
73
+ - ".Overlay-body"
74
+ - ".Overlay-body--paddingNone"
52
75
  - ".Popover"
53
76
  - ".Popover-message"
54
77
  - ".Popover-message--large"
@@ -82,12 +105,6 @@
82
105
  - ".UnderlineNav-item"
83
106
  - ".UnderlineNav-octicon"
84
107
  - ".anim-rotate"
85
- - ".autocomplete-body"
86
- - ".autocomplete-embedded-icon-wrap"
87
- - ".autocomplete-item"
88
- - ".autocomplete-label-inline"
89
- - ".autocomplete-label-stacked"
90
- - ".autocomplete-results"
91
108
  - ".avatar"
92
109
  - ".avatar-more"
93
110
  - ".avatar-small"
@@ -167,7 +184,6 @@
167
184
  - ".flex-justify-center"
168
185
  - ".flex-shrink-0"
169
186
  - ".float-right"
170
- - ".form-control"
171
187
  - ".gutter-condensed"
172
188
  - ".gutter-lg"
173
189
  - ".hidden-text-expander"
@@ -1,4 +1,9 @@
1
1
  {
2
+ "Primer::Alpha::AutoComplete": {
3
+ "Item": "Primer::Alpha::AutoComplete::Item"
4
+ },
5
+ "Primer::Alpha::AutoComplete::Item": {
6
+ },
2
7
  "Primer::Alpha::BorderBox::Header": {
3
8
  "TITLE_TAG_FALLBACK": "h2",
4
9
  "TITLE_TAG_OPTIONS": [
@@ -199,9 +204,24 @@
199
204
  ]
200
205
  },
201
206
  "Primer::Beta::AutoComplete": {
202
- "Item": "Primer::Beta::AutoComplete::Item"
207
+ "DEFAULT_SIZE": "medium",
208
+ "Item": "Primer::Beta::AutoComplete::Item",
209
+ "SIZE_MAPPINGS": {
210
+ "small": "FormControl-small",
211
+ "medium": "FormControl-medium",
212
+ "large": "FormControl-large"
213
+ },
214
+ "SIZE_OPTIONS": [
215
+ "small",
216
+ "medium",
217
+ "large"
218
+ ]
203
219
  },
204
220
  "Primer::Beta::AutoComplete::Item": {
221
+ "ALLOWED_DESCRIPTION_VARIANTS": [
222
+ "inline",
223
+ "block"
224
+ ]
205
225
  },
206
226
  "Primer::Beta::Avatar": {
207
227
  "DEFAULT_SHAPE": "circle",
@@ -336,6 +356,8 @@
336
356
  "submit"
337
357
  ]
338
358
  },
359
+ "Primer::ConditionalWrapper": {
360
+ },
339
361
  "Primer::Content": {
340
362
  },
341
363
  "Primer::CounterComponent": {
data/static/statuses.json CHANGED
@@ -1,4 +1,6 @@
1
1
  {
2
+ "Primer::Alpha::AutoComplete": "alpha",
3
+ "Primer::Alpha::AutoComplete::Item": "alpha",
2
4
  "Primer::Alpha::BorderBox::Header": "alpha",
3
5
  "Primer::Alpha::ButtonMarketing": "alpha",
4
6
  "Primer::Alpha::Layout": "alpha",
@@ -29,6 +31,7 @@
29
31
  "Primer::ButtonGroup": "beta",
30
32
  "Primer::ClipboardCopy": "beta",
31
33
  "Primer::CloseButton": "beta",
34
+ "Primer::ConditionalWrapper": "alpha",
32
35
  "Primer::Content": "stable",
33
36
  "Primer::CounterComponent": "beta",
34
37
  "Primer::DetailsComponent": "beta",
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.83
4
+ version: 0.0.84
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-07-27 00:00:00.000000000 Z
11
+ date: 2022-07-28 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -406,6 +406,9 @@ files:
406
406
  - README.md
407
407
  - app/assets/javascripts/primer_view_components.js
408
408
  - app/assets/javascripts/primer_view_components.js.map
409
+ - app/components/primer/alpha/auto_complete.rb
410
+ - app/components/primer/alpha/auto_complete/auto_complete.html.erb
411
+ - app/components/primer/alpha/auto_complete/item.rb
409
412
  - app/components/primer/alpha/border_box/header.html.erb
410
413
  - app/components/primer/alpha/border_box/header.rb
411
414
  - app/components/primer/alpha/button_marketing.rb
@@ -430,6 +433,7 @@ files:
430
433
  - app/components/primer/beta/auto_complete/auto_complete.html.erb
431
434
  - app/components/primer/beta/auto_complete/auto_complete.js
432
435
  - app/components/primer/beta/auto_complete/auto_complete.ts
436
+ - app/components/primer/beta/auto_complete/item.html.erb
433
437
  - app/components/primer/beta/auto_complete/item.rb
434
438
  - app/components/primer/beta/avatar.rb
435
439
  - app/components/primer/beta/avatar_stack.html.erb
@@ -459,6 +463,7 @@ files:
459
463
  - app/components/primer/clipboard_copy_component.ts
460
464
  - app/components/primer/close_button.rb
461
465
  - app/components/primer/component.rb
466
+ - app/components/primer/conditional_wrapper.rb
462
467
  - app/components/primer/content.rb
463
468
  - app/components/primer/counter_component.rb
464
469
  - app/components/primer/details_component.html.erb