primer_view_components 0.0.114 → 0.0.116

Sign up to get free protection for your applications and to get access to all the features.
Files changed (143) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +52 -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/item.rb +6 -6
  8. data/app/components/primer/alpha/auto_complete/auto_complete.html.erb +1 -1
  9. data/app/components/primer/alpha/auto_complete.rb +10 -10
  10. data/app/components/primer/alpha/banner.html.erb +1 -1
  11. data/app/components/primer/alpha/dialog.rb +2 -0
  12. data/app/components/primer/alpha/dropdown/menu.rb +2 -0
  13. data/app/components/primer/alpha/dropdown.html.erb +3 -3
  14. data/app/components/primer/alpha/image_crop.html.erb +1 -1
  15. data/app/components/primer/alpha/layout.css +1 -0
  16. data/app/components/primer/alpha/layout.css.json +1 -0
  17. data/app/components/primer/alpha/layout.css.map +1 -0
  18. data/app/components/primer/alpha/layout.pcss +268 -0
  19. data/app/components/primer/alpha/layout.rb +1 -1
  20. data/app/components/primer/{menu_component.css → alpha/menu.css} +0 -0
  21. data/app/components/primer/alpha/menu.css.json +1 -0
  22. data/app/components/primer/alpha/menu.css.map +1 -0
  23. data/app/components/primer/{menu_component.html.erb → alpha/menu.html.erb} +0 -0
  24. data/app/components/primer/{menu_component.pcss → alpha/menu.pcss} +0 -0
  25. data/app/components/primer/alpha/menu.rb +76 -0
  26. data/app/components/primer/{octicon_symbols_component.html.erb → alpha/octicon_symbols.html.erb} +0 -0
  27. data/app/components/primer/alpha/octicon_symbols.rb +59 -0
  28. data/app/components/primer/alpha/segmented_control.css +1 -1
  29. data/app/components/primer/alpha/segmented_control.css.json +1 -1
  30. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  31. data/app/components/primer/alpha/segmented_control.pcss +12 -0
  32. data/app/components/primer/alpha/segmented_control.rb +5 -5
  33. data/app/components/primer/alpha/tab_panels.rb +6 -6
  34. data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
  35. data/app/components/primer/alpha/toggle_switch.rb +6 -6
  36. data/app/components/primer/alpha/tool_tip.js +77 -69
  37. data/app/components/primer/alpha/tool_tip.ts +63 -51
  38. data/app/components/primer/alpha/underline_panels.rb +6 -6
  39. data/app/components/primer/beta/auto_complete/item.rb +5 -4
  40. data/app/components/primer/beta/auto_complete.rb +15 -13
  41. data/app/components/primer/beta/avatar_stack.rb +2 -0
  42. data/app/components/primer/beta/blankslate.rb +48 -47
  43. data/app/components/primer/beta/border_box/header.rb +2 -0
  44. data/app/components/primer/beta/border_box.rb +2 -0
  45. data/app/components/primer/beta/breadcrumbs.rb +1 -0
  46. data/app/components/primer/beta/button.css +1 -1
  47. data/app/components/primer/beta/button.css.json +1 -1
  48. data/app/components/primer/beta/button.css.map +1 -1
  49. data/app/components/primer/beta/button.pcss +5 -0
  50. data/app/components/primer/beta/button.rb +8 -7
  51. data/app/components/primer/beta/button_group.rb +3 -0
  52. data/app/components/primer/beta/clipboard_copy.html.erb +2 -2
  53. data/app/components/primer/beta/close_button.rb +1 -1
  54. data/app/components/primer/beta/details.rb +6 -3
  55. data/app/components/primer/beta/flash.rb +1 -0
  56. data/app/components/primer/beta/icon_button.html.erb +1 -1
  57. data/app/components/primer/beta/link.rb +1 -0
  58. data/app/components/primer/{octicon_component.html.erb → beta/octicon.html.erb} +0 -0
  59. data/app/components/primer/beta/octicon.rb +89 -0
  60. data/app/components/primer/beta/popover.rb +1 -0
  61. data/app/components/primer/beta/progress_bar.rb +7 -7
  62. data/app/components/primer/beta/relative_time.rb +1 -1
  63. data/app/components/primer/{spinner_component.html.erb → beta/spinner.html.erb} +0 -0
  64. data/app/components/primer/beta/spinner.rb +45 -0
  65. data/app/components/primer/beta/truncate.rb +3 -2
  66. data/app/components/primer/blankslate_component.rb +3 -3
  67. data/app/components/primer/button_component.rb +5 -5
  68. data/app/components/primer/component.rb +1 -0
  69. data/app/components/primer/dropdown_menu_component.rb +3 -3
  70. data/app/components/primer/icon_button.html.erb +2 -2
  71. data/app/components/primer/local_time.rb +2 -0
  72. data/app/components/primer/menu_component.rb +2 -69
  73. data/app/components/primer/navigation/tab_component.rb +2 -2
  74. data/app/components/primer/octicon_component.rb +2 -81
  75. data/app/components/primer/octicon_symbols_component.rb +2 -52
  76. data/app/components/primer/primer.d.ts +2 -0
  77. data/app/components/primer/primer.js +2 -0
  78. data/app/components/primer/primer.pcss +2 -1
  79. data/app/components/primer/primer.ts +2 -0
  80. data/app/components/primer/spinner_component.rb +2 -38
  81. data/app/components/primer/time_ago_component.rb +1 -1
  82. data/app/components/primer/timeline_item_component.rb +2 -2
  83. data/app/forms/immediate_validation_form.rb +29 -0
  84. data/app/forms/multi_input_form.rb +4 -2
  85. data/app/lib/primer/css/layout.css +1 -378
  86. data/app/lib/primer/css/layout.css.json +1 -1
  87. data/app/lib/primer/octicon/cache.rb +1 -1
  88. data/app/lib/primer/view_helper.rb +1 -1
  89. data/lib/primer/deprecations.yml +26 -0
  90. data/lib/primer/forms/builder.rb +47 -8
  91. data/lib/primer/forms/check_box.html.erb +3 -1
  92. data/lib/primer/forms/dsl/form_reference_input.rb +25 -2
  93. data/lib/primer/forms/dsl/input.rb +50 -1
  94. data/lib/primer/forms/dsl/multi_input.rb +6 -9
  95. data/lib/primer/forms/dsl/select_list_input.rb +1 -1
  96. data/lib/primer/forms/dsl/text_field_input.rb +31 -1
  97. data/lib/primer/forms/form_control.html.erb +17 -13
  98. data/lib/primer/forms/form_control.rb +2 -0
  99. data/lib/primer/forms/form_reference.html.erb +1 -1
  100. data/lib/primer/forms/form_reference.rb +4 -0
  101. data/lib/primer/forms/multi.html.erb +6 -2
  102. data/lib/primer/forms/primer_multi_input.d.ts +10 -0
  103. data/lib/primer/forms/primer_multi_input.js +45 -0
  104. data/lib/primer/forms/primer_multi_input.ts +46 -0
  105. data/lib/primer/forms/primer_text_field.d.ts +1 -0
  106. data/lib/primer/forms/primer_text_field.js +62 -0
  107. data/lib/primer/forms/primer_text_field.ts +48 -0
  108. data/lib/primer/forms/radio_button.html.erb +3 -1
  109. data/lib/primer/forms/text_field.html.erb +8 -8
  110. data/lib/primer/forms/text_field.rb +11 -0
  111. data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +1 -1
  112. data/lib/primer/view_components/version.rb +1 -1
  113. data/lib/tasks/docs.rake +5 -5
  114. data/lib/tasks/helpers/ast_traverser.rb +1 -1
  115. data/previews/primer/alpha/action_list_preview.rb +1 -1
  116. data/previews/primer/alpha/auto_complete_preview.rb +62 -6
  117. data/previews/primer/alpha/layout_preview.rb +179 -6
  118. data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb +3 -3
  119. data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb +3 -3
  120. data/previews/primer/alpha/menu_preview.rb +14 -0
  121. data/previews/primer/alpha/tab_panels_preview.rb +8 -8
  122. data/previews/primer/alpha/toggle_switch_preview.rb +11 -9
  123. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +1 -1
  124. data/previews/primer/beta/auto_complete_preview.rb +19 -17
  125. data/previews/primer/beta/details_preview.rb +6 -6
  126. data/previews/primer/beta/octicon_preview.rb +24 -0
  127. data/previews/primer/beta/spinner_preview.rb +22 -0
  128. data/previews/primer/forms/forms_preview/immediate_validation_form.html.erb +3 -0
  129. data/previews/primer/forms/forms_preview/multi_input_form.html.erb +12 -1
  130. data/previews/primer/forms/forms_preview.rb +2 -0
  131. data/previews/primer/local_time_component_preview.rb +3 -0
  132. data/previews/primer/time_ago_component_preview.rb +3 -0
  133. data/previews/primer/url_helpers.rb +15 -0
  134. data/static/arguments.json +159 -159
  135. data/static/audited_at.json +4 -0
  136. data/static/constants.json +42 -34
  137. data/static/statuses.json +10 -6
  138. metadata +32 -15
  139. data/app/components/primer/menu_component.css.json +0 -1
  140. data/app/components/primer/menu_component.css.map +0 -1
  141. data/previews/primer/menu_component_preview.rb +0 -12
  142. data/previews/primer/octicon_component_preview.rb +0 -22
  143. data/previews/primer/spinner_component_preview.rb +0 -20
