primer_view_components 0.0.116 → 0.0.117
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +34 -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 +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/auto_complete/item.rb +4 -4
- data/app/components/primer/alpha/auto_complete.rb +6 -6
- data/app/components/primer/alpha/dialog.rb +0 -2
- data/app/components/primer/alpha/dropdown.rb +53 -53
- data/app/components/primer/alpha/hellip_button.rb +41 -0
- data/app/components/primer/alpha/hidden_text_expander.rb +1 -1
- data/app/components/primer/alpha/layout.rb +48 -48
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.json +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.rb +5 -5
- data/app/components/primer/alpha/segmented_control.rb +20 -20
- data/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
- data/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
- data/app/components/primer/alpha/tab_container.rb +43 -0
- data/app/components/primer/{tab_container_component.ts → alpha/tab_container.ts} +0 -0
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.json +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.rb +32 -32
- data/app/components/primer/alpha/tool_tip.js +3 -7
- data/app/components/primer/alpha/tool_tip.ts +3 -7
- data/app/components/primer/alpha/tooltip.rb +18 -18
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.json +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.rb +18 -18
- data/app/components/primer/beta/auto_complete/item.rb +2 -3
- data/app/components/primer/beta/auto_complete.rb +14 -16
- data/app/components/primer/beta/avatar_stack.rb +12 -14
- data/app/components/primer/beta/blankslate.rb +0 -1
- data/app/components/primer/beta/border_box/header.rb +0 -2
- data/app/components/primer/beta/border_box.rb +0 -2
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.json +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.rb +0 -1
- data/app/components/primer/beta/button.rb +9 -10
- data/app/components/primer/beta/button_group.rb +0 -1
- data/app/components/primer/beta/details.rb +0 -1
- data/app/components/primer/beta/flash.rb +0 -1
- data/app/components/primer/beta/link.rb +2 -3
- data/app/components/primer/beta/octicon.rb +0 -1
- data/app/components/primer/beta/popover.rb +0 -1
- data/app/components/primer/{state_component.css → beta/state.css} +0 -0
- data/app/components/primer/beta/state.css.json +1 -0
- data/app/components/primer/beta/state.css.map +1 -0
- data/app/components/primer/{state_component.pcss → beta/state.pcss} +0 -0
- data/app/components/primer/beta/state.rb +76 -0
- data/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
- data/app/components/primer/beta/subhead.css.json +1 -0
- data/app/components/primer/beta/subhead.css.map +1 -0
- data/app/components/primer/{subhead_component.html.erb → beta/subhead.html.erb} +0 -0
- data/app/components/primer/{subhead_component.pcss → beta/subhead.pcss} +0 -0
- data/app/components/primer/beta/subhead.rb +135 -0
- data/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
- data/app/components/primer/beta/timeline_item.css.json +1 -0
- data/app/components/primer/beta/timeline_item.css.map +1 -0
- data/app/components/primer/{timeline_item_component.html.erb → beta/timeline_item.html.erb} +0 -0
- data/app/components/primer/{timeline_item_component.pcss → beta/timeline_item.pcss} +0 -0
- data/app/components/primer/beta/timeline_item.rb +90 -0
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.json +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.rb +0 -1
- data/app/components/primer/button_component.rb +9 -9
- data/app/components/primer/component.rb +0 -1
- data/app/components/primer/hellip_button.rb +2 -34
- data/app/components/primer/navigation/tab_component.rb +16 -16
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +3 -3
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/state_component.rb +2 -69
- data/app/components/primer/subhead_component.rb +2 -128
- data/app/components/primer/tab_container_component.rb +2 -36
- data/app/components/primer/timeline_item_component.rb +5 -78
- data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -0
- data/app/forms/example_toggle_switch_form.rb +8 -0
- data/app/forms/submit_button_form.rb +4 -4
- data/app/lib/primer/tabbed_component_helper.rb +1 -1
- data/lib/primer/deprecations.rb +7 -13
- data/lib/primer/deprecations.yml +24 -0
- data/lib/primer/forms/button.html.erb +2 -2
- data/lib/primer/forms/dsl/toggle_switch_input.rb +35 -0
- data/lib/primer/forms/toggle_switch.html.erb +17 -0
- data/lib/primer/forms/toggle_switch.rb +19 -0
- data/lib/primer/forms/toggle_switch_form.rb +74 -0
- data/lib/primer/view_components/linters/subhead_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/component_name_migration.rb +2 -1
- data/lib/tasks/docs.rake +6 -6
- data/previews/primer/alpha/action_list_preview.rb +44 -44
- data/previews/primer/alpha/dropdown_preview.rb +97 -97
- data/previews/primer/alpha/hellip_button_preview.rb +24 -0
- data/previews/primer/alpha/layout_preview.rb +63 -63
- data/previews/primer/alpha/menu_preview/default.html.erb +5 -5
- data/previews/primer/alpha/menu_preview/playground.html.erb +5 -5
- data/previews/primer/alpha/segmented_control_preview.rb +60 -60
- data/previews/primer/alpha/tab_nav_preview.rb +22 -22
- data/previews/primer/alpha/tab_panels_preview.rb +2 -2
- data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +6 -6
- data/previews/primer/alpha/tooltip_preview.rb +12 -12
- data/previews/primer/alpha/underline_nav_preview.rb +4 -4
- data/previews/primer/alpha/underline_panels_preview.rb +8 -8
- data/previews/primer/beta/auto_complete_item_preview/default.html.erb +2 -2
- data/previews/primer/beta/auto_complete_item_preview/playground.html.erb +2 -2
- data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb +3 -3
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +2 -2
- data/previews/primer/beta/auto_complete_preview.rb +18 -18
- data/previews/primer/beta/avatar_stack_preview.rb +32 -32
- data/previews/primer/beta/blankslate_preview.rb +40 -40
- data/previews/primer/beta/border_box_preview.rb +38 -38
- data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
- data/previews/primer/beta/button_group_preview.rb +10 -10
- data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -4
- data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +16 -16
- data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/trailing_action.html.erb +2 -2
- data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/with_tooltip.html.erb +2 -2
- data/previews/primer/beta/details_preview.rb +6 -6
- data/previews/primer/beta/state_preview.rb +66 -0
- data/previews/primer/beta/subhead_preview/actions.html.erb +14 -0
- data/previews/primer/beta/subhead_preview.rb +99 -0
- data/previews/primer/beta/timeline_item_preview.rb +30 -0
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +1 -0
- data/previews/primer/forms/forms_preview.rb +2 -0
- data/static/arguments.json +118 -118
- data/static/audited_at.json +6 -0
- data/static/constants.json +67 -54
- data/static/statuses.json +12 -6
- metadata +36 -23
- data/app/components/primer/state_component.css.json +0 -1
- data/app/components/primer/state_component.css.map +0 -1
- data/app/components/primer/subhead_component.css.json +0 -1
- data/app/components/primer/subhead_component.css.map +0 -1
- data/app/components/primer/timeline_item_component.css.json +0 -1
- data/app/components/primer/timeline_item_component.css.map +0 -1
- data/previews/primer/hellip_button_preview.rb +0 -22
- data/previews/primer/state_component_preview.rb +0 -26
- data/previews/primer/subhead_component_preview.rb +0 -40
- data/previews/primer/timeline_item_component_preview.rb +0 -28
|
@@ -81,9 +81,9 @@ module Primer
|
|
|
81
81
|
|
|
82
82
|
# @example Default
|
|
83
83
|
#
|
|
84
|
-
# <%= render(Primer::Alpha::Layout.new) do |
|
|
85
|
-
# <%
|
|
86
|
-
# <%
|
|
84
|
+
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
85
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
86
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
87
87
|
# <% end %>
|
|
88
88
|
#
|
|
89
89
|
# @example Main widths
|
|
@@ -97,21 +97,21 @@ module Primer
|
|
|
97
97
|
# When flowing as a row, `Main` takes the full width.
|
|
98
98
|
#
|
|
99
99
|
# @code
|
|
100
|
-
# <%= render(Primer::Alpha::Layout.new) do |
|
|
101
|
-
# <%
|
|
102
|
-
# <%
|
|
100
|
+
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
101
|
+
# <% component.with_main(width: :full, border: true) { "Main" } %>
|
|
102
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
103
103
|
# <% end %>
|
|
104
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
105
|
-
# <%
|
|
106
|
-
# <%
|
|
104
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
105
|
+
# <% component.with_main(width: :md, border: true) { "Main" } %>
|
|
106
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
107
107
|
# <% end %>
|
|
108
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
109
|
-
# <%
|
|
110
|
-
# <%
|
|
108
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
109
|
+
# <% component.with_main(width: :lg, border: true) { "Main" } %>
|
|
110
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
111
111
|
# <% end %>
|
|
112
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
113
|
-
# <%
|
|
114
|
-
# <%
|
|
112
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
113
|
+
# <% component.with_main(width: :xl, border: true) { "Main" } %>
|
|
114
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
115
115
|
# <% end %>
|
|
116
116
|
#
|
|
117
117
|
# @example Sidebar widths
|
|
@@ -126,17 +126,17 @@ module Primer
|
|
|
126
126
|
# When flowing as a row, `Sidebar` takes the full width.
|
|
127
127
|
#
|
|
128
128
|
# @code
|
|
129
|
-
# <%= render(Primer::Alpha::Layout.new) do |
|
|
130
|
-
# <%
|
|
131
|
-
# <%
|
|
129
|
+
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
130
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
131
|
+
# <% component.with_sidebar(width: :default, border: true) { "Sidebar" } %>
|
|
132
132
|
# <% end %>
|
|
133
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
134
|
-
# <%
|
|
135
|
-
# <%
|
|
133
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
134
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
135
|
+
# <% component.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
|
|
136
136
|
# <% end %>
|
|
137
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
138
|
-
# <%
|
|
139
|
-
# <%
|
|
137
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
138
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
139
|
+
# <% component.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
|
|
140
140
|
# <% end %>
|
|
141
141
|
#
|
|
142
142
|
# @example Sidebar placement
|
|
@@ -145,13 +145,13 @@ module Primer
|
|
|
145
145
|
# Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
|
|
146
146
|
#
|
|
147
147
|
# @code
|
|
148
|
-
# <%= render(Primer::Alpha::Layout.new) do |
|
|
149
|
-
# <%
|
|
150
|
-
# <%
|
|
148
|
+
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
149
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
150
|
+
# <% component.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
|
|
151
151
|
# <% end %>
|
|
152
|
-
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |
|
|
153
|
-
# <%
|
|
154
|
-
# <%
|
|
152
|
+
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |component| %>
|
|
153
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
154
|
+
# <% component.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
|
|
155
155
|
# <% end %>
|
|
156
156
|
#
|
|
157
157
|
# @example Sidebar placement as row
|
|
@@ -164,17 +164,17 @@ module Primer
|
|
|
164
164
|
# landing page to interact with the local navigation.
|
|
165
165
|
#
|
|
166
166
|
# @code
|
|
167
|
-
# <%= render(Primer::Alpha::Layout.new) do |
|
|
168
|
-
# <%
|
|
169
|
-
# <%
|
|
167
|
+
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
168
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
169
|
+
# <% component.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
|
|
170
170
|
# <% end %>
|
|
171
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
172
|
-
# <%
|
|
173
|
-
# <%
|
|
171
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
172
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
173
|
+
# <% component.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
|
|
174
174
|
# <% end %>
|
|
175
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |
|
|
176
|
-
# <%
|
|
177
|
-
# <%
|
|
175
|
+
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
176
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
177
|
+
# <% component.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
|
|
178
178
|
# <% end %>
|
|
179
179
|
#
|
|
180
180
|
# @example Changing when to render `Layout` as columns
|
|
@@ -184,17 +184,17 @@ module Primer
|
|
|
184
184
|
# Any screen size before this breakpoint will render the `Layout` in stacked rows.
|
|
185
185
|
#
|
|
186
186
|
# @code
|
|
187
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |
|
|
188
|
-
# <%
|
|
189
|
-
# <%
|
|
187
|
+
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component| %>
|
|
188
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
189
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
190
190
|
# <% end %>
|
|
191
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |
|
|
192
|
-
# <%
|
|
193
|
-
# <%
|
|
191
|
+
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |component| %>
|
|
192
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
193
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
194
194
|
# <% end %>
|
|
195
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |
|
|
196
|
-
# <%
|
|
197
|
-
# <%
|
|
195
|
+
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |component| %>
|
|
196
|
+
# <% component.with_main(border: true) { "Main" } %>
|
|
197
|
+
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
198
198
|
# <% end %>
|
|
199
199
|
#
|
|
200
200
|
# @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}
|
|
1
|
+
.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]","
|
|
1
|
+
{"name":"alpha/menu","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",".menu-item.selected:before",".menu-item[aria-current]:not([aria-current=false]):before",".menu-item[aria-selected=true]:before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,
|
|
1
|
+
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n list-style: none;\n background-color: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-neutral-subtle);\n }\n\n &:active {\n background-color: var(--color-canvas-subtle);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--color-menu-bg-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--color-primer-border-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--primer-control-small-gap, 4px);\n }\n\n & .menu-warning {\n float: right;\n color: var(--color-attention-fg);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--primer-control-small-gap, 4px);\n }\n\n &.alert {\n & .Counter {\n color: var(--color-danger-fg);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n}\n"]}
|
|
@@ -40,18 +40,18 @@ module Primer
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
# @example Default
|
|
43
|
-
# <%= render(Primer::Alpha::Menu.new) do |
|
|
44
|
-
# <%
|
|
43
|
+
# <%= render(Primer::Alpha::Menu.new) do |component| %>
|
|
44
|
+
# <% component.with_heading(tag: :h2) do %>
|
|
45
45
|
# Heading
|
|
46
46
|
# <% end %>
|
|
47
|
-
# <%
|
|
47
|
+
# <% component.with_item(selected: true, href: "#url") do %>
|
|
48
48
|
# Item 1
|
|
49
49
|
# <% end %>
|
|
50
|
-
# <%
|
|
50
|
+
# <% component.with_item(href: "#url") do %>
|
|
51
51
|
# <%= render(Primer::Beta::Octicon.new("check")) %>
|
|
52
52
|
# With Icon
|
|
53
53
|
# <% end %>
|
|
54
|
-
# <%
|
|
54
|
+
# <% component.with_item(href: "#url") do %>
|
|
55
55
|
# <%= render(Primer::Beta::Octicon.new("check")) %>
|
|
56
56
|
# With Icon and Counter
|
|
57
57
|
# <%= render(Primer::Beta::Counter.new(count: 25)) %>
|
|
@@ -26,39 +26,39 @@ module Primer
|
|
|
26
26
|
|
|
27
27
|
# @example Basic usage
|
|
28
28
|
#
|
|
29
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |
|
|
30
|
-
# <%=
|
|
31
|
-
# <%=
|
|
32
|
-
# <%=
|
|
29
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
|
|
30
|
+
# <%= component.with_item(label: "Preview", selected: true) %>
|
|
31
|
+
# <%= component.with_item(label: "Raw") %>
|
|
32
|
+
# <%= component.with_item(label: "Blame") %>
|
|
33
33
|
# <% end %>
|
|
34
34
|
#
|
|
35
35
|
# @example Small
|
|
36
36
|
#
|
|
37
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |
|
|
38
|
-
# <%=
|
|
39
|
-
# <%=
|
|
40
|
-
# <%=
|
|
37
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
|
|
38
|
+
# <%= component.with_item(label: "Preview", selected: true) %>
|
|
39
|
+
# <%= component.with_item(label: "Raw") %>
|
|
40
|
+
# <%= component.with_item(label: "Blame") %>
|
|
41
41
|
# <% end %>
|
|
42
42
|
#
|
|
43
43
|
# @example With icons
|
|
44
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |
|
|
45
|
-
# <%=
|
|
46
|
-
# <%=
|
|
47
|
-
# <%=
|
|
44
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
|
|
45
|
+
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
46
|
+
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
47
|
+
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
48
48
|
# <% end %>
|
|
49
49
|
#
|
|
50
50
|
# @example With icons only
|
|
51
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |
|
|
52
|
-
# <%=
|
|
53
|
-
# <%=
|
|
54
|
-
# <%=
|
|
51
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
|
|
52
|
+
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
53
|
+
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
54
|
+
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
55
55
|
# <% end %>
|
|
56
56
|
#
|
|
57
57
|
# @example Fill width of parent
|
|
58
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |
|
|
59
|
-
# <%=
|
|
60
|
-
# <%=
|
|
61
|
-
# <%=
|
|
58
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
|
|
59
|
+
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
60
|
+
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
61
|
+
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
62
62
|
# <% end %>
|
|
63
63
|
#
|
|
64
64
|
# @param hide_labels [Boolean] Whether to hide the labels and only show the icons
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
# Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
|
|
6
|
+
# It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
|
|
7
|
+
#
|
|
8
|
+
# This component requires javascript.
|
|
9
|
+
class TabContainer < Primer::Component
|
|
10
|
+
# @example Default
|
|
11
|
+
# <%= render(Primer::Alpha::TabContainer.new) do %>
|
|
12
|
+
# <div role="tablist">
|
|
13
|
+
# <button type="button" role="tab" aria-selected="true">Tab one</button>
|
|
14
|
+
# <button type="button" role="tab" tabindex="-1">Tab two</button>
|
|
15
|
+
# <button type="button" role="tab" tabindex="-1">Tab three</button>
|
|
16
|
+
# </div>
|
|
17
|
+
# <div role="tabpanel">
|
|
18
|
+
# Panel 1
|
|
19
|
+
# </div>
|
|
20
|
+
# <div role="tabpanel" hidden>
|
|
21
|
+
# Panel 2
|
|
22
|
+
# </div>
|
|
23
|
+
# <div role="tabpanel" hidden>
|
|
24
|
+
# Panel 3
|
|
25
|
+
# </div>
|
|
26
|
+
# <% end %>
|
|
27
|
+
#
|
|
28
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
29
|
+
def initialize(**system_arguments)
|
|
30
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
|
31
|
+
@system_arguments[:tag] = "tab-container"
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
def call
|
|
35
|
+
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
def render?
|
|
39
|
+
content.present?
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
end
|
|
43
|
+
end
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabnav{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--primer-stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--primer-text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--primer-control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}
|
|
1
|
+
.tabnav{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--primer-stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--primer-text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--primer-control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--primer-control-small-gap,4px)}.tabnav-tab .Counter{color:inherit;margin-left:var(--primer-control-small-gap,4px)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--primer-text-body-size-small,12px);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])",".tabnav-tab[aria-selected=true]","
|
|
1
|
+
{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])",".tabnav-tab[aria-selected=true]",".tabnav-tab.selected .octicon",".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",".tabnav-tab[aria-selected=true] .octicon",".tabnav-tab:hover",".tabnav-tab:focus",".tabnav-tab:focus-visible",".tabnav-tab .octicon",".tabnav-tab:active",".tabnav-tab .Counter",".tabnav-extra",".tabnav-extra>.octicon","a.tabnav-extra:hover",".tabnav-btn"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,kFAAoF,CADpF,iDAAmD,CADnD,YAGF,CAEA,aACE,YAAa,CACb,0DAA6D,CAC7D,aACF,CAEA,YAQE,wBAA6B,CAE7B,qDAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,kDAAoD,CACpD,gBAAiB,CAFjB,uFAA0F,CAI1F,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,6FAAgG,CAHhG,6BAQF,CAHE,
|
|
1
|
+
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,kFAAoF,CADpF,iDAAmD,CADnD,YAGF,CAEA,aACE,YAAa,CACb,0DAA6D,CAC7D,aACF,CAEA,YAQE,wBAA6B,CAE7B,qDAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,kDAAoD,CACpD,gBAAiB,CAFjB,uFAA0F,CAI1F,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,6FAAgG,CAHhG,6BAQF,CAHE,oIACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,uGAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,gDAEF,CAEA,qBAEE,aAAc,CADd,+CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,iDAAmD,CADnD,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,+DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n overflow: auto;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 23px;\n color: var(--color-fg-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--color-fg-default);\n background-color: var(--color-canvas-default); /* cover bottom border */\n border-color: var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--color-fg-muted);\n }\n\n & .octicon {\n margin-right: var(--primer-control-small-gap, 4px);\n color: var(--color-fg-muted);\n }\n\n & .Counter {\n margin-left: var(--primer-control-small-gap, 4px);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--primer-text-body-size-small, 12px);\n color: var(--color-fg-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n}\n"]}
|
|
@@ -48,52 +48,52 @@ module Primer
|
|
|
48
48
|
# @description
|
|
49
49
|
# `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
|
|
50
50
|
# @code
|
|
51
|
-
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |
|
|
52
|
-
# <%
|
|
53
|
-
# <%
|
|
54
|
-
# <%
|
|
51
|
+
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
|
|
52
|
+
# <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
|
|
53
|
+
# <% component.with_tab(href: "#") { "Tab 2" } %>
|
|
54
|
+
# <% component.with_tab(href: "#") { "Tab 3" } %>
|
|
55
55
|
# <% end %>
|
|
56
56
|
#
|
|
57
57
|
# @example Default with `<div>`
|
|
58
|
-
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |
|
|
59
|
-
# <%
|
|
60
|
-
# <%
|
|
61
|
-
# <%
|
|
58
|
+
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
|
|
59
|
+
# <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
|
|
60
|
+
# <% component.with_tab(href: "#") { "Tab 2" } %>
|
|
61
|
+
# <% component.with_tab(href: "#") { "Tab 3" } %>
|
|
62
62
|
# <% end %>
|
|
63
63
|
#
|
|
64
64
|
# @example With icons and counters
|
|
65
65
|
# <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
|
|
66
|
-
# <% component.with_tab(href: "#", selected: true) do |
|
|
67
|
-
# <%
|
|
68
|
-
# <%
|
|
66
|
+
# <% component.with_tab(href: "#", selected: true) do |tab| %>
|
|
67
|
+
# <% tab.with_icon(icon: :star) %>
|
|
68
|
+
# <% tab.with_text { "Item 1" } %>
|
|
69
69
|
# <% end %>
|
|
70
|
-
# <% component.with_tab(href: "#") do |
|
|
71
|
-
# <%
|
|
72
|
-
# <%
|
|
73
|
-
# <%
|
|
70
|
+
# <% component.with_tab(href: "#") do |tab| %>
|
|
71
|
+
# <% tab.with_icon(icon: :star) %>
|
|
72
|
+
# <% tab.with_text { "Item 2" } %>
|
|
73
|
+
# <% tab.with_counter(count: 10) %>
|
|
74
74
|
# <% end %>
|
|
75
|
-
# <% component.with_tab(href: "#") do |
|
|
76
|
-
# <%
|
|
77
|
-
# <%
|
|
75
|
+
# <% component.with_tab(href: "#") do |tab| %>
|
|
76
|
+
# <% tab.with_text { "Item 3" } %>
|
|
77
|
+
# <% tab.with_counter(count: 10) %>
|
|
78
78
|
# <% end %>
|
|
79
79
|
# <% end %>
|
|
80
80
|
#
|
|
81
81
|
# @example With extra content
|
|
82
|
-
# <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |
|
|
83
|
-
# <%
|
|
84
|
-
# <%
|
|
85
|
-
# <%
|
|
86
|
-
# <%
|
|
82
|
+
# <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |component| %>
|
|
83
|
+
# <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
|
|
84
|
+
# <% component.with_tab(href: "#") { "Tab 2" } %>
|
|
85
|
+
# <% component.with_tab(href: "#") { "Tab 3" } %>
|
|
86
|
+
# <% component.with_extra do %>
|
|
87
87
|
# <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
|
|
88
88
|
# <% end %>
|
|
89
89
|
# <% end %>
|
|
90
90
|
#
|
|
91
91
|
# @example Adding extra content after the tabs
|
|
92
|
-
# <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |
|
|
93
|
-
# <%
|
|
94
|
-
# <%
|
|
95
|
-
# <%
|
|
96
|
-
# <%
|
|
92
|
+
# <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
|
|
93
|
+
# <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
|
|
94
|
+
# <% component.with_tab(href: "#") { "Tab 2" } %>
|
|
95
|
+
# <% component.with_tab(href: "#") { "Tab 3" } %>
|
|
96
|
+
# <% component.with_extra(align: :right) do %>
|
|
97
97
|
# <div>
|
|
98
98
|
# <%= render(Primer::ButtonComponent.new) { "Button" } %>
|
|
99
99
|
# </div>
|
|
@@ -101,10 +101,10 @@ module Primer
|
|
|
101
101
|
# <% end %>
|
|
102
102
|
#
|
|
103
103
|
# @example Customizing the body
|
|
104
|
-
# <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |
|
|
105
|
-
# <%
|
|
106
|
-
# <%
|
|
107
|
-
# <%
|
|
104
|
+
# <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
|
|
105
|
+
# <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
|
|
106
|
+
# <% component.with_tab(href: "#") { "Tab 2" } %>
|
|
107
|
+
# <% component.with_tab(href: "#") { "Tab 3" } %>
|
|
108
108
|
# <% end %>
|
|
109
109
|
#
|
|
110
110
|
# @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>
|
|
@@ -191,13 +191,9 @@ class ToolTipElement extends HTMLElement {
|
|
|
191
191
|
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
|
|
192
192
|
if (!this.shadowRoot) {
|
|
193
193
|
const shadow = this.attachShadow({ mode: 'open' });
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
${this.styles()}
|
|
198
|
-
</style>
|
|
199
|
-
<slot></slot>
|
|
200
|
-
`;
|
|
194
|
+
const style = shadow.appendChild(document.createElement('style'));
|
|
195
|
+
style.textContent = this.styles();
|
|
196
|
+
shadow.appendChild(document.createElement('slot'));
|
|
201
197
|
}
|
|
202
198
|
this.hiddenFromView = true;
|
|
203
199
|
__classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
|
|
@@ -190,13 +190,9 @@ class ToolTipElement extends HTMLElement {
|
|
|
190
190
|
this.#updateDirection()
|
|
191
191
|
if (!this.shadowRoot) {
|
|
192
192
|
const shadow = this.attachShadow({mode: 'open'})
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
${this.styles()}
|
|
197
|
-
</style>
|
|
198
|
-
<slot></slot>
|
|
199
|
-
`
|
|
193
|
+
const style = shadow.appendChild(document.createElement('style'))
|
|
194
|
+
style.textContent = this.styles()
|
|
195
|
+
shadow.appendChild(document.createElement('slot'))
|
|
200
196
|
}
|
|
201
197
|
this.hiddenFromView = true
|
|
202
198
|
this.#allowUpdatePosition = true
|
|
@@ -33,8 +33,8 @@ module Primer
|
|
|
33
33
|
# In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
|
|
34
34
|
# A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
|
|
35
35
|
# @code
|
|
36
|
-
# <%= render(Primer::ButtonComponent.new(id: "save-button")) do |
|
|
37
|
-
# <%
|
|
36
|
+
# <%= render(Primer::ButtonComponent.new(id: "save-button")) do |component| %>
|
|
37
|
+
# <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
|
|
38
38
|
# Save
|
|
39
39
|
# <% end %>
|
|
40
40
|
# @example As a label for an `IconButton`
|
|
@@ -55,36 +55,36 @@ module Primer
|
|
|
55
55
|
# @description
|
|
56
56
|
# Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
|
|
57
57
|
# @code
|
|
58
|
-
# <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |
|
|
59
|
-
# <%
|
|
58
|
+
# <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |component| %>
|
|
59
|
+
# <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
|
|
60
60
|
# North
|
|
61
61
|
# <% end %>
|
|
62
|
-
# <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |
|
|
63
|
-
# <%
|
|
62
|
+
# <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |component| %>
|
|
63
|
+
# <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
|
|
64
64
|
# South
|
|
65
65
|
# <% end %>
|
|
66
|
-
# <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |
|
|
67
|
-
# <%
|
|
66
|
+
# <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |component| %>
|
|
67
|
+
# <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
|
|
68
68
|
# East
|
|
69
69
|
# <% end %>
|
|
70
|
-
# <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |
|
|
71
|
-
# <%
|
|
70
|
+
# <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |component| %>
|
|
71
|
+
# <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
|
|
72
72
|
# West
|
|
73
73
|
# <% end %>
|
|
74
|
-
# <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |
|
|
75
|
-
# <%
|
|
74
|
+
# <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
|
|
75
|
+
# <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
|
|
76
76
|
# Northwest
|
|
77
77
|
# <% end %>
|
|
78
|
-
# <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |
|
|
79
|
-
# <%
|
|
78
|
+
# <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
|
|
79
|
+
# <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
|
|
80
80
|
# Southwest
|
|
81
81
|
# <% end %>
|
|
82
|
-
# <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |
|
|
83
|
-
# <%
|
|
82
|
+
# <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
|
|
83
|
+
# <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
|
|
84
84
|
# Northeast
|
|
85
85
|
# <% end %>
|
|
86
|
-
# <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |
|
|
87
|
-
# <%
|
|
86
|
+
# <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
|
|
87
|
+
# <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
|
|
88
88
|
# Southeast
|
|
89
89
|
# <% end %>
|
|
90
90
|
# @example Directly using `Tooltip`
|
|
@@ -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)}
|
|
1
|
+
.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]","
|
|
1
|
+
{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
|