primer_view_components 0.0.77 → 0.0.80
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +26 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +17 -19
- data/app/components/primer/beta/auto_complete/item.rb +4 -8
- data/app/components/primer/beta/auto_complete.rb +47 -109
- data/app/components/primer/button_component.rb +3 -5
- data/app/components/primer/link_component.rb +3 -5
- data/lib/primer/view_components/linters/disallow_action_list.rb +73 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/deprecated_arguments.rb +0 -16
- data/static/arguments.yml +13 -24
- data/static/classes.yml +7 -22
- data/static/constants.json +1 -12
- metadata +4 -3
@@ -1,26 +1,24 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
-
<
|
3
|
-
|
2
|
+
<label for="<%= @input_id %>" class="<%= @label_classes %>">
|
3
|
+
<% if @is_label_visible %>
|
4
4
|
<%= @label_text %>
|
5
|
-
</label>
|
6
|
-
<% if leading_visual || @show_clear_button %>
|
7
|
-
<div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-fieldWrap--input-leadingVisual<% end %>">
|
8
|
-
<%= leading_visual %>
|
9
|
-
<%= input %>
|
10
|
-
<% if @show_clear_button %>
|
11
|
-
<button id="<%= @input_id %>-clear" class="FormControl--input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
|
12
|
-
<% end %>
|
13
|
-
</div>
|
14
5
|
<% else %>
|
15
|
-
|
6
|
+
<span class="sr-only"><%= @label_text %></span>
|
16
7
|
<% end %>
|
17
|
-
</
|
18
|
-
<
|
19
|
-
|
20
|
-
<div class="
|
21
|
-
<%=
|
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 %>
|
22
19
|
</div>
|
23
|
-
|
24
|
-
|
20
|
+
<% end %>
|
21
|
+
<%= results %>
|
22
|
+
</span>
|
25
23
|
<div id="<%= @list_id %>-feedback" class="sr-only"></div>
|
26
24
|
<% end %>
|
@@ -1,6 +1,5 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
# TODO: use generic ActionList item for Autocomplete
|
4
3
|
module Primer
|
5
4
|
module Beta
|
6
5
|
class AutoComplete
|
@@ -30,17 +29,14 @@ module Primer
|
|
30
29
|
@system_arguments[:"aria-disabled"] = true if disabled
|
31
30
|
|
32
31
|
@system_arguments[:classes] = class_names(
|
33
|
-
"
|
34
|
-
system_arguments[:classes]
|
32
|
+
"autocomplete-item",
|
33
|
+
system_arguments[:classes],
|
34
|
+
"disabled" => disabled
|
35
35
|
)
|
36
36
|
end
|
37
37
|
|
38
38
|
def call
|
39
|
-
render(Primer::BaseComponent.new(**@system_arguments))
|
40
|
-
render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-content")) do
|
41
|
-
render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-item-label")) { content }
|
42
|
-
end
|
43
|
-
end
|
39
|
+
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
44
40
|
end
|
45
41
|
end
|
46
42
|
end
|
@@ -8,20 +8,11 @@ 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
|
11
|
+
# * If you must use a non-visible label, set `is_label_visible` to `false`.
|
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
|
-
|
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
|
-
|
25
16
|
#
|
26
17
|
# Customizable results list.
|
27
18
|
#
|
@@ -31,26 +22,13 @@ module Primer
|
|
31
22
|
system_arguments[:tag] = :ul
|
32
23
|
system_arguments[:id] = @list_id
|
33
24
|
system_arguments[:classes] = class_names(
|
34
|
-
"
|
25
|
+
"autocomplete-results",
|
35
26
|
system_arguments[:classes]
|
36
27
|
)
|
37
28
|
|
38
29
|
Primer::BaseComponent.new(**system_arguments)
|
39
30
|
}
|
40
31
|
|
41
|
-
#
|
42
|
-
# Leading visual.
|
43
|
-
#
|
44
|
-
# - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
|
45
|
-
#
|
46
|
-
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
|
47
|
-
renders_one :leading_visual, types: {
|
48
|
-
icon: lambda { |**system_arguments|
|
49
|
-
system_arguments[:classes] = class_names("FormControl--input-leadingVisual")
|
50
|
-
Primer::OcticonComponent.new(**system_arguments)
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
32
|
# Customizable input used to search for results.
|
55
33
|
# It is preferred to use this slot sparingly - it will be created by default if not explicity added.
|
56
34
|
#
|
@@ -60,7 +38,7 @@ module Primer
|
|
60
38
|
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)
|
61
39
|
deny_aria_key(
|
62
40
|
:label,
|
63
|
-
"instead of `aria-label`, include `label_text` and set `
|
41
|
+
"instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
|
64
42
|
**sanitized_args
|
65
43
|
)
|
66
44
|
deny_single_argument(
|
@@ -77,82 +55,45 @@ module Primer
|
|
77
55
|
sanitized_args[:name] = @input_name
|
78
56
|
sanitized_args[:tag] = :input
|
79
57
|
sanitized_args[:autocomplete] = "off"
|
80
|
-
|
81
|
-
sanitized_args[:invalid] = true if @invalid
|
58
|
+
|
82
59
|
sanitized_args[:type] = :text
|
83
60
|
sanitized_args[:classes] = class_names(
|
84
|
-
"
|
85
|
-
"FormControl--input",
|
86
|
-
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
|
61
|
+
"form-control",
|
87
62
|
sanitized_args[:classes]
|
88
63
|
)
|
89
|
-
sanitized_args[:placeholder] = @placeholder
|
90
64
|
|
91
65
|
Primer::BaseComponent.new(**sanitized_args)
|
92
66
|
}
|
93
67
|
|
94
|
-
# @example
|
68
|
+
# @example Default
|
95
69
|
# @description
|
96
|
-
#
|
70
|
+
# Labels are stacked by default.
|
97
71
|
# @code
|
98
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "
|
99
|
-
# <% c.leading_visual_icon(icon: :search) %>
|
100
|
-
# <% c.results do %>
|
101
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
|
102
|
-
# Apple
|
103
|
-
# <% end %>
|
104
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
|
105
|
-
# Orange
|
106
|
-
# <% end %>
|
107
|
-
# <% end %>
|
108
|
-
# <% end %>
|
72
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
|
109
73
|
#
|
110
|
-
# @example
|
74
|
+
# @example With inline label
|
111
75
|
# @description
|
112
|
-
#
|
76
|
+
# Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
|
113
77
|
# @code
|
114
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "
|
115
|
-
# <% c.results do %>
|
116
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
|
117
|
-
# Apple
|
118
|
-
# <% end %>
|
119
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
|
120
|
-
# Orange
|
121
|
-
# <% end %>
|
122
|
-
# <% end %>
|
123
|
-
# <% end %>
|
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")) %>
|
124
79
|
#
|
125
|
-
# @example
|
80
|
+
# @example With non-visible label
|
126
81
|
# @description
|
127
|
-
# A non-visible label may be rendered with `
|
82
|
+
# A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
|
128
83
|
# @code
|
129
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "
|
130
|
-
# <% c.leading_visual_icon(icon: :search) %>
|
131
|
-
# <% c.results do %>
|
132
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
|
133
|
-
# Apple
|
134
|
-
# <% end %>
|
135
|
-
# <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
|
136
|
-
# Orange
|
137
|
-
# <% end %>
|
138
|
-
# <% end %>
|
139
|
-
# <% end %>
|
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)) %>
|
140
85
|
#
|
141
|
-
# @example
|
86
|
+
# @example With icon
|
142
87
|
# @description
|
143
|
-
# To
|
88
|
+
# To display a search icon, set `with_icon` to `true`.
|
144
89
|
# @code
|
145
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "
|
146
|
-
#
|
147
|
-
#
|
148
|
-
#
|
149
|
-
#
|
150
|
-
#
|
151
|
-
#
|
152
|
-
# Orange
|
153
|
-
# <% end %>
|
154
|
-
# <% end %>
|
155
|
-
# <% end %>
|
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)) %>
|
91
|
+
#
|
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)) %>
|
94
|
+
#
|
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)) %>
|
156
97
|
#
|
157
98
|
# @example With custom classes for the input
|
158
99
|
# <%= 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| %>
|
@@ -176,42 +117,25 @@ module Primer
|
|
176
117
|
# @param input_id [String] Id of the input element.
|
177
118
|
# @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
|
178
119
|
# @param list_id [String] Id of the list element.
|
179
|
-
# @param
|
180
|
-
# @param
|
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.
|
181
124
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
182
|
-
|
183
|
-
# @param full_width [Boolean] Input can be full-width or fit to content
|
184
|
-
# @param disabled [Boolean] Disabled input
|
185
|
-
# @param invalid [Boolean] Invalid input
|
186
|
-
# @param placeholder [String] The placeholder text displayed within the input
|
187
|
-
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, **system_arguments)
|
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)
|
188
126
|
@label_text = label_text
|
189
127
|
@list_id = list_id
|
190
128
|
@input_id = input_id
|
191
129
|
@input_name = input_name || input_id
|
192
|
-
@
|
193
|
-
@
|
194
|
-
@
|
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)
|
195
135
|
@system_arguments = deny_tag_argument(**system_arguments)
|
196
136
|
@system_arguments[:tag] = "auto-complete"
|
197
137
|
@system_arguments[:src] = src
|
198
138
|
@system_arguments[:for] = list_id
|
199
|
-
@disabled = disabled
|
200
|
-
@invalid = invalid
|
201
|
-
@size = size
|
202
|
-
@full_width = full_width
|
203
|
-
@field_wrap_classes = class_names(
|
204
|
-
"FormControl-fieldWrap",
|
205
|
-
"FormControl-fieldWrap--input",
|
206
|
-
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
|
207
|
-
"FormControl-fieldWrap--disabled": disabled,
|
208
|
-
"FormControl-fieldWrap--invalid": invalid,
|
209
|
-
"FormControl-fieldWrap--input-trailingAction": show_clear_button
|
210
|
-
)
|
211
|
-
@form_group_classes = class_names(
|
212
|
-
"FormGroup",
|
213
|
-
"FormGroup--fullWidth": full_width
|
214
|
-
)
|
215
139
|
end
|
216
140
|
|
217
141
|
# add `input` and `results` without needing to explicitly call them in the view
|
@@ -219,6 +143,20 @@ module Primer
|
|
219
143
|
results(classes: "") unless results
|
220
144
|
input(classes: "") unless input
|
221
145
|
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
|
222
160
|
end
|
223
161
|
end
|
224
162
|
end
|
@@ -65,12 +65,10 @@ module Primer
|
|
65
65
|
renders_one :tooltip, lambda { |**system_arguments|
|
66
66
|
raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
|
67
67
|
|
68
|
-
|
69
|
-
|
70
|
-
@system_arguments[:for_id] = @id
|
71
|
-
@system_arguments[:type] ||= :description
|
68
|
+
system_arguments[:for_id] = @id
|
69
|
+
system_arguments[:type] ||= :description
|
72
70
|
|
73
|
-
Primer::Alpha::Tooltip.new(
|
71
|
+
Primer::Alpha::Tooltip.new(**system_arguments)
|
74
72
|
}
|
75
73
|
|
76
74
|
# @example Schemes
|
@@ -24,12 +24,10 @@ module Primer
|
|
24
24
|
renders_one :tooltip, lambda { |**system_arguments|
|
25
25
|
raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank? && !Rails.env.production?
|
26
26
|
|
27
|
-
|
28
|
-
|
29
|
-
@system_arguments[:for_id] = @id
|
30
|
-
@system_arguments[:type] ||= :description
|
27
|
+
system_arguments[:for_id] = @id
|
28
|
+
system_arguments[:type] ||= :description
|
31
29
|
|
32
|
-
Primer::Alpha::Tooltip.new(
|
30
|
+
Primer::Alpha::Tooltip.new(**system_arguments)
|
33
31
|
}
|
34
32
|
|
35
33
|
# @example Default
|
@@ -0,0 +1,73 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "pathname"
|
4
|
+
require_relative "helpers/rubocop_helpers"
|
5
|
+
|
6
|
+
module ERBLint
|
7
|
+
module Linters
|
8
|
+
# Finds usages of ActionList CSS classes.
|
9
|
+
class DisallowActionList < Linter
|
10
|
+
include ERBLint::LinterRegistry
|
11
|
+
include TagTreeHelpers
|
12
|
+
|
13
|
+
class ConfigSchema < LinterConfig
|
14
|
+
property :ignore_files, accepts: array_of?(String), default: -> { [] }
|
15
|
+
end
|
16
|
+
self.config_schema = ConfigSchema
|
17
|
+
|
18
|
+
def run(processed_source)
|
19
|
+
return if ignored?(processed_source.filename)
|
20
|
+
|
21
|
+
class_regex = /ActionList[\w-]*/
|
22
|
+
tags, * = build_tag_tree(processed_source)
|
23
|
+
|
24
|
+
tags.each do |tag|
|
25
|
+
next if tag.closing?
|
26
|
+
|
27
|
+
classes =
|
28
|
+
if (class_attrib = tag.attributes["class"])
|
29
|
+
loc = class_attrib.value_node.loc
|
30
|
+
loc.source_buffer.source[loc.begin_pos...loc.end_pos]
|
31
|
+
else
|
32
|
+
""
|
33
|
+
end
|
34
|
+
|
35
|
+
indices = [].tap do |results|
|
36
|
+
classes.scan(class_regex) do
|
37
|
+
results << Regexp.last_match.offset(0)
|
38
|
+
end
|
39
|
+
end
|
40
|
+
|
41
|
+
next if indices.empty?
|
42
|
+
|
43
|
+
indices.each do |(start_idx, end_idx)|
|
44
|
+
new_loc = class_attrib.value_node.loc.with(
|
45
|
+
begin_pos: class_attrib.value_node.loc.begin_pos + start_idx,
|
46
|
+
end_pos: class_attrib.value_node.loc.begin_pos + end_idx
|
47
|
+
)
|
48
|
+
|
49
|
+
add_offense(
|
50
|
+
new_loc,
|
51
|
+
"ActionList classes are only designed to be used by Primer View Components and " \
|
52
|
+
"should be considered private. Please reach out in the #primer-rails Slack channel."
|
53
|
+
)
|
54
|
+
end
|
55
|
+
end
|
56
|
+
end
|
57
|
+
|
58
|
+
private
|
59
|
+
|
60
|
+
def ignored?(filename)
|
61
|
+
filename = Pathname(filename)
|
62
|
+
|
63
|
+
begin
|
64
|
+
filename = filename.relative_path_from(Pathname(Dir.getwd))
|
65
|
+
rescue ArgumentError
|
66
|
+
# raised if the filename does not have Dir.getwd as a prefix
|
67
|
+
end
|
68
|
+
|
69
|
+
@config.ignore_files.any? { |pattern| filename.fnmatch?(pattern) }
|
70
|
+
end
|
71
|
+
end
|
72
|
+
end
|
73
|
+
end
|
@@ -33,22 +33,6 @@ module RuboCop
|
|
33
33
|
# }
|
34
34
|
#
|
35
35
|
DEPRECATED = {
|
36
|
-
is_label_inline: {
|
37
|
-
true => nil,
|
38
|
-
false => nil
|
39
|
-
},
|
40
|
-
with_icon: {
|
41
|
-
true => nil,
|
42
|
-
false => nil
|
43
|
-
},
|
44
|
-
is_label_visible: {
|
45
|
-
false => "visually_hide_label: true",
|
46
|
-
true => "visually_hide_label: false"
|
47
|
-
},
|
48
|
-
is_clearable: {
|
49
|
-
false => "show_clear_button: false",
|
50
|
-
true => "show_clear_button: true"
|
51
|
-
},
|
52
36
|
bg: {
|
53
37
|
white: "bg: :primary",
|
54
38
|
gray_light: "bg: :secondary",
|
data/static/arguments.yml
CHANGED
@@ -210,39 +210,28 @@
|
|
210
210
|
type: String
|
211
211
|
default: N/A
|
212
212
|
description: Id of the list element.
|
213
|
-
- name:
|
213
|
+
- name: with_icon
|
214
214
|
type: Boolean
|
215
215
|
default: "`false`"
|
216
|
-
description: Controls if
|
217
|
-
|
218
|
-
|
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
|
219
223
|
type: Boolean
|
220
224
|
default: "`false`"
|
221
225
|
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.
|
222
231
|
- name: system_arguments
|
223
232
|
type: Hash
|
224
233
|
default: N/A
|
225
234
|
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
235
|
- component: AutoCompleteItem
|
247
236
|
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
|
248
237
|
parameters:
|
data/static/classes.yml
CHANGED
@@ -1,8 +1,4 @@
|
|
1
1
|
---
|
2
|
-
- ".ActionList"
|
3
|
-
- ".ActionList-content"
|
4
|
-
- ".ActionList-item"
|
5
|
-
- ".ActionList-item-label"
|
6
2
|
- ".AvatarStack"
|
7
3
|
- ".AvatarStack--right"
|
8
4
|
- ".AvatarStack--three-plus"
|
@@ -23,18 +19,6 @@
|
|
23
19
|
- ".Counter"
|
24
20
|
- ".Counter--primary"
|
25
21
|
- ".Counter--secondary"
|
26
|
-
- ".FormControl"
|
27
|
-
- ".FormControl--input"
|
28
|
-
- ".FormControl--input-leadingVisual"
|
29
|
-
- ".FormControl--input-trailingAction"
|
30
|
-
- ".FormControl--medium"
|
31
|
-
- ".FormControl-fieldWrap"
|
32
|
-
- ".FormControl-fieldWrap--input"
|
33
|
-
- ".FormControl-fieldWrap--input-leadingVisual"
|
34
|
-
- ".FormControl-fieldWrap--input-trailingAction"
|
35
|
-
- ".FormControl-label"
|
36
|
-
- ".FormGroup"
|
37
|
-
- ".FormGroup--fullWidth"
|
38
22
|
- ".Label"
|
39
23
|
- ".Label--accent"
|
40
24
|
- ".Label--attention"
|
@@ -65,12 +49,6 @@
|
|
65
49
|
- ".Link--muted"
|
66
50
|
- ".Link--primary"
|
67
51
|
- ".Link--secondary"
|
68
|
-
- ".Overlay"
|
69
|
-
- ".Overlay--height-auto"
|
70
|
-
- ".Overlay--width-auto"
|
71
|
-
- ".Overlay-backdrop--anchor"
|
72
|
-
- ".Overlay-body"
|
73
|
-
- ".Overlay-body--paddingNone"
|
74
52
|
- ".Popover"
|
75
53
|
- ".Popover-message"
|
76
54
|
- ".Popover-message--large"
|
@@ -104,6 +82,12 @@
|
|
104
82
|
- ".UnderlineNav-item"
|
105
83
|
- ".UnderlineNav-octicon"
|
106
84
|
- ".anim-rotate"
|
85
|
+
- ".autocomplete-body"
|
86
|
+
- ".autocomplete-embedded-icon-wrap"
|
87
|
+
- ".autocomplete-item"
|
88
|
+
- ".autocomplete-label-inline"
|
89
|
+
- ".autocomplete-label-stacked"
|
90
|
+
- ".autocomplete-results"
|
107
91
|
- ".avatar"
|
108
92
|
- ".avatar-more"
|
109
93
|
- ".avatar-small"
|
@@ -183,6 +167,7 @@
|
|
183
167
|
- ".flex-justify-center"
|
184
168
|
- ".flex-shrink-0"
|
185
169
|
- ".float-right"
|
170
|
+
- ".form-control"
|
186
171
|
- ".gutter-condensed"
|
187
172
|
- ".gutter-lg"
|
188
173
|
- ".hidden-text-expander"
|
data/static/constants.json
CHANGED
@@ -199,18 +199,7 @@
|
|
199
199
|
]
|
200
200
|
},
|
201
201
|
"Primer::Beta::AutoComplete": {
|
202
|
-
"
|
203
|
-
"Item": "Primer::Beta::AutoComplete::Item",
|
204
|
-
"SIZE_MAPPINGS": {
|
205
|
-
"small": "FormControl--small",
|
206
|
-
"medium": "FormControl--medium",
|
207
|
-
"large": "FormControl--large"
|
208
|
-
},
|
209
|
-
"SIZE_OPTIONS": [
|
210
|
-
"small",
|
211
|
-
"medium",
|
212
|
-
"large"
|
213
|
-
]
|
202
|
+
"Item": "Primer::Beta::AutoComplete::Item"
|
214
203
|
},
|
215
204
|
"Primer::Beta::AutoComplete::Item": {
|
216
205
|
},
|
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.
|
4
|
+
version: 0.0.80
|
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-06-
|
11
|
+
date: 2022-06-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -536,6 +536,7 @@ files:
|
|
536
536
|
- lib/primer/view_components/linters/button_component_migration_counter.rb
|
537
537
|
- lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
|
538
538
|
- lib/primer/view_components/linters/close_button_component_migration_counter.rb
|
539
|
+
- lib/primer/view_components/linters/disallow_action_list.rb
|
539
540
|
- lib/primer/view_components/linters/flash_migration_counter.rb
|
540
541
|
- lib/primer/view_components/linters/helpers/rubocop_helpers.rb
|
541
542
|
- lib/primer/view_components/linters/label_component_migration_counter.rb
|
@@ -594,7 +595,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
594
595
|
- !ruby/object:Gem::Version
|
595
596
|
version: '0'
|
596
597
|
requirements: []
|
597
|
-
rubygems_version: 3.2.
|
598
|
+
rubygems_version: 3.2.22
|
598
599
|
signing_key:
|
599
600
|
specification_version: 4
|
600
601
|
summary: ViewComponents for the Primer Design System
|