primer_view_components 0.0.115 → 0.0.116

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/styles/primer_view_components.css +1 -1
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/action_list/divider.rb +0 -2
  6. data/app/components/primer/alpha/action_list/heading.rb +0 -2
  7. data/app/components/primer/alpha/action_list/item.rb +0 -2
  8. data/app/components/primer/alpha/action_list.rb +0 -1
  9. data/app/components/primer/alpha/auto_complete/item.rb +0 -1
  10. data/app/components/primer/alpha/auto_complete.rb +8 -9
  11. data/app/components/primer/alpha/banner.rb +0 -1
  12. data/app/components/primer/alpha/button_marketing.rb +0 -2
  13. data/app/components/primer/alpha/dialog.rb +0 -1
  14. data/app/components/primer/alpha/dropdown/menu.rb +2 -0
  15. data/app/components/primer/alpha/dropdown.html.erb +3 -3
  16. data/app/components/primer/alpha/image.rb +0 -1
  17. data/app/components/primer/alpha/layout.rb +1 -1
  18. data/app/components/primer/alpha/octicon_symbols.rb +0 -2
  19. data/app/components/primer/alpha/segmented_control.css +1 -1
  20. data/app/components/primer/alpha/segmented_control.css.json +1 -1
  21. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  22. data/app/components/primer/alpha/segmented_control.pcss +12 -0
  23. data/app/components/primer/alpha/segmented_control.rb +5 -5
  24. data/app/components/primer/alpha/tab_panels.rb +6 -6
  25. data/app/components/primer/alpha/text_field.rb +0 -1
  26. data/app/components/primer/alpha/toggle_switch.rb +6 -8
  27. data/app/components/primer/alpha/tooltip.rb +0 -2
  28. data/app/components/primer/alpha/underline_panels.rb +6 -6
  29. data/app/components/primer/beta/auto_complete/item.rb +1 -0
  30. data/app/components/primer/beta/auto_complete.rb +12 -10
  31. data/app/components/primer/beta/avatar.rb +0 -1
  32. data/app/components/primer/beta/avatar_stack.rb +2 -0
  33. data/app/components/primer/beta/base_button.rb +0 -1
  34. data/app/components/primer/beta/blankslate.rb +43 -42
  35. data/app/components/primer/beta/border_box/header.rb +2 -0
  36. data/app/components/primer/beta/border_box.rb +2 -0
  37. data/app/components/primer/beta/breadcrumbs.rb +1 -0
  38. data/app/components/primer/beta/button.css +1 -1
  39. data/app/components/primer/beta/button.css.json +1 -1
  40. data/app/components/primer/beta/button.css.map +1 -1
  41. data/app/components/primer/beta/button.pcss +5 -0
  42. data/app/components/primer/beta/button.rb +1 -0
  43. data/app/components/primer/beta/button_group.rb +3 -0
  44. data/app/components/primer/beta/clipboard_copy.rb +0 -1
  45. data/app/components/primer/beta/close_button.rb +0 -1
  46. data/app/components/primer/beta/counter.rb +0 -1
  47. data/app/components/primer/beta/details.rb +6 -3
  48. data/app/components/primer/beta/flash.rb +1 -0
  49. data/app/components/primer/beta/heading.rb +0 -1
  50. data/app/components/primer/beta/icon_button.rb +0 -1
  51. data/app/components/primer/beta/label.rb +0 -1
  52. data/app/components/primer/beta/link.rb +1 -0
  53. data/app/components/primer/beta/markdown.rb +0 -1
  54. data/app/components/primer/beta/octicon.rb +1 -0
  55. data/app/components/primer/beta/popover.rb +1 -0
  56. data/app/components/primer/beta/progress_bar.rb +7 -7
  57. data/app/components/primer/beta/relative_time.rb +0 -1
  58. data/app/components/primer/beta/spinner.rb +0 -1
  59. data/app/components/primer/beta/text.rb +0 -1
  60. data/app/components/primer/beta/truncate.rb +3 -2
  61. data/app/components/primer/box.rb +0 -1
  62. data/app/components/primer/button_component.rb +2 -2
  63. data/app/components/primer/component.rb +1 -0
  64. data/app/components/primer/conditional_wrapper.rb +0 -2
  65. data/app/components/primer/dropdown_menu_component.rb +3 -3
  66. data/app/components/primer/hellip_button.rb +0 -2
  67. data/app/components/primer/icon_button.rb +0 -1
  68. data/app/components/primer/layout_component.rb +0 -2
  69. data/app/components/primer/local_time.rb +0 -1
  70. data/app/components/primer/octicon_component.rb +0 -1
  71. data/app/components/primer/state_component.rb +0 -1
  72. data/app/components/primer/subhead_component.rb +0 -2
  73. data/app/components/primer/tab_container_component.rb +0 -2
  74. data/app/components/primer/time_ago_component.rb +0 -1
  75. data/app/components/primer/timeline_item_component.rb +0 -1
  76. data/app/components/primer/tooltip.rb +0 -1
  77. data/app/components/primer/truncate.rb +0 -2
  78. data/lib/primer/forms/builder.rb +2 -3
  79. data/lib/primer/forms/dsl/form_reference_input.rb +25 -2
  80. data/lib/primer/forms/dsl/input.rb +27 -0
  81. data/lib/primer/forms/form_reference.html.erb +1 -1
  82. data/lib/primer/forms/form_reference.rb +4 -0
  83. data/lib/primer/view_components/version.rb +1 -1
  84. data/previews/primer/alpha/tab_panels_preview.rb +8 -8
  85. data/previews/primer/beta/details_preview.rb +6 -6
  86. data/previews/primer/local_time_component_preview.rb +3 -0
  87. data/previews/primer/time_ago_component_preview.rb +3 -0
  88. data/previews/primer/url_helpers.rb +2 -2
  89. metadata +2 -2
