primer_view_components 0.0.120 → 0.0.122

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.
Files changed (172) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +58 -0
  3. data/app/assets/styles/primer_view_components.css +2 -2
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/action_list.css.json +123 -1
  6. data/app/components/primer/alpha/auto_complete.css.json +23 -1
  7. data/app/components/primer/alpha/banner.css.json +24 -1
  8. data/app/components/primer/alpha/button_marketing.css.json +33 -1
  9. data/app/components/primer/alpha/check_box.rb +74 -0
  10. data/app/components/primer/alpha/check_box_group.rb +36 -0
  11. data/app/components/primer/alpha/dialog.css.json +82 -1
  12. data/app/components/primer/alpha/dialog.rb +1 -1
  13. data/app/components/primer/alpha/dropdown.css.json +40 -1
  14. data/app/components/primer/alpha/form_button.rb +32 -0
  15. data/app/components/primer/alpha/form_control.html.erb +26 -0
  16. data/app/components/primer/alpha/form_control.rb +105 -0
  17. data/app/components/primer/alpha/layout.css.json +80 -1
  18. data/app/components/primer/alpha/menu.css.json +28 -1
  19. data/app/components/primer/alpha/multi_input.rb +81 -0
  20. data/app/components/primer/alpha/radio_button.rb +25 -0
  21. data/app/components/primer/alpha/radio_button_group.rb +36 -0
  22. data/app/components/primer/alpha/segmented_control/item.rb +1 -0
  23. data/app/components/primer/alpha/segmented_control.css +1 -1
  24. data/app/components/primer/alpha/segmented_control.css.json +31 -1
  25. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  26. data/app/components/primer/alpha/segmented_control.pcss +43 -12
  27. data/app/components/primer/alpha/segmented_control.rb +30 -0
  28. data/app/components/primer/alpha/select.rb +37 -0
  29. data/app/components/primer/alpha/submit_button.rb +32 -0
  30. data/app/components/primer/alpha/tab_nav.css.json +24 -1
  31. data/app/components/primer/alpha/tab_panels.rb +7 -0
  32. data/app/components/primer/alpha/text_area.rb +24 -0
  33. data/app/components/primer/alpha/text_field.css +2 -2
  34. data/app/components/primer/alpha/text_field.css.json +134 -1
  35. data/app/components/primer/alpha/text_field.css.map +1 -1
  36. data/app/components/primer/alpha/text_field.pcss +27 -0
  37. data/app/components/primer/alpha/text_field.rb +16 -20
  38. data/app/components/primer/alpha/toggle_switch.css +1 -1
  39. data/app/components/primer/alpha/toggle_switch.css.json +40 -1
  40. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  41. data/app/components/primer/alpha/toggle_switch.pcss +31 -61
  42. data/app/components/primer/alpha/underline_nav.css.json +28 -1
  43. data/app/components/primer/base_component.rb +3 -3
  44. data/app/components/primer/beta/avatar.css.json +17 -1
  45. data/app/components/primer/beta/avatar_stack.css.json +28 -1
  46. data/app/components/primer/beta/blankslate.css.json +22 -1
  47. data/app/components/primer/beta/border_box.css.json +54 -1
  48. data/app/components/primer/beta/breadcrumbs.css.json +11 -1
  49. data/app/components/primer/beta/button.css.json +71 -1
  50. data/app/components/primer/beta/close_button.rb +1 -1
  51. data/app/components/primer/beta/counter.css.json +10 -1
  52. data/app/components/primer/beta/flash.css.json +27 -1
  53. data/app/components/primer/beta/label.css.json +25 -1
  54. data/app/components/primer/beta/link.css.json +19 -1
  55. data/app/components/primer/beta/popover.css.json +39 -1
  56. data/app/components/primer/beta/progress_bar.css.json +10 -1
  57. data/app/components/primer/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
  58. data/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
  59. data/app/components/primer/{local_time.ts → beta/relative_time.ts} +0 -0
  60. data/app/components/primer/beta/state.css.json +13 -1
  61. data/app/components/primer/beta/subhead.css.json +12 -1
  62. data/app/components/primer/beta/timeline_item.css.json +16 -1
  63. data/app/components/primer/beta/truncate.css.json +12 -1
  64. data/app/components/primer/component.rb +12 -3
  65. data/app/components/primer/primer.d.ts +1 -2
  66. data/app/components/primer/primer.js +1 -2
  67. data/app/components/primer/primer.ts +1 -2
  68. data/app/components/primer/truncate.css.json +13 -1
  69. data/app/forms/example_toggle_switch_form.rb +1 -1
  70. data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
  71. data/app/lib/primer/css/layout.css.json +316 -1
  72. data/app/lib/primer/css/utilities.css.json +1659 -1
  73. data/app/lib/primer/view_helper.rb +0 -1
  74. data/lib/primer/deprecations.yml +0 -78
  75. data/lib/primer/form_components.rb +26 -6
  76. data/lib/primer/forms/acts_as_component.rb +12 -1
  77. data/lib/primer/forms/builder.rb +1 -17
  78. data/lib/primer/forms/button.rb +4 -1
  79. data/lib/primer/forms/check_box_group.html.erb +14 -9
  80. data/lib/primer/forms/check_box_group.rb +5 -0
  81. data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
  82. data/lib/primer/forms/dsl/input.rb +33 -2
  83. data/lib/primer/forms/dsl/input_methods.rb +49 -1
  84. data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
  85. data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
  86. data/lib/primer/forms/dsl/text_field_input.rb +7 -5
  87. data/lib/primer/forms/form_control.rb +0 -1
  88. data/lib/primer/forms/group.html.erb +1 -1
  89. data/lib/primer/forms/multi.html.erb +8 -6
  90. data/lib/primer/forms/multi.rb +2 -0
  91. data/lib/primer/forms/radio_button_group.html.erb +14 -9
  92. data/lib/primer/forms/radio_button_group.rb +5 -0
  93. data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
  94. data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
  95. data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
  96. data/lib/primer/forms/text_area.rb +1 -1
  97. data/lib/primer/forms/text_field.rb +5 -1
  98. data/lib/primer/forms/toggle_switch_form.rb +10 -3
  99. data/lib/primer/forms/utils.rb +20 -0
  100. data/lib/primer/view_components/engine.rb +1 -1
  101. data/lib/primer/view_components/version.rb +1 -1
  102. data/lib/primer/yard/backend.rb +1 -15
  103. data/lib/primer/yard/component_manifest.rb +44 -27
  104. data/lib/primer/yard/component_ref.rb +40 -0
  105. data/lib/primer/yard/docs_helper.rb +16 -2
  106. data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
  107. data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
  108. data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
  109. data/lib/primer/yard/registry.rb +6 -21
  110. data/lib/primer/yard/renders_many_handler.rb +1 -1
  111. data/lib/primer/yard/renders_one_handler.rb +1 -1
  112. data/lib/primer/yard.rb +14 -0
  113. data/lib/tasks/docs.rake +26 -13
  114. data/lib/tasks/static.rake +22 -0
  115. data/previews/pages/forms/01_introduction.md.erb +44 -0
  116. data/previews/pages/forms/02_getting_started.md.erb +125 -0
  117. data/previews/pages/forms/03_caption_templates.md.erb +30 -0
  118. data/previews/pages/forms/04_after_content.md.erb +39 -0
  119. data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
  120. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
  121. data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
  122. data/previews/pages/forms/08_validations.md.erb +28 -0
  123. data/previews/pages/forms/09_compound_forms.md.erb +97 -0
  124. data/previews/primer/alpha/auto_complete_preview.rb +6 -6
  125. data/previews/primer/alpha/check_box_group_preview.rb +89 -0
  126. data/previews/primer/alpha/check_box_preview.rb +62 -0
  127. data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
  128. data/previews/primer/alpha/form_control_preview.rb +106 -0
  129. data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
  130. data/previews/primer/alpha/multi_input_preview.rb +80 -0
  131. data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
  132. data/previews/primer/alpha/radio_button_preview.rb +62 -0
  133. data/previews/primer/alpha/segmented_control_preview/with_label_and_caption.html.erb +9 -0
  134. data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb +11 -0
  135. data/previews/primer/alpha/segmented_control_preview.rb +7 -1
  136. data/previews/primer/alpha/select_preview.rb +130 -0
  137. data/previews/primer/alpha/text_area_preview.rb +87 -0
  138. data/previews/primer/alpha/text_field_preview.rb +24 -1
  139. data/previews/primer/alpha/toggle_switch_preview.rb +9 -9
  140. data/previews/primer/beta/auto_complete_preview.rb +17 -17
  141. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
  142. data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
  143. data/previews/primer/forms/forms_preview.rb +3 -1
  144. data/previews/primer/url_helpers.rb +1 -1
  145. data/static/arguments.json +1348 -1412
  146. data/static/audited_at.json +12 -21
  147. data/static/constants.json +20 -51
  148. data/static/previews.json +1812 -0
  149. data/static/statuses.json +10 -19
  150. metadata +47 -32
  151. data/app/components/primer/dropdown/menu.rb +0 -14
  152. data/app/components/primer/dropdown.rb +0 -7
  153. data/app/components/primer/hellip_button.rb +0 -7
  154. data/app/components/primer/label_component.rb +0 -7
  155. data/app/components/primer/link_component.rb +0 -7
  156. data/app/components/primer/local_time.rb +0 -63
  157. data/app/components/primer/markdown.rb +0 -7
  158. data/app/components/primer/menu_component.rb +0 -7
  159. data/app/components/primer/octicon_component.rb +0 -7
  160. data/app/components/primer/octicon_symbols_component.rb +0 -7
  161. data/app/components/primer/popover_component.rb +0 -8
  162. data/app/components/primer/spinner_component.rb +0 -7
  163. data/app/components/primer/state_component.rb +0 -7
  164. data/app/components/primer/subhead_component.rb +0 -7
  165. data/app/components/primer/tab_container_component.rb +0 -7
  166. data/app/components/primer/time_ago_component.d.ts +0 -1
  167. data/app/components/primer/time_ago_component.js +0 -1
  168. data/app/components/primer/time_ago_component.rb +0 -51
  169. data/app/components/primer/time_ago_component.ts +0 -1
  170. data/app/components/primer/timeline_item_component.rb +0 -13
  171. data/previews/primer/local_time_component_preview.rb +0 -57
  172. data/previews/primer/time_ago_component_preview.rb +0 -27
