primer_view_components 0.1.4 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/heading.html.erb +1 -1
  8. data/app/components/primer/alpha/action_list/heading.rb +5 -3
  9. data/app/components/primer/alpha/action_list/item.html.erb +9 -0
  10. data/app/components/primer/alpha/action_list/item.rb +32 -11
  11. data/app/components/primer/alpha/action_list.css +1 -1
  12. data/app/components/primer/alpha/action_list.css.json +4 -41
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.pcss +19 -20
  15. data/app/components/primer/alpha/action_list.rb +54 -6
  16. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +23 -0
  17. data/app/components/primer/alpha/action_menu/action_menu_element.js +165 -0
  18. data/app/components/primer/alpha/action_menu/action_menu_element.ts +168 -0
  19. data/app/components/primer/alpha/action_menu/list.rb +91 -0
  20. data/app/components/primer/alpha/action_menu.html.erb +26 -0
  21. data/app/components/primer/alpha/action_menu.rb +361 -0
  22. data/app/components/primer/alpha/auto_complete.css.json +0 -11
  23. data/app/components/primer/alpha/banner.css.json +0 -14
  24. data/app/components/primer/alpha/button_marketing.css.json +0 -10
  25. data/app/components/primer/alpha/dialog.css +1 -1
  26. data/app/components/primer/alpha/dialog.css.json +0 -65
  27. data/app/components/primer/alpha/dialog.css.map +1 -1
  28. data/app/components/primer/alpha/dialog.pcss +0 -4
  29. data/app/components/primer/alpha/dialog.rb +6 -2
  30. data/app/components/primer/alpha/dropdown/menu.rb +1 -1
  31. data/app/components/primer/alpha/dropdown.css.json +0 -21
  32. data/app/components/primer/alpha/layout.css.json +0 -27
  33. data/app/components/primer/alpha/menu.css.json +0 -11
  34. data/app/components/primer/alpha/modal_dialog.js +12 -0
  35. data/app/components/primer/alpha/modal_dialog.ts +17 -0
  36. data/app/components/primer/alpha/nav_list/item.rb +5 -0
  37. data/app/components/primer/alpha/overlay.css +1 -1
  38. data/app/components/primer/alpha/overlay.css.json +0 -3
  39. data/app/components/primer/alpha/overlay.css.map +1 -1
  40. data/app/components/primer/alpha/overlay.pcss +1 -0
  41. data/app/components/primer/alpha/overlay.rb +19 -19
  42. data/app/components/primer/alpha/segmented_control.css.json +0 -15
  43. data/app/components/primer/alpha/tab_nav.css.json +0 -10
  44. data/app/components/primer/alpha/text_field.css.json +0 -38
  45. data/app/components/primer/alpha/toggle_switch.css.json +0 -16
  46. data/app/components/primer/alpha/underline_nav.css.json +0 -13
  47. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -1
  48. data/app/components/primer/beta/auto_complete.rb +19 -1
  49. data/app/components/primer/beta/avatar.css.json +0 -14
  50. data/app/components/primer/beta/avatar_stack.css.json +0 -9
  51. data/app/components/primer/beta/blankslate.css.json +0 -12
  52. data/app/components/primer/beta/border_box.css.json +0 -32
  53. data/app/components/primer/beta/border_box.rb +3 -3
  54. data/app/components/primer/beta/breadcrumbs.css.json +0 -4
  55. data/app/components/primer/beta/button.css +1 -1
  56. data/app/components/primer/beta/button.css.json +0 -24
  57. data/app/components/primer/beta/button.css.map +1 -1
  58. data/app/components/primer/beta/button.pcss +5 -7
  59. data/app/components/primer/beta/counter.css.json +0 -6
  60. data/app/components/primer/beta/flash.css.json +0 -15
  61. data/app/components/primer/beta/label.css.json +0 -20
  62. data/app/components/primer/beta/link.css.json +0 -8
  63. data/app/components/primer/beta/popover.css.json +0 -18
  64. data/app/components/primer/beta/progress_bar.css.json +0 -6
  65. data/app/components/primer/beta/state.css.json +0 -10
  66. data/app/components/primer/beta/subhead.css.json +0 -8
  67. data/app/components/primer/beta/timeline_item.css.json +0 -9
  68. data/app/components/primer/beta/truncate.css.json +0 -6
  69. data/app/components/primer/focus_group.d.ts +19 -0
  70. data/app/components/primer/focus_group.js +144 -0
  71. data/app/components/primer/focus_group.ts +137 -0
  72. data/app/components/primer/icon_button.rb +1 -1
  73. data/app/components/primer/primer.d.ts +2 -0
  74. data/app/components/primer/primer.js +2 -0
  75. data/app/components/primer/primer.ts +2 -0
  76. data/app/components/primer/truncate.css.json +0 -7
  77. data/app/lib/primer/css/layout.css.json +0 -263
  78. data/app/lib/primer/css/utilities.css.json +0 -1636
  79. data/lib/primer/static/generate_arguments.rb +55 -0
  80. data/lib/primer/static/generate_audited_at.rb +17 -0
  81. data/lib/primer/static/generate_constants.rb +19 -0
  82. data/lib/primer/static/generate_info_arch.rb +156 -0
  83. data/lib/primer/static/generate_previews.rb +45 -0
  84. data/lib/primer/static/generate_statuses.rb +17 -0
  85. data/lib/primer/static.rb +72 -0
  86. data/lib/primer/view_components/linters/disallow_component_css_counter.rb +43 -4
  87. data/lib/primer/view_components/version.rb +1 -1
  88. data/lib/primer/view_components.rb +0 -48
  89. data/lib/primer/yard/component_manifest.rb +1 -0
  90. data/lib/primer/yard/component_ref.rb +14 -0
  91. data/lib/primer/yard/docs_helper.rb +3 -0
  92. data/lib/primer/yard/info_arch_docs_helper.rb +31 -0
  93. data/lib/primer/yard/legacy_gatsby_backend.rb +3 -35
  94. data/lib/primer/yard/registry.rb +2 -1
  95. data/lib/primer/yard.rb +1 -0
  96. data/lib/tasks/docs.rake +10 -12
  97. data/lib/tasks/static.rake +20 -28
  98. data/previews/primer/alpha/action_list_preview.rb +4 -1
  99. data/previews/primer/alpha/action_menu_preview/align_end.html.erb +6 -0
  100. data/previews/primer/alpha/action_menu_preview/content_labels.html.erb +9 -0
  101. data/previews/primer/alpha/action_menu_preview/opens_dialog.html.erb +21 -0
  102. data/previews/primer/alpha/action_menu_preview.rb +245 -0
  103. data/previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb +2 -2
  104. data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -3
  105. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +4 -4
  106. data/previews/primer/alpha/dialog_preview/test.html.erb +3 -3
  107. data/previews/primer/alpha/dialog_preview/with_footer.html.erb +3 -3
  108. data/previews/primer/alpha/dialog_preview/with_form.html.erb +1 -1
  109. data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +2 -2
  110. data/previews/primer/alpha/dialog_preview.rb +7 -2
  111. data/previews/primer/beta/auto_complete_item_preview.rb +1 -0
  112. data/previews/primer/beta/auto_complete_preview.rb +36 -23
  113. data/static/arguments.json +3085 -1405
  114. data/static/audited_at.json +2 -0
  115. data/static/classes.json +576 -311
  116. data/static/constants.json +53 -2
  117. data/static/info_arch.json +8888 -0
  118. data/static/previews.json +226 -101
  119. data/static/statuses.json +2 -0
  120. metadata +28 -6
