primer_view_components 0.0.45 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +194 -0
- data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_component.d.ts} +0 -0
- data/app/components/primer/{auto_complete_component.js → auto_complete/auto_component.js} +0 -0
- data/app/components/primer/base_component.rb +36 -7
- data/app/components/primer/beta/auto_complete.rb +159 -0
- data/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.html.erb +0 -0
- data/app/components/primer/beta/auto_complete/auto_complete.js +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.ts +0 -0
- data/app/components/primer/beta/auto_complete/item.rb +44 -0
- data/app/components/primer/beta/avatar.rb +77 -0
- data/app/components/primer/{avatar_stack_component.html.erb → beta/avatar_stack.html.erb} +0 -0
- data/app/components/primer/beta/avatar_stack.rb +92 -0
- data/app/components/primer/border_box_component.rb +3 -0
- data/app/components/primer/component.rb +9 -1
- data/app/components/primer/details_component.rb +12 -8
- data/app/components/primer/image_crop.html.erb +4 -4
- data/app/components/primer/image_crop.rb +1 -1
- data/app/components/primer/markdown.rb +9 -9
- data/app/components/primer/menu_component.rb +7 -3
- data/app/components/primer/navigation/tab_component.rb +34 -6
- data/app/components/primer/popover_component.rb +6 -3
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/tab_nav_component.rb +9 -6
- data/app/components/primer/timeline_item_component.rb +2 -2
- data/app/components/primer/tooltip.rb +1 -1
- data/app/components/primer/truncate.rb +6 -1
- data/app/components/primer/underline_nav_component.rb +13 -6
- data/{app/lib → lib}/primer/classify.rb +12 -39
- data/{app/lib → lib}/primer/classify/cache.rb +6 -20
- data/{app/lib → lib}/primer/classify/flex.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_background_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_border_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_colors.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_text_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/grid.rb +0 -0
- data/{app/lib → lib}/primer/classify/utilities.rb +54 -22
- data/{app/lib → lib}/primer/classify/utilities.yml +124 -0
- data/lib/primer/view_components.rb +35 -6
- data/lib/primer/view_components/constants.rb +55 -0
- data/lib/primer/view_components/linters/argument_mappers/base.rb +39 -0
- data/lib/primer/view_components/linters/argument_mappers/button.rb +35 -44
- data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +25 -0
- data/lib/primer/view_components/linters/argument_mappers/label.rb +56 -0
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +1 -2
- data/lib/primer/view_components/linters/autocorrectable.rb +30 -0
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -23
- data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +21 -0
- data/lib/primer/view_components/linters/helpers.rb +56 -38
- data/lib/primer/view_components/linters/label_component_migration_counter.rb +25 -0
- data/lib/primer/view_components/statuses.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/config/default.yml +12 -0
- data/lib/rubocop/cop/primer.rb +4 -0
- data/lib/rubocop/cop/primer/no_tag_memoize.rb +42 -0
- data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +75 -0
- data/lib/tasks/constants.rake +12 -0
- data/lib/tasks/docs.rake +89 -34
- data/lib/tasks/utilities.rake +9 -11
- data/lib/yard/docs_helper.rb +12 -3
- data/static/arguments.yml +977 -0
- data/static/assets/view-components.svg +18 -0
- data/static/classes.yml +174 -0
- data/static/constants.json +628 -0
- data/static/statuses.json +5 -5
- metadata +44 -27
- data/app/components/primer/auto_complete.rb +0 -156
- data/app/components/primer/auto_complete/item.rb +0 -42
- data/app/components/primer/avatar_component.rb +0 -75
- data/app/components/primer/avatar_stack_component.rb +0 -84
- data/app/components/primer/details_menu_component.d.ts +0 -1
- data/app/components/primer/details_menu_component.js +0 -1
data/lib/tasks/docs.rake
CHANGED
@@ -32,10 +32,10 @@ namespace :docs do
|
|
32
32
|
Primer::OcticonSymbolsComponent,
|
33
33
|
Primer::ImageCrop,
|
34
34
|
Primer::IconButton,
|
35
|
-
Primer::AutoComplete,
|
36
|
-
Primer::AutoComplete::Item,
|
37
|
-
Primer::
|
38
|
-
Primer::
|
35
|
+
Primer::Beta::AutoComplete,
|
36
|
+
Primer::Beta::AutoComplete::Item,
|
37
|
+
Primer::Beta::Avatar,
|
38
|
+
Primer::Beta::AvatarStack,
|
39
39
|
Primer::BaseButton,
|
40
40
|
Primer::BlankslateComponent,
|
41
41
|
Primer::BorderBoxComponent,
|
@@ -81,7 +81,7 @@ namespace :docs do
|
|
81
81
|
Primer::Dropdown,
|
82
82
|
Primer::LocalTime,
|
83
83
|
Primer::ImageCrop,
|
84
|
-
Primer::AutoComplete,
|
84
|
+
Primer::Beta::AutoComplete,
|
85
85
|
Primer::ClipboardCopy,
|
86
86
|
Primer::TabContainerComponent,
|
87
87
|
Primer::TabNavComponent,
|
@@ -97,28 +97,31 @@ namespace :docs do
|
|
97
97
|
|
98
98
|
errors = []
|
99
99
|
|
100
|
-
|
100
|
+
# Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
|
101
|
+
FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
|
102
|
+
|
103
|
+
components.sort_by(&:name).each do |component|
|
101
104
|
documentation = registry.get(component.name)
|
102
105
|
|
103
|
-
|
104
|
-
short_name = component.name.gsub(/Primer|::|Component/, "")
|
106
|
+
data = docs_metadata(component)
|
105
107
|
|
106
|
-
path = Pathname.new(
|
108
|
+
path = Pathname.new(data[:path])
|
107
109
|
path.dirname.mkdir unless path.dirname.exist?
|
108
110
|
File.open(path, "w") do |f|
|
109
111
|
f.puts("---")
|
110
|
-
f.puts("title: #{
|
111
|
-
f.puts("
|
112
|
-
f.puts("
|
113
|
-
f.puts("
|
112
|
+
f.puts("title: #{data[:title]}")
|
113
|
+
f.puts("componentId: #{data[:component_id]}")
|
114
|
+
f.puts("status: #{data[:status]}")
|
115
|
+
f.puts("source: #{data[:source]}")
|
116
|
+
f.puts("storybook: #{data[:storybook]}")
|
114
117
|
f.puts("---")
|
115
118
|
f.puts
|
116
|
-
f.puts("import Example from '
|
119
|
+
f.puts("import Example from '#{data[:example_path]}'")
|
117
120
|
|
118
121
|
initialize_method = documentation.meths.find(&:constructor?)
|
119
122
|
|
120
123
|
if js_components.include?(component)
|
121
|
-
f.puts("import RequiresJSFlash from '
|
124
|
+
f.puts("import RequiresJSFlash from '#{data[:require_js_path]}'")
|
122
125
|
f.puts
|
123
126
|
f.puts("<RequiresJSFlash />")
|
124
127
|
end
|
@@ -176,15 +179,15 @@ namespace :docs do
|
|
176
179
|
"name" => tag.name,
|
177
180
|
"type" => tag.types.join(", "),
|
178
181
|
"default" => default_value,
|
179
|
-
"description" => view_context.render(inline: tag.text)
|
182
|
+
"description" => view_context.render(inline: tag.text.squish)
|
180
183
|
}
|
181
184
|
|
182
|
-
f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text)} |")
|
185
|
+
f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
|
183
186
|
end
|
184
187
|
|
185
188
|
component_args = {
|
186
|
-
"component" =>
|
187
|
-
"source" =>
|
189
|
+
"component" => data[:title],
|
190
|
+
"source" => data[:source],
|
188
191
|
"parameters" => args
|
189
192
|
}
|
190
193
|
|
@@ -225,23 +228,12 @@ namespace :docs do
|
|
225
228
|
f.puts("## Examples")
|
226
229
|
|
227
230
|
initialize_method.tags(:example).each do |tag|
|
228
|
-
name = tag
|
229
|
-
description = nil
|
230
|
-
code = nil
|
231
|
-
|
232
|
-
if tag.text.include?("@description")
|
233
|
-
splitted = tag.text.split(/@description|@code/)
|
234
|
-
description = splitted.second.gsub(/^[ \t]{2}/, "").strip
|
235
|
-
code = splitted.last.gsub(/^[ \t]{2}/, "").strip
|
236
|
-
else
|
237
|
-
code = tag.text
|
238
|
-
end
|
239
|
-
|
231
|
+
name, description, code = parse_example_tag(tag)
|
240
232
|
f.puts
|
241
233
|
f.puts("### #{name}")
|
242
234
|
if description
|
243
235
|
f.puts
|
244
|
-
f.puts(description)
|
236
|
+
f.puts(view_context.render(inline: description.squish))
|
245
237
|
end
|
246
238
|
f.puts
|
247
239
|
html = view_context.render(inline: code)
|
@@ -328,13 +320,14 @@ namespace :docs do
|
|
328
320
|
f.puts(" class #{short_name}Preview < ViewComponent::Preview")
|
329
321
|
|
330
322
|
yard_example_tags.each_with_index do |tag, index|
|
331
|
-
|
323
|
+
name, _, code = parse_example_tag(tag)
|
324
|
+
method_name = name.split("|").first.downcase.parameterize.underscore
|
332
325
|
f.puts(" def #{method_name}; end")
|
333
326
|
f.puts unless index == yard_example_tags.size - 1
|
334
327
|
path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
|
335
328
|
path.dirname.mkdir unless path.dirname.exist?
|
336
329
|
File.open(path, "w") do |view_file|
|
337
|
-
view_file.puts(
|
330
|
+
view_file.puts(code.to_s)
|
338
331
|
end
|
339
332
|
end
|
340
333
|
|
@@ -346,6 +339,7 @@ namespace :docs do
|
|
346
339
|
end
|
347
340
|
|
348
341
|
def generate_yard_registry
|
342
|
+
ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
|
349
343
|
require File.expand_path("./../../demo/config/environment.rb", __dir__)
|
350
344
|
require "primer/view_components"
|
351
345
|
require "yard/docs_helper"
|
@@ -371,6 +365,22 @@ namespace :docs do
|
|
371
365
|
registry
|
372
366
|
end
|
373
367
|
|
368
|
+
def parse_example_tag(tag)
|
369
|
+
name = tag.name
|
370
|
+
description = nil
|
371
|
+
code = nil
|
372
|
+
|
373
|
+
if tag.text.include?("@description")
|
374
|
+
splitted = tag.text.split(/@description|@code/)
|
375
|
+
description = splitted.second.gsub(/^[ \t]{2}/, "").strip
|
376
|
+
code = splitted.last.gsub(/^[ \t]{2}/, "").strip
|
377
|
+
else
|
378
|
+
code = tag.text
|
379
|
+
end
|
380
|
+
|
381
|
+
[name, description, code]
|
382
|
+
end
|
383
|
+
|
374
384
|
def pretty_default_value(tag, component)
|
375
385
|
params = tag.object.parameters.find { |param| [tag.name.to_s, tag.name.to_s + ":"].include?(param[0]) }
|
376
386
|
default = tag.defaults&.first || params&.second
|
@@ -384,4 +394,49 @@ namespace :docs do
|
|
384
394
|
|
385
395
|
pretty_value(constant_value)
|
386
396
|
end
|
397
|
+
|
398
|
+
def docs_metadata(component)
|
399
|
+
(status_module, short_name) = status_module_and_short_name(component)
|
400
|
+
status_path = status_module.nil? ? "" : "#{status_module}/"
|
401
|
+
status = component.status.to_s
|
402
|
+
|
403
|
+
{
|
404
|
+
title: short_name,
|
405
|
+
component_id: short_name.underscore,
|
406
|
+
status: status.capitalize,
|
407
|
+
source: source_url(component),
|
408
|
+
storybook: storybook_url(component),
|
409
|
+
path: "docs/content/components/#{status_path}#{short_name.downcase}.md",
|
410
|
+
example_path: example_path(component),
|
411
|
+
require_js_path: require_js_path(component)
|
412
|
+
}
|
413
|
+
end
|
414
|
+
|
415
|
+
def source_url(component)
|
416
|
+
path = component.name.split("::").map(&:underscore).join("/")
|
417
|
+
|
418
|
+
"https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
|
419
|
+
end
|
420
|
+
|
421
|
+
def storybook_url(component)
|
422
|
+
path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-")
|
423
|
+
|
424
|
+
"https://primer.style/view-components/stories/?path=/story/#{path}"
|
425
|
+
end
|
426
|
+
|
427
|
+
def example_path(component)
|
428
|
+
example_path = "../../src/@primer/gatsby-theme-doctocat/components/example"
|
429
|
+
example_path = "../#{example_path}" if status_module?(component)
|
430
|
+
example_path
|
431
|
+
end
|
432
|
+
|
433
|
+
def require_js_path(component)
|
434
|
+
require_js_path = "../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash"
|
435
|
+
require_js_path = "../#{require_js_path}" if status_module?(component)
|
436
|
+
require_js_path
|
437
|
+
end
|
438
|
+
|
439
|
+
def status_module?(component)
|
440
|
+
(%w[Alpha Beta] & component.name.split("::")).any?
|
441
|
+
end
|
387
442
|
end
|
data/lib/tasks/utilities.rake
CHANGED
@@ -5,23 +5,21 @@ namespace :utilities do
|
|
5
5
|
require "yaml"
|
6
6
|
require "json"
|
7
7
|
require File.expand_path("./../../demo/config/environment.rb", __dir__)
|
8
|
+
require "primer/classify/utilities"
|
8
9
|
|
9
10
|
# Keys that are looked for to be included in the utilities.yml file
|
10
11
|
SUPPORTED_KEYS = %i[
|
11
|
-
|
12
|
+
anim
|
13
|
+
d
|
12
14
|
float
|
15
|
+
hide
|
13
16
|
m mt mr mb ml mx my
|
14
17
|
p pt pr pb pl px py
|
18
|
+
position
|
19
|
+
wb
|
20
|
+
v
|
15
21
|
].freeze
|
16
22
|
|
17
|
-
# Replacements for some classnames that end up being a different argument key
|
18
|
-
REPLACEMENT_KEYS = {
|
19
|
-
"^v-align" => "vertical_align",
|
20
|
-
"^d" => "display",
|
21
|
-
"^wb" => "word_break",
|
22
|
-
"^v" => "visibility"
|
23
|
-
}.freeze
|
24
|
-
|
25
23
|
BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
|
26
24
|
|
27
25
|
css_data =
|
@@ -46,7 +44,7 @@ namespace :utilities do
|
|
46
44
|
key = ""
|
47
45
|
|
48
46
|
# Look for a replacement key
|
49
|
-
REPLACEMENT_KEYS.each do |k, v|
|
47
|
+
Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
|
50
48
|
next unless classname.match?(Regexp.new(k))
|
51
49
|
|
52
50
|
key = v
|
@@ -92,7 +90,7 @@ namespace :utilities do
|
|
92
90
|
x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
|
93
91
|
end
|
94
92
|
|
95
|
-
File.open("
|
93
|
+
File.open("lib/primer/classify/utilities.yml", "w") do |f|
|
96
94
|
f.puts YAML.dump(output)
|
97
95
|
end
|
98
96
|
end
|
data/lib/yard/docs_helper.rb
CHANGED
@@ -29,7 +29,7 @@ module YARD
|
|
29
29
|
end
|
30
30
|
|
31
31
|
def link_to_accessibility
|
32
|
-
"[Accessibility](#
|
32
|
+
"[Accessibility](#accessibility)"
|
33
33
|
end
|
34
34
|
|
35
35
|
def link_to_system_arguments_docs
|
@@ -41,8 +41,10 @@ module YARD
|
|
41
41
|
end
|
42
42
|
|
43
43
|
def link_to_component(component)
|
44
|
-
short_name = component
|
45
|
-
"
|
44
|
+
(status_module, short_name) = status_module_and_short_name(component)
|
45
|
+
status_path = status_module.nil? ? "" : "#{status_module}/"
|
46
|
+
|
47
|
+
"[#{short_name}](/components/#{status_path}#{short_name.downcase})"
|
46
48
|
end
|
47
49
|
|
48
50
|
def link_to_octicons
|
@@ -53,6 +55,13 @@ module YARD
|
|
53
55
|
"[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
|
54
56
|
end
|
55
57
|
|
58
|
+
def status_module_and_short_name(component)
|
59
|
+
name_with_status = component.name.gsub(/Primer::|Component/, "")
|
60
|
+
|
61
|
+
m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(::)?(?<name>.*)/)
|
62
|
+
[m[:status]&.downcase, m[:name].gsub("::", "")]
|
63
|
+
end
|
64
|
+
|
56
65
|
def pretty_value(val)
|
57
66
|
case val
|
58
67
|
when nil
|
@@ -0,0 +1,977 @@
|
|
1
|
+
---
|
2
|
+
- component: ButtonMarketing
|
3
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb
|
4
|
+
parameters:
|
5
|
+
- name: scheme
|
6
|
+
type: Symbol
|
7
|
+
default: "`:default`"
|
8
|
+
description: One of `:default`, `:outline`, `:primary`, or `:transparent`.
|
9
|
+
- name: variant
|
10
|
+
type: Symbol
|
11
|
+
default: "`:default`"
|
12
|
+
description: One of `:default` and `:large`.
|
13
|
+
- name: tag
|
14
|
+
type: Symbol
|
15
|
+
default: "`:button`"
|
16
|
+
description: One of `:a` and `:button`.
|
17
|
+
- name: type
|
18
|
+
type: Symbol
|
19
|
+
default: "`:button`"
|
20
|
+
description: One of `:button` and `:submit`.
|
21
|
+
- name: system_arguments
|
22
|
+
type: Hash
|
23
|
+
default: N/A
|
24
|
+
description: "[System arguments](/system-arguments)"
|
25
|
+
- component: BaseButton
|
26
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb
|
27
|
+
parameters:
|
28
|
+
- name: tag
|
29
|
+
type: Symbol
|
30
|
+
default: "`:button`"
|
31
|
+
description: One of `:a`, `:button`, or `:summary`.
|
32
|
+
- name: type
|
33
|
+
type: Symbol
|
34
|
+
default: "`:button`"
|
35
|
+
description: One of `:button`, `:reset`, or `:submit`.
|
36
|
+
- name: block
|
37
|
+
type: Boolean
|
38
|
+
default: "`false`"
|
39
|
+
description: 'Whether button is full-width with `display: block`.'
|
40
|
+
- name: system_arguments
|
41
|
+
type: Hash
|
42
|
+
default: N/A
|
43
|
+
description: "[System arguments](/system-arguments)"
|
44
|
+
- component: AutoComplete
|
45
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb
|
46
|
+
parameters:
|
47
|
+
- name: src
|
48
|
+
type: String
|
49
|
+
default: N/A
|
50
|
+
description: The route to query.
|
51
|
+
- name: input_id
|
52
|
+
type: String
|
53
|
+
default: N/A
|
54
|
+
description: Id of the input element.
|
55
|
+
- name: list_id
|
56
|
+
type: String
|
57
|
+
default: N/A
|
58
|
+
description: Id of the list element.
|
59
|
+
- name: system_arguments
|
60
|
+
type: Hash
|
61
|
+
default: N/A
|
62
|
+
description: "[System arguments](/system-arguments)"
|
63
|
+
- component: AutoCompleteItem
|
64
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
|
65
|
+
parameters:
|
66
|
+
- name: value
|
67
|
+
type: String
|
68
|
+
default: N/A
|
69
|
+
description: Value of the item.
|
70
|
+
- name: selected
|
71
|
+
type: Boolean
|
72
|
+
default: "`false`"
|
73
|
+
description: Whether the item is selected.
|
74
|
+
- name: disabled
|
75
|
+
type: Boolean
|
76
|
+
default: "`false`"
|
77
|
+
description: Whether the item is disabled.
|
78
|
+
- name: system_arguments
|
79
|
+
type: Hash
|
80
|
+
default: N/A
|
81
|
+
description: "[System arguments](/system-arguments)"
|
82
|
+
- component: Avatar
|
83
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb
|
84
|
+
parameters:
|
85
|
+
- name: src
|
86
|
+
type: String
|
87
|
+
default: N/A
|
88
|
+
description: The source url of the avatar image.
|
89
|
+
- name: alt
|
90
|
+
type: String
|
91
|
+
default: N/A
|
92
|
+
description: Passed through to alt on img tag.
|
93
|
+
- name: size
|
94
|
+
type: Integer
|
95
|
+
default: "`20`"
|
96
|
+
description: Adds the avatar-small class if less than 24.
|
97
|
+
- name: square
|
98
|
+
type: Boolean
|
99
|
+
default: "`false`"
|
100
|
+
description: Used to create a square avatar.
|
101
|
+
- name: href
|
102
|
+
type: String
|
103
|
+
default: "`nil`"
|
104
|
+
description: The URL to link to. If used, component will be wrapped by an `<a>`
|
105
|
+
tag.
|
106
|
+
- name: system_arguments
|
107
|
+
type: Hash
|
108
|
+
default: N/A
|
109
|
+
description: "[System arguments](/system-arguments)"
|
110
|
+
- component: AvatarStack
|
111
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb
|
112
|
+
parameters:
|
113
|
+
- name: tag
|
114
|
+
type: Symbol
|
115
|
+
default: "`:div`"
|
116
|
+
description: One of `:div` and `:span`.
|
117
|
+
- name: align
|
118
|
+
type: Symbol
|
119
|
+
default: "`:left`"
|
120
|
+
description: One of `:left` and `:right`.
|
121
|
+
- name: tooltipped
|
122
|
+
type: Boolean
|
123
|
+
default: "`false`"
|
124
|
+
description: Whether to add a tooltip to the stack or not.
|
125
|
+
- name: body_arguments
|
126
|
+
type: Hash
|
127
|
+
default: "`{}`"
|
128
|
+
description: Parameters to add to the Body. If `tooltipped` is set, has the same
|
129
|
+
arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can
|
130
|
+
be changed using `tag:` to one of `:div` and `:span`.
|
131
|
+
- name: system_arguments
|
132
|
+
type: Hash
|
133
|
+
default: N/A
|
134
|
+
description: "[System arguments](/system-arguments)"
|
135
|
+
- component: Text
|
136
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
|
137
|
+
parameters:
|
138
|
+
- name: tag
|
139
|
+
type: Symbol
|
140
|
+
default: "`:span`"
|
141
|
+
description: ''
|
142
|
+
- name: system_arguments
|
143
|
+
type: Hash
|
144
|
+
default: N/A
|
145
|
+
description: "[System arguments](/system-arguments)"
|
146
|
+
- component: Blankslate
|
147
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb
|
148
|
+
parameters:
|
149
|
+
- name: title
|
150
|
+
type: String
|
151
|
+
default: '`""`'
|
152
|
+
description: Text that appears in a larger bold font.
|
153
|
+
- name: title_tag
|
154
|
+
type: Symbol
|
155
|
+
default: "`:h3`"
|
156
|
+
description: HTML tag to use for title.
|
157
|
+
- name: icon
|
158
|
+
type: Symbol
|
159
|
+
default: '`""`'
|
160
|
+
description: Octicon icon to use at top of component.
|
161
|
+
- name: icon_size
|
162
|
+
type: Symbol
|
163
|
+
default: "`:medium`"
|
164
|
+
description: One of `:small` (`16`) and `:medium` (`24`).
|
165
|
+
- name: image_src
|
166
|
+
type: String
|
167
|
+
default: '`""`'
|
168
|
+
description: Image to display.
|
169
|
+
- name: image_alt
|
170
|
+
type: String
|
171
|
+
default: '`" "`'
|
172
|
+
description: Alt text for image.
|
173
|
+
- name: description
|
174
|
+
type: String
|
175
|
+
default: '`""`'
|
176
|
+
description: Text that appears below the title. Typically a whole sentence.
|
177
|
+
- name: button_text
|
178
|
+
type: String
|
179
|
+
default: '`""`'
|
180
|
+
description: The text of the button.
|
181
|
+
- name: button_url
|
182
|
+
type: String
|
183
|
+
default: '`""`'
|
184
|
+
description: The URL where the user will be taken after clicking the button.
|
185
|
+
- name: button_classes
|
186
|
+
type: String
|
187
|
+
default: '`"btn-primary my-3"`'
|
188
|
+
description: Classes to apply to action button
|
189
|
+
- name: link_text
|
190
|
+
type: String
|
191
|
+
default: '`""`'
|
192
|
+
description: The text of the link.
|
193
|
+
- name: link_url
|
194
|
+
type: String
|
195
|
+
default: '`""`'
|
196
|
+
description: The URL where the user will be taken after clicking the link.
|
197
|
+
- name: narrow
|
198
|
+
type: Boolean
|
199
|
+
default: "`false`"
|
200
|
+
description: Adds a maximum width.
|
201
|
+
- name: large
|
202
|
+
type: Boolean
|
203
|
+
default: "`false`"
|
204
|
+
description: Increases the font size.
|
205
|
+
- name: spacious
|
206
|
+
type: Boolean
|
207
|
+
default: "`false`"
|
208
|
+
description: Adds extra padding.
|
209
|
+
- name: system_arguments
|
210
|
+
type: Hash
|
211
|
+
default: N/A
|
212
|
+
description: "[System arguments](/system-arguments)"
|
213
|
+
- component: BorderBox
|
214
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/border_box_component.rb
|
215
|
+
parameters:
|
216
|
+
- name: padding
|
217
|
+
type: Symbol
|
218
|
+
default: "`:default`"
|
219
|
+
description: One of `:condensed`, `:default`, or `:spacious`.
|
220
|
+
- name: system_arguments
|
221
|
+
type: Hash
|
222
|
+
default: N/A
|
223
|
+
description: "[System arguments](/system-arguments)"
|
224
|
+
- component: Box
|
225
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb
|
226
|
+
parameters:
|
227
|
+
- name: system_arguments
|
228
|
+
type: Hash
|
229
|
+
default: N/A
|
230
|
+
description: "[System arguments](/system-arguments)"
|
231
|
+
- component: Breadcrumb
|
232
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/breadcrumb_component.rb
|
233
|
+
parameters:
|
234
|
+
- name: system_arguments
|
235
|
+
type: Hash
|
236
|
+
default: N/A
|
237
|
+
description: "[System arguments](/system-arguments)"
|
238
|
+
- component: Button
|
239
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb
|
240
|
+
parameters:
|
241
|
+
- name: scheme
|
242
|
+
type: Symbol
|
243
|
+
default: "`:default`"
|
244
|
+
description: One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`,
|
245
|
+
or `:primary`.
|
246
|
+
- name: variant
|
247
|
+
type: Symbol
|
248
|
+
default: "`:medium`"
|
249
|
+
description: One of `:large`, `:medium`, or `:small`.
|
250
|
+
- name: tag
|
251
|
+
type: Symbol
|
252
|
+
default: "`:button`"
|
253
|
+
description: One of `:a`, `:button`, or `:summary`.
|
254
|
+
- name: type
|
255
|
+
type: Symbol
|
256
|
+
default: "`:button`"
|
257
|
+
description: One of `:button`, `:reset`, or `:submit`.
|
258
|
+
- name: group_item
|
259
|
+
type: Boolean
|
260
|
+
default: "`false`"
|
261
|
+
description: Whether button is part of a ButtonGroup.
|
262
|
+
- name: block
|
263
|
+
type: Boolean
|
264
|
+
default: "`false`"
|
265
|
+
description: 'Whether button is full-width with `display: block`.'
|
266
|
+
- name: caret
|
267
|
+
type: Boolean
|
268
|
+
default: "`false`"
|
269
|
+
description: Whether or not to render a caret.
|
270
|
+
- name: system_arguments
|
271
|
+
type: Hash
|
272
|
+
default: N/A
|
273
|
+
description: "[System arguments](/system-arguments)"
|
274
|
+
- component: ButtonGroup
|
275
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/button_group.rb
|
276
|
+
parameters:
|
277
|
+
- name: variant
|
278
|
+
type: Symbol
|
279
|
+
default: "`:medium`"
|
280
|
+
description: One of `:large`, `:medium`, or `:small`.
|
281
|
+
- name: system_arguments
|
282
|
+
type: Hash
|
283
|
+
default: N/A
|
284
|
+
description: "[System arguments](/system-arguments)"
|
285
|
+
- component: ClipboardCopy
|
286
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb
|
287
|
+
parameters:
|
288
|
+
- name: aria-label
|
289
|
+
type: String
|
290
|
+
default: N/A
|
291
|
+
description: String that will be read to screenreaders when the component is focused
|
292
|
+
- name: value
|
293
|
+
type: String
|
294
|
+
default: "`nil`"
|
295
|
+
description: Text to copy into the users clipboard when they click the component.
|
296
|
+
- name: for
|
297
|
+
type: String
|
298
|
+
default: N/A
|
299
|
+
description: Element id from where to get the copied value.
|
300
|
+
- name: system_arguments
|
301
|
+
type: Hash
|
302
|
+
default: N/A
|
303
|
+
description: "[System arguments](/system-arguments)"
|
304
|
+
- component: CloseButton
|
305
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/close_button.rb
|
306
|
+
parameters:
|
307
|
+
- name: type
|
308
|
+
type: Symbol
|
309
|
+
default: "`:button`"
|
310
|
+
description: One of `:button` and `:submit`.
|
311
|
+
- name: system_arguments
|
312
|
+
type: Hash
|
313
|
+
default: N/A
|
314
|
+
description: "[System arguments](/system-arguments)"
|
315
|
+
- component: Counter
|
316
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb
|
317
|
+
parameters:
|
318
|
+
- name: count
|
319
|
+
type: Integer, Float::INFINITY, nil
|
320
|
+
default: "`0`"
|
321
|
+
description: 'The number to be displayed (e.x. # of issues, pull requests)'
|
322
|
+
- name: scheme
|
323
|
+
type: Symbol
|
324
|
+
default: "`:default`"
|
325
|
+
description: Color scheme. One of `:default`, `:primary`, or `:secondary`.
|
326
|
+
- name: limit
|
327
|
+
type: Integer, nil
|
328
|
+
default: "`5_000`"
|
329
|
+
description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count`
|
330
|
+
== 6,000 and `limit` == 5000, counter will display "5,000+")
|
331
|
+
- name: hide_if_zero
|
332
|
+
type: Boolean
|
333
|
+
default: "`false`"
|
334
|
+
description: If true, a `hidden` attribute is added to the counter if `count`
|
335
|
+
is zero.
|
336
|
+
- name: text
|
337
|
+
type: String
|
338
|
+
default: '`""`'
|
339
|
+
description: Text to display instead of count.
|
340
|
+
- name: round
|
341
|
+
type: Boolean
|
342
|
+
default: "`false`"
|
343
|
+
description: Whether to apply our standard rounding logic to value.
|
344
|
+
- name: system_arguments
|
345
|
+
type: Hash
|
346
|
+
default: N/A
|
347
|
+
description: "[System arguments](/system-arguments)"
|
348
|
+
- component: Details
|
349
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb
|
350
|
+
parameters:
|
351
|
+
- name: overlay
|
352
|
+
type: Symbol
|
353
|
+
default: "`:none`"
|
354
|
+
description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
|
355
|
+
or `:none`.
|
356
|
+
- name: reset
|
357
|
+
type: Boolean
|
358
|
+
default: "`false`"
|
359
|
+
description: Defatuls to false. If set to true, it will remove the default caret
|
360
|
+
and remove style from the summary element
|
361
|
+
- name: system_arguments
|
362
|
+
type: Hash
|
363
|
+
default: N/A
|
364
|
+
description: "[System arguments](/system-arguments)"
|
365
|
+
- component: Dropdown
|
366
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb
|
367
|
+
parameters:
|
368
|
+
- name: overlay
|
369
|
+
type: Symbol
|
370
|
+
default: "`:default`"
|
371
|
+
description: One of `:dark`, `:default`, or `:none`.
|
372
|
+
- name: with_caret
|
373
|
+
type: Boolean
|
374
|
+
default: "`false`"
|
375
|
+
description: Whether or not a caret should be rendered in the button.
|
376
|
+
- name: system_arguments
|
377
|
+
type: Hash
|
378
|
+
default: N/A
|
379
|
+
description: "[System arguments](/system-arguments)"
|
380
|
+
- component: DropdownMenu
|
381
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb
|
382
|
+
parameters:
|
383
|
+
- name: direction
|
384
|
+
type: Symbol
|
385
|
+
default: "`:se`"
|
386
|
+
description: One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.
|
387
|
+
- name: scheme
|
388
|
+
type: Symbol
|
389
|
+
default: "`:default`"
|
390
|
+
description: Pass `:dark` for dark mode theming
|
391
|
+
- name: header
|
392
|
+
type: String
|
393
|
+
default: "`nil`"
|
394
|
+
description: Optional string to display as the header
|
395
|
+
- name: system_arguments
|
396
|
+
type: Hash
|
397
|
+
default: N/A
|
398
|
+
description: "[System arguments](/system-arguments)"
|
399
|
+
- component: Flash
|
400
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/flash_component.rb
|
401
|
+
parameters:
|
402
|
+
- name: full
|
403
|
+
type: Boolean
|
404
|
+
default: "`false`"
|
405
|
+
description: Whether the component should take up the full width of the screen.
|
406
|
+
- name: spacious
|
407
|
+
type: Boolean
|
408
|
+
default: "`false`"
|
409
|
+
description: Whether to add margin to the bottom of the component.
|
410
|
+
- name: dismissible
|
411
|
+
type: Boolean
|
412
|
+
default: "`false`"
|
413
|
+
description: Whether the component can be dismissed with an X button.
|
414
|
+
- name: icon
|
415
|
+
type: Symbol
|
416
|
+
default: "`nil`"
|
417
|
+
description: Name of Octicon icon to use.
|
418
|
+
- name: scheme
|
419
|
+
type: Symbol
|
420
|
+
default: "`:default`"
|
421
|
+
description: One of `:danger`, `:default`, `:success`, or `:warning`.
|
422
|
+
- name: system_arguments
|
423
|
+
type: Hash
|
424
|
+
default: N/A
|
425
|
+
description: "[System arguments](/system-arguments)"
|
426
|
+
- component: Flex
|
427
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
|
428
|
+
parameters:
|
429
|
+
- name: justify_content
|
430
|
+
type: Symbol
|
431
|
+
default: "`JUSTIFY_CONTENT_DEFAULT`"
|
432
|
+
description: Use this param to distribute space between and around flex items
|
433
|
+
along the main axis of the container. One of `nil`, `:center`, `:flex_end`,
|
434
|
+
`:flex_start`, `:space_around`, or `:space_between`.
|
435
|
+
- name: inline
|
436
|
+
type: Boolean
|
437
|
+
default: "`false`"
|
438
|
+
description: Defaults to false.
|
439
|
+
- name: flex_wrap
|
440
|
+
type: Boolean
|
441
|
+
default: "`FLEX_WRAP_DEFAULT`"
|
442
|
+
description: Defaults to nil.
|
443
|
+
- name: align_items
|
444
|
+
type: Symbol
|
445
|
+
default: "`ALIGN_ITEMS_DEFAULT`"
|
446
|
+
description: Use this param to align items on the cross axis. One of `nil`, `:baseline`,
|
447
|
+
`:center`, `:end`, `:start`, or `:stretch`.
|
448
|
+
- name: direction
|
449
|
+
type: Symbol
|
450
|
+
default: "`nil`"
|
451
|
+
description: Use this param to define the orientation of the main axis (row or
|
452
|
+
column). By default, flex items will display in a row. One of `nil`, `:column`,
|
453
|
+
`:column_reverse`, `:row`, or `:row_reverse`.
|
454
|
+
- name: system_arguments
|
455
|
+
type: Hash
|
456
|
+
default: N/A
|
457
|
+
description: "[System arguments](/system-arguments)"
|
458
|
+
- component: FlexItem
|
459
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb
|
460
|
+
parameters:
|
461
|
+
- name: flex_auto
|
462
|
+
type: Boolean
|
463
|
+
default: "`false`"
|
464
|
+
description: Fills available space and auto-sizes based on the content. Defaults
|
465
|
+
to false
|
466
|
+
- name: system_arguments
|
467
|
+
type: Hash
|
468
|
+
default: N/A
|
469
|
+
description: "[System arguments](/system-arguments)"
|
470
|
+
- component: Heading
|
471
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/heading_component.rb
|
472
|
+
parameters:
|
473
|
+
- name: tag
|
474
|
+
type: String
|
475
|
+
default: N/A
|
476
|
+
description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
|
477
|
+
- name: system_arguments
|
478
|
+
type: Hash
|
479
|
+
default: N/A
|
480
|
+
description: "[System arguments](/system-arguments)"
|
481
|
+
- component: HiddenTextExpander
|
482
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/hidden_text_expander.rb
|
483
|
+
parameters:
|
484
|
+
- name: inline
|
485
|
+
type: Boolean
|
486
|
+
default: "`false`"
|
487
|
+
description: Whether or not the expander is inline.
|
488
|
+
- name: button_arguments
|
489
|
+
type: Hash
|
490
|
+
default: "`{}`"
|
491
|
+
description: "[System arguments](/system-arguments) for the button element."
|
492
|
+
- name: system_arguments
|
493
|
+
type: Hash
|
494
|
+
default: N/A
|
495
|
+
description: "[System arguments](/system-arguments)"
|
496
|
+
- component: IconButton
|
497
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb
|
498
|
+
parameters:
|
499
|
+
- name: scheme
|
500
|
+
type: Symbol
|
501
|
+
default: "`:default`"
|
502
|
+
description: One of `:danger` and `:default`.
|
503
|
+
- name: icon
|
504
|
+
type: String
|
505
|
+
default: N/A
|
506
|
+
description: Name of [Octicon](https://primer.style/octicons/) to use.
|
507
|
+
- name: tag
|
508
|
+
type: Symbol
|
509
|
+
default: N/A
|
510
|
+
description: One of `:a`, `:button`, or `:summary`.
|
511
|
+
- name: type
|
512
|
+
type: Symbol
|
513
|
+
default: N/A
|
514
|
+
description: One of `:button`, `:reset`, or `:submit`.
|
515
|
+
- name: box
|
516
|
+
type: Boolean
|
517
|
+
default: "`false`"
|
518
|
+
description: Whether the button is in a [BorderBox](/components/borderbox). If
|
519
|
+
`true`, the button will have the `Box-btn-octicon` class.
|
520
|
+
- name: system_arguments
|
521
|
+
type: Hash
|
522
|
+
default: N/A
|
523
|
+
description: "[System arguments](/system-arguments)"
|
524
|
+
- component: Image
|
525
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/image.rb
|
526
|
+
parameters:
|
527
|
+
- name: src
|
528
|
+
type: String
|
529
|
+
default: N/A
|
530
|
+
description: The source url of the image.
|
531
|
+
- name: alt
|
532
|
+
type: String
|
533
|
+
default: N/A
|
534
|
+
description: Specifies an alternate text for the image.
|
535
|
+
- name: lazy
|
536
|
+
type: Boolean
|
537
|
+
default: "`false`"
|
538
|
+
description: Whether or not to lazily load the image.
|
539
|
+
- name: system_arguments
|
540
|
+
type: Hash
|
541
|
+
default: N/A
|
542
|
+
description: "[System arguments](/system-arguments)"
|
543
|
+
- component: ImageCrop
|
544
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb
|
545
|
+
parameters:
|
546
|
+
- name: src
|
547
|
+
type: String
|
548
|
+
default: N/A
|
549
|
+
description: The path of the image to crop.
|
550
|
+
- name: rounded
|
551
|
+
type: Boolean
|
552
|
+
default: "`true`"
|
553
|
+
description: If the crop mask should be a circle. Defaults to true.
|
554
|
+
- name: system_arguments
|
555
|
+
type: Hash
|
556
|
+
default: N/A
|
557
|
+
description: "[System arguments](/system-arguments)"
|
558
|
+
- component: Label
|
559
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/label_component.rb
|
560
|
+
parameters:
|
561
|
+
- name: tag
|
562
|
+
type: Symbol
|
563
|
+
default: "`:span`"
|
564
|
+
description: One of `:a`, `:div`, `:span`, or `:summary`.
|
565
|
+
- name: title
|
566
|
+
type: String
|
567
|
+
default: N/A
|
568
|
+
description: "`title` attribute for the component element."
|
569
|
+
- name: scheme
|
570
|
+
type: Symbol
|
571
|
+
default: "`nil`"
|
572
|
+
description: One of `:danger`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`,
|
573
|
+
`:success`, or `:warning`.
|
574
|
+
- name: variant
|
575
|
+
type: Symbol
|
576
|
+
default: "`nil`"
|
577
|
+
description: One of `nil`, `:inline`, or `:large`.
|
578
|
+
- name: system_arguments
|
579
|
+
type: Hash
|
580
|
+
default: N/A
|
581
|
+
description: "[System arguments](/system-arguments)"
|
582
|
+
- component: Layout
|
583
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb
|
584
|
+
parameters:
|
585
|
+
- name: responsive
|
586
|
+
type: Boolean
|
587
|
+
default: "`false`"
|
588
|
+
description: Whether to collapse layout to a single column at smaller widths.
|
589
|
+
- name: side
|
590
|
+
type: Symbol
|
591
|
+
default: "`:right`"
|
592
|
+
description: Which side to display the sidebar on. One of `:left` and `:right`.
|
593
|
+
- name: sidebar_col
|
594
|
+
type: Integer
|
595
|
+
default: "`3`"
|
596
|
+
description: Sidebar column width.
|
597
|
+
- name: system_arguments
|
598
|
+
type: Hash
|
599
|
+
default: N/A
|
600
|
+
description: "[System arguments](/system-arguments)"
|
601
|
+
- component: Link
|
602
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/link_component.rb
|
603
|
+
parameters:
|
604
|
+
- name: tag
|
605
|
+
type: String
|
606
|
+
default: "`:a`"
|
607
|
+
description: One of `:a` and `:span`.
|
608
|
+
- name: href
|
609
|
+
type: String
|
610
|
+
default: "`nil`"
|
611
|
+
description: URL to be used for the Link. Required if tag is `:a`. If the requirements
|
612
|
+
are not met an error will be raised in non production environments. In production,
|
613
|
+
an empty link element will be rendered.
|
614
|
+
- name: scheme
|
615
|
+
type: Symbol
|
616
|
+
default: "`:default`"
|
617
|
+
description: One of `:default`, `:primary`, or `:secondary`.
|
618
|
+
- name: muted
|
619
|
+
type: Boolean
|
620
|
+
default: "`false`"
|
621
|
+
description: Uses light gray for Link color, and blue on hover.
|
622
|
+
- name: underline
|
623
|
+
type: Boolean
|
624
|
+
default: "`true`"
|
625
|
+
description: Whether or not to underline the link.
|
626
|
+
- name: system_arguments
|
627
|
+
type: Hash
|
628
|
+
default: N/A
|
629
|
+
description: "[System arguments](/system-arguments)"
|
630
|
+
- component: LocalTime
|
631
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb
|
632
|
+
parameters:
|
633
|
+
- name: datetime
|
634
|
+
type: DateTime
|
635
|
+
default: N/A
|
636
|
+
description: The date to parse
|
637
|
+
- name: initial_text
|
638
|
+
type: String
|
639
|
+
default: "`nil`"
|
640
|
+
description: Text to render before component is initialized
|
641
|
+
- name: weekday
|
642
|
+
type: Symbol
|
643
|
+
default: "`:short`"
|
644
|
+
description: One of `:long` and `:short`.
|
645
|
+
- name: year
|
646
|
+
type: Symbol
|
647
|
+
default: "`:numeric`"
|
648
|
+
description: One of `:2-digit` and `:numeric`.
|
649
|
+
- name: month
|
650
|
+
type: Symbol
|
651
|
+
default: "`:short`"
|
652
|
+
description: One of `:long` and `:short`.
|
653
|
+
- name: day
|
654
|
+
type: Symbol
|
655
|
+
default: "`:numeric`"
|
656
|
+
description: One of `:2-digit` and `:numeric`.
|
657
|
+
- name: hour
|
658
|
+
type: Symbol
|
659
|
+
default: "`:numeric`"
|
660
|
+
description: One of `:2-digit` and `:numeric`.
|
661
|
+
- name: minute
|
662
|
+
type: Symbol
|
663
|
+
default: "`:numeric`"
|
664
|
+
description: One of `:2-digit` and `:numeric`.
|
665
|
+
- name: second
|
666
|
+
type: Symbol
|
667
|
+
default: "`:numeric`"
|
668
|
+
description: One of `:2-digit` and `:numeric`.
|
669
|
+
- name: time_zone_name
|
670
|
+
type: Symbol
|
671
|
+
default: "`:short`"
|
672
|
+
description: One of `:long` and `:short`.
|
673
|
+
- name: system_arguments
|
674
|
+
type: Hash
|
675
|
+
default: N/A
|
676
|
+
description: "[System arguments](/system-arguments)"
|
677
|
+
- component: Markdown
|
678
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/markdown.rb
|
679
|
+
parameters:
|
680
|
+
- name: tag
|
681
|
+
type: Symbol
|
682
|
+
default: "`:div`"
|
683
|
+
description: One of `:article`, `:div`, or `:td`.
|
684
|
+
- name: system_arguments
|
685
|
+
type: Hash
|
686
|
+
default: N/A
|
687
|
+
description: "[System arguments](/system-arguments)"
|
688
|
+
- component: Menu
|
689
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/menu_component.rb
|
690
|
+
parameters:
|
691
|
+
- name: system_arguments
|
692
|
+
type: Hash
|
693
|
+
default: N/A
|
694
|
+
description: "[System arguments](/system-arguments)"
|
695
|
+
- component: NavigationTab
|
696
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb
|
697
|
+
parameters:
|
698
|
+
- name: list
|
699
|
+
type: Boolean
|
700
|
+
default: "`false`"
|
701
|
+
description: Whether the Tab is an item in a `<ul>` list.
|
702
|
+
- name: selected
|
703
|
+
type: Boolean
|
704
|
+
default: "`false`"
|
705
|
+
description: Whether the Tab is selected or not.
|
706
|
+
- name: with_panel
|
707
|
+
type: Boolean
|
708
|
+
default: "`false`"
|
709
|
+
description: Whether the Tab has an associated panel.
|
710
|
+
- name: panel_id
|
711
|
+
type: String
|
712
|
+
default: '`""`'
|
713
|
+
description: Only applies if `with_panel` is `true`. Unique id of panel.
|
714
|
+
- name: icon_classes
|
715
|
+
type: Boolean
|
716
|
+
default: '`""`'
|
717
|
+
description: Classes that must always be applied to icons.
|
718
|
+
- name: wrapper_arguments
|
719
|
+
type: Hash
|
720
|
+
default: "`{}`"
|
721
|
+
description: "[System arguments](/system-arguments) to be used in the `<li>` wrapper
|
722
|
+
when the tab is an item in a list."
|
723
|
+
- name: system_arguments
|
724
|
+
type: Hash
|
725
|
+
default: N/A
|
726
|
+
description: "[System arguments](/system-arguments)"
|
727
|
+
- component: Octicon
|
728
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_component.rb
|
729
|
+
parameters:
|
730
|
+
- name: icon_name
|
731
|
+
type: Symbol, String
|
732
|
+
default: "`nil`"
|
733
|
+
description: Name of [Octicon](https://primer.style/octicons/) to use.
|
734
|
+
- name: icon
|
735
|
+
type: Symbol, String
|
736
|
+
default: "`nil`"
|
737
|
+
description: Name of [Octicon](https://primer.style/octicons/) to use.
|
738
|
+
- name: size
|
739
|
+
type: Symbol
|
740
|
+
default: "`:small`"
|
741
|
+
description: One of `:small` (`16`) and `:medium` (`24`).
|
742
|
+
- name: use_symbol
|
743
|
+
type: Boolean
|
744
|
+
default: "`false`"
|
745
|
+
description: EXPERIMENTAL (May change or be removed) - Set to true when using
|
746
|
+
with [OcticonSymbols](/components/octiconsymbols).
|
747
|
+
- name: system_arguments
|
748
|
+
type: Hash
|
749
|
+
default: N/A
|
750
|
+
description: "[System arguments](/system-arguments)"
|
751
|
+
- component: OcticonSymbols
|
752
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_symbols_component.rb
|
753
|
+
parameters:
|
754
|
+
- name: icons
|
755
|
+
type: Array<Hash>
|
756
|
+
default: "`[]`"
|
757
|
+
description: 'List of icons to render, in the format { symbol: :icon_name, size:
|
758
|
+
:small }'
|
759
|
+
- component: Popover
|
760
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/popover_component.rb
|
761
|
+
parameters:
|
762
|
+
- name: system_arguments
|
763
|
+
type: Hash
|
764
|
+
default: N/A
|
765
|
+
description: "[System arguments](/system-arguments)"
|
766
|
+
- component: ProgressBar
|
767
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/progress_bar_component.rb
|
768
|
+
parameters:
|
769
|
+
- name: size
|
770
|
+
type: Symbol
|
771
|
+
default: "`:default`"
|
772
|
+
description: One of `:default`, `:large`, or `:small`. Increases height.
|
773
|
+
- name: system_arguments
|
774
|
+
type: Hash
|
775
|
+
default: N/A
|
776
|
+
description: "[System arguments](/system-arguments)"
|
777
|
+
- component: Spinner
|
778
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/spinner_component.rb
|
779
|
+
parameters:
|
780
|
+
- name: size
|
781
|
+
type: Symbol
|
782
|
+
default: "`:medium`"
|
783
|
+
description: One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`.
|
784
|
+
- name: style
|
785
|
+
type: String
|
786
|
+
default: "`box-sizing: content-box; color: var(--color-icon-primary);`"
|
787
|
+
description: Custom element styles.
|
788
|
+
- name: system_arguments
|
789
|
+
type: Hash
|
790
|
+
default: N/A
|
791
|
+
description: "[System arguments](/system-arguments)"
|
792
|
+
- component: State
|
793
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/state_component.rb
|
794
|
+
parameters:
|
795
|
+
- name: title
|
796
|
+
type: String
|
797
|
+
default: N/A
|
798
|
+
description: "`title` HTML attribute."
|
799
|
+
- name: scheme
|
800
|
+
type: Symbol
|
801
|
+
default: "`:default`"
|
802
|
+
description: Background color. One of `:closed`, `:default`, `:green`, `:merged`,
|
803
|
+
`:open`, `:purple`, or `:red`.
|
804
|
+
- name: tag
|
805
|
+
type: Symbol
|
806
|
+
default: "`:span`"
|
807
|
+
description: HTML tag for element. One of `:div` and `:span`.
|
808
|
+
- name: size
|
809
|
+
type: Symbol
|
810
|
+
default: "`:default`"
|
811
|
+
description: One of `:default` and `:small`.
|
812
|
+
- name: system_arguments
|
813
|
+
type: Hash
|
814
|
+
default: N/A
|
815
|
+
description: "[System arguments](/system-arguments)"
|
816
|
+
- component: Subhead
|
817
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/subhead_component.rb
|
818
|
+
parameters:
|
819
|
+
- name: spacious
|
820
|
+
type: Boolean
|
821
|
+
default: "`false`"
|
822
|
+
description: Whether to add spacing to the Subhead.
|
823
|
+
- name: hide_border
|
824
|
+
type: Boolean
|
825
|
+
default: "`false`"
|
826
|
+
description: Whether to hide the border under the heading.
|
827
|
+
- name: system_arguments
|
828
|
+
type: Hash
|
829
|
+
default: N/A
|
830
|
+
description: "[System arguments](/system-arguments)"
|
831
|
+
- component: TabContainer
|
832
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_container_component.rb
|
833
|
+
parameters:
|
834
|
+
- name: system_arguments
|
835
|
+
type: Hash
|
836
|
+
default: N/A
|
837
|
+
description: "[System arguments](/system-arguments)"
|
838
|
+
- component: TabNav
|
839
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_nav_component.rb
|
840
|
+
parameters:
|
841
|
+
- name: label
|
842
|
+
type: String
|
843
|
+
default: N/A
|
844
|
+
description: Used to set the `aria-label` on the top level `<nav>` element.
|
845
|
+
- name: with_panel
|
846
|
+
type: Boolean
|
847
|
+
default: "`false`"
|
848
|
+
description: Whether the TabNav should navigate through pages or panels. When
|
849
|
+
true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
|
850
|
+
behavior. Additionally, the `tab` slot will render as a button as opposed to
|
851
|
+
an anchor.
|
852
|
+
- name: body_arguments
|
853
|
+
type: Hash
|
854
|
+
default: "`{}`"
|
855
|
+
description: "[System arguments](/system-arguments) for the body wrapper."
|
856
|
+
- name: wrapper_arguments
|
857
|
+
type: Hash
|
858
|
+
default: "`{}`"
|
859
|
+
description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
|
860
|
+
Only applies if `with_panel` is `true`."
|
861
|
+
- name: system_arguments
|
862
|
+
type: Hash
|
863
|
+
default: N/A
|
864
|
+
description: "[System arguments](/system-arguments)"
|
865
|
+
- component: TimeAgo
|
866
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb
|
867
|
+
parameters:
|
868
|
+
- name: time
|
869
|
+
type: Time
|
870
|
+
default: N/A
|
871
|
+
description: The time to be formatted
|
872
|
+
- name: micro
|
873
|
+
type: Boolean
|
874
|
+
default: "`false`"
|
875
|
+
description: If true then the text will be formatted in "micro" mode, using as
|
876
|
+
few characters as possible
|
877
|
+
- name: system_arguments
|
878
|
+
type: Hash
|
879
|
+
default: N/A
|
880
|
+
description: "[System arguments](/system-arguments)"
|
881
|
+
- component: TimelineItem
|
882
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/timeline_item_component.rb
|
883
|
+
parameters:
|
884
|
+
- name: condensed
|
885
|
+
type: Boolean
|
886
|
+
default: "`false`"
|
887
|
+
description: Reduce the vertical padding and remove the background from the badge
|
888
|
+
item. Most commonly used in commits.
|
889
|
+
- name: system_arguments
|
890
|
+
type: Hash
|
891
|
+
default: N/A
|
892
|
+
description: "[System arguments](/system-arguments)"
|
893
|
+
- component: Tooltip
|
894
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb
|
895
|
+
parameters:
|
896
|
+
- name: label
|
897
|
+
type: String
|
898
|
+
default: N/A
|
899
|
+
description: the text to appear in the tooltip
|
900
|
+
- name: direction
|
901
|
+
type: String
|
902
|
+
default: "`:n`"
|
903
|
+
description: Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`,
|
904
|
+
`:se`, `:sw`, or `:w`.
|
905
|
+
- name: align
|
906
|
+
type: String
|
907
|
+
default: "`:default`"
|
908
|
+
description: Align tooltips to the left or right of an element, combined with
|
909
|
+
a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`,
|
910
|
+
`:right_1`, or `:right_2`.
|
911
|
+
- name: multiline
|
912
|
+
type: Boolean
|
913
|
+
default: "`false`"
|
914
|
+
description: Use this when you have long content
|
915
|
+
- name: no_delay
|
916
|
+
type: Boolean
|
917
|
+
default: "`false`"
|
918
|
+
description: By default the tooltips have a slight delay before appearing. Set
|
919
|
+
true to override this
|
920
|
+
- name: system_arguments
|
921
|
+
type: Hash
|
922
|
+
default: N/A
|
923
|
+
description: "[System arguments](/system-arguments)"
|
924
|
+
- component: Truncate
|
925
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb
|
926
|
+
parameters:
|
927
|
+
- name: tag
|
928
|
+
type: Symbol
|
929
|
+
default: "`:div`"
|
930
|
+
description: One of `:div`, `:p`, `:span`, or `:strong`.
|
931
|
+
- name: inline
|
932
|
+
type: Boolean
|
933
|
+
default: "`false`"
|
934
|
+
description: Whether the element is inline (or inline-block).
|
935
|
+
- name: expandable
|
936
|
+
type: Boolean
|
937
|
+
default: "`false`"
|
938
|
+
description: Whether the entire string should be revealed on hover. Can only be
|
939
|
+
used in conjunction with `inline`.
|
940
|
+
- name: max_width
|
941
|
+
type: Integer
|
942
|
+
default: "`nil`"
|
943
|
+
description: Sets the max-width of the text.
|
944
|
+
- name: system_arguments
|
945
|
+
type: Hash
|
946
|
+
default: N/A
|
947
|
+
description: "[System arguments](/system-arguments)"
|
948
|
+
- component: UnderlineNav
|
949
|
+
source: https://github.com/primer/view_components/tree/main/app/components/primer/underline_nav_component.rb
|
950
|
+
parameters:
|
951
|
+
- name: label
|
952
|
+
type: String
|
953
|
+
default: N/A
|
954
|
+
description: The `aria-label` on top level `<nav>` element.
|
955
|
+
- name: with_panel
|
956
|
+
type: Boolean
|
957
|
+
default: "`false`"
|
958
|
+
description: Whether the `UnderlineNav` should navigate through pages or panels.
|
959
|
+
When true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
|
960
|
+
behavior.
|
961
|
+
- name: align
|
962
|
+
type: Symbol
|
963
|
+
default: "`:left`"
|
964
|
+
description: One of `:left` and `:right`. - Defaults to left
|
965
|
+
- name: body_arguments
|
966
|
+
type: Hash
|
967
|
+
default: "`{ tag: BODY_TAG_DEFAULT }`"
|
968
|
+
description: "[System arguments](/system-arguments) for the body wrapper."
|
969
|
+
- name: wrapper_arguments
|
970
|
+
type: Hash
|
971
|
+
default: "`{}`"
|
972
|
+
description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
|
973
|
+
Only applies if `with_panel` is `true`."
|
974
|
+
- name: system_arguments
|
975
|
+
type: Hash
|
976
|
+
default: N/A
|
977
|
+
description: "[System arguments](/system-arguments)"
|