data/app/components/primer/alpha/octicon_symbols.rb ADDED
@@ -0,0 +1,59 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "octicons"
4
+
5
+ module Primer
6
+ module Alpha
7
+ # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
8
+ class OcticonSymbols < Primer::Component
9
+ # @example Symbol dictionary
10
+ # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
11
+ # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
12
+ # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
13
+ # <%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
14
+ #
15
+ # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
16
+ def initialize(icons: [])
17
+ @icons = {}
18
+ icons.each do |icon|
19
+ symbol = icon[:symbol]
20
+ size = Primer::Beta::Octicon::SIZE_MAPPINGS[
21
+ fetch_or_fallback(Primer::Beta::Octicon::SIZE_OPTIONS, icon[:size] || Primer::Beta::Octicon::SIZE_DEFAULT, Primer::Beta::Octicon::SIZE_DEFAULT)
22
+ ]
23
+
24
+ cache_key = Primer::Octicon::Cache.get_key(symbol: symbol, size: size)
25
+
26
+ if (cache_icon = Primer::Octicon::Cache.read(cache_key))
27
+ icon_instance = cache_icon
28
+ else
29
+ icon_instance = Octicons::Octicon.new(symbol, height: size)
30
+
31
+ Primer::Octicon::Cache.set(cache_key, icon_instance)
32
+ end
33
+
34
+ # Don't put the same icon twice
35
+ @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
36
+ end
37
+ end
38
+
39
+ def render?
40
+ @icons.any?
41
+ end
42
+
43
+ def symbol_tags
44
+ safe_join(
45
+ @icons.values.map do |icon|
46
+ content_tag(
47
+ :symbol,
48
+ icon.path.html_safe, # rubocop:disable Rails/OutputSafety
49
+ id: "octicon_#{icon.symbol}_#{icon.height}",
50
+ viewBox: icon.options[:viewBox],
51
+ width: icon.width,
52
+ height: icon.height
53
+ )
54
+ end
55
+ )
56
+ end
57
+ end
58
+ end
59
+ end
data/app/components/primer/alpha/segmented_control.css CHANGED
@@ -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--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--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--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);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%}
data/app/components/primer/alpha/segmented_control.css.json CHANGED
@@ -1 +1 @@
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--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".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
+ {"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"]}
data/app/components/primer/alpha/segmented_control.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA8FF,CAvFE,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,oIAKF,CAHE,uDACE,yJACF,CAGF,uCACE,0JAA+J,CAC/J,mIAKF,CAHE,wDACE,yJACF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,wJACF,CAGF,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 }\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 }\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 }\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"]}
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]}
data/app/components/primer/alpha/segmented_control.pcss CHANGED
@@ -75,6 +75,10 @@
75
75
 