@@ -0,0 +1,105 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.
6
+ # NOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer
7
+ # forms framework.
8
+ class FormControl < Primer::Component
9
+ # Describes the field and what sorts of input it expects. Displayed below the input.
10
+ # Note that this slot takes precedence over the `caption:` argument in the constructor.
11
+ renders_one :caption
12
+
13
+ # @example Default
14
+ # <%= render(Primer::Alpha::FormControl.new(label: "Best character")) do |component| %>
15
+ # <% component.with_input do |input_arguments| %>
16
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
17
+ # <% seg.with_item(label: "Han Solo") %>
18
+ # <% seg.with_item(label: "Luke Skywalker") %>
19
+ # <% seg.with_item(label: "Leia Organa") %>
20
+ # <% end %>
21
+ # <% end %>
22
+ # <% end %>
23
+ #
24
+ # @param label [String] Label text displayed above the input.
25
+ # @param caption [String] Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided.
26
+ # @param validation_message [String] A string displayed in red between the caption and the input indicating the input's contents are invalid.
27
+ # @param required [Boolean] Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system.
28
+ # @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
29
+ # @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
30
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
31
+ def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, **system_arguments)
32
+ @label = label
33
+ @init_caption = caption
34
+ @validation_message = validation_message
35
+ @required = required
36
+ @visually_hide_label = visually_hide_label
37
+ @full_width = full_width
38
+ @system_arguments = system_arguments
39
+
40
+ @system_arguments[:classes] = class_names(
41
+ @system_arguments[:classes],
42
+ "FormControl",
43
+ "FormControl--fullWidth" => full_width?
44
+ )
45
+
46
+ @label_arguments = {
47
+ classes: class_names(
48
+ "FormControl-label",
49
+ visually_hide_label? ? "sr-only" : nil
50
+ )
51
+ }
52
+
53
+ base_id = self.class.generate_id
54
+ @validation_id = "validation-#{base_id}"
55
+ @caption_id = "caption-#{base_id}"
56
+
57
+ @validation_arguments = {
58
+ classes: "FormControl-inlineValidation",
59
+ id: @validation_id
60
+ }
61
+ end
62
+
63
+ # @!parse
64
+ # # The input content. Yields a set of <%= link_to_system_arguments_docs %> that should be added to the input.
65
+ # #
66
+ # renders_one(:input)
67
+
68
+ def with_input(&block)
69
+ @input_block = block
70
+ end
71
+
72
+ def required?
73
+ @required
74
+ end
75
+
76
+ def visually_hide_label?
77
+ @visually_hide_label
78
+ end
79
+
80
+ def full_width?
81
+ @full_width
82
+ end
83
+
84
+ private
85
+
86
+ def before_render
87
+ # make sure to evaluate the component's content block so slots are defined
88
+ content
89
+
90
+ @input_arguments = {
91
+ aria: {}
92
+ }
93
+
94
+ ids = [].tap do |memo|
95
+ memo << @validation_id if @validation_message
96
+ memo << @caption_id if @init_caption || caption?
97
+ end
98
+
99
+ return if ids.empty?
100
+
101
+ @input_arguments[:aria][:describedby] = ids.join(" ")
102
+ end
103
+ end
104
+ end
105
+ end
@@ -1 +1,80 @@
1
- {"name":"alpha/layout","selectors":[".Layout",".Layout .Layout-divider",".Layout .Layout-main",".Layout .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-divider",".Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-divider",".Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-md",".Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-lg>.container-lg",".Layout-main .Layout-main-centered-lg>.container-md",".Layout-main .Layout-main-centered-lg>.container-xl",".Layout-main .Layout-main-centered-md>.container-lg",".Layout-main .Layout-main-centered-md>.container-md",".Layout-main .Layout-main-centered-md>.container-xl",".Layout-main .Layout-main-centered-xl>.container-lg",".Layout-main .Layout-main-centered-xl>.container-md",".Layout-main .Layout-main-centered-xl>.container-xl"]}
1
+ {
2
+ "name": "alpha/layout",
3
+ "selectors": [
4
+ ".Layout",
5
+ ".Layout .Layout-divider",
6
+ ".Layout .Layout-main",
7
+ ".Layout .Layout-sidebar",
8
+ ".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
9
+ ".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
10
+ ".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
11
+ ".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",
12
+ ".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
13
+ ".Layout.Layout--divided",
14
+ ".Layout.Layout--divided .Layout-divider",
15
+ ".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
16
+ ".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
17
+ ".Layout.Layout--divided .Layout-main",
18
+ ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
19
+ ".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
20
+ ".Layout.Layout--flowRow-until-md",
21
+ ".Layout.Layout--flowRow-until-md .Layout-divider",
22
+ ".Layout.Layout--flowRow-until-md .Layout-main",
23
+ ".Layout.Layout--flowRow-until-md .Layout-sidebar",
24
+ ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
25
+ ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
26
+ ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",
27
+ ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",
28
+ ".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
29
+ ".Layout.Layout--flowRow-until-md.Layout--divided",
30
+ ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",
31
+ ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
32
+ ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
33
+ ".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",
34
+ ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
35
+ ".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
36
+ ".Layout.Layout--flowRow-until-lg",
37
+ ".Layout.Layout--flowRow-until-lg .Layout-divider",
38
+ ".Layout.Layout--flowRow-until-lg .Layout-main",
39
+ ".Layout.Layout--flowRow-until-lg .Layout-sidebar",
40
+ ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
41
+ ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
42
+ ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",
43
+ ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",
44
+ ".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
45
+ ".Layout.Layout--flowRow-until-lg.Layout--divided",
46
+ ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",
47
+ ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
48
+ ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
49
+ ".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",
50
+ ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
51
+ ".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
52
+ ".Layout.Layout--gutter-none",
53
+ ".Layout.Layout--gutter-condensed",
54
+ ".Layout.Layout--gutter-spacious",
55
+ ".Layout.Layout--sidebar-narrow",
56
+ ".Layout.Layout--sidebar-wide",
57
+ ".Layout.Layout--sidebarPosition-start .Layout-sidebar",
58
+ ".Layout.Layout--sidebarPosition-start .Layout-main",
59
+ ".Layout.Layout--sidebarPosition-end",
60
+ ".Layout.Layout--sidebarPosition-end .Layout-main",
61
+ ".Layout.Layout--sidebarPosition-end .Layout-sidebar",
62
+ ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",
63
+ ".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",
64
+ ".Layout-divider",
65
+ ".Layout-sidebar",
66
+ ".Layout-main",
67
+ ".Layout-main .Layout-main-centered-lg",
68
+ ".Layout-main .Layout-main-centered-md",
69
+ ".Layout-main .Layout-main-centered-xl",
70
+ ".Layout-main .Layout-main-centered-lg>.container-lg",
71
+ ".Layout-main .Layout-main-centered-lg>.container-md",
72
+ ".Layout-main .Layout-main-centered-lg>.container-xl",
73
+ ".Layout-main .Layout-main-centered-md>.container-lg",
74
+ ".Layout-main .Layout-main-centered-md>.container-md",
75
+ ".Layout-main .Layout-main-centered-md>.container-xl",
76
+ ".Layout-main .Layout-main-centered-xl>.container-lg",
77
+ ".Layout-main .Layout-main-centered-xl>.container-md",
78
+ ".Layout-main .Layout-main-centered-xl>.container-xl"
79
+ ]
80
+ }
@@ -1 +1,28 @@
1
- {"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",".menu-item.selected:before",".menu-item[aria-current]:not([aria-current=false]):before",".menu-item[aria-selected=true]:before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}
1
+ {
2
+ "name": "alpha/menu",
3
+ "selectors": [
4
+ ".menu",
5
+ ".menu-item",
6
+ ".menu-item:first-child",
7
+ ".menu-item:first-child:before",
8
+ ".menu-item:last-child",
9
+ ".menu-item:last-child:before",
10
+ ".menu-item:hover",
11
+ ".menu-item:active",
12
+ ".menu-item.selected",
13
+ ".menu-item[aria-current]:not([aria-current=false])",
14
+ ".menu-item[aria-selected=true]",
15
+ ".menu-item.selected:before",
16
+ ".menu-item[aria-current]:not([aria-current=false]):before",
17
+ ".menu-item[aria-selected=true]:before",
18
+ ".menu-item .octicon",
19
+ ".menu-item .Counter",
20
+ ".menu-item .menu-warning",
21
+ ".menu-item .avatar",
22
+ ".menu-item.alert .Counter",
23
+ ".menu-heading",
24
+ ".menu-heading:hover",
25
+ ".menu-heading:first-child",
26
+ ".menu-heading:last-child"
27
+ ]
28
+ }
@@ -0,0 +1,81 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ MultiInput = Primer::FormComponents.from_input(Primer::Forms::Dsl::MultiInput)
6
+
7
+ # Multi inputs are comprised of multiple constituent fields, only one of which is visible
8
+ # at a given time. They are designed for situations where constituent inputs are shown or
9
+ # hidden based on the value of another field. For example, consider an address form. If
10
+ # the user chooses the USA as the country, the region input should show a list of states
11
+ # and US territories; if the user instead chooses Canada, the region input should show a
12
+ # list of Canadian provinces, etc.
13
+ #
14
+ # Unlike everywhere else in Primer forms, constituent inputs are not directly passed a
15
+ # `name` attribute. Instead, developers pass a `name` attribute to the multi input itself.
16
+ # The multi input then automatically assigns each constituent input the same name. This is
17
+ # done so that the multi input looks like a single field from the server's point of view.
18
+ # Using the address form example from earlier, this means only one value - either a US state
19
+ # or a Canadian provice - will be submitted to the server under the `region` key.
20
+ #
21
+ # Actually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to
22
+ # the input as the `data-name` attribute as a way to identify constituent inputs, and will not
23
+ # be sent to the server.
24
+ #
25
+ # @form_usage
26
+ # class ExampleForm < ApplicationForm
27
+ # form do |example_form|
28
+ # example_form.multi(attributes) do |multi|
29
+ # # can define any number of child inputs, for example:
30
+ # multi.text_field(text_field_attributes)
31
+ # multi.select_list(select_list_attributes, hidden: true) do |list|
32
+ # list.option(option_attributes)
33
+ # list.option(option_attributes)
34
+ # end
35
+ # end
36
+ # end
37
+ # end
38
+ class MultiInput < Primer::Component
39
+ # @!parse include Primer::Forms::Dsl::InputMethods
40
+
41
+ status :alpha
42
+
43
+ # @!method initialize
44
+ #
45
+ # @example Default
46
+ # <%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
47
+ # <% c.option(label: "Meatatarian", value: "meatatarian") %>
48
+ # <% c.option(label: "Vegetarian", value: "vegetarian") %>
49
+ # <% end %>
50
+ #
51
+ # <%= render(Primer::Alpha::MultiInput.new(name: :dish, label: "Select dish")) do |c| %>
52
+ # <% c.select_list(name: :meatatarian) do |list| %>
53
+ # <% list.option(label: "Steak", value: "steak") %>
54
+ # <% list.option(label: "Salmon", value: "salmon") %>
55
+ # <% end %>
56
+ # <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
57
+ # <% list.option(label: "Portobello mushroom", value: "portobello") %>
58
+ # <% list.option(label: "Tofu curry", value: "tofu") %>
59
+ # <% end %>
60
+ # <% end %>
61
+ #
62
+ # <script type="text/javascript" data-eval="true">
63
+ # const dietaryPrefList = document.querySelector("[name=dietary_pref]");
64
+ # const dishMulti = document.querySelector("[data-name=dish]");
65
+ #
66
+ # dietaryPrefList.onchange = (evt) => {
67
+ # switch (evt.target.value) {
68
+ # case 'meatatarian':
69
+ # dishMulti.activateField('meatatarian');
70
+ # break;
71
+ # case 'vegetarian':
72
+ # dishMulti.activateField('vegetarian');
73
+ # break;
74
+ # }
75
+ # };
76
+ # </script>
77
+ #
78
+ # @macro form_input_arguments
79
+ end
80
+ end
81
+ end
@@ -0,0 +1,25 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ RadioButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonInput)
6
+
7
+ # Radio buttons represent one of a set of options and are rendered as `<input type="radio">` in HTML.
8
+ # **NOTE**: You probably want to use the <%= link_to_component(Primer::Alpha::RadioButtonGroup) %>
9
+ # component instead, as it allows rendering a group of options.
10
+ #
11
+ # @form_usage
12
+ # class ExampleForm < ApplicationForm
13
+ # form do |example_form|
14
+ # example_form.radio_button(attributes)
15
+ # end
16
+ # end
17
+ class RadioButton < Primer::Component
18
+ status :alpha
19
+
20
+ # @!method initialize
21
+ #
22
+ # @!macro form_input_arguments
23
+ end
24
+ end
25
+ end
@@ -0,0 +1,36 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ RadioButtonGroup = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonGroupInput)
6
+
7
+ # A group of mutually exclusive radio buttons.
8
+ #
9
+ # @form_usage
10
+ # class ExampleForm < ApplicationForm
11
+ # form do |example_form|
12
+ # example_form.radio_button_group(attributes) do |group|
13
+ # group.radio_button(radio_button_attributes)
14
+ # end
15
+ # end
16
+ # end
17
+ class RadioButtonGroup < Primer::Component
18
+ status :alpha
19
+
20
+ # @!method initialize
21
+ #
22
+ # @param name [String] Value for the HTML name attribute.
23
+ # @param label [String] Label text displayed above the input.
24
+ # @param hidden [Boolean] When set to `true`, visually hides the group.
25
+ # @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
26
+ # @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
27
+
28
+ # @!method radio_button
29
+ #
30
+ # Adds a radio button to the group.
31
+ #
32
+ # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
33
+ # @param block [Proc] The block accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
34
+ end
35
+ end
36
+ end
@@ -7,6 +7,7 @@ module Primer
7
7
  # It wraps the Button and IconButton components to provide the correct styles