data/previews/primer/beta/auto_complete_preview.rb CHANGED
@@ -13,6 +13,7 @@ module Primer
13
13
  # @param placeholder text
14
14
  # @param size select [small, medium, large]
15
15
  # @param full_width toggle
16
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
16
17
  # @param disabled toggle
17
18
  # @param invalid toggle
18
19
  # @param input_id text
@@ -20,8 +21,8 @@ module Primer
20
21
  # @param input_name text
21
22
  # @param inset toggle
22
23
  # @param monospace toggle
23
- def playground(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
24
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
24
+ def playground(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
25
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
25
26
  component.with_leading_visual_icon(icon: :search)
26
27
  end
27
28
  end
@@ -33,6 +34,7 @@ module Primer
33
34
  # @param placeholder text
34
35
  # @param size select [small, medium, large]
35
36
  # @param full_width toggle
37
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
36
38
  # @param disabled toggle
37
39
  # @param invalid toggle
38
40
  # @param input_id text
@@ -40,8 +42,8 @@ module Primer
40
42
  # @param input_name text
41
43
  # @param inset toggle
42
44
  # @param monospace toggle
43
- def default(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
44
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
45
+ def default(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
46
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
45
47
  component.with_leading_visual_icon(icon: :search)
46
48
  end
47
49
  end
@@ -53,12 +55,13 @@ module Primer
53
55
  # @param placeholder text
54
56
  # @param size select [small, medium, large]
55
57
  # @param full_width toggle
58
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
56
59
  # @param disabled toggle
57
60
  # @param invalid toggle
58
61
  # @param input_id text
59
62
  # @param list_id text
60
63
  # @param input_name text
61
- def with_submit_button(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
64
+ def with_submit_button(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
62
65
  render_with_template(locals: {
63
66
  label_text: label_text,
64
67
  show_clear_button: show_clear_button,
@@ -66,6 +69,7 @@ module Primer
66
69
  placeholder: placeholder,
67
70
  size: size,
68
71
  full_width: full_width,
72
+ width: width,
69
73
  disabled: disabled,
70
74
  invalid: invalid,
71
75
  input_id: input_id,
@@ -81,13 +85,14 @@ module Primer
81
85
  # @param placeholder text
82
86
  # @param size select [small, medium, large]
83
87
  # @param full_width toggle
88
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
84
89
  # @param disabled toggle
85
90
  # @param invalid toggle
86
91
  # @param input_id text
87
92
  # @param list_id text
88
93
  # @param input_name text
89
- def leading_visual(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
90
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
94
+ def leading_visual(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
95
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
91
96
  component.with_leading_visual_icon(icon: :search)
92
97
  end
93
98
  end
@@ -99,13 +104,14 @@ module Primer
99
104
  # @param placeholder text
100
105
  # @param size select [small, medium, large]
101
106
  # @param full_width toggle
107
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
102
108
  # @param disabled toggle
103
109
  # @param invalid toggle
104
110
  # @param input_id text
105
111
  # @param list_id text
106
112
  # @param input_name text
107
- def trailing_action(label_text: "Select a fruit", show_clear_button: true, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
108
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
113
+ def trailing_action(label_text: "Select a fruit", show_clear_button: true, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
114
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name))
109
115
  end
110
116
 
111
117
  # @label Full width
@@ -115,13 +121,14 @@ module Primer
115
121
  # @param placeholder text
116
122
  # @param size select [small, medium, large]
117
123
  # @param full_width toggle
124
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
118
125
  # @param disabled toggle
119
126
  # @param invalid toggle
120
127
  # @param input_id text
121
128
  # @param list_id text
122
129
  # @param input_name text
123
- def full_width(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
124
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
130
+ def full_width(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
131
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
125
132
  component.with_leading_visual_icon(icon: :search)
126
133
  end
127
134
  end
@@ -133,13 +140,14 @@ module Primer
133
140
  # @param placeholder text
134
141
  # @param size select [small, medium, large]
135
142
  # @param full_width toggle
143
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
136
144
  # @param disabled toggle
137
145
  # @param invalid toggle
138
146
  # @param input_id text
139
147
  # @param list_id text
140
148
  # @param input_name text
141
- def visually_hide_label(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: true, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
142
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
149
+ def visually_hide_label(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: true, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
150
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
143
151
  component.with_leading_visual_icon(icon: :search)
144
152
  end
145
153
  end
@@ -152,13 +160,14 @@ module Primer
152
160
  # @param placeholder text
153
161
  # @param size select [small, medium, large]
154
162
  # @param full_width toggle
163
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
155
164
  # @param disabled toggle
156
165
  # @param invalid toggle
157
166
  # @param input_id text
158
167
  # @param list_id text
159
168
  # @param input_name text
160
- def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, disabled: false, invalid: false, input_id: "input-id-1", list_id: "list-id-1", input_name: "input-id-1")
161
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
169
+ def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-1", list_id: "list-id-1", input_name: "input-id-1")
170
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
162
171
  component.with_leading_visual_icon(icon: :search)
163
172
  end
164
173
  end
@@ -169,13 +178,14 @@ module Primer
169
178
  # @param placeholder text
170
179
  # @param size select [small, medium, large]
171
180
  # @param full_width toggle
181
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
172
182
  # @param disabled toggle
173
183
  # @param invalid toggle
174
184
  # @param input_id text
175
185
  # @param list_id text
176
186
  # @param input_name text
177
- def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id-2", list_id: "list-id-2", input_name: "input-id-2")
178
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
187
+ def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-2", list_id: "list-id-2", input_name: "input-id-2")
188
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
179
189
  component.with_leading_visual_icon(icon: :search)
180
190
  end
181
191
  end
@@ -186,13 +196,14 @@ module Primer
186
196
  # @param placeholder text
187
197
  # @param size select [small, medium, large]
188
198
  # @param full_width toggle
199
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
189
200
  # @param disabled toggle
190
201
  # @param invalid toggle
191
202
  # @param input_id text
192
203
  # @param list_id text
193
204
  # @param input_name text
194
- def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, disabled: false, invalid: false, input_id: "input-id-3", list_id: "list-id-3", input_name: "input-id-3")
195
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
205
+ def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id-3", list_id: "list-id-3", input_name: "input-id-3")
206
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
196
207
  component.with_leading_visual_icon(icon: :search)
197
208
  end
198
209
  end
@@ -206,13 +217,14 @@ module Primer
206
217
  # @param placeholder text
207
218
  # @param size select [small, medium, large]
208
219
  # @param full_width toggle
220
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
209
221
  # @param disabled toggle
210
222
  # @param invalid toggle
211
223
  # @param input_id text
212
224
  # @param list_id text
213
225
  # @param input_name text
214
- def leading_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
215
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path(visual: "leading"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
226
+ def leading_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
227
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path(visual: "leading"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name))
216
228
  end
217
229
 
218
230
  # @label Trailing visual in results
@@ -222,13 +234,14 @@ module Primer
222
234
  # @param placeholder text
223
235
  # @param size select [small, medium, large]
224
236
  # @param full_width toggle
237
+ # @param width select [auto, small, medium, large, xlarge, xxlarge]
225
238
  # @param disabled toggle
226
239
  # @param invalid toggle
227
240
  # @param input_id text
228
241
  # @param list_id text
229
242
  # @param input_name text
230
- def trailing_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
231
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path(visual: "trailing"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
243
+ def trailing_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
244
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path(visual: "trailing"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name))
232
245
  end
233
246
 
234
247
  # @hidden