primer_view_components 0.6.0 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +62 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar.rb +0 -8
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +6 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +45 -7
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +49 -6
- data/app/components/primer/alpha/action_menu.rb +0 -269
- data/app/components/primer/alpha/auto_complete/item.rb +0 -12
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.rb +0 -47
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.rb +0 -31
- data/app/components/primer/alpha/button_marketing.rb +0 -12
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.rb +2 -18
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.rb +0 -105
- data/app/components/primer/alpha/form_control.rb +0 -11
- data/app/components/primer/alpha/hellip_button.rb +0 -9
- data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
- data/app/components/primer/alpha/image.rb +0 -16
- data/app/components/primer/alpha/image_crop.rb +0 -11
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +1 -1
- data/app/components/primer/alpha/layout.rb +0 -118
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.rb +0 -19
- data/app/components/primer/alpha/multi_input.rb +0 -33
- data/app/components/primer/alpha/nav_list.rb +0 -69
- data/app/components/primer/alpha/navigation/tab.rb +0 -35
- data/app/components/primer/alpha/octicon_symbols.rb +0 -6
- data/app/components/primer/alpha/overlay.rb +0 -14
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.rb +0 -61
- data/app/components/primer/alpha/tab_container.rb +0 -18
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.rb +0 -63
- data/app/components/primer/alpha/tab_panels.rb +0 -16
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.rb +0 -68
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.rb +0 -18
- data/app/components/primer/alpha/tooltip.rb +1 -69
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.rb +0 -61
- data/app/components/primer/alpha/underline_panels.rb +0 -19
- data/app/components/primer/beta/auto_complete/item.rb +0 -8
- data/app/components/primer/beta/auto_complete.rb +0 -56
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.rb +0 -18
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.rb +0 -21
- data/app/components/primer/beta/base_button.rb +0 -4
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.rb +0 -104
- data/app/components/primer/beta/border_box/header.rb +4 -11
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.html.erb +2 -2
- data/app/components/primer/beta/border_box.rb +11 -55
- data/app/components/primer/beta/breadcrumbs.rb +0 -7
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +1 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +6 -2
- data/app/components/primer/beta/button.rb +7 -43
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/button_group.rb +0 -16
- data/app/components/primer/beta/clipboard_copy.rb +0 -12
- data/app/components/primer/beta/close_button.rb +0 -3
- data/app/components/primer/beta/counter.rb +0 -8
- data/app/components/primer/beta/details.rb +0 -11
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.html.erb +1 -3
- data/app/components/primer/beta/flash.pcss +1 -2
- data/app/components/primer/beta/flash.rb +1 -23
- data/app/components/primer/beta/heading.rb +0 -8
- data/app/components/primer/beta/icon_button.rb +0 -21
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.rb +0 -20
- data/app/components/primer/beta/link.rb +0 -22
- data/app/components/primer/beta/markdown.rb +1 -262
- data/app/components/primer/beta/octicon.rb +0 -10
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.rb +0 -43
- data/app/components/primer/beta/progress_bar.rb +1 -22
- data/app/components/primer/beta/relative_time.rb +0 -9
- data/app/components/primer/beta/spinner.rb +2 -10
- data/app/components/primer/beta/state.rb +0 -13
- data/app/components/primer/beta/subhead.rb +0 -55
- data/app/components/primer/beta/text.rb +0 -4
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.rb +0 -9
- data/app/components/primer/beta/truncate.rb +0 -50
- data/app/components/primer/blankslate_component.rb +0 -76
- data/app/components/primer/box.rb +0 -6
- data/app/components/primer/button_component.rb +0 -49
- data/app/components/primer/component.rb +1 -1
- data/app/components/primer/conditional_wrapper.rb +2 -17
- data/app/components/primer/icon_button.rb +0 -30
- data/app/components/primer/layout_component.rb +0 -12
- data/app/components/primer/tooltip.rb +0 -27
- data/app/components/primer/truncate.rb +0 -19
- data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
- data/lib/primer/accessibility.rb +1 -1
- data/lib/primer/deprecations.yml +3 -3
- data/lib/primer/forms/dsl/input.rb +1 -0
- data/lib/primer/static/generate_info_arch.rb +1 -0
- data/lib/primer/view_components/linters/details_menu_migration.rb +1 -1
- data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
- data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
- data/lib/primer/view_components/linters.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/view_components.rb +18 -0
- data/lib/primer/yard.rb +8 -9
- data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +3 -3
- data/previews/primer/alpha/tooltip_preview.rb +11 -23
- data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/leading_visual_svg.html.erb +12 -0
- data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
- data/previews/primer/beta/button_preview/trailing_visual.html.erb +1 -1
- data/previews/primer/beta/button_preview.rb +22 -0
- data/static/arguments.json +12 -1
- data/static/info_arch.json +136 -15
- data/static/previews.json +13 -13
- metadata +4 -3
- data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
@@ -41,10 +41,15 @@ module Primer
|
|
41
41
|
#
|
42
42
|
# - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
|
43
43
|
#
|
44
|
+
# - `leading_visual_svg` to render a SVG.
|
45
|
+
#
|
44
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
|
Primer::Beta::Octicon.new(**system_arguments)
|
50
|
+
},
|
51
|
+
svg: lambda { |**system_arguments|
|
52
|
+
Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
|
48
53
|
}
|
49
54
|
}
|
50
55
|
|
@@ -81,54 +86,13 @@ module Primer
|
|
81
86
|
renders_one :tooltip, lambda { |**system_arguments|
|
82
87
|
raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
|
83
88
|
|
89
|
+
::Primer::ViewComponents.deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
|
84
90
|
system_arguments[:for_id] = @id
|
85
|
-
system_arguments[:type]
|
91
|
+
system_arguments[:type] = :description
|
86
92
|
|
87
93
|
Primer::Alpha::Tooltip.new(**system_arguments)
|
88
94
|
}
|
89
95
|
|
90
|
-
# @example Schemes
|
91
|
-
# <%= render(Primer::Beta::Button.new) { "Default" } %>
|
92
|
-
# <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
|
93
|
-
# <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
|
94
|
-
# <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
|
95
|
-
#
|
96
|
-
# @example Sizes
|
97
|
-
# <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
|
98
|
-
# <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
|
99
|
-
#
|
100
|
-
# @example Full width
|
101
|
-
# <%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
|
102
|
-
# <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
|
103
|
-
#
|
104
|
-
# @example With leading visual
|
105
|
-
# <%= render(Primer::Beta::Button.new) do |component| %>
|
106
|
-
# <% component.with_leading_visual_icon(icon: :star) %>
|
107
|
-
# Button
|
108
|
-
# <% end %>
|
109
|
-
#
|
110
|
-
# @example With trailing visual
|
111
|
-
# <%= render(Primer::Beta::Button.new) do |component| %>
|
112
|
-
# <% component.with_trailing_visual_counter(count: 15) %>
|
113
|
-
# Button
|
114
|
-
# <% end %>
|
115
|
-
#
|
116
|
-
# @example With leading and trailing visuals
|
117
|
-
# <%= render(Primer::Beta::Button.new) do |component| %>
|
118
|
-
# <% component.with_leading_visual_icon(icon: :star) %>
|
119
|
-
# <% component.with_trailing_visual_counter(count: 15) %>
|
120
|
-
# Button
|
121
|
-
# <% end %>
|
122
|
-
#
|
123
|
-
# @example With tooltip
|
124
|
-
# @description
|
125
|
-
# Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
|
126
|
-
# @code
|
127
|
-
# <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
|
128
|
-
# <% component.with_tooltip(text: "Tooltip text") %>
|
129
|
-
# Button
|
130
|
-
# <% end %>
|
131
|
-
#
|
132
96
|
# @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
|
133
97
|
# @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
|
134
98
|
# @param block [Boolean] Whether button is full-width with `display: block`.
|
@@ -1 +1 @@
|
|
1
|
-
.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium
|
1
|
+
.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,
|
1
|
+
{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,4DAAqD,CADrD,yDAEF,CAEA,6EAGE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child,\n & > :first-child.Button-withTooltip .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child,\n & > :last-child.Button-withTooltip .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
|
@@ -20,22 +20,6 @@ module Primer
|
|
20
20
|
end
|
21
21
|
}
|
22
22
|
|
23
|
-
# @example Default
|
24
|
-
#
|
25
|
-
# <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
|
26
|
-
# <% component.with_button { "Button 1" } %>
|
27
|
-
# <% component.with_button { "Button 2" } %>
|
28
|
-
# <% component.with_button { "Button 3" } %>
|
29
|
-
# <% end %>
|
30
|
-
#
|
31
|
-
# @example Sizes
|
32
|
-
#
|
33
|
-
# <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
|
34
|
-
# <% component.with_button { "Button 1" } %>
|
35
|
-
# <% component.with_button { "Button 2" } %>
|
36
|
-
# <% component.with_button { "Button 3" } %>
|
37
|
-
# <% end %>
|
38
|
-
#
|
39
23
|
# @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
|
40
24
|
# @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
|
41
25
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -9,18 +9,6 @@ module Primer
|
|
9
9
|
class ClipboardCopy < Primer::Component
|
10
10
|
status :beta
|
11
11
|
|
12
|
-
# @example Default
|
13
|
-
# <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
|
14
|
-
#
|
15
|
-
# @example With text instead of icons
|
16
|
-
# <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
|
17
|
-
# Click to copy!
|
18
|
-
# <% end %>
|
19
|
-
#
|
20
|
-
# @example Copying from an element
|
21
|
-
# <%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
|
22
|
-
# <div id="blob-path">src/index.js</div>
|
23
|
-
#
|
24
12
|
# @param aria-label [String] String that will be read to screenreaders when the component is focused
|
25
13
|
# @param value [String] Text to copy into the users clipboard when they click the component.
|
26
14
|
# @param for [String] Element id from where to get the copied value.
|
@@ -14,9 +14,6 @@ module Primer
|
|
14
14
|
DEFAULT_TYPE = :button
|
15
15
|
TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
|
16
16
|
|
17
|
-
# @example Default
|
18
|
-
# <%= render(Primer::Beta::CloseButton.new) %>
|
19
|
-
#
|
20
17
|
# @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
|
21
18
|
# @param disabled [Boolean] Whether or not the button is disabled.
|
22
19
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -23,14 +23,6 @@ module Primer
|
|
23
23
|
DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
|
24
24
|
SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
|
25
25
|
|
26
|
-
#
|
27
|
-
# @example Default
|
28
|
-
# <%= render(Primer::Beta::Counter.new(count: 25)) %>
|
29
|
-
#
|
30
|
-
# @example Schemes
|
31
|
-
# <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %>
|
32
|
-
# <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %>
|
33
|
-
#
|
34
26
|
# @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
|
35
27
|
# @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %>
|
36
28
|
# @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
|
@@ -45,17 +45,6 @@ module Primer
|
|
45
45
|
Primer::BaseComponent.new(**system_arguments)
|
46
46
|
}
|
47
47
|
|
48
|
-
# @example Default
|
49
|
-
#
|
50
|
-
# <%= render Primer::Beta::Details.new do |component| %>
|
51
|
-
# <% component.with_summary do %>
|
52
|
-
# Summary
|
53
|
-
# <% end %>
|
54
|
-
# <% component.with_body do %>
|
55
|
-
# Body
|
56
|
-
# <% end %>
|
57
|
-
# <% end %>
|
58
|
-
#
|
59
48
|
# @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
|
60
49
|
# @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
|
61
50
|
# @param disabled [Boolean] Whether or not to disable the summary button.
|
@@ -1 +1 @@
|
|
1
|
-
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,
|
1
|
+
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
|
@@ -1,9 +1,7 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
2
|
<%= primer_octicon @icon if @icon %><%= content %>
|
3
3
|
<% if @dismissible %>
|
4
|
-
|
5
|
-
<%= primer_octicon "x" %>
|
6
|
-
</button>
|
4
|
+
<%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
|
7
5
|
<% end %>
|
8
6
|
|
9
7
|
<%= action %>
|
@@ -31,8 +31,7 @@
|
|
31
31
|
/* Close button */
|
32
32
|
.flash-close:not(.Banner-close) {
|
33
33
|
float: right;
|
34
|
-
|
35
|
-
margin: calc(var(--control-medium-paddingInline-spacious) * -1);
|
34
|
+
margin-top: calc(var(--base-size-4) * -1);
|
36
35
|
text-align: center;
|
37
36
|
cursor: pointer;
|
38
37
|
|
@@ -24,29 +24,7 @@ module Primer
|
|
24
24
|
:danger => "flash-error",
|
25
25
|
:success => "flash-success"
|
26
26
|
}.freeze
|
27
|
-
|
28
|
-
# <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
|
29
|
-
# <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
|
30
|
-
# <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
|
31
|
-
# <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
|
32
|
-
#
|
33
|
-
# @example Full width
|
34
|
-
# <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
|
35
|
-
#
|
36
|
-
# @example Dismissible
|
37
|
-
# <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
|
38
|
-
#
|
39
|
-
# @example Icon
|
40
|
-
# <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
|
41
|
-
#
|
42
|
-
# @example With actions
|
43
|
-
# <%= render(Primer::Beta::Flash.new) do |component| %>
|
44
|
-
# This is a flash message with actions!
|
45
|
-
# <% component.with_action do %>
|
46
|
-
# <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
|
47
|
-
# <% end %>
|
48
|
-
# <% end %>
|
49
|
-
#
|
27
|
+
|
50
28
|
# @param full [Boolean] Whether the component should take up the full width of the screen.
|
51
29
|
# @param spacious [Boolean] Whether to add margin to the bottom of the component.
|
52
30
|
# @param dismissible [Boolean] Whether the component can be dismissed with an X button.
|
@@ -23,14 +23,6 @@ module Primer
|
|
23
23
|
TAG_FALLBACK = :h2
|
24
24
|
TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
|
25
25
|
|
26
|
-
# @example Default
|
27
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
|
28
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
|
29
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
|
30
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
|
31
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
|
32
|
-
# <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
|
33
|
-
#
|
34
26
|
# @param tag [String] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
|
35
27
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
36
28
|
def initialize(tag:, **system_arguments)
|
@@ -25,27 +25,6 @@ module Primer
|
|
25
25
|
}.freeze
|
26
26
|
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
|
27
27
|
|
28
|
-
# @example Default
|
29
|
-
#
|
30
|
-
# <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
|
31
|
-
#
|
32
|
-
# @example Schemes
|
33
|
-
#
|
34
|
-
# <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
|
35
|
-
# <%= render(Primer::Beta::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
|
36
|
-
#
|
37
|
-
# @example With an `aria-description`
|
38
|
-
# @description
|
39
|
-
# If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
|
40
|
-
# attributes. A label should be short and concise, while the description can be longer as it is intended to provide
|
41
|
-
# more context and information. See the accessibility section for more information.
|
42
|
-
# @code
|
43
|
-
# <%= render(Primer::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
|
44
|
-
#
|
45
|
-
# @example Custom tooltip direction
|
46
|
-
#
|
47
|
-
# <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
|
48
|
-
#
|
49
28
|
# @param icon [String] Name of <%= link_to_octicons %> to use.
|
50
29
|
# @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
|
51
30
|
# @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
|
@@ -1 +1 @@
|
|
1
|
-
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-
|
1
|
+
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,
|
1
|
+
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
|
@@ -46,26 +46,6 @@ module Primer
|
|
46
46
|
|
47
47
|
INLINE_CLASS = "Label--inline"
|
48
48
|
|
49
|
-
# @example Schemes
|
50
|
-
# <%= render(Primer::Beta::Label.new) { "Default" } %>
|
51
|
-
# <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
|
52
|
-
# <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
|
53
|
-
# <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
|
54
|
-
# <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
|
55
|
-
# <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
|
56
|
-
# <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
|
57
|
-
# <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
|
58
|
-
# <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
|
59
|
-
# <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
|
60
|
-
#
|
61
|
-
# @example Sizes
|
62
|
-
# <%= render(Primer::Beta::Label.new) { "Medium" } %>
|
63
|
-
# <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
|
64
|
-
#
|
65
|
-
# @example Inline
|
66
|
-
# <%= render(Primer::Beta::Label.new) { "Default" } %>
|
67
|
-
# <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
|
68
|
-
#
|
69
49
|
# @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
|
70
50
|
# @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
|
71
51
|
# @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>
|
@@ -30,28 +30,6 @@ module Primer
|
|
30
30
|
Primer::Alpha::Tooltip.new(**system_arguments)
|
31
31
|
}
|
32
32
|
|
33
|
-
# @example Default
|
34
|
-
# <%= render(Primer::Beta::Link.new(href: "#")) { "Link" } %>
|
35
|
-
#
|
36
|
-
# @example Muted
|
37
|
-
# <%= render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } %>
|
38
|
-
#
|
39
|
-
# @example Schemes
|
40
|
-
# <%= render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %>
|
41
|
-
# <%= render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>
|
42
|
-
#
|
43
|
-
# @example Without underline
|
44
|
-
# <%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>
|
45
|
-
#
|
46
|
-
# @example With tooltip
|
47
|
-
# @description
|
48
|
-
# Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
|
49
|
-
# @code
|
50
|
-
# <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
|
51
|
-
# <% component.with_tooltip(text: "Tooltip text") %>
|
52
|
-
# Link
|
53
|
-
# <% end %>
|
54
|
-
#
|
55
33
|
# @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
|
56
34
|
# @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
|
57
35
|
# @param muted [Boolean] Uses light gray for Link color, and blue on hover.
|