data/app/components/primer/alpha/action_list/divider.rb CHANGED
@@ -5,8 +5,6 @@ module Primer
5
5
  class ActionList
6
6
  # Section heading rendered above the section contents.
7
7
  class Divider < Primer::Component
8
- warn_on_deprecated_slot_setter
9
-
10
8
  DEFAULT_SCHEME = :subtle
11
9
  SCHEME_MAPPINGS = {
12
10
  DEFAULT_SCHEME => nil,
data/app/components/primer/alpha/action_list/heading.rb CHANGED
@@ -5,8 +5,6 @@ module Primer
5
5
  class ActionList
6
6
  # Heading used to describe each sub list within an action list.
7
7
  class Heading < Primer::Component
8
- warn_on_deprecated_slot_setter
9
-
10
8
  DEFAULT_SCHEME = :subtle
11
9
  SCHEME_MAPPINGS = {
12
10
  DEFAULT_SCHEME => nil,
data/app/components/primer/alpha/action_list/item.rb CHANGED
@@ -6,8 +6,6 @@ module Primer
6
6
  # An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,
7
7
  # such as icons, avatars, and counters.
8
8
  class Item < Primer::Component
9
- warn_on_deprecated_slot_setter
10
-
11
9
  DEFAULT_SIZE = :medium
12
10
  SIZE_MAPPINGS = {
13
11
  DEFAULT_SIZE => nil,
data/app/components/primer/alpha/action_list.rb CHANGED
@@ -9,7 +9,6 @@ module Primer
9
9
  # Each item in an action list can be augmented by specifying corresponding leading
10
10
  # and/or trailing visuals.
11
11
  class ActionList < Primer::Component
12
- warn_on_deprecated_slot_setter
13
12
  status :alpha
14
13
 
15
14
  DEFAULT_ROLE = :list
data/app/components/primer/alpha/auto_complete/item.rb CHANGED
@@ -5,7 +5,6 @@ module Primer
5
5
  class AutoComplete
6
6
  # Use `AutoCompleteItem` to list results of an auto-completed search.
7
7
  class Item < Primer::Component
8
- warn_on_deprecated_slot_setter
9
8
  status :deprecated
10
9
 
11
10
  # @example Default
data/app/components/primer/alpha/auto_complete.rb CHANGED
@@ -12,7 +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
15
  status :deprecated
17
16
 
18
17
  # Customizable results list.
@@ -67,39 +66,39 @@ module Primer
67
66
  # @description
68
67
  # Labels are stacked by default.
69
68
  # @code
70
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
69
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
71
70
  #
72
71
  # @example With inline label
73
72
  # @description
74
73
  # Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
75
74
  # @code
76
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
75
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
77
76
  #
78
77
  # @example With non-visible label
79
78
  # @description
80
79
  # A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
81
80
  # @code
82
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
81
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
83
82
  #
84
83
  # @example With icon
85
84
  # @description
86
85
  # To display a search icon, set `with_icon` to `true`.
87
86
  # @code
88
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
87
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
89
88
  #
90
89
  # @example With icon and non-visible label
91
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
90
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
92
91
  #
93
92
  # @example With clear button
94
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
93
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
95
94
  #
96
95
  # @example With custom classes for the input
97
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
96
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
98
97
  # <% c.with_input(classes: "custom-class") %>
99
98
  # <% end %>
100
99
  #
101
100
  # @example With custom classes for the results
102
- # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
101
+ # <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
103
102
  # <% c.with_results(classes: "custom-class") do %>
104
103
  # <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
105
104
  # Apple
data/app/components/primer/alpha/banner.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Alpha
5
5
  # Use `Banner` to highlight important information.
6
6
  class Banner < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :alpha
9
8
 
10
9
  # A button or custom content that will render on the right-hand side of the component.
data/app/components/primer/alpha/button_marketing.rb CHANGED
@@ -4,8 +4,6 @@ module Primer
4
4
  module Alpha
5
5
  # Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
6
6
  class ButtonMarketing < Primer::Component
7
- warn_on_deprecated_slot_setter
8
-
9
7
  DEFAULT_SCHEME = :default
10
8
  SCHEME_MAPPINGS = {
11
9
  DEFAULT_SCHEME => "",
data/app/components/primer/alpha/dialog.rb CHANGED
@@ -18,7 +18,6 @@ module Primer
18
18
  # `aria-labelledby` relationship between the title and the unique id of
19
19
  # the dialog.
20
20
  class Dialog < Primer::Component
21
- warn_on_deprecated_slot_setter
22
21
  status :alpha
23
22
  audited_at "2022-10-10"
24
23
 
data/app/components/primer/alpha/dropdown/menu.rb CHANGED
@@ -80,7 +80,9 @@ module Primer
80
80
 
81
81
  def call
82
82
  component = if BUTTON_TAGS.include?(@system_arguments[:tag])
83
+ # rubocop:disable Primer/ComponentNameMigration
83
84
  Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
85
+ # rubocop:enable Primer/ComponentNameMigration
84
86
  else
85
87
  Primer::BaseComponent.new(**@system_arguments)
86
88
  end
data/app/components/primer/alpha/dropdown.html.erb CHANGED
@@ -1,9 +1,9 @@
1
- <%= render(Primer::Beta::Details.new(**@system_arguments)) do |c| %>
2
- <% c.summary(**@button_arguments) do %>
1
+ <%= render(Primer::Beta::Details.new(**@system_arguments)) do |component| %>
2
+ <% component.with_summary(**@button_arguments) do %>
3
3
  <%= button %>
4
4
  <% end %>
5
5
 
6
- <% c.body do %>
6
+ <% component.with_body do %>
7
7
  <%= menu %>
8
8
  <% end %>
9
9
  <% end %>
data/app/components/primer/alpha/image.rb CHANGED
@@ -7,7 +7,6 @@ module Primer
7
7
  # @accessibility
8
8
  # Always provide a meaningful `alt`.
9
9
  class Image < Primer::Component
10
- warn_on_deprecated_slot_setter
11
10
  status :alpha
12
11
 
13
12
  # @example Default
data/app/components/primer/alpha/layout.rb CHANGED
@@ -215,7 +215,7 @@ module Primer
215
215
  end
216
216
 
217
217
  def render?
218
- main.present? && sidebar.present?
218
+ main? && sidebar?
219
219
  end
220
220
 
221
221
  # The layout's main content.
data/app/components/primer/alpha/octicon_symbols.rb CHANGED
@@ -6,8 +6,6 @@ module Primer
6
6
  module Alpha
7
7
  # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
8
8
  class OcticonSymbols < Primer::Component
9
- warn_on_deprecated_slot_setter
10
-
11
9
  # @example Symbol dictionary
12
10
  # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
13
11
  # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
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/text_field.rb CHANGED
@@ -7,7 +7,6 @@ module Primer
7
7
  # A text field suitable for use outside a form. For a text field input suitable for use
8
8
  # within an HTML form, see the `Primer::Forms` namespace.
9
9
  class TextField < Primer::Component
10
- warn_on_deprecated_slot_setter
11
10
  status :alpha
12
11
 
13
12
  # @!method initialize
data/app/components/primer/alpha/toggle_switch.rb CHANGED
@@ -6,8 +6,6 @@ module Primer
6
6
  # settings that should cause an immediate update. If configured with a "src" attribute, the component will
7
7
  # make a POST request containing data of the form "value: 0 | 1".
8
8
  class ToggleSwitch < Primer::Component
9
- warn_on_deprecated_slot_setter
10
-
11
9
  SIZE_DEFAULT = :medium
12
10
  SIZE_MAPPINGS = {
13
11
  SIZE_DEFAULT => nil,
@@ -23,22 +21,22 @@ module Primer
23
21
  STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
24
22
 
25
23
  # @example Default
26
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo")) %>
24
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch")) %>
27
25
  #
28
26
  # @example Checked
29
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true)) %>
27
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true)) %>
30
28
  #
31
29
  # @example Disabled
32
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", enabled: false)) %>
30
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", enabled: false)) %>
33
31
  #
34
32
  # @example Checked and Disabled
35
- # <%= 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)) %>
36
34
  #
37
35
  # @example Small
38
- # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", size: :small)) %>
36
+ # <%= render(Primer::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", size: :small)) %>
39
37
  #
40
38
  # @example With status label positioned at the end
41
- # <%= 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)) %>
42
40
  #
43
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.
44
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/tooltip.rb CHANGED
@@ -23,8 +23,6 @@ module Primer
23
23
  # - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
24
24
  # `label` type is usually only appropriate for an icon-only control.
25
25
  class Tooltip < Primer::Component
26
- warn_on_deprecated_slot_setter
27
-
28
26
  DIRECTION_DEFAULT = :s
29
27
  DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
30
28
 
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,6 +6,7 @@ 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
data/app/components/primer/beta/auto_complete.rb CHANGED
@@ -12,6 +12,8 @@ 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
+
15
17
  status :beta
16
18
 
17
19
  DEFAULT_SIZE = :medium
@@ -94,7 +96,7 @@ module Primer
94
96
  # @description
95
97
  # Display any Octicon as a leading visual within the field
96
98
  # @code
97
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
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| %>
98
100
  # <% c.leading_visual_icon(icon: :search) %>
99
101
  # <% end %>
100
102
  #
@@ -102,13 +104,13 @@ module Primer
102
104
  # @description
103
105
  # Show a clear button
104
106
  # @code
105
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) %>
107
+ # <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/view-components/rails-app/auto_complete", show_clear_button: true )) %>
106
108
  #