76
76
  &.Button--iconOnly {
77
77
  width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
78
+
79
+ &::before {
80
+ @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
81
+ }
78
82
  }
79
83
  }
80
84
 
@@ -84,6 +88,10 @@
84
88
 
85
89
  &.Button--iconOnly {
86
90
  width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
91
+
92
+ &::before {
93
+ @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
94
+ }
87
95
  }
88
96
  }
89
97
 
@@ -93,6 +101,10 @@
93
101
 
94
102
  &.Button--iconOnly {
95
103
  width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
104
+
105
+ &::before {
106
+ @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
107
+ }
96
108
  }
97
109
  }
98
110
 
data/app/components/primer/alpha/segmented_control.rb CHANGED
@@ -26,7 +26,7 @@ module Primer
26
26
 
27
27
  # @example Basic usage
28
28
  #
29
- # <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
29
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
30
30
  # <%= c.with_item(label: "Preview", selected: true) %>
31
31
  # <%= c.with_item(label: "Raw") %>
32
32
  # <%= c.with_item(label: "Blame") %>
@@ -34,28 +34,28 @@ module Primer
34
34
  #
35
35
  # @example Small
36
36
  #
37
- # <%= render(Primer::Alpha::SegmentedControl.new(size: :small)) do |c| %>
37
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c| %>
38
38
  # <%= c.with_item(label: "Preview", selected: true) %>
