primer_view_components 0.1.0 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +40 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/divider.rb +2 -2
- data/app/components/primer/alpha/action_list/heading.html.erb +1 -1
- data/app/components/primer/alpha/action_list/heading.rb +11 -5
- data/app/components/primer/alpha/action_list/item.rb +19 -15
- data/app/components/primer/alpha/action_list.html.erb +7 -8
- data/app/components/primer/alpha/action_list.rb +16 -11
- data/app/components/primer/alpha/nav_list/{section.rb → group.rb} +5 -5
- data/app/components/primer/alpha/nav_list/item.html.erb +1 -1
- data/app/components/primer/alpha/nav_list/item.rb +15 -1
- data/app/components/primer/alpha/nav_list.d.ts +1 -0
- data/app/components/primer/alpha/nav_list.html.erb +8 -8
- data/app/components/primer/alpha/nav_list.js +21 -0
- data/app/components/primer/alpha/nav_list.rb +30 -34
- data/app/components/primer/alpha/nav_list.ts +23 -0
- data/app/components/primer/alpha/navigation/tab.rb +168 -0
- data/app/components/primer/alpha/overlay/header.html.erb +2 -2
- data/app/components/primer/alpha/overlay.rb +29 -9
- data/app/components/primer/alpha/tab_nav.rb +10 -3
- data/app/components/primer/alpha/tab_panels.rb +2 -2
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +1 -0
- data/app/components/primer/alpha/underline_nav.rb +2 -2
- data/app/components/primer/alpha/underline_panels.rb +2 -2
- data/app/components/primer/beta/button.html.erb +1 -1
- data/app/components/primer/beta/button.rb +2 -1
- data/app/components/primer/component.rb +34 -0
- data/app/components/primer/navigation/tab_component.rb +3 -157
- data/app/components/primer/truncate.rb +1 -1
- data/lib/primer/deprecations.yml +9 -0
- data/lib/primer/forms/dsl/text_field_input.rb +1 -1
- data/lib/primer/forms/primer_text_field.js +17 -6
- data/lib/primer/forms/primer_text_field.ts +15 -7
- data/lib/primer/forms/text_field.html.erb +3 -3
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/component_manifest.rb +2 -1
- data/lib/tasks/docs.rake +1 -1
- data/previews/primer/alpha/action_list_preview.rb +41 -29
- data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb +19 -0
- data/previews/primer/alpha/nav_list_preview.rb +19 -30
- data/previews/primer/alpha/overlay_preview.rb +34 -4
- data/previews/primer/alpha/tab_nav_preview/with_extra.html.erb +8 -0
- data/previews/primer/alpha/tab_nav_preview.rb +5 -0
- data/previews/primer/alpha/tab_panels_preview/with_extra.html.erb +17 -0
- data/previews/primer/alpha/tab_panels_preview.rb +5 -0
- data/static/arguments.json +64 -8
- data/static/audited_at.json +2 -1
- data/static/constants.json +20 -8
- data/static/previews.json +20 -5
- data/static/statuses.json +4 -3
- metadata +10 -8
- data/app/components/primer/alpha/nav_list/section.html.erb +0 -3
- data/previews/primer/alpha/action_list_preview/heading.html.erb +0 -4
- /data/app/components/primer/{navigation/tab_component.html.erb → alpha/navigation/tab.html.erb} +0 -0
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
module Navigation
|
|
6
|
+
# This component is part of navigation components such as `Primer::Alpha::TabNav`
|
|
7
|
+
# and `Primer::Alpha::UnderlineNav` and should not be used by itself.
|
|
8
|
+
#
|
|
9
|
+
# @accessibility
|
|
10
|
+
# `Tab` renders the selected anchor tab with `aria-current="page"` by default.
|
|
11
|
+
# When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
|
|
12
|
+
class Tab < Primer::Component
|
|
13
|
+
status :alpha
|
|
14
|
+
|
|
15
|
+
DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
|
|
16
|
+
ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
|
|
17
|
+
# Panel controlled by the Tab. This will not render anything in the tab itself.
|
|
18
|
+
# It will provide a accessor for the Tab's parent to call and render the panel
|
|
19
|
+
# content in the appropriate place.
|
|
20
|
+
# Refer to `UnderlineNav` and `TabNav` implementations for examples.
|
|
21
|
+
#
|
|
22
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
23
|
+
renders_one :panel, lambda { |**system_arguments|
|
|
24
|
+
return unless @with_panel
|
|
25
|
+
|
|
26
|
+
deny_tag_argument(**system_arguments)
|
|
27
|
+
system_arguments[:id] = @panel_id
|
|
28
|
+
system_arguments[:tag] = :div
|
|
29
|
+
system_arguments[:role] ||= :tabpanel
|
|
30
|
+
system_arguments[:tabindex] = 0
|
|
31
|
+
system_arguments[:hidden] = true unless @selected
|
|
32
|
+
|
|
33
|
+
label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
|
|
34
|
+
unless label_present
|
|
35
|
+
if @id.present?
|
|
36
|
+
system_arguments[:"aria-labelledby"] = @id
|
|
37
|
+
elsif !Rails.env.production?
|
|
38
|
+
raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
Primer::BaseComponent.new(**system_arguments)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
# Icon to be rendered in the Tab left.
|
|
46
|
+
#
|
|
47
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
|
|
48
|
+
renders_one :icon, lambda { |icon = nil, **system_arguments|
|
|
49
|
+
system_arguments[:classes] = class_names(
|
|
50
|
+
@icon_classes,
|
|
51
|
+
system_arguments[:classes]
|
|
52
|
+
)
|
|
53
|
+
Primer::Beta::Octicon.new(icon, **system_arguments)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
# The Tab's text.
|
|
57
|
+
#
|
|
58
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
|
|
59
|
+
renders_one :text, Primer::Beta::Text
|
|
60
|
+
|
|
61
|
+
# Counter to be rendered in the Tab right.
|
|
62
|
+
#
|
|
63
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
|
|
64
|
+
renders_one :counter, Primer::Beta::Counter
|
|
65
|
+
|
|
66
|
+
attr_reader :selected
|
|
67
|
+
|
|
68
|
+
# @example Default
|
|
69
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new(selected: true)) do |component| %>
|
|
70
|
+
# <% component.with_text { "Selected" } %>
|
|
71
|
+
# <% end %>
|
|
72
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
73
|
+
# <% component.with_text { "Not selected" } %>
|
|
74
|
+
# <% end %>
|
|
75
|
+
#
|
|
76
|
+
# @example With icons and counters
|
|
77
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
78
|
+
# <% component.with_icon(:star) %>
|
|
79
|
+
# <% component.with_text { "Tab" } %>
|
|
80
|
+
# <% end %>
|
|
81
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
82
|
+
# <% component.with_icon(:star) %>
|
|
83
|
+
# <% component.with_text { "Tab" } %>
|
|
84
|
+
# <% component.with_counter(count: 10) %>
|
|
85
|
+
# <% end %>
|
|
86
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
87
|
+
# <% component.with_text { "Tab" } %>
|
|
88
|
+
# <% component.with_counter(count: 10) %>
|
|
89
|
+
# <% end %>
|
|
90
|
+
#
|
|
91
|
+
# @example Inside a list
|
|
92
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new(list: true)) do |component| %>
|
|
93
|
+
# <% component.with_text { "Tab" } %>
|
|
94
|
+
# <% end %>
|
|
95
|
+
#
|
|
96
|
+
# @example With custom HTML
|
|
97
|
+
# <%= render(Primer::Alpha::Navigation::Tab.new) do %>
|
|
98
|
+
# <div>
|
|
99
|
+
# This is my <strong>custom HTML</strong>
|
|
100
|
+
# </div>
|
|
101
|
+
# <% end %>
|
|
102
|
+
#
|
|
103
|
+
# @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
|
|
104
|
+
# @param selected [Boolean] Whether the Tab is selected or not.
|
|
105
|
+
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
|
106
|
+
# @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
|
|
107
|
+
# @param icon_classes [Boolean] Classes that must always be applied to icons.
|
|
108
|
+
# @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
|
|
109
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
110
|
+
def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
|
|
111
|
+
@selected = selected
|
|
112
|
+
@icon_classes = icon_classes
|
|
113
|
+
@list = list
|
|
114
|
+
@with_panel = with_panel
|
|
115
|
+
|
|
116
|
+
@system_arguments = system_arguments
|
|
117
|
+
@id = @system_arguments[:id]
|
|
118
|
+
@wrapper_arguments = wrapper_arguments
|
|
119
|
+
|
|
120
|
+
if with_panel || @system_arguments[:tag] == :button
|
|
121
|
+
@system_arguments[:tag] = :button
|
|
122
|
+
@system_arguments[:type] = :button
|
|
123
|
+
@system_arguments[:role] = :tab
|
|
124
|
+
panel_id(panel_id)
|
|
125
|
+
# https://www.w3.org/TR/wai-aria-practices/#presentation_role
|
|
126
|
+
@wrapper_arguments[:role] = :presentation
|
|
127
|
+
else
|
|
128
|
+
@system_arguments[:tag] = :a
|
|
129
|
+
end
|
|
130
|
+
|
|
131
|
+
@wrapper_arguments[:tag] = :li
|
|
132
|
+
@wrapper_arguments[:display] ||= :inline_flex
|
|
133
|
+
|
|
134
|
+
return unless @selected
|
|
135
|
+
|
|
136
|
+
if @system_arguments[:tag] == :a
|
|
137
|
+
aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
|
|
138
|
+
@system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
|
|
139
|
+
else
|
|
140
|
+
@system_arguments[:"aria-selected"] = true
|
|
141
|
+
end
|
|
142
|
+
end
|
|
143
|
+
|
|
144
|
+
def wrapper
|
|
145
|
+
unless @list
|
|
146
|
+
yield
|
|
147
|
+
return # returning `yield` caused a double render
|
|
148
|
+
end
|
|
149
|
+
|
|
150
|
+
render(Primer::BaseComponent.new(**@wrapper_arguments)) do
|
|
151
|
+
yield if block_given?
|
|
152
|
+
end
|
|
153
|
+
end
|
|
154
|
+
|
|
155
|
+
private
|
|
156
|
+
|
|
157
|
+
def panel_id(panel_id)
|
|
158
|
+
if panel_id.blank?
|
|
159
|
+
raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
|
|
160
|
+
else
|
|
161
|
+
@panel_id = panel_id
|
|
162
|
+
@system_arguments[:"aria-controls"] = @panel_id
|
|
163
|
+
end
|
|
164
|
+
end
|
|
165
|
+
end
|
|
166
|
+
end
|
|
167
|
+
end
|
|
168
|
+
end
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
|
2
2
|
<div class="Overlay-headerContentWrap">
|
|
3
3
|
<div class="Overlay-titleWrap">
|
|
4
|
-
<h1 class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
|
|
4
|
+
<h1 id="<%= @id %>" class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
|
|
5
5
|
<% if content.present? %>
|
|
6
6
|
<%= content %>
|
|
7
7
|
<% elsif @subtitle.present? %>
|
|
8
|
-
<h2
|
|
8
|
+
<h2 class="Overlay-description"><%= @subtitle %></h2>
|
|
9
9
|
<% end %>
|
|
10
10
|
</div>
|
|
11
11
|
<div class="Overlay-actionWrap">
|
|
@@ -68,14 +68,18 @@ module Primer
|
|
|
68
68
|
# Optional button to open the Overlay.
|
|
69
69
|
#
|
|
70
70
|
# @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
|
|
71
|
-
renders_one :show_button, lambda {
|
|
71
|
+
renders_one :show_button, lambda { |icon: nil, **system_arguments|
|
|
72
72
|
system_arguments[:classes] = class_names(
|
|
73
73
|
system_arguments[:classes]
|
|
74
74
|
)
|
|
75
|
-
system_arguments[:id] =
|
|
76
|
-
system_arguments["popovertoggletarget"] =
|
|
77
|
-
system_arguments[:
|
|
78
|
-
|
|
75
|
+
system_arguments[:id] = show_button_id
|
|
76
|
+
system_arguments["popovertoggletarget"] = overlay_id
|
|
77
|
+
system_arguments[:aria] = (system_arguments[:aria] || {}).merge({ controls: overlay_id, haspopup: "true" })
|
|
78
|
+
if icon.present?
|
|
79
|
+
Primer::Beta::IconButton.new(icon: icon, **system_arguments)
|
|
80
|
+
else
|
|
81
|
+
Primer::Beta::Button.new(**system_arguments)
|
|
82
|
+
end
|
|
79
83
|
}
|
|
80
84
|
|
|
81
85
|
# Header content.
|
|
@@ -85,7 +89,7 @@ module Primer
|
|
|
85
89
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
86
90
|
renders_one :header, lambda { |divider: false, size: :medium, visually_hide_title: @visually_hide_title, **system_arguments|
|
|
87
91
|
Primer::Alpha::Overlay::Header.new(
|
|
88
|
-
id:
|
|
92
|
+
id: title_id,
|
|
89
93
|
title: @title,
|
|
90
94
|
subtitle: @subtitle,
|
|
91
95
|
size: size,
|
|
@@ -165,7 +169,6 @@ module Primer
|
|
|
165
169
|
@system_arguments[:classes] = class_names(
|
|
166
170
|
"Overlay",
|
|
167
171
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
|
|
168
|
-
"Overlay--motion-scaleFade",
|
|
169
172
|
system_arguments[:classes]
|
|
170
173
|
)
|
|
171
174
|
@system_arguments[:tag] = "anchored-position"
|
|
@@ -182,13 +185,30 @@ module Primer
|
|
|
182
185
|
|
|
183
186
|
@system_arguments[:popover] = popover
|
|
184
187
|
@system_arguments[:aria] ||= {}
|
|
185
|
-
@system_arguments[:aria][:describedby] ||= "#{@id}-description"
|
|
186
188
|
end
|
|
187
189
|
|
|
188
190
|
def before_render
|
|
189
|
-
|
|
191
|
+
if header?
|
|
192
|
+
@system_arguments[:aria][:labelledby] ||= title_id
|
|
193
|
+
else
|
|
194
|
+
@system_arguments[:aria][:label] = @title
|
|
195
|
+
end
|
|
190
196
|
with_body unless body?
|
|
191
197
|
end
|
|
198
|
+
|
|
199
|
+
private
|
|
200
|
+
|
|
201
|
+
def overlay_id
|
|
202
|
+
@system_arguments[:id]
|
|
203
|
+
end
|
|
204
|
+
|
|
205
|
+
def title_id
|
|
206
|
+
"overlay-title-#{overlay_id}"
|
|
207
|
+
end
|
|
208
|
+
|
|
209
|
+
def show_button_id
|
|
210
|
+
"overlay-show-#{overlay_id}"
|
|
211
|
+
end
|
|
192
212
|
end
|
|
193
213
|
end
|
|
194
214
|
end
|
|
@@ -9,7 +9,7 @@ module Primer
|
|
|
9
9
|
# - By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
|
|
10
10
|
# implicit landmark role of `navigation` which should be reserved for main links.
|
|
11
11
|
# For all other set of links, set tag to `:div`.
|
|
12
|
-
# - See <%= link_to_component(Primer::Navigation::
|
|
12
|
+
# - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
|
|
13
13
|
# accessibility considerations.
|
|
14
14
|
class TabNav < Primer::Component
|
|
15
15
|
include Primer::TabbedComponentHelper
|
|
@@ -22,13 +22,13 @@ module Primer
|
|
|
22
22
|
TAG_DEFAULT = :nav
|
|
23
23
|
TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
|
|
24
24
|
|
|
25
|
-
# Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::
|
|
25
|
+
# Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
|
|
26
26
|
#
|
|
27
27
|
# @param selected [Boolean] Whether the tab is selected.
|
|
28
28
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
29
29
|
renders_many :tabs, lambda { |selected: false, **system_arguments|
|
|
30
30
|
system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
|
|
31
|
-
Primer::Navigation::
|
|
31
|
+
Primer::Alpha::Navigation::Tab.new(
|
|
32
32
|
list: true,
|
|
33
33
|
selected: selected,
|
|
34
34
|
**system_arguments
|
|
@@ -124,6 +124,13 @@ module Primer
|
|
|
124
124
|
|
|
125
125
|
aria_label_for_page_nav(label)
|
|
126
126
|
end
|
|
127
|
+
|
|
128
|
+
def before_render
|
|
129
|
+
# Eagerly evaluate content to avoid https://github.com/primer/view_components/issues/1790
|
|
130
|
+
content
|
|
131
|
+
|
|
132
|
+
super
|
|
133
|
+
end
|
|
127
134
|
end
|
|
128
135
|
end
|
|
129
136
|
end
|
|
@@ -14,7 +14,7 @@ module Primer
|
|
|
14
14
|
TAG_DEFAULT = :nav
|
|
15
15
|
TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
|
|
16
16
|
|
|
17
|
-
# Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::
|
|
17
|
+
# Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
|
|
18
18
|
#
|
|
19
19
|
# @param id [String] Unique ID of tab.
|
|
20
20
|
# @param selected [Boolean] Whether the tab is selected.
|
|
@@ -23,7 +23,7 @@ module Primer
|
|
|
23
23
|
system_arguments[:id] = id
|
|
24
24
|
system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
|
|
25
25
|
|
|
26
|
-
Primer::Navigation::
|
|
26
|
+
Primer::Alpha::Navigation::Tab.new(
|
|
27
27
|
selected: selected,
|
|
28
28
|
with_panel: true,
|
|
29
29
|
list: true,
|
|
@@ -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)}.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
|
|
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%;z-index:1}.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 +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,
|
|
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,kBA8DF,CAvDE,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,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,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 z-index: 1; /* raise above full-width flash banner */\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]}
|
|
@@ -12,7 +12,7 @@ module Primer
|
|
|
12
12
|
# - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
|
|
13
13
|
# implicit landmark role of `navigation` which should be reserved for main links.
|
|
14
14
|
# For all other set of links, set tag to `:div`.
|
|
15
|
-
# - See <%= link_to_component(Primer::Navigation::
|
|
15
|
+
# - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
|
|
16
16
|
# accessibility considerations.
|
|
17
17
|
class UnderlineNav < Primer::Component
|
|
18
18
|
include Primer::TabbedComponentHelper
|
|
@@ -29,7 +29,7 @@ module Primer
|
|
|
29
29
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
30
30
|
renders_many :tabs, lambda { |selected: false, **system_arguments|
|
|
31
31
|
system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
|
|
32
|
-
Primer::Navigation::
|
|
32
|
+
Primer::Alpha::Navigation::Tab.new(
|
|
33
33
|
list: true,
|
|
34
34
|
selected: selected,
|
|
35
35
|
icon_classes: "UnderlineNav-octicon",
|
|
@@ -6,7 +6,7 @@ module Primer
|
|
|
6
6
|
class UnderlinePanels < Primer::Component
|
|
7
7
|
include Primer::TabbedComponentHelper
|
|
8
8
|
include Primer::UnderlineNavHelper
|
|
9
|
-
# Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::
|
|
9
|
+
# Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
|
|
10
10
|
#
|
|
11
11
|
# @param id [String] Unique ID of tab.
|
|
12
12
|
# @param selected [Boolean] Whether the tab is selected.
|
|
@@ -15,7 +15,7 @@ module Primer
|
|
|
15
15
|
system_arguments[:id] = id
|
|
16
16
|
system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
|
|
17
17
|
|
|
18
|
-
Primer::Navigation::
|
|
18
|
+
Primer::Alpha::Navigation::Tab.new(
|
|
19
19
|
selected: selected,
|
|
20
20
|
with_panel: true,
|
|
21
21
|
list: true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, classes: "Button-withTooltip") do -%>
|
|
1
|
+
<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, display: (:block if @block), classes: "Button-withTooltip") do -%>
|
|
2
2
|
<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
|
|
3
3
|
<span class="<%= @align_content_classes %>">
|
|
4
4
|
<% if leading_visual %>
|
|
@@ -144,6 +144,7 @@ module Primer
|
|
|
144
144
|
**system_arguments
|
|
145
145
|
)
|
|
146
146
|
@scheme = scheme
|
|
147
|
+
@block = block
|
|
147
148
|
|
|
148
149
|
@system_arguments = system_arguments
|
|
149
150
|
|
|
@@ -162,7 +163,7 @@ module Primer
|
|
|
162
163
|
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
|
163
164
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
|
|
164
165
|
"Button",
|
|
165
|
-
"Button--fullWidth" => block
|
|
166
|
+
"Button--fullWidth" => @block
|
|
166
167
|
)
|
|
167
168
|
end
|
|
168
169
|
|
|
@@ -58,6 +58,40 @@ module Primer
|
|
|
58
58
|
system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
|
|
59
59
|
end
|
|
60
60
|
|
|
61
|
+
# Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
|
|
62
|
+
# each hash and returns them in the new hash.
|
|
63
|
+
#
|
|
64
|
+
# Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
|
|
65
|
+
# => { disabled: "true", invalid: "true" }
|
|
66
|
+
#
|
|
67
|
+
# It's designed to be used to normalize and merge aria information from system_arguments
|
|
68
|
+
# hashes. Consider using this pattern in component initializers:
|
|
69
|
+
#
|
|
70
|
+
# @system_arguments[:aria] = merge_aria(
|
|
71
|
+
# @system_arguments,
|
|
72
|
+
# { aria: { labelled_by: id } }
|
|
73
|
+
# )
|
|
74
|
+
def merge_aria(*hashes)
|
|
75
|
+
{}.tap do |result|
|
|
76
|
+
hashes.each do |hash|
|
|
77
|
+
next unless hash
|
|
78
|
+
|
|
79
|
+
result.merge!(hash.delete(:aria) || {})
|
|
80
|
+
|
|
81
|
+
hash.delete_if do |key, val|
|
|
82
|
+
key_s = key.to_s
|
|
83
|
+
|
|
84
|
+
if key.start_with?("aria-")
|
|
85
|
+
result[key_s.sub("aria-", "").to_sym] = val
|
|
86
|
+
true
|
|
87
|
+
else
|
|
88
|
+
false
|
|
89
|
+
end
|
|
90
|
+
end
|
|
91
|
+
end
|
|
92
|
+
end
|
|
93
|
+
end
|
|
94
|
+
|
|
61
95
|
def validate_aria_label
|
|
62
96
|
aria_label = aria("label", @system_arguments)
|
|
63
97
|
aria_labelledby = aria("labelledby", @system_arguments)
|
|
@@ -2,163 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
module Primer
|
|
4
4
|
module Navigation
|
|
5
|
-
#
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
# @accessibility
|
|
9
|
-
# `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
|
|
10
|
-
# When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
|
|
11
|
-
class TabComponent < Primer::Component
|
|
12
|
-
DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
|
|
13
|
-
ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
|
|
14
|
-
# Panel controlled by the Tab. This will not render anything in the tab itself.
|
|
15
|
-
# It will provide a accessor for the Tab's parent to call and render the panel
|
|
16
|
-
# content in the appropriate place.
|
|
17
|
-
# Refer to `UnderlineNav` and `TabNav` implementations for examples.
|
|
18
|
-
#
|
|
19
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
20
|
-
renders_one :panel, lambda { |**system_arguments|
|
|
21
|
-
return unless @with_panel
|
|
22
|
-
|
|
23
|
-
deny_tag_argument(**system_arguments)
|
|
24
|
-
system_arguments[:id] = @panel_id
|
|
25
|
-
system_arguments[:tag] = :div
|
|
26
|
-
system_arguments[:role] ||= :tabpanel
|
|
27
|
-
system_arguments[:tabindex] = 0
|
|
28
|
-
system_arguments[:hidden] = true unless @selected
|
|
29
|
-
|
|
30
|
-
label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
|
|
31
|
-
unless label_present
|
|
32
|
-
if @id.present?
|
|
33
|
-
system_arguments[:"aria-labelledby"] = @id
|
|
34
|
-
elsif !Rails.env.production?
|
|
35
|
-
raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
|
|
36
|
-
end
|
|
37
|
-
end
|
|
38
|
-
|
|
39
|
-
Primer::BaseComponent.new(**system_arguments)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
# Icon to be rendered in the Tab left.
|
|
43
|
-
#
|
|
44
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
|
|
45
|
-
renders_one :icon, lambda { |icon = nil, **system_arguments|
|
|
46
|
-
system_arguments[:classes] = class_names(
|
|
47
|
-
@icon_classes,
|
|
48
|
-
system_arguments[:classes]
|
|
49
|
-
)
|
|
50
|
-
Primer::Beta::Octicon.new(icon, **system_arguments)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
# The Tab's text.
|
|
54
|
-
#
|
|
55
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
|
|
56
|
-
renders_one :text, Primer::Beta::Text
|
|
57
|
-
|
|
58
|
-
# Counter to be rendered in the Tab right.
|
|
59
|
-
#
|
|
60
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
|
|
61
|
-
renders_one :counter, Primer::Beta::Counter
|
|
62
|
-
|
|
63
|
-
attr_reader :selected
|
|
64
|
-
|
|
65
|
-
# @example Default
|
|
66
|
-
# <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |component| %>
|
|
67
|
-
# <% component.with_text { "Selected" } %>
|
|
68
|
-
# <% end %>
|
|
69
|
-
# <%= render(Primer::Navigation::TabComponent.new) do |component| %>
|
|
70
|
-
# <% component.with_text { "Not selected" } %>
|
|
71
|
-
# <% end %>
|
|
72
|
-
#
|
|
73
|
-
# @example With icons and counters
|
|
74
|
-
# <%= render(Primer::Navigation::TabComponent.new) do |component| %>
|
|
75
|
-
# <% component.with_icon(:star) %>
|
|
76
|
-
# <% component.with_text { "Tab" } %>
|
|
77
|
-
# <% end %>
|
|
78
|
-
# <%= render(Primer::Navigation::TabComponent.new) do |component| %>
|
|
79
|
-
# <% component.with_icon(:star) %>
|
|
80
|
-
# <% component.with_text { "Tab" } %>
|
|
81
|
-
# <% component.with_counter(count: 10) %>
|
|
82
|
-
# <% end %>
|
|
83
|
-
# <%= render(Primer::Navigation::TabComponent.new) do |component| %>
|
|
84
|
-
# <% component.with_text { "Tab" } %>
|
|
85
|
-
# <% component.with_counter(count: 10) %>
|
|
86
|
-
# <% end %>
|
|
87
|
-
#
|
|
88
|
-
# @example Inside a list
|
|
89
|
-
# <%= render(Primer::Navigation::TabComponent.new(list: true)) do |component| %>
|
|
90
|
-
# <% component.with_text { "Tab" } %>
|
|
91
|
-
# <% end %>
|
|
92
|
-
#
|
|
93
|
-
# @example With custom HTML
|
|
94
|
-
# <%= render(Primer::Navigation::TabComponent.new) do %>
|
|
95
|
-
# <div>
|
|
96
|
-
# This is my <strong>custom HTML</strong>
|
|
97
|
-
# </div>
|
|
98
|
-
# <% end %>
|
|
99
|
-
#
|
|
100
|
-
# @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
|
|
101
|
-
# @param selected [Boolean] Whether the Tab is selected or not.
|
|
102
|
-
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
|
103
|
-
# @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
|
|
104
|
-
# @param icon_classes [Boolean] Classes that must always be applied to icons.
|
|
105
|
-
# @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
|
|
106
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
107
|
-
def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
|
|
108
|
-
@selected = selected
|
|
109
|
-
@icon_classes = icon_classes
|
|
110
|
-
@list = list
|
|
111
|
-
@with_panel = with_panel
|
|
112
|
-
|
|
113
|
-
@system_arguments = system_arguments
|
|
114
|
-
@id = @system_arguments[:id]
|
|
115
|
-
@wrapper_arguments = wrapper_arguments
|
|
116
|
-
|
|
117
|
-
if with_panel || @system_arguments[:tag] == :button
|
|
118
|
-
@system_arguments[:tag] = :button
|
|
119
|
-
@system_arguments[:type] = :button
|
|
120
|
-
@system_arguments[:role] = :tab
|
|
121
|
-
panel_id(panel_id)
|
|
122
|
-
# https://www.w3.org/TR/wai-aria-practices/#presentation_role
|
|
123
|
-
@wrapper_arguments[:role] = :presentation
|
|
124
|
-
else
|
|
125
|
-
@system_arguments[:tag] = :a
|
|
126
|
-
end
|
|
127
|
-
|
|
128
|
-
@wrapper_arguments[:tag] = :li
|
|
129
|
-
@wrapper_arguments[:display] ||= :inline_flex
|
|
130
|
-
|
|
131
|
-
return unless @selected
|
|
132
|
-
|
|
133
|
-
if @system_arguments[:tag] == :a
|
|
134
|
-
aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
|
|
135
|
-
@system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
|
|
136
|
-
else
|
|
137
|
-
@system_arguments[:"aria-selected"] = true
|
|
138
|
-
end
|
|
139
|
-
end
|
|
140
|
-
|
|
141
|
-
def wrapper
|
|
142
|
-
unless @list
|
|
143
|
-
yield
|
|
144
|
-
return # returning `yield` caused a double render
|
|
145
|
-
end
|
|
146
|
-
|
|
147
|
-
render(Primer::BaseComponent.new(**@wrapper_arguments)) do
|
|
148
|
-
yield if block_given?
|
|
149
|
-
end
|
|
150
|
-
end
|
|
151
|
-
|
|
152
|
-
private
|
|
153
|
-
|
|
154
|
-
def panel_id(panel_id)
|
|
155
|
-
if panel_id.blank?
|
|
156
|
-
raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
|
|
157
|
-
else
|
|
158
|
-
@panel_id = panel_id
|
|
159
|
-
@system_arguments[:"aria-controls"] = @panel_id
|
|
160
|
-
end
|
|
161
|
-
end
|
|
5
|
+
# nodoc
|
|
6
|
+
class TabComponent < Primer::Alpha::Navigation::Tab
|
|
7
|
+
status :deprecated
|
|
162
8
|
end
|
|
163
9
|
end
|
|
164
10
|
end
|
data/lib/primer/deprecations.yml
CHANGED
|
@@ -26,6 +26,15 @@ deprecations:
|
|
|
26
26
|
autocorrect: true
|
|
27
27
|
replacement: "Primer::Beta::IconButton"
|
|
28
28
|
|
|
29
|
+
- component: "Primer::Navigation::TabComponent"
|
|
30
|
+
autocorrect: true
|
|
31
|
+
replacement: "Primer::Alpha::Navigation::Tab"
|
|
32
|
+
|
|
29
33
|
- component: "Primer::Tooltip"
|
|
30
34
|
autocorrect: true
|
|
31
35
|
replacement: "Primer::Alpha::Tooltip"
|
|
36
|
+
|
|
37
|
+
- component: "Primer::Truncate"
|
|
38
|
+
autocorrect: false
|
|
39
|
+
replacement: "Primer::Beta::Truncate"
|
|
40
|
+
guide: "https://primer.style/view-components/guides/primer_truncate"
|