107
109
  # @example Visually hidden label
108
110
  # @description
109
111
  # A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
110
112
  # @code
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: "/auto_complete", visually_hide_label: true)) do |c| %>
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| %>
112
114
  # <% c.leading_visual_icon(icon: :search) %>
113
115
  # <% end %>
114
116
  #
@@ -116,7 +118,7 @@ module Primer
116
118
  # @description
117
119
  # To allow field to span width of its container, set `full_width` to `true`.
118
120
  # @code
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: "/auto_complete", full_width: true)) do |c| %>
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| %>
120
122
  # <% c.leading_visual_icon(icon: :search) %>
121
123
  # <% end %>
122
124
  #
@@ -124,7 +126,7 @@ module Primer
124
126
  # @description
125
127
  # Use the `inset` variant to change the input background color to be subtle.
126
128
  # @code
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: "/auto_complete", inset: true)) do |c| %>
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| %>
128
130
  # <% c.leading_visual_icon(icon: :search) %>
129
131
  # <% end %>
130
132
  #
@@ -132,17 +134,17 @@ module Primer
132
134
  # @description
133
135
  # Use the `monospace` variant to change the input font family.
134
136
  # @code
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: "/auto_complete", monospace: true)) do |c| %>
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| %>
136
138
  # <% c.leading_visual_icon(icon: :search) %>