8
8
  class Item < Primer::BaseComponent
9
9
  status :alpha
10
+ audited_at "2023-02-01"
10
11
 
11
12
  # @param label [String] The label to use
12
13
  # @param selected [Boolean] Whether the item is selected
@@ -1 +1 @@
1
- .SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--primer-borderInset-thin,inset 0 0 0 max(1px,.0625rem)) var(--color-border-default);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-btn-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-large-size,40px);min-width:var(--primer-control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
1
+ .SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-large-size,40px);min-width:var(--primer-control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
@@ -1 +1,31 @@
1
- {"name":"alpha/segmented_control","selectors":[".SegmentedControl",".SegmentedControl-item",".SegmentedControl-item.SegmentedControl-item--selected",".SegmentedControl-item.SegmentedControl-item--selected .Button",".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",".SegmentedControl-item.SegmentedControl-item--selected:before",".SegmentedControl-item .Button-label[data-content]:before",".SegmentedControl-item:before",".SegmentedControl-item .Button",".SegmentedControl-item .Button:focus-visible",".SegmentedControl-item .Button--small",".SegmentedControl-item .Button--small.Button--iconOnly",".SegmentedControl-item .Button--small.Button--iconOnly:before",".SegmentedControl-item .Button--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--medium.Button--iconOnly:before",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".SegmentedControl-item .Button--large.Button--iconOnly:before",".SegmentedControl-item .Button--iconOnly",".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-item",".SegmentedControl--fullWidth .Button--iconOnly",".SegmentedControl--fullWidth .Button-withTooltip"]}
1
+ {
2
+ "name": "alpha/segmented_control",
3
+ "selectors": [
4
+ ".SegmentedControl",
5
+ ".SegmentedControl-item",
6
+ ".SegmentedControl-item.SegmentedControl-item--selected",
7
+ ".SegmentedControl-item.SegmentedControl-item--selected .Button",
8
+ ".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
9
+ ".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
10
+ ".SegmentedControl-item.SegmentedControl-item--selected:before",
11
+ ".SegmentedControl-item .Button-label[data-content]:before",
12
+ ".SegmentedControl-item:before",
13
+ ".SegmentedControl-item .Button",
14
+ ".SegmentedControl-item .Button:focus-visible",
15
+ ".SegmentedControl-item .Button--small",
16
+ ".SegmentedControl-item .Button--small.Button--iconOnly",
17
+ ".SegmentedControl-item .Button--small.Button--iconOnly:before",
18
+ ".SegmentedControl-item .Button--medium",
19
+ ".SegmentedControl-item .Button--medium.Button--iconOnly",
20
+ ".SegmentedControl-item .Button--medium.Button--iconOnly:before",
21
+ ".SegmentedControl-item .Button--large",
22
+ ".SegmentedControl-item .Button--large.Button--iconOnly",
23
+ ".SegmentedControl-item .Button--large.Button--iconOnly:before",
24
+ ".SegmentedControl-item .Button--iconOnly",
25
+ ".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
26
+ ".SegmentedControl--fullWidth",
27
+ ".SegmentedControl--fullWidth .SegmentedControl-item",
28
+ ".SegmentedControl--fullWidth .Button--iconOnly",
29
+ ".SegmentedControl--fullWidth .Button-withTooltip"
30
+ ]
31
+ }
@@ -1 +1 @@
1
- {"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA0GF,CAnGE,uDACE,oCAAqC,CACrC,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CADlG,UAAW,CAHX,gBAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAMF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,gEAAiE,CADjE,oHAEF,CAGF,sCACE,yJAA8J,CAC9J,oIASF,CAPE,uDACE,yJAKF,CAFI,8DC/ER,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UD+E8G,CAK5G,uCACE,0JAA+J,CAC/J,mIASF,CAPE,wDACE,yJAKF,CAFI,+DC5FR,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UD4F8G,CAK5G,sCACE,yJAA8J,CAC9J,oIASF,CAPE,uDACE,wJAKF,CAFI,8DCzGR,WAAA,YAAA,SAAA,iDAAA,gDAAA,kBAAA,QAAA,4CAAA,UDyG4G,CAK1G,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-btn-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold, 600);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--primer-control-medium-paddingBlock, 6px);\n margin-bottom: var(--primer-control-medium-paddingBlock, 6px);\n content: '';\n border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal, 400);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));\n border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--medium {\n height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--large {\n height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n\n &::before {\n @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
1
+ {"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CAHrD,mBAAoB,CACpB,eAGF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA0IF,CAnIE,uDACE,yDAA0D,CAC1D,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CADlG,UAAW,CAHX,gBAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAMF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eASF,CANE,6CAIE,gEAAiE,CAHjE,oHAIF,CAGF,sCACE,yJAGC,CACD,oIAgBF,CAVE,uDACE,yJAQF,CAFI,8DC1FR,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UD0F8G,CAK5G,uCACE,0JAGC,CACD,mIAgBF,CAVE,wDACE,yJAQF,CAFI,+DCjHR,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UDiH8G,CAK5G,sCACE,yJAGC,CACD,oIAgBF,CAVE,uDACE,wJAQF,CAFI,8DCxIR,WAAA,YAAA,SAAA,iDAAA,gDAAA,kBAAA,QAAA,4CAAA,UDwI4G,CAK1G,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-segmented-control-button-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold, 600);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--primer-control-medium-paddingBlock, 6px);\n margin-bottom: var(--primer-control-medium-paddingBlock, 6px);\n content: '';\n border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal, 400);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(\n var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)\n );\n border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(\n var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-small-paddingInline-condensed, 8px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--medium {\n height: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-medium-paddingInline-normal, 12px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--large {\n height: calc(\n var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-large-paddingInline-spacious, 16px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
@@ -5,7 +5,6 @@
5
5
  list-style: none;
6
6
  background-color: var(--color-segmented-control-bg);
7
7
  border-radius: var(--primer-borderRadius-medium, 6px);
8
- box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
9
8
  }
10
9
 
11
10
  .SegmentedControl-item {
@@ -17,7 +16,7 @@
17
16
 
18
17
  /* Selected ---------------------------------------- */
19
18
  &.SegmentedControl-item--selected {
20
- background-color: var(--color-btn-bg);
19
+ background-color: var(--color-segmented-control-button-bg);
21
20
  border-color: var(--color-segmented-control-button-selected-border);
22
21
 
23
22
  & .Button {
@@ -64,17 +63,29 @@
64
63
  color: var(--color-btn-text);
65
64
 
66
65
  &:focus-visible {
67
- outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
66
+ outline-offset: calc(
67
+ var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)
68
+ );
68
69
  border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
69
70
  }
70
71
  }
71
72
 
72
73
  & .Button--small {
73
- height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
74
- padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
74
+ height: calc(
75
+ var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
76
+ var(--primer-borderWidth-thin, 1px) * 2
77
+ );
78
+ padding: 0
79
+ calc(
80
+ var(--primer-control-small-paddingInline-condensed, 8px) -
81
+ var(--primer-control-xsmall-paddingInline-condensed, 4px)
82
+ );
75
83
 
76
84
  &.Button--iconOnly {
77
- width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
85
+ width: calc(
86
+ var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
87
+ var(--primer-borderWidth-thin, 1px) * 2
88
+ );
78
89
 
79
90
  &::before {
80
91
  @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
@@ -83,11 +94,21 @@
83
94
  }
84
95
 
85
96
  & .Button--medium {
86
- height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
87
- padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
97
+ height: calc(
98
+ var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
99
+ var(--primer-borderWidth-thin, 1px) * 2
100
+ );
101
+ padding: 0
102
+ calc(
103
+ var(--primer-control-medium-paddingInline-normal, 12px) -
104
+ var(--primer-control-xsmall-paddingInline-condensed, 4px)
105
+ );
88
106
 
89
107
  &.Button--iconOnly {
90
- width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
108
+ width: calc(
109
+ var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
110
+ var(--primer-borderWidth-thin, 1px) * 2
111
+ );
91
112
 
92
113
  &::before {
93
114
  @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
@@ -96,11 +117,21 @@
96
117
  }
97
118
 
98
119
  & .Button--large {
99
- height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
100
- padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
120
+ height: calc(
121
+ var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
122
+ var(--primer-borderWidth-thin, 1px) * 2
123
+ );
124
+ padding: 0
125
+ calc(
126
+ var(--primer-control-large-paddingInline-spacious, 16px) -
127
+ var(--primer-control-xsmall-paddingInline-condensed, 4px)
128
+ );
101
129
 
102
130
  &.Button--iconOnly {
103
- width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
131
+ width: calc(
132
+ var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
133
+ var(--primer-borderWidth-thin, 1px) * 2
134
+ );
104
135
 
105
136
  &::before {
106
137
  @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
@@ -3,8 +3,12 @@
3
3
  module Primer
4
4
  module Alpha
5
5
  # Use a segmented control to let users select an option from a short list and immediately apply the selection
6
+ # @accessibility
7
+ # A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.
8
+ # See the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.
6
9
  class SegmentedControl < Primer::Component
7
10
  status :alpha
11
+ audited_at "2023-02-01"
8
12
 
9
13
  FULL_WIDTH_DEFAULT = false
10
14
  HIDE_LABELS_DEFAULT = false
@@ -24,6 +28,30 @@ module Primer
24
28
  )
25
29
  }
26
30
 
31
+ # @example With a label above and caption below
32
+ # <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
33
+ # <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
34
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
35
+ # <% component.with_item(label: "Preview", selected: true) %>
36
+ # <% component.with_item(label: "Raw") %>
37
+ # <% component.with_item(label: "Blame") %>
38
+ # <% end %>
39
+ # <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
40
+ # <% end %>
41
+ #
42
+ # @example With a label and caption on the left
43
+ # <%= render(Primer::Beta::Subhead.new) do |component| %>
44
+ # <% component.with_heading(id: "scLabel-vert") { "File view" } %>
45
+ # <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
46
+ # <% component.with_actions do %>
47
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
48
+ # <% component.with_item(label: "Preview", selected: true) %>
49
+ # <% component.with_item(label: "Raw") %>
50
+ # <% component.with_item(label: "Blame") %>
51
+ # <% end %>
52
+ # <% end %>
53
+ # <% end %>
54
+ #
27
55
  # @example Basic usage
28
56
  #
29
57
  # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
@@ -79,6 +107,8 @@ module Primer
79
107
  "SegmentedControl--iconOnly": hide_labels,
80
108
  "SegmentedControl--fullWidth": full_width
81
109
  )
110
+
111
+ validate_aria_label
82
112
  end
83
113
 
84
114
  def render?