primer_view_components 0.0.116 → 0.0.118

Sign up to get free protection for your applications and to get access to all the features.
Files changed (162) 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 +2 -2
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.json +1 -1
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/auto_complete/item.rb +4 -4
  12. data/app/components/primer/alpha/auto_complete.rb +6 -6
  13. data/app/components/primer/alpha/dialog.rb +4 -5
  14. data/app/components/primer/alpha/dropdown.rb +53 -53
  15. data/app/components/primer/alpha/hellip_button.rb +41 -0
  16. data/app/components/primer/alpha/hidden_text_expander.rb +1 -1
  17. data/app/components/primer/alpha/layout.rb +48 -48
  18. data/app/components/primer/alpha/menu.css +1 -1
  19. data/app/components/primer/alpha/menu.css.json +1 -1
  20. data/app/components/primer/alpha/menu.css.map +1 -1
  21. data/app/components/primer/alpha/menu.rb +5 -5
  22. data/app/components/primer/alpha/modal_dialog.js +24 -12
  23. data/app/components/primer/alpha/modal_dialog.ts +29 -15
  24. data/app/components/primer/alpha/segmented_control.rb +20 -20
  25. data/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
  26. data/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
  27. data/app/components/primer/alpha/tab_container.rb +43 -0
  28. data/app/components/primer/{tab_container_component.ts → alpha/tab_container.ts} +0 -0
  29. data/app/components/primer/alpha/tab_nav.css +1 -1
  30. data/app/components/primer/alpha/tab_nav.css.json +1 -1
  31. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  32. data/app/components/primer/alpha/tab_nav.rb +32 -32
  33. data/app/components/primer/alpha/tool_tip.js +3 -7
  34. data/app/components/primer/alpha/tool_tip.ts +3 -7
  35. data/app/components/primer/alpha/tooltip.rb +18 -18
  36. data/app/components/primer/alpha/underline_nav.css +1 -1
  37. data/app/components/primer/alpha/underline_nav.css.json +1 -1
  38. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  39. data/app/components/primer/alpha/underline_nav.rb +18 -18
  40. data/app/components/primer/beta/auto_complete/item.rb +2 -3
  41. data/app/components/primer/beta/auto_complete.rb +14 -16
  42. data/app/components/primer/beta/avatar_stack.rb +12 -14
  43. data/app/components/primer/beta/blankslate.rb +0 -1
  44. data/app/components/primer/beta/border_box/header.rb +0 -2
  45. data/app/components/primer/beta/border_box.rb +0 -2
  46. data/app/components/primer/beta/breadcrumbs.css +1 -1
  47. data/app/components/primer/beta/breadcrumbs.css.json +1 -1
  48. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  49. data/app/components/primer/beta/breadcrumbs.rb +0 -1
  50. data/app/components/primer/beta/button.css +1 -1
  51. data/app/components/primer/beta/button.css.map +1 -1
  52. data/app/components/primer/beta/button.pcss +1 -1
  53. data/app/components/primer/beta/button.rb +9 -10
  54. data/app/components/primer/beta/button_group.rb +0 -1
  55. data/app/components/primer/beta/details.rb +0 -1
  56. data/app/components/primer/beta/flash.rb +0 -1
  57. data/app/components/primer/beta/link.rb +2 -3
  58. data/app/components/primer/beta/octicon.rb +0 -1
  59. data/app/components/primer/beta/popover.rb +0 -1
  60. data/app/components/primer/beta/relative_time.rb +6 -0
  61. data/app/components/primer/{state_component.css → beta/state.css} +0 -0
  62. data/app/components/primer/beta/state.css.json +1 -0
  63. data/app/components/primer/beta/state.css.map +1 -0
  64. data/app/components/primer/{state_component.pcss → beta/state.pcss} +0 -0
  65. data/app/components/primer/beta/state.rb +76 -0
  66. data/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
  67. data/app/components/primer/beta/subhead.css.json +1 -0
  68. data/app/components/primer/beta/subhead.css.map +1 -0
  69. data/app/components/primer/{subhead_component.html.erb → beta/subhead.html.erb} +0 -0
  70. data/app/components/primer/{subhead_component.pcss → beta/subhead.pcss} +0 -0
  71. data/app/components/primer/beta/subhead.rb +135 -0
  72. data/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
  73. data/app/components/primer/beta/timeline_item.css.json +1 -0
  74. data/app/components/primer/beta/timeline_item.css.map +1 -0
  75. data/app/components/primer/{timeline_item_component.html.erb → beta/timeline_item.html.erb} +0 -0
  76. data/app/components/primer/{timeline_item_component.pcss → beta/timeline_item.pcss} +0 -0
  77. data/app/components/primer/beta/timeline_item.rb +90 -0
  78. data/app/components/primer/beta/truncate.css +1 -1
  79. data/app/components/primer/beta/truncate.css.json +1 -1
  80. data/app/components/primer/beta/truncate.css.map +1 -1
  81. data/app/components/primer/beta/truncate.rb +0 -1
  82. data/app/components/primer/button_component.rb +9 -9
  83. data/app/components/primer/component.rb +0 -1
  84. data/app/components/primer/hellip_button.rb +2 -34
  85. data/app/components/primer/navigation/tab_component.rb +16 -16
  86. data/app/components/primer/primer.d.ts +1 -1
  87. data/app/components/primer/primer.js +1 -1
  88. data/app/components/primer/primer.pcss +3 -3
  89. data/app/components/primer/primer.ts +1 -1
  90. data/app/components/primer/state_component.rb +2 -69
  91. data/app/components/primer/subhead_component.rb +2 -128
  92. data/app/components/primer/tab_container_component.rb +2 -36
  93. data/app/components/primer/timeline_item_component.rb +5 -78
  94. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -0
  95. data/app/forms/example_toggle_switch_form.rb +8 -0
  96. data/app/forms/submit_button_form.rb +4 -4
  97. data/app/lib/primer/tabbed_component_helper.rb +1 -1
  98. data/lib/primer/deprecations.rb +7 -13
  99. data/lib/primer/deprecations.yml +24 -0
  100. data/lib/primer/forms/button.html.erb +2 -2
  101. data/lib/primer/forms/dsl/toggle_switch_input.rb +35 -0
  102. data/lib/primer/forms/toggle_switch.html.erb +17 -0
  103. data/lib/primer/forms/toggle_switch.rb +19 -0
  104. data/lib/primer/forms/toggle_switch_form.rb +74 -0
  105. data/lib/primer/view_components/linters/subhead_component_migration_counter.rb +1 -1
  106. data/lib/primer/view_components/version.rb +1 -1
  107. data/lib/rubocop/cop/primer/component_name_migration.rb +2 -1
  108. data/lib/tasks/docs.rake +7 -7
  109. data/previews/primer/alpha/action_list_preview.rb +44 -44
  110. data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +10 -0
  111. data/previews/primer/alpha/dialog_preview.rb +15 -0
  112. data/previews/primer/alpha/dropdown_preview.rb +97 -97
  113. data/previews/primer/alpha/hellip_button_preview.rb +24 -0
  114. data/previews/primer/alpha/layout_preview.rb +63 -63
  115. data/previews/primer/alpha/menu_preview/default.html.erb +5 -5
  116. data/previews/primer/alpha/menu_preview/playground.html.erb +5 -5
  117. data/previews/primer/alpha/segmented_control_preview.rb +60 -60
  118. data/previews/primer/alpha/tab_nav_preview.rb +22 -22
  119. data/previews/primer/alpha/tab_panels_preview.rb +2 -2
  120. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +6 -6
  121. data/previews/primer/alpha/tooltip_preview.rb +12 -12
  122. data/previews/primer/alpha/underline_nav_preview.rb +4 -4
  123. data/previews/primer/alpha/underline_panels_preview.rb +8 -8
  124. data/previews/primer/beta/auto_complete_item_preview/default.html.erb +2 -2
  125. data/previews/primer/beta/auto_complete_item_preview/playground.html.erb +2 -2
  126. data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb +3 -3
  127. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +2 -2
  128. data/previews/primer/beta/auto_complete_preview.rb +18 -18
  129. data/previews/primer/beta/avatar_stack_preview.rb +32 -32
  130. data/previews/primer/beta/blankslate_preview.rb +40 -40
  131. data/previews/primer/beta/border_box_preview.rb +38 -38
  132. data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
  133. data/previews/primer/beta/button_group_preview.rb +10 -10
  134. data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -4
  135. data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +16 -16
  136. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  137. data/previews/primer/beta/button_preview/trailing_action.html.erb +2 -2
  138. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -2
  139. data/previews/primer/beta/button_preview/with_tooltip.html.erb +2 -2
  140. data/previews/primer/beta/details_preview.rb +6 -6
  141. data/previews/primer/beta/relative_time_preview.rb +15 -0
  142. data/previews/primer/beta/state_preview.rb +66 -0
  143. data/previews/primer/beta/subhead_preview/actions.html.erb +14 -0
  144. data/previews/primer/beta/subhead_preview.rb +99 -0
  145. data/previews/primer/beta/timeline_item_preview.rb +30 -0
  146. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +1 -0
  147. data/previews/primer/forms/forms_preview.rb +2 -0
  148. data/static/arguments.json +189 -183
  149. data/static/audited_at.json +6 -0
  150. data/static/constants.json +78 -56
  151. data/static/statuses.json +12 -6
  152. metadata +39 -25
  153. data/app/components/primer/state_component.css.json +0 -1
  154. data/app/components/primer/state_component.css.map +0 -1
  155. data/app/components/primer/subhead_component.css.json +0 -1
  156. data/app/components/primer/subhead_component.css.map +0 -1
  157. data/app/components/primer/timeline_item_component.css.json +0 -1
  158. data/app/components/primer/timeline_item_component.css.map +0 -1
  159. data/previews/primer/hellip_button_preview.rb +0 -22
  160. data/previews/primer/state_component_preview.rb +0 -26
  161. data/previews/primer/subhead_component_preview.rb +0 -40
  162. data/previews/primer/timeline_item_component_preview.rb +0 -28
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -190,13 +190,9 @@ class ToolTipElement extends HTMLElement {
190
190
  this.#updateDirection()
191
191
  if (!this.shadowRoot) {
192
192
  const shadow = this.attachShadow({mode: 'open'})
193
- // eslint-disable-next-line github/no-inner-html
194
- shadow.innerHTML = `
195
- <style>
196
- ${this.styles()}
197
- </style>
198
- <slot></slot>
199
- `
193
+ const style = shadow.appendChild(document.createElement('style'))
194
+ style.textContent = this.styles()
195
+ shadow.appendChild(document.createElement('slot'))
200
196
  }
201
197
  this.hiddenFromView = true
202
198
  this.#allowUpdatePosition = true
data/app/components/primer/alpha/tooltip.rb CHANGED
@@ -33,8 +33,8 @@ module Primer
33
33
  # In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
34
34
  # A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
35
35
  # @code
36
- # <%= render(Primer::ButtonComponent.new(id: "save-button")) do |c| %>
37
- # <% c.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
36
+ # <%= render(Primer::ButtonComponent.new(id: "save-button")) do |component| %>
37
+ # <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
38
38
  # Save
39
39
  # <% end %>
40
40
  # @example As a label for an `IconButton`
@@ -55,36 +55,36 @@ module Primer
55
55
  # @description
56
56
  # Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
57
57
  # @code
58
- # <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |c| %>
59
- # <% c.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
58
+ # <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |component| %>
59
+ # <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
60
60
  # North
61
61
  # <% end %>
62
- # <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |c| %>
63
- # <% c.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
62
+ # <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |component| %>
63
+ # <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
64
64
  # South
65
65
  # <% end %>
66
- # <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |c| %>
67
- # <% c.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
66
+ # <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |component| %>
67
+ # <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
68
68
  # East
69
69
  # <% end %>
70
- # <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |c| %>
71
- # <% c.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
70
+ # <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |component| %>
71
+ # <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
72
72
  # West
73
73
  # <% end %>
74
- # <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |c| %>
75
- # <% c.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
74
+ # <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
75
+ # <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
76
76
  # Northwest
77
77
  # <% end %>
78
- # <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |c| %>
79
- # <% c.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
78
+ # <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
79
+ # <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
80
80
  # Southwest
81
81
  # <% end %>
82
- # <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |c| %>
83
- # <% c.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
82
+ # <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
83
+ # <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
84
84
  # Northeast
85
85
  # <% end %>
86
- # <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |c| %>
87
- # <% c.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
86
+ # <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
87
+ # <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
88
88
  # Southeast
89
89
  # <% end %>
90
90
  # @example Directly using `Tooltip`
data/app/components/primer/alpha/underline_nav.css CHANGED
@@ -1 +1 @@
1
- .UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
1
+ .UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
data/app/components/primer/alpha/underline_nav.css.json CHANGED
@@ -1 +1 @@
1
- {"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",":is(.UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])):after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
1
+ {"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
data/app/components/primer/alpha/underline_nav.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,mJAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48, 48px);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--primer-borderRadius-medium, 6px);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [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 /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--primer-borderRadius-medium, 6px);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48, 48px);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
1
+ {"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,0JAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48, 48px);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--primer-borderRadius-medium, 6px);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [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 /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--primer-borderRadius-medium, 6px);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48, 48px);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
data/app/components/primer/alpha/underline_nav.rb CHANGED
@@ -71,18 +71,18 @@ module Primer
71
71
  #
72
72
  # @example With icons and counters
73
73
  # <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
74
- # <% component.with_tab(href: "#", selected: true) do |t| %>
75
- # <% t.icon(icon: :star) %>
76
- # <% t.text { "Item 1" } %>
74
+ # <% component.with_tab(href: "#", selected: true) do |tab| %>
75
+ # <% tab.with_icon(icon: :star) %>
76
+ # <% tab.with_text { "Item 1" } %>
77
77
  # <% end %>
78
- # <% component.with_tab(href: "#") do |t| %>
79
- # <% t.icon(icon: :star) %>
80
- # <% t.text { "Item 2" } %>
81
- # <% t.counter(count: 10) %>
78
+ # <% component.with_tab(href: "#") do |tab| %>
79
+ # <% tab.with_icon(icon: :star) %>
80
+ # <% tab.with_text { "Item 2" } %>
81
+ # <% tab.with_counter(count: 10) %>
82
82
  # <% end %>
83
- # <% component.with_tab(href: "#") do |t| %>
84
- # <% t.text { "Item 3" } %>
85
- # <% t.counter(count: 10) %>
83
+ # <% component.with_tab(href: "#") do |tab| %>
84
+ # <% tab.with_text { "Item 3" } %>
85
+ # <% tab.with_counter(count: 10) %>
86
86
  # <% end %>
87
87
  # <% component.with_actions do %>
88
88
  # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
@@ -91,11 +91,11 @@ module Primer
91
91
  #
92
92
  # @example Align right
93
93
  # <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
94
- # <% component.with_tab(href: "#", selected: true) do |t| %>
95
- # <% t.text { "Item 1" } %>
94
+ # <% component.with_tab(href: "#", selected: true) do |tab| %>
95
+ # <% tab.with_text { "Item 1" } %>
96
96
  # <% end %>
97
- # <% component.with_tab(href: "#") do |t| %>
98
- # <% t.text { "Item 2" } %>
97
+ # <% component.with_tab(href: "#") do |tab| %>
98
+ # <% tab.with_text { "Item 2" } %>
99
99
  # <% end %>
100
100
  # <% component.with_actions do %>
101
101
  # <%= render(Primer::ButtonComponent.new) { "Button!" } %>
@@ -103,10 +103,10 @@ module Primer
103
103
  # <% end %>
104
104
  #
105
105
  # @example Customizing the body
106
- # <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
107
- # <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
108
- # <% c.with_tab(href: "#") { "Tab 2" } %>
109
- # <% c.with_tab(href: "#") { "Tab 3" } %>
106
+ # <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
107
+ # <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
108
+ # <% component.with_tab(href: "#") { "Tab 2" } %>
109
+ # <% component.with_tab(href: "#") { "Tab 3" } %>
110
110
  # <% end %>
111
111
  #
112
112
  # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
data/app/components/primer/beta/auto_complete/item.rb CHANGED
@@ -6,7 +6,6 @@ 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
10
9
  status :beta
11
10
 
12
11
  ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
@@ -36,10 +35,10 @@ module Primer
36
35
  renders_one :description
37
36
 
38
37
  # @example Default
39
- # <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
38
+ # <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do %>
40
39
  # Selected
41
40
  # <% end %>
42
- # <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do |c| %>
41
+ # <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do %>
43
42
  # Not selected
44
43
  # <% end %>
45
44
  #
data/app/components/primer/beta/auto_complete.rb CHANGED
@@ -12,8 +12,6 @@ module Primer
12
12
  # However, please note that a visible label should almost always
13
13
  # be used unless there is compelling reason not to. A placeholder is not a label.
14
14
  class AutoComplete < Primer::Component
15
- warn_on_deprecated_slot_setter
16
-
17
15
  status :beta
18
16
 
19
17
  DEFAULT_SIZE = :medium
@@ -96,8 +94,8 @@ module Primer
96
94
  # @description
97
95
  # Display any Octicon as a leading visual within the field
98
96
  # @code
99
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
100
- # <% c.leading_visual_icon(icon: :search) %>
97
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |component| %>
98
+ # <% component.with_leading_visual_icon(icon: :search) %>
101
99
  # <% end %>
102
100
  #
103
101
  # @example Trailing action
@@ -110,42 +108,42 @@ module Primer
110
108
  # @description
111
109
  # A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
112
110
  # @code
113
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |c| %>
114
- # <% c.leading_visual_icon(icon: :search) %>
111
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |component| %>
112
+ # <% component.with_leading_visual_icon(icon: :search) %>
115
113
  # <% end %>
116
114
  #
117
115
  # @example Full width field
118
116
  # @description
119
117
  # To allow field to span width of its container, set `full_width` to `true`.
120
118
  # @code
121
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |c| %>
122
- # <% c.leading_visual_icon(icon: :search) %>
119
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |component| %>
120
+ # <% component.with_leading_visual_icon(icon: :search) %>
123
121
  # <% end %>
124
122
  #
125
123
  # @example Inset variant
126
124
  # @description
127
125
  # Use the `inset` variant to change the input background color to be subtle.
128
126
  # @code
129
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |c| %>
130
- # <% c.leading_visual_icon(icon: :search) %>
127
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |component| %>
128
+ # <% component.with_leading_visual_icon(icon: :search) %>
131
129
  # <% end %>
132
130
  #
133
131
  # @example Monospace variant
134
132
  # @description
135
133
  # Use the `monospace` variant to change the input font family.
136
134
  # @code
137
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |c| %>
138
- # <% c.leading_visual_icon(icon: :search) %>
135
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |component| %>
136
+ # <% component.with_leading_visual_icon(icon: :search) %>
139
137
  # <% end %>
140
138
  #
141
139
  # @example With custom classes for the input
142
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
143
- # <% c.with_input(classes: "custom-class") %>
140
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
141
+ # <% component.with_input(classes: "custom-class") %>
144
142
  # <% end %>
145
143
  #
146
144
  # @example With custom classes for the results
147
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
148
- # <% c.with_results(classes: "custom-class") %>
145
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
146
+ # <% component.with_results(classes: "custom-class") %>
149
147
  # <% end %>
150
148
  #
151
149
  # @param label_text [String] The label of the input.
data/app/components/primer/beta/avatar_stack.rb CHANGED
@@ -4,8 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `AvatarStack` to stack multiple avatars together.
6
6
  class AvatarStack < Primer::Component
7
- warn_on_deprecated_slot_setter
8
-
9
7
  status :beta
10
8
 
11
9
  ALIGN_DEFAULT = :left
@@ -22,24 +20,24 @@ module Primer
22
20
  renders_many :avatars, "Primer::Beta::Avatar"
23
21
 
24
22
  # @example Default
25
- # <%= render(Primer::Beta::AvatarStack.new) do |c| %>
26
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
27
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
28
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
23
+ # <%= render(Primer::Beta::AvatarStack.new) do |component| %>
24
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
25
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
26
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
29
27
  # <% end %>
30
28
  #
31
29
  # @example Align right
32
- # <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
33
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
34
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
35
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
30
+ # <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |component| %>
31
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
32
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
33
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
36
34
  # <% end %>
37
35
  #
38
36
  # @example With tooltip
39
- # <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
40
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
41
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
42
- # <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
37
+ # <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |component| %>
38
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
39
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
40
+ # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
43
41
  # <% end %>
44
42
  #
45
43
  # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
data/app/components/primer/beta/blankslate.rb CHANGED
@@ -11,7 +11,6 @@ module Primer
11
11
  # - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
12
12
  # - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
13
13
  class Blankslate < Primer::Component
14
- warn_on_deprecated_slot_setter
15
14
  status :beta
16
15
 
17
16
  VISUAL_OPTIONS = %i[icon spinner image].freeze
data/app/components/primer/beta/border_box/header.rb CHANGED
@@ -7,8 +7,6 @@ module Primer
7
7
  #
8
8
  # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
9
9
  class Header < Primer::Component
10
- warn_on_deprecated_slot_setter
11
-
12
10
  status :beta
13
11
 
14
12
  TITLE_TAG_FALLBACK = :h2
data/app/components/primer/beta/border_box.rb CHANGED
@@ -4,8 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # `BorderBox` is a Box component with a border.
6
6
  class BorderBox < Primer::Component
7
- warn_on_deprecated_slot_setter
8
-
9
7
  status :beta
10
8
 
11
9
  DEFAULT_PADDING = :default
data/app/components/primer/beta/breadcrumbs.css CHANGED
@@ -1 +1 @@
1
- .breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}
1
+ .breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}
data/app/components/primer/beta/breadcrumbs.css.json CHANGED
@@ -1 +1 @@
1
- {"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",":is(.breadcrumb-item-selected",".breadcrumb-item[aria-current]:not([aria-current=false])):after",".breadcrumb-item-selected a"]}
1
+ {"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",".breadcrumb-item-selected:after",".breadcrumb-item[aria-current]:not([aria-current=false]):after",".breadcrumb-item-selected a"]}
data/app/components/primer/beta/breadcrumbs.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n margin-left: -0.35em;\n white-space: nowrap;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n margin: 0 0.5em;\n content: '';\n border-right: 0.1em solid var(--color-fg-muted);\n transform: rotate(15deg);\n }\n\n &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\n}\n\n.breadcrumb-item-selected a {\n color: var(--color-fg-default);\n}\n"]}
1
+ {"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n margin-left: -0.35em;\n white-space: nowrap;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n margin: 0 0.5em;\n content: '';\n border-right: 0.1em solid var(--color-fg-muted);\n transform: rotate(15deg);\n }\n\n &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\n}\n\n.breadcrumb-item-selected a {\n color: var(--color-fg-default);\n}\n"]}
data/app/components/primer/beta/breadcrumbs.rb CHANGED
@@ -17,7 +17,6 @@ module Primer
17
17
  #