137
139
  # <% end %>
138
140
  #
139
141
  # @example With custom classes for the input
140
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
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| %>
141
143
  # <% c.with_input(classes: "custom-class") %>
142
144
  # <% end %>
143
145
  #
144
146
  # @example With custom classes for the results
145
- # <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
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| %>
146
148
  # <% c.with_results(classes: "custom-class") %>
147
149
  # <% end %>
148
150
  #
@@ -192,8 +194,8 @@ module Primer
192
194
 
193
195
  # add `input` and `results` without needing to explicitly call them in the view
194
196
  def before_render
195
- results(classes: "") unless results
196
- input(classes: "") unless input
197
+ with_results(classes: "") unless results?
198
+ with_input(classes: "") unless input?
197
199
  end
198
200
  end
199
201
  end
data/app/components/primer/beta/avatar.rb CHANGED
@@ -17,7 +17,6 @@ module Primer
17
17
  # rather than `@kittenuser`.
18
18
  # [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
19
19
  class Avatar < Primer::Component
20
- warn_on_deprecated_slot_setter
21
20
  status :beta
22
21
 
23
22
  DEFAULT_SIZE = 20
data/app/components/primer/beta/avatar_stack.rb CHANGED
@@ -4,6 +4,8 @@ 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
+
7
9
  status :beta
8
10
 
9
11
  ALIGN_DEFAULT = :left
data/app/components/primer/beta/base_button.rb CHANGED
@@ -4,7 +4,6 @@ module Primer
4
4
  module Beta
5
5
  # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
6
6
  class BaseButton < Primer::Component
7
- warn_on_deprecated_slot_setter
8
7
  status :beta
9
8
 
10
9
  DEFAULT_TAG = :button