39
39
  # <%= c.with_item(label: "Raw") %>
40
40
  # <%= c.with_item(label: "Blame") %>
41
41
  # <% end %>
42
42
  #
43
43
  # @example With icons
44
- # <%= render(Primer::Alpha::SegmentedControl.new) do |c| %>
44
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c| %>
45
45
  # <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
46
46
  # <%= c.with_item(label: "Raw", icon: :"file-code") %>
47
47
  # <%= c.with_item(label: "Blame", icon: :people) %>
48
48
  # <% end %>
49
49
  #
50
50
  # @example With icons only
51
- # <%= render(Primer::Alpha::SegmentedControl.new(hide_labels: true)) do |c| %>
51
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |c| %>
52
52
  # <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
53
53
  # <%= c.with_item(label: "Raw", icon: :"file-code") %>
54
54
  # <%= c.with_item(label: "Blame", icon: :people) %>
55
55
  # <% end %>
56
56
  #
57
57
  # @example Fill width of parent
58
- # <%= render(Primer::Alpha::SegmentedControl.new(full_width: true)) do |c| %>
58
+ # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |c| %>
59
59
  # <%= c.with_item(label: "Preview", icon: :eye, selected: true) %>
60
60
  # <%= c.with_item(label: "Raw", icon: :"file-code") %>
61
61
  # <%= c.with_item(label: "Blame", icon: :people) %>
data/app/components/primer/alpha/tab_panels.rb CHANGED
@@ -43,15 +43,15 @@ module Primer
43
43
 
44
44
  # @example Default
45
45
  # <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
46
- # <% component.with_tab(id: "tab-1", selected: true) do |t| %>
47
- # <% t.text { "Tab 1" } %>
48
- # <% t.panel do %>
46
+ # <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
47
+ # <% tab.with_text { "Tab 1" } %>
48
+ # <% tab.with_panel do %>
49
49
  # Panel 1
50
50
  # <% end %>
51
51
  # <% end %>
52
- # <% component.with_tab(id: "tab-2") do |t| %>
53
- # <% t.text { "Tab 2" } %>
54
- # <% t.panel do %>
52
+ # <% component.with_tab(id: "tab-2") do |tab| %>
53
+ # <% tab.with_text { "Tab 2" } %>
54
+ # <% tab.with_panel do %>
55
55
  # Panel 2
56
56
  # <% end %>
57
57
  # <% end %>
data/app/components/primer/alpha/toggle_switch.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
2
- <%= render(Primer::OcticonComponent.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
3
- <%= render(Primer::SpinnerComponent.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
2
+ <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
3
+ <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
4
4
  <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
5
5
  <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
6
6
  <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
data/app/components/primer/alpha/toggle_switch.rb CHANGED
@@ -21,22 +21,22 @@ module Primer
21
21
  STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
22
22
 
23
23
  # @example Default
24
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo")) %>
24
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch")) %>
25
25
  #
26
26
  # @example Checked
27
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true)) %>
27
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true)) %>
28
28
  #
29
29
  # @example Disabled
30
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", enabled: false)) %>
30
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", enabled: false)) %>
31
31
  #
32
32
  # @example Checked and Disabled
33
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true, enabled: false)) %>
33
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true, enabled: false)) %>
34
34
  #
35
35
  # @example Small
36
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", size: :small)) %>
36
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", size: :small)) %>
37
37
  #
38
38
  # @example With status label positioned at the end
39
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", status_label_position: :end)) %>
39
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", status_label_position: :end)) %>
40
40
  #
41
41
  # @param src [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
42
42
  # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
