primer_view_components 0.0.114 → 0.0.116
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +52 -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/item.rb +6 -6
- data/app/components/primer/alpha/auto_complete/auto_complete.html.erb +1 -1
- data/app/components/primer/alpha/auto_complete.rb +10 -10
- data/app/components/primer/alpha/banner.html.erb +1 -1
- data/app/components/primer/alpha/dialog.rb +2 -0
- data/app/components/primer/alpha/dropdown/menu.rb +2 -0
- data/app/components/primer/alpha/dropdown.html.erb +3 -3
- data/app/components/primer/alpha/image_crop.html.erb +1 -1
- data/app/components/primer/alpha/layout.css +1 -0
- data/app/components/primer/alpha/layout.css.json +1 -0
- data/app/components/primer/alpha/layout.css.map +1 -0
- data/app/components/primer/alpha/layout.pcss +268 -0
- data/app/components/primer/alpha/layout.rb +1 -1
- data/app/components/primer/{menu_component.css → alpha/menu.css} +0 -0
- data/app/components/primer/alpha/menu.css.json +1 -0
- data/app/components/primer/alpha/menu.css.map +1 -0
- data/app/components/primer/{menu_component.html.erb → alpha/menu.html.erb} +0 -0
- data/app/components/primer/{menu_component.pcss → alpha/menu.pcss} +0 -0
- data/app/components/primer/alpha/menu.rb +76 -0
- data/app/components/primer/{octicon_symbols_component.html.erb → alpha/octicon_symbols.html.erb} +0 -0
- data/app/components/primer/alpha/octicon_symbols.rb +59 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +12 -0
- data/app/components/primer/alpha/segmented_control.rb +5 -5
- data/app/components/primer/alpha/tab_panels.rb +6 -6
- data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
- data/app/components/primer/alpha/toggle_switch.rb +6 -6
- data/app/components/primer/alpha/tool_tip.js +77 -69
- data/app/components/primer/alpha/tool_tip.ts +63 -51
- data/app/components/primer/alpha/underline_panels.rb +6 -6
- data/app/components/primer/beta/auto_complete/item.rb +5 -4
- data/app/components/primer/beta/auto_complete.rb +15 -13
- data/app/components/primer/beta/avatar_stack.rb +2 -0
- data/app/components/primer/beta/blankslate.rb +48 -47
- data/app/components/primer/beta/border_box/header.rb +2 -0
- data/app/components/primer/beta/border_box.rb +2 -0
- data/app/components/primer/beta/breadcrumbs.rb +1 -0
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +5 -0
- data/app/components/primer/beta/button.rb +8 -7
- data/app/components/primer/beta/button_group.rb +3 -0
- data/app/components/primer/beta/clipboard_copy.html.erb +2 -2
- data/app/components/primer/beta/close_button.rb +1 -1
- data/app/components/primer/beta/details.rb +6 -3
- data/app/components/primer/beta/flash.rb +1 -0
- data/app/components/primer/beta/icon_button.html.erb +1 -1
- data/app/components/primer/beta/link.rb +1 -0
- data/app/components/primer/{octicon_component.html.erb → beta/octicon.html.erb} +0 -0
- data/app/components/primer/beta/octicon.rb +89 -0
- data/app/components/primer/beta/popover.rb +1 -0
- data/app/components/primer/beta/progress_bar.rb +7 -7
- data/app/components/primer/beta/relative_time.rb +1 -1
- data/app/components/primer/{spinner_component.html.erb → beta/spinner.html.erb} +0 -0
- data/app/components/primer/beta/spinner.rb +45 -0
- data/app/components/primer/beta/truncate.rb +3 -2
- data/app/components/primer/blankslate_component.rb +3 -3
- data/app/components/primer/button_component.rb +5 -5
- data/app/components/primer/component.rb +1 -0
- data/app/components/primer/dropdown_menu_component.rb +3 -3
- data/app/components/primer/icon_button.html.erb +2 -2
- data/app/components/primer/local_time.rb +2 -0
- data/app/components/primer/menu_component.rb +2 -69
- data/app/components/primer/navigation/tab_component.rb +2 -2
- data/app/components/primer/octicon_component.rb +2 -81
- data/app/components/primer/octicon_symbols_component.rb +2 -52
- data/app/components/primer/primer.d.ts +2 -0
- data/app/components/primer/primer.js +2 -0
- data/app/components/primer/primer.pcss +2 -1
- data/app/components/primer/primer.ts +2 -0
- data/app/components/primer/spinner_component.rb +2 -38
- data/app/components/primer/time_ago_component.rb +1 -1
- data/app/components/primer/timeline_item_component.rb +2 -2
- data/app/forms/immediate_validation_form.rb +29 -0
- data/app/forms/multi_input_form.rb +4 -2
- data/app/lib/primer/css/layout.css +1 -378
- data/app/lib/primer/css/layout.css.json +1 -1
- data/app/lib/primer/octicon/cache.rb +1 -1
- data/app/lib/primer/view_helper.rb +1 -1
- data/lib/primer/deprecations.yml +26 -0
- data/lib/primer/forms/builder.rb +47 -8
- data/lib/primer/forms/check_box.html.erb +3 -1
- data/lib/primer/forms/dsl/form_reference_input.rb +25 -2
- data/lib/primer/forms/dsl/input.rb +50 -1
- data/lib/primer/forms/dsl/multi_input.rb +6 -9
- data/lib/primer/forms/dsl/select_list_input.rb +1 -1
- data/lib/primer/forms/dsl/text_field_input.rb +31 -1
- data/lib/primer/forms/form_control.html.erb +17 -13
- data/lib/primer/forms/form_control.rb +2 -0
- data/lib/primer/forms/form_reference.html.erb +1 -1
- data/lib/primer/forms/form_reference.rb +4 -0
- data/lib/primer/forms/multi.html.erb +6 -2
- data/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/lib/primer/forms/primer_multi_input.js +45 -0
- data/lib/primer/forms/primer_multi_input.ts +46 -0
- data/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/lib/primer/forms/primer_text_field.js +62 -0
- data/lib/primer/forms/primer_text_field.ts +48 -0
- data/lib/primer/forms/radio_button.html.erb +3 -1
- data/lib/primer/forms/text_field.html.erb +8 -8
- data/lib/primer/forms/text_field.rb +11 -0
- data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +5 -5
- data/lib/tasks/helpers/ast_traverser.rb +1 -1
- data/previews/primer/alpha/action_list_preview.rb +1 -1
- data/previews/primer/alpha/auto_complete_preview.rb +62 -6
- data/previews/primer/alpha/layout_preview.rb +179 -6
- data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb +3 -3
- data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb +3 -3
- data/previews/primer/alpha/menu_preview.rb +14 -0
- data/previews/primer/alpha/tab_panels_preview.rb +8 -8
- data/previews/primer/alpha/toggle_switch_preview.rb +11 -9
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +1 -1
- data/previews/primer/beta/auto_complete_preview.rb +19 -17
- data/previews/primer/beta/details_preview.rb +6 -6
- data/previews/primer/beta/octicon_preview.rb +24 -0
- data/previews/primer/beta/spinner_preview.rb +22 -0
- data/previews/primer/forms/forms_preview/immediate_validation_form.html.erb +3 -0
- data/previews/primer/forms/forms_preview/multi_input_form.html.erb +12 -1
- data/previews/primer/forms/forms_preview.rb +2 -0
- data/previews/primer/local_time_component_preview.rb +3 -0
- data/previews/primer/time_ago_component_preview.rb +3 -0
- data/previews/primer/url_helpers.rb +15 -0
- data/static/arguments.json +159 -159
- data/static/audited_at.json +4 -0
- data/static/constants.json +42 -34
- data/static/statuses.json +10 -6
- metadata +32 -15
- data/app/components/primer/menu_component.css.json +0 -1
- data/app/components/primer/menu_component.css.map +0 -1
- data/previews/primer/menu_component_preview.rb +0 -12
- data/previews/primer/octicon_component_preview.rb +0 -22
- data/previews/primer/spinner_component_preview.rb +0 -20
@@ -12,6 +12,8 @@ module Primer
|
|
12
12
|
# However, please note that a visible label should almost always
|
13
13
|
# be used unless there is compelling reason not to. A placeholder is not a label.
|
14
14
|
class AutoComplete < Primer::Component
|
15
|
+
warn_on_deprecated_slot_setter
|
16
|
+
|
15
17
|
status :beta
|
16
18
|
|
17
19
|
DEFAULT_SIZE = :medium
|
@@ -39,13 +41,13 @@ module Primer
|
|
39
41
|
|
40
42
|
# Leading visual.
|
41
43
|
#
|
42
|
-
# - `leading_visual_icon` for a <%= link_to_component(Primer::
|
44
|
+
# - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
|
43
45
|
#
|
44
|
-
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::
|
46
|
+
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
|
45
47
|
renders_one :leading_visual, types: {
|
46
48
|
icon: lambda { |**system_arguments|
|
47
49
|
system_arguments[:classes] = class_names("FormControl-input-leadingVisual")
|
48
|
-
Primer::
|
50
|
+
Primer::Beta::Octicon.new(**system_arguments)
|
49
51
|
}
|
50
52
|
}
|
51
53
|
|
@@ -94,7 +96,7 @@ module Primer
|
|
94
96
|
# @description
|
95
97
|
# Display any Octicon as a leading visual within the field
|
96
98
|
# @code
|
97
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
|
99
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
|
98
100
|
# <% c.leading_visual_icon(icon: :search) %>
|
99
101
|
# <% end %>
|
100
102
|
#
|
@@ -102,13 +104,13 @@ module Primer
|
|
102
104
|
# @description
|
103
105
|
# Show a clear button
|
104
106
|
# @code
|
105
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) %>
|
107
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/view-components/rails-app/auto_complete", show_clear_button: true )) %>
|
106
108
|
#
|
107
109
|
# @example Visually hidden label
|
108
110
|
# @description
|
109
111
|
# A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
|
110
112
|
# @code
|
111
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/auto_complete", visually_hide_label: true)) do |c| %>
|
113
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |c| %>
|
112
114
|
# <% c.leading_visual_icon(icon: :search) %>
|
113
115
|
# <% end %>
|
114
116
|
#
|
@@ -116,7 +118,7 @@ module Primer
|
|
116
118
|
# @description
|
117
119
|
# To allow field to span width of its container, set `full_width` to `true`.
|
118
120
|
# @code
|
119
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", full_width: true)) do |c| %>
|
121
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |c| %>
|
120
122
|
# <% c.leading_visual_icon(icon: :search) %>
|
121
123
|
# <% end %>
|
122
124
|
#
|
@@ -124,7 +126,7 @@ module Primer
|
|
124
126
|
# @description
|
125
127
|
# Use the `inset` variant to change the input background color to be subtle.
|
126
128
|
# @code
|
127
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", inset: true)) do |c| %>
|
129
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |c| %>
|
128
130
|
# <% c.leading_visual_icon(icon: :search) %>
|
129
131
|
# <% end %>
|
130
132
|
#
|
@@ -132,17 +134,17 @@ module Primer
|
|
132
134
|
# @description
|
133
135
|
# Use the `monospace` variant to change the input font family.
|
134
136
|
# @code
|
135
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", monospace: true)) do |c| %>
|
137
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |c| %>
|
136
138
|
# <% c.leading_visual_icon(icon: :search) %>
|
137
139
|
# <% end %>
|
138
140
|
#
|
139
141
|
# @example With custom classes for the input
|
140
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
|
142
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
|
141
143
|
# <% c.with_input(classes: "custom-class") %>
|
142
144
|
# <% end %>
|
143
145
|
#
|
144
146
|
# @example With custom classes for the results
|
145
|
-
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
|
147
|
+
# <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
|
146
148
|
# <% c.with_results(classes: "custom-class") %>
|
147
149
|
# <% end %>
|
148
150
|
#
|
@@ -192,8 +194,8 @@ module Primer
|
|
192
194
|
|
193
195
|
# add `input` and `results` without needing to explicitly call them in the view
|
194
196
|
def before_render
|
195
|
-
|
196
|
-
|
197
|
+
with_results(classes: "") unless results?
|
198
|
+
with_input(classes: "") unless input?
|
197
199
|
end
|
198
200
|
end
|
199
201
|
end
|
@@ -11,6 +11,7 @@ module Primer
|
|
11
11
|
# - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
|
12
12
|
# - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
|
13
13
|
class Blankslate < Primer::Component
|
14
|
+
warn_on_deprecated_slot_setter
|
14
15
|
status :beta
|
15
16
|
|
16
17
|
VISUAL_OPTIONS = %i[icon spinner image].freeze
|
@@ -19,9 +20,9 @@ module Primer
|
|
19
20
|
#
|
20
21
|
# Use:
|
21
22
|
#
|
22
|
-
# - `visual_icon` for an <%= link_to_component(Primer::
|
23
|
+
# - `visual_icon` for an <%= link_to_component(Primer::Beta::Octicon) %>.
|
23
24
|
# - `visual_image` for an <%= link_to_component(Primer::Alpha::Image) %>.
|
24
|
-
# - `visual_spinner` for a <%= link_to_component(Primer::
|
25
|
+
# - `visual_spinner` for a <%= link_to_component(Primer::Beta::Spinner) %>.
|
25
26
|
#
|
26
27
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
27
28
|
renders_one :visual, types: {
|
@@ -29,12 +30,12 @@ module Primer
|
|
29
30
|
system_arguments[:size] ||= :medium
|
30
31
|
system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
|
31
32
|
|
32
|
-
Primer::
|
33
|
+
Primer::Beta::Octicon.new(**system_arguments)
|
33
34
|
},
|
34
35
|
spinner: lambda { |**system_arguments|
|
35
36
|
system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
|
36
37
|
|
37
|
-
Primer::
|
38
|
+
Primer::Beta::Spinner.new(**system_arguments)
|
38
39
|
},
|
39
40
|
image: lambda { |**system_arguments|
|
40
41
|
system_arguments[:size] = "56x56"
|
@@ -83,7 +84,7 @@ module Primer
|
|
83
84
|
system_arguments[:size] = :medium
|
84
85
|
system_arguments[:scheme] ||= :primary
|
85
86
|
|
86
|
-
Primer::
|
87
|
+
Primer::Beta::Button.new(**system_arguments)
|
87
88
|
}
|
88
89
|
|
89
90
|
# Optional secondary action
|
@@ -100,48 +101,48 @@ module Primer
|
|
100
101
|
}
|
101
102
|
|
102
103
|
# @example Basic
|
103
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
104
|
-
# <%
|
105
|
-
# <%
|
104
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
105
|
+
# <% component.with_heading(tag: :h2).with_content("Title") %>
|
106
|
+
# <% component.with_description { "Description"} %>
|
106
107
|
# <% end %>
|
107
108
|
#
|
108
109
|
# @example Icon
|
109
110
|
# @description
|
110
111
|
# Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
|
111
112
|
# @code
|
112
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
113
|
-
# <%
|
114
|
-
# <%
|
115
|
-
# <%
|
113
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
114
|
+
# <% component.with_visual_icon(icon: :globe) %>
|
115
|
+
# <% component.with_heading(tag: :h2).with_content("Title") %>
|
116
|
+
# <% component.with_description { "Description"} %>
|
116
117
|
# <% end %>
|
117
118
|
#
|
118
119
|
# @example Loading
|
119
120
|
# @description
|
120
121
|
# Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
|
121
122
|
# @code
|
122
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
123
|
-
# <%
|
124
|
-
# <%
|
125
|
-
# <%
|
123
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
124
|
+
# <% component.with_visual_spinner(size: :large) %>
|
125
|
+
# <% component.with_heading(tag: :h2).with_content("Title") %>
|
126
|
+
# <% component.with_description { "Description"} %>
|
126
127
|
# <% end %>
|
127
128
|
#
|
128
129
|
# @example Using an image
|
129
130
|
# @description
|
130
131
|
# Add an `image` to give context that an Octicon couldn't.
|
131
132
|
# @code
|
132
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
133
|
-
# <%
|
134
|
-
# <%
|
135
|
-
# <%
|
133
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
134
|
+
# <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
|
135
|
+
# <% component.with_heading(tag: :h2).with_content("Title") %>
|
136
|
+
# <% component.with_description { "Description"} %>
|
136
137
|
# <% end %>
|
137
138
|
#
|
138
139
|
# @example Custom content
|
139
140
|
# @description
|
140
141
|
# Pass custom content to `description`.
|
141
142
|
# @code
|
142
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
143
|
-
# <%
|
144
|
-
# <%
|
143
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
144
|
+
# <% component.with_heading(tag: :h2).with_content("Title") %>
|
145
|
+
# <% component.with_description do %>
|
145
146
|
# <em>Your custom content here</em>
|
146
147
|
# <% end %>
|
147
148
|
# <% end %>
|
@@ -150,34 +151,34 @@ module Primer
|
|
150
151
|
# @description
|
151
152
|
# Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
|
152
153
|
# @code
|
153
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
154
|
-
# <%
|
155
|
-
# <%
|
156
|
-
# <%
|
157
|
-
# <%
|
154
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
155
|
+
# <% component.with_visual_icon(icon: :book) %>
|
156
|
+
# <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
|
157
|
+
# <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
|
158
|
+
# <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
|
158
159
|
# <% end %>
|
159
160
|
#
|
160
161
|
# @example Secondary action
|
161
162
|
# @description
|
162
163
|
# Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
|
163
164
|
# @code
|
164
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
165
|
-
# <%
|
166
|
-
# <%
|
167
|
-
# <%
|
168
|
-
# <%
|
165
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
166
|
+
# <% component.with_visual_icon(icon: :book) %>
|
167
|
+
# <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
|
168
|
+
# <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
|
169
|
+
# <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
|
169
170
|
# <% end %>
|
170
171
|
#
|
171
172
|
# @example Primary and secondary actions
|
172
173
|
# @description
|
173
174
|
# `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
|
174
175
|
# @code
|
175
|
-
# <%= render Primer::Beta::Blankslate.new do |
|
176
|
-
# <%
|
177
|
-
# <%
|
178
|
-
# <%
|
179
|
-
# <%
|
180
|
-
# <%
|
176
|
+
# <%= render Primer::Beta::Blankslate.new do |component| %>
|
177
|
+
# <% component.with_visual_icon(icon: :book) %>
|
178
|
+
# <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
|
179
|
+
# <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
|
180
|
+
# <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
|
181
|
+
# <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
|
181
182
|
# <% end %>
|
182
183
|
#
|
183
184
|
# @example Variations
|
@@ -187,20 +188,20 @@ module Primer
|
|
187
188
|
# <%= render Primer::Beta::Blankslate.new(
|
188
189
|
# narrow: true,
|
189
190
|
# spacious: true,
|
190
|
-
# ) do |
|
191
|
-
# <%
|
192
|
-
# <%
|
193
|
-
# <%
|
191
|
+
# ) do |component| %>
|
192
|
+
# <% component.with_visual_icon(icon: :book) %>
|
193
|
+
# <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
|
194
|
+
# <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
|
194
195
|
# <% end %>
|
195
196
|
#
|
196
197
|
# @example With border
|
197
198
|
# @description
|
198
199
|
# It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
|
199
200
|
# @code
|
200
|
-
# <%= render Primer::Beta::Blankslate.new(border: true) do |
|
201
|
-
# <%
|
202
|
-
# <%
|
203
|
-
# <%
|
201
|
+
# <%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
|
202
|
+
# <% component.with_visual_icon(icon: :book) %>
|
203
|
+
# <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
|
204
|
+
# <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
|
204
205
|
# <% end %>
|
205
206
|
#
|
206
207
|
# @param narrow [Boolean] Adds a maximum width of `485px` to the Blankslate.
|
@@ -7,6 +7,8 @@ module Primer
|
|
7
7
|
#
|
8
8
|
# @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
|
9
9
|
class Header < Primer::Component
|
10
|
+
warn_on_deprecated_slot_setter
|
11
|
+
|
10
12
|
status :beta
|
11
13
|
|
12
14
|
TITLE_TAG_FALLBACK = :h2
|
@@ -17,6 +17,7 @@ module Primer
|
|
17
17
|
#
|
18
18
|
# For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
|
19
19
|
class Breadcrumbs < Primer::Component
|
20
|
+
warn_on_deprecated_slot_setter
|
20
21
|
status :beta
|
21
22
|
|
22
23
|
PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
|
@@ -1 +1 @@
|
|
1
|
-
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
1
|
+
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
@@ -1 +1 @@
|
|
1
|
-
{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
|
1
|
+
{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
1
|
+
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"AAGA,MACE,2BAA4B,CAC5B,qDACF,CAGA,QAmBE,kBAAmB,CAbnB,wBAA6B,CAC7B,+CAAiD,CACjD,kBAAyB,CACzB,mDAAqD,CACrD,2BAA4B,CAN5B,cAAe,CAYf,YAAa,CACb,kBAAmB,CAfnB,kDAAoD,CACpD,8CAAgD,CAiBhD,wCAA0C,CAN1C,6CAA+C,CAI/C,6BAA8B,CAG9B,qBAAsB,CANtB,gEAAkE,CAdlE,iBAAkB,CAYlB,iBAAkB,CAFlB,qEAAsE,CACtE,4DAAgE,CAPhE,wBAAiB,CAAjB,gBAwCF,CArBE,wBAEI,eCnCN,WAAA,YAAA,SAAA,gBAAA,eAAA,kBAAA,QAAA,4CAAA,UDmCsC,CAEpC,CAIA,cACE,+CACF,CAEA,eACE,eACF,CAEA,6CAGE,eAAgB,CADhB,kBAEF,CAGF,oBAEE,oBAAqB,CADrB,iBAEF,CAEA,wBAEE,mBAKF,CAHE,oCACE,oBACF,CAIF,gBAKE,kBAAmB,CAHnB,YAAa,CADb,aAAc,CAEd,uDAAwD,CACxD,4DAA8D,CAE9D,oBAOF,CAHE,kCACE,iDACF,CAIF,4BACE,qBACF,CAKA,eACE,YAAa,CACb,mBAMF,CAJE,wBAEE,4CAA6C,CAD7C,aAEF,CAGF,cACE,cAAe,CAEf,6DAAqE,CADrE,kBAEF,CAEA,sBACE,uBACF,CAEA,uBACE,wBACF,CAEA,uBACE,6CACF,CAIA,eACE,iDAAmD,CAGnD,uCAAyC,CAFzC,4CAA8C,CAC9C,iEAYF,CATE,6BACE,4DACF,CAGE,iDACE,gDACF,CAIJ,eAGE,uCAAyC,CAFzC,4CAA8C,CAC9C,iEAYF,CATE,6BACE,wDACF,CAGE,iDACE,gDACF,CAIJ,mBACE,UACF,CAKA,iBAEE,kCAAmC,CACnC,4CAA6C,CAC7C,4CAA6C,CAC7C,gFAAkF,CAJlF,mCAwCF,CAlCE,sCACE,kDAAmD,CACnD,kDACF,CAGA,uBE7KA,sDAAuD,CAFvD,wCAAgC,CAChC,mBFsLA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BExLA,sDAAuD,CAFvD,wCAAgC,CAChC,mBF2LA,CAEA,2EAEE,qDAAsD,CACtD,mDACF,CAEA,+DAKE,2CAA4C,CAF5C,qDAAsD,CACtD,qDAAsD,CAFtD,4CAIF,CAIF,mBAEE,0BAA2B,CAC3B,oCAAqC,CACrC,oCAAqC,CACrC,gEAAkE,CAJlE,2BA4BF,CAtBE,wCACE,0CAA2C,CAC3C,0CACF,CAEA,yCACE,2CAA4C,CAC5C,2CACF,CAEA,sCACE,6CAA8C,CAC9C,2CACF,CAEA,mEAKE,oCAAqC,CAFrC,oCAAqC,CACrC,oCAAqC,CAFrC,qCAIF,CAGF,mBACE,2BA2BF,CAzBE,wCACE,+DACF,CAEA,+EAEE,gEACF,CAEA,mEAKE,oCAAqC,CAFrC,oCAAqC,CACrC,oCAAqC,CAFrC,qCAIF,CAGA,6DACE,4BACF,CAEA,kCACE,2BACF,CAGF,cAEE,2BAA4B,CAG5B,WAAY,CAJZ,4BAA6B,CAE7B,oBAAqB,CACrB,iBAAkB,CAElB,YAAa,CACb,SAiBF,CAfE,mCACE,yBACF,CAEA,gDACE,kBACF,CAEA,yDAKE,oCAAqC,CAFrC,wBAA6B,CAC7B,kBAAyB,CAFzB,qCAIF,CAIF,gBAEE,iCAAkC,CAClC,oCAAqC,CACrC,oCAAqC,CACrC,gEAAkE,CAJlE,kCA8BF,CAxBE,qCAEE,uCAAwC,CACxC,iDAAkD,CAClD,iDAAkD,CAClD,0FAA4F,CAJ5F,wCAKF,CAEA,yEAGE,0CAA2C,CAC3C,oDAAqD,CACrD,oDAAqD,CACrD,kDAAmD,CAJnD,2CAKF,CAEA,6DAGE,0CAA2C,CAC3C,oDAAqD,CACrD,oCAAqC,CAHrC,2CAIF,CAIF,kBACE,YAAa,CAEb,aAAc,CADd,oBAAqB,CAErB,4CASF,CAPE,gCACE,2CACF,CAEA,gCACE,2CACF","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
@@ -95,6 +95,11 @@ summary.Button {
|
|
95
95
|
.Button-visual {
|
96
96
|
display: flex;
|
97
97
|
pointer-events: none; /* allow click handler to work, avoiding visuals */
|
98
|
+
|
99
|
+
& .Counter {
|
100
|
+
color: inherit;
|
101
|
+
background-color: var(--color-btn-counter-bg);
|
102
|
+
}
|
98
103
|
}
|
99
104
|
|
100
105
|
.Button-label {
|
@@ -4,6 +4,7 @@ module Primer
|
|
4
4
|
module Beta
|
5
5
|
# Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
|
6
6
|
class Button < Primer::Component
|
7
|
+
warn_on_deprecated_slot_setter
|
7
8
|
status :beta
|
8
9
|
|
9
10
|
DEFAULT_SCHEME = :default
|
@@ -39,12 +40,12 @@ module Primer
|
|
39
40
|
#
|
40
41
|
# Use:
|
41
42
|
#
|
42
|
-
# - `leading_visual_icon` for a <%= link_to_component(Primer::
|
43
|
+
# - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
|
43
44
|
#
|
44
|
-
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::
|
45
|
+
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
|
45
46
|
renders_one :leading_visual, types: {
|
46
47
|
icon: lambda { |**system_arguments|
|
47
|
-
Primer::
|
48
|
+
Primer::Beta::Octicon.new(**system_arguments)
|
48
49
|
}
|
49
50
|
}
|
50
51
|
|
@@ -56,7 +57,7 @@ module Primer
|
|
56
57
|
#
|
57
58
|
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
|
58
59
|
renders_one :trailing_visual, types: {
|
59
|
-
icon: Primer::
|
60
|
+
icon: Primer::Beta::Octicon,
|
60
61
|
label: Primer::Beta::Label,
|
61
62
|
counter: Primer::Beta::Counter
|
62
63
|
}
|
@@ -65,11 +66,11 @@ module Primer
|
|
65
66
|
#
|
66
67
|
# Use:
|
67
68
|
#
|
68
|
-
# - `trailing_action_icon` for a <%= link_to_component(Primer::
|
69
|
+
# - `trailing_action_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
|
69
70
|
#
|
70
|
-
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::
|
71
|
+
# @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
|
71
72
|
renders_one :trailing_action, types: {
|
72
|
-
icon: Primer::
|
73
|
+
icon: Primer::Beta::Octicon
|
73
74
|
}
|
74
75
|
|
75
76
|
# `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
|
@@ -4,6 +4,7 @@ module Primer
|
|
4
4
|
module Beta
|
5
5
|
# Use `ButtonGroup` to render a series of buttons.
|
6
6
|
class ButtonGroup < Primer::Component
|
7
|
+
warn_on_deprecated_slot_setter
|
7
8
|
status :beta
|
8
9
|
|
9
10
|
# Required list of buttons to be rendered.
|
@@ -13,7 +14,9 @@ module Primer
|
|
13
14
|
kwargs[:group_item] = true
|
14
15
|
kwargs[:size] = @size
|
15
16
|
|
17
|
+
# rubocop:disable Primer/ComponentNameMigration
|
16
18
|
Primer::ButtonComponent.new(**kwargs)
|
19
|
+
# rubocop:enable Primer/ComponentNameMigration
|
17
20
|
}
|
18
21
|
|
19
22
|
# @example Default
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<% if content.present? %>
|
3
3
|
<%= content %>
|
4
4
|
<% else %>
|
5
|
-
<%= render Primer::
|
6
|
-
<%= render Primer::
|
5
|
+
<%= render Primer::Beta::Octicon.new(:copy) %>
|
6
|
+
<%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
|
7
7
|
<% end %>
|
8
8
|
<% end %>
|
@@ -4,6 +4,7 @@ module Primer
|
|
4
4
|
module Beta
|
5
5
|
# Use `DetailsComponent` to reveal content after clicking a button.
|
6
6
|
class Details < Primer::Component
|
7
|
+
warn_on_deprecated_slot_setter
|
7
8
|
status :beta
|
8
9
|
|
9
10
|
BODY_TAG_DEFAULT = :div
|
@@ -25,7 +26,9 @@ module Primer
|
|
25
26
|
|
26
27
|
return Primer::BaseComponent.new(**system_arguments) unless button
|
27
28
|
|
29
|
+
# rubocop:disable Primer/ComponentNameMigration
|
28
30
|
Primer::ButtonComponent.new(**system_arguments)
|
31
|
+
# rubocop:enable Primer/ComponentNameMigration
|
29
32
|
}
|
30
33
|
|
31
34
|
# Use the Body slot as the main content to be shown when triggered by the Summary.
|
@@ -40,11 +43,11 @@ module Primer
|
|
40
43
|
|
41
44
|
# @example Default
|
42
45
|
#
|
43
|
-
# <%= render Primer::Beta::Details.new do |
|
44
|
-
# <%
|
46
|
+
# <%= render Primer::Beta::Details.new do |component| %>
|
47
|
+
# <% component.with_summary do %>
|
45
48
|
# Summary
|
46
49
|
# <% end %>
|
47
|
-
# <%
|
50
|
+
# <% component.with_body do %>
|
48
51
|
# Body
|
49
52
|
# <% end %>
|
50
53
|
# <% end %>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
|
2
2
|
<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
|
3
|
-
<%= render Primer::
|
3
|
+
<%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
|
4
4
|
<% end -%>
|
5
5
|
<%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) if render_tooltip? %>
|
6
6
|
<% end %>
|
@@ -4,6 +4,7 @@ module Primer
|
|
4
4
|
module Beta
|
5
5
|
# Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
|
6
6
|
class Link < Primer::Component
|
7
|
+
warn_on_deprecated_slot_setter
|
7
8
|
status :beta
|
8
9
|
|
9
10
|
DEFAULT_SCHEME = :default
|
File without changes
|