18
18
  # For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
19
19
  class Breadcrumbs < Primer::Component
20
- warn_on_deprecated_slot_setter
21
20
  status :beta
22
21
 
23
22
  PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
data/app/components/primer/beta/button.css CHANGED
@@ -1 +1 @@
1
- :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
1
+ :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
data/app/components/primer/beta/button.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
data/app/components/primer/beta/button.pcss CHANGED
@@ -31,7 +31,7 @@
31
31
  min-width: max-content;
32
32
 
33
33
  /* mobile friendly sizing */
34
- @media (pointer: course) {
34
+ @media (pointer: coarse) {
35
35
  &::before {
36
36
  @mixin minTouchTarget 48px, 48px;
37
37
  }
data/app/components/primer/beta/button.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
6
6
  class Button < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  DEFAULT_SCHEME = :default
@@ -103,21 +102,21 @@ module Primer
103
102
  # <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
104
103
  #
105
104
  # @example With leading visual
106
- # <%= render(Primer::Beta::Button.new) do |c| %>
107
- # <% c.with_leading_visual_icon(icon: :star) %>
105
+ # <%= render(Primer::Beta::Button.new) do |component| %>
106
+ # <% component.with_leading_visual_icon(icon: :star) %>
108
107
  # Button
109
108
  # <% end %>
110
109
  #
111
110
  # @example With trailing visual
112
- # <%= render(Primer::Beta::Button.new) do |c| %>
113
- # <% c.with_trailing_visual_counter(count: 15) %>
111
+ # <%= render(Primer::Beta::Button.new) do |component| %>
112
+ # <% component.with_trailing_visual_counter(count: 15) %>
114
113
  # Button
115
114
  # <% end %>
116
115
  #
117
116
  # @example With leading and trailing visuals
118
- # <%= render(Primer::Beta::Button.new) do |c| %>
119
- # <% c.with_leading_visual_icon(icon: :star) %>
120
- # <% c.with_trailing_visual_counter(count: 15) %>
117
+ # <%= render(Primer::Beta::Button.new) do |component| %>
118
+ # <% component.with_leading_visual_icon(icon: :star) %>
119
+ # <% component.with_trailing_visual_counter(count: 15) %>
121
120
  # Button
122
121
  # <% end %>
123
122
  #
@@ -125,8 +124,8 @@ module Primer
125
124
  # @description
126
125
  # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
127
126
  # @code
128
- # <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c| %>
129
- # <% c.with_tooltip(text: "Tooltip text") %>
127
+ # <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
128
+ # <% component.with_tooltip(text: "Tooltip text") %>
130
129
  # Button
131
130
  # <% end %>
132
131
  #
data/app/components/primer/beta/button_group.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `ButtonGroup` to render a series of buttons.
6
6
  class ButtonGroup < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  # Required list of buttons to be rendered.
data/app/components/primer/beta/details.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `DetailsComponent` to reveal content after clicking a button.
6
6
  class Details < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  BODY_TAG_DEFAULT = :div
data/app/components/primer/beta/flash.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `Flash` to inform users of successful or pending actions.
6
6
  class Flash < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  # Optional action content showed on the right side of the component.
data/app/components/primer/beta/link.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
6
6
  class Link < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  DEFAULT_SCHEME = :default
@@ -51,8 +50,8 @@ module Primer
51
50
  # @description
52
51
  # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
53
52
  # @code
54
- # <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |c| %>
55
- # <% c.with_tooltip(text: "Tooltip text") %>
53
+ # <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
54
+ # <% component.with_tooltip(text: "Tooltip text") %>
56
55
  # Link
57
56
  # <% end %>
58
57
  #
data/app/components/primer/beta/octicon.rb CHANGED
@@ -7,7 +7,6 @@ module Primer
7
7
  # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
8
8
  # `Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.
9
9
  class Octicon < Primer::Component
10
- warn_on_deprecated_slot_setter
11
10
  status :beta
12
11
 
13
12
  SIZE_XSMALL = :xsmall