data/app/components/primer/alpha/tool_tip.js CHANGED
@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
9
9
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
10
10
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
11
11
  };
12
- var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
12
+ var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
13
13
  import { getAnchoredPosition } from '@primer/behaviors';
14
14
  const TOOLTIP_OPEN_CLASS = 'tooltip-open';
15
15
  const TOOLTIP_ARROW_EDGE_OFFSET = 6;
@@ -187,6 +187,8 @@ class ToolTipElement extends HTMLElement {
187
187
  }
188
188
  connectedCallback() {
189
189
  var _a;
190
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
191
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
190
192
  if (!this.shadowRoot) {
191
193
  const shadow = this.attachShadow({ mode: 'open' });
192
194
  // eslint-disable-next-line github/no-inner-html
@@ -241,77 +243,13 @@ class ToolTipElement extends HTMLElement {
241
243
  }
242
244
  }
243
245
  attributeChangedCallback(name) {
246
+ if (!this.isConnected)
247
+ return;
244
248
  if (name === 'id' || name === 'data-type') {
245
- if (!this.id || !this.control)
246
- return;
247
- if (this.type === 'label') {
248
- let labelledBy = this.control.getAttribute('aria-labelledby');
249
- if (labelledBy) {
250
- if (!labelledBy.split(' ').includes(this.id)) {
251
- labelledBy = `${labelledBy} ${this.id}`;
252
- }
253
- else {
254
- labelledBy = `${labelledBy}`;
255
- }
256
- }
257
- else {
258
- labelledBy = this.id;
259
- }
260
- this.control.setAttribute('aria-labelledby', labelledBy);
261
- // Prevent duplicate accessible name announcements.
262
- this.setAttribute('aria-hidden', 'true');
263
- }
264
- else {
265
- let describedBy = this.control.getAttribute('aria-describedby');
266
- if (describedBy) {
267
- if (!describedBy.split(' ').includes(this.id)) {
268
- describedBy = `${describedBy} ${this.id}`;
269
- }
270
- else {
271
- describedBy = `${describedBy}`;
272
- }
273
- }
274
- else {
275
- describedBy = this.id;
276
- }
277
- this.control.setAttribute('aria-describedby', describedBy);
278
- }
249
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
279
250
  }
280
251
  else if (name === 'data-direction') {
281
- this.classList.remove(...DIRECTION_CLASSES);
282
- const direction = this.direction;
283
- if (direction === 'n') {
284
- __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
285
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
286
- }
287
- else if (direction === 'ne') {
288
- __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
289
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
290
- }
291
- else if (direction === 'e') {
292
- __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
293
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
294
- }
295
- else if (direction === 'se') {
296
- __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
297
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
298
- }
299
- else if (direction === 's') {
300
- __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
301
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
302
- }
303
- else if (direction === 'sw') {
304
- __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
305
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
306
- }
307
- else if (direction === 'w') {
308
- __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
309
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
310
- }
311
- else if (direction === 'nw') {
312
- __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
313
- __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
314
- }
252
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
315
253
  }
316
254
  }
317
255
  }
@@ -327,6 +265,76 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
327
265
  }
328
266
  __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
329
267
  }
268
+ }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
269
+ if (!this.id || !this.control)
270
+ return;
271
+ if (this.type === 'label') {
272
+ let labelledBy = this.control.getAttribute('aria-labelledby');
273
+ if (labelledBy) {
274
+ if (!labelledBy.split(' ').includes(this.id)) {
275
+ labelledBy = `${labelledBy} ${this.id}`;
276
+ }
277
+ else {
278
+ labelledBy = `${labelledBy}`;
279
+ }
280
+ }
281
+ else {
282
+ labelledBy = this.id;
283
+ }
284
+ this.control.setAttribute('aria-labelledby', labelledBy);
285
+ // Prevent duplicate accessible name announcements.
286
+ this.setAttribute('aria-hidden', 'true');
287
+ }
288
+ else {
289
+ let describedBy = this.control.getAttribute('aria-describedby');
290
+ if (describedBy) {
291
+ if (!describedBy.split(' ').includes(this.id)) {
292
+ describedBy = `${describedBy} ${this.id}`;
293
+ }
294
+ else {
295
+ describedBy = `${describedBy}`;
296
+ }
297
+ }
298
+ else {
299
+ describedBy = this.id;
300
+ }
301
+ this.control.setAttribute('aria-describedby', describedBy);
302
+ }
303
+ }, _ToolTipElement_updateDirection = function _ToolTipElement_updateDirection() {
304
+ this.classList.remove(...DIRECTION_CLASSES);
305
+ const direction = this.direction;
306
+ if (direction === 'n') {
307
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
308
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
309
+ }
310
+ else if (direction === 'ne') {
311
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
312
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
313
+ }
314
+ else if (direction === 'e') {
315
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
316
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
317
+ }
318
+ else if (direction === 'se') {
319
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
320
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
321
+ }
322
+ else if (direction === 's') {
323
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
324
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
325
+ }
326
+ else if (direction === 'sw') {
327
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
328
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
329
+ }
330
+ else if (direction === 'w') {
331
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
332
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
333
+ }
334
+ else if (direction === 'nw') {
335
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
336
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
337
+ }
330
338
  }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
331
339
  if (!this.control)
332
340
  return;
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -186,6 +186,8 @@ class ToolTipElement extends HTMLElement {
186
186
  }
187
187
 
188
188
  connectedCallback() {
189
+ this.#updateControlReference()
190
+ this.#updateDirection()
189
191
  if (!this.shadowRoot) {
190
192
  const shadow = this.attachShadow({mode: 'open'})
191
193
  // eslint-disable-next-line github/no-inner-html
@@ -259,64 +261,74 @@ class ToolTipElement extends HTMLElement {
259
261
  }
260
262
 
261
263
  attributeChangedCallback(name: string) {
264
+ if (!this.isConnected) return
265
+
262
266
  if (name === 'id' || name === 'data-type') {
263
- if (!this.id || !this.control) return
264
- if (this.type === 'label') {
265
- let labelledBy = this.control.getAttribute('aria-labelledby')
266
- if (labelledBy) {
267
- if (!labelledBy.split(' ').includes(this.id)) {
268
- labelledBy = `${labelledBy} ${this.id}`
269
- } else {
270
- labelledBy = `${labelledBy}`
271
- }
267
+ this.#updateControlReference()
268
+ } else if (name === 'data-direction') {
269
+ this.#updateDirection()
270
+ }
271
+ }
272
+
273
+ #updateControlReference() {
274
+ if (!this.id || !this.control) return
275
+ if (this.type === 'label') {
276
+ let labelledBy = this.control.getAttribute('aria-labelledby')
277
+ if (labelledBy) {
278
+ if (!labelledBy.split(' ').includes(this.id)) {
279
+ labelledBy = `${labelledBy} ${this.id}`
272
280
  } else {
273
- labelledBy = this.id
281
+ labelledBy = `${labelledBy}`
274
282
  }
275
- this.control.setAttribute('aria-labelledby', labelledBy)
276
-
277
- // Prevent duplicate accessible name announcements.
278
- this.setAttribute('aria-hidden', 'true')
279
283
  } else {
280
- let describedBy = this.control.getAttribute('aria-describedby')
281
- if (describedBy) {
282
- if (!describedBy.split(' ').includes(this.id)) {
283
- describedBy = `${describedBy} ${this.id}`
284
- } else {
285
- describedBy = `${describedBy}`
286
- }
284
+ labelledBy = this.id
285
+ }
286
+ this.control.setAttribute('aria-labelledby', labelledBy)
287
+
288
+ // Prevent duplicate accessible name announcements.
289
+ this.setAttribute('aria-hidden', 'true')
290
+ } else {
291
+ let describedBy = this.control.getAttribute('aria-describedby')
292
+ if (describedBy) {
293
+ if (!describedBy.split(' ').includes(this.id)) {
294
+ describedBy = `${describedBy} ${this.id}`
287
295
  } else {
288
- describedBy = this.id
296
+ describedBy = `${describedBy}`
289
297
  }
290
- this.control.setAttribute('aria-describedby', describedBy)
291
- }
292
- } else if (name === 'data-direction') {
293
- this.classList.remove(...DIRECTION_CLASSES)
294
- const direction = this.direction
295
- if (direction === 'n') {
296
- this.#align = 'center'
297
- this.#side = 'outside-top'
298
- } else if (direction === 'ne') {
299
- this.#align = 'start'
300
- this.#side = 'outside-top'
301
- } else if (direction === 'e') {
302
- this.#align = 'center'
303
- this.#side = 'outside-right'
304
- } else if (direction === 'se') {
305
- this.#align = 'start'
306
- this.#side = 'outside-bottom'
307
- } else if (direction === 's') {
308
- this.#align = 'center'
309
- this.#side = 'outside-bottom'
310
- } else if (direction === 'sw') {
311
- this.#align = 'end'
312
- this.#side = 'outside-bottom'
313
- } else if (direction === 'w') {
314
- this.#align = 'center'
315
- this.#side = 'outside-left'
316
- } else if (direction === 'nw') {
317
- this.#align = 'end'
318
- this.#side = 'outside-top'
298
+ } else {
299
+ describedBy = this.id
319
300
  }
301
+ this.control.setAttribute('aria-describedby', describedBy)
302
+ }
303
+ }
304
+
305
+ #updateDirection() {
306
+ this.classList.remove(...DIRECTION_CLASSES)
307
+ const direction = this.direction
308
+ if (direction === 'n') {
309
+ this.#align = 'center'
310
+ this.#side = 'outside-top'
311
+ } else if (direction === 'ne') {
312
+ this.#align = 'start'
313
+ this.#side = 'outside-top'
314
+ } else if (direction === 'e') {
315
+ this.#align = 'center'
316
+ this.#side = 'outside-right'
317
+ } else if (direction === 'se') {
318
+ this.#align = 'start'
319
+ this.#side = 'outside-bottom'
320
+ } else if (direction === 's') {
321
+ this.#align = 'center'
322
+ this.#side = 'outside-bottom'
323
+ } else if (direction === 'sw') {
324
+ this.#align = 'end'
325
+ this.#side = 'outside-bottom'
326
+ } else if (direction === 'w') {
327
+ this.#align = 'center'
328
+ this.#side = 'outside-left'
329
+ } else if (direction === 'nw') {
330
+ this.#align = 'end'
331
+ this.#side = 'outside-top'
320
332
  }
321
333
  }
322
334
 
data/app/components/primer/alpha/underline_panels.rb CHANGED
@@ -38,15 +38,15 @@ module Primer
38
38
 
39
39
  # @example Default
40
40
  # <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
41
- # <% component.with_tab(id: "tab-1", selected: true) do |t| %>
42
- # <% t.text { "Tab 1" } %>
43
- # <% t.panel do %>
41
+ # <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
42
+ # <% tab.with_text { "Tab 1" } %>
43
+ # <% tab.with_panel do %>
44
44
  # Panel 1
45
45
  # <% end %>
46
46
  # <% end %>
47
- # <% component.with_tab(id: "tab-2") do |t| %>
48
- # <% t.text { "Tab 2" } %>
49
- # <% t.panel do %>
47
+ # <% component.with_tab(id: "tab-2") do |tab| %>
48
+ # <% tab.with_text { "Tab 2" } %>
49
+ # <% tab.with_panel do %>
50
50
  # Panel 2
51
51
  # <% end %>
52
52
  # <% end %>
data/app/components/primer/beta/auto_complete/item.rb CHANGED
@@ -6,15 +6,16 @@ module Primer
6
6
  class AutoComplete
7
7
  # Use `AutoCompleteItem` to list results of an auto-completed search.
8
8
  class Item < Primer::Component
9
+ warn_on_deprecated_slot_setter
9
10
  status :beta
10
11
 
11
12
  ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
12
13
 
13
14
  # The leading visual rendered before the link.
14
15
  #
15
- # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::OcticonComponent) %>
16
+ # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %> or <%= link_to_component(Primer::Beta::Octicon) %>
16
17
  renders_one :leading_visual, types: {
17
- icon: Primer::OcticonComponent,
18
+ icon: Primer::Beta::Octicon,
18
19
  avatar: lambda { |**kwargs|
19
20
  Primer::Beta::Avatar.new(**{ **kwargs, size: 16 })
20
21
  }
@@ -22,9 +23,9 @@ module Primer
22
23
 
23
24
  # The trailing visual rendered after the link.
24
25
  #
25
- # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
26
+ # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
26
27
  renders_one :trailing_visual, types: {
27
- icon: Primer::OcticonComponent,
28
+ icon: Primer::Beta::Octicon,
28
29
  label: Primer::Beta::Label,
29
30
  counter: Primer::Beta::Counter
30
31
  }