primer_view_components 0.0.88 → 0.0.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +44 -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 +0 -0
- data/app/assets/styles/primer_view_components.css.map +1 -0
- data/app/components/primer/alpha/auto_complete.rb +2 -2
- data/app/components/primer/alpha/hidden_text_expander.rb +57 -0
- data/app/components/primer/alpha/layout.rb +34 -32
- data/app/components/primer/alpha/segmented-control-element.js +5 -4
- data/app/components/primer/alpha/tab_nav.rb +20 -20
- data/app/components/primer/alpha/tab_panels.rb +2 -2
- data/app/components/primer/alpha/tool-tip-element.d.ts +1 -3
- data/app/components/primer/alpha/tool-tip-element.js +13 -19
- data/app/components/primer/alpha/tool-tip-element.ts +14 -22
- data/app/components/primer/alpha/tooltip.rb +72 -53
- data/app/components/primer/alpha/underline_nav.rb +16 -16
- data/app/components/primer/alpha/underline_panels.rb +3 -3
- data/app/components/primer/base_component.rb +1 -1
- data/app/components/primer/beta/auto_complete/item.rb +2 -2
- data/app/components/primer/beta/auto_complete.rb +2 -2
- data/app/components/primer/beta/avatar_stack.rb +9 -9
- data/app/components/primer/beta/blankslate.rb +2 -2
- data/app/components/primer/beta/border_box/header.rb +4 -2
- data/app/components/primer/beta/border_box.rb +13 -13
- data/app/components/primer/beta/breadcrumbs.rb +3 -3
- data/app/components/primer/beta/button_group.rb +9 -9
- data/app/components/primer/beta/close_button.rb +41 -0
- data/app/components/primer/beta/counter.rb +113 -0
- data/app/components/primer/{details_component.html.erb → beta/details.html.erb} +0 -0
- data/app/components/primer/beta/details.rb +70 -0
- data/app/components/primer/beta/flash.rb +1 -1
- data/app/components/primer/beta/heading.rb +46 -0
- data/app/components/primer/beta/truncate.rb +17 -17
- data/app/components/primer/blankslate_component.rb +1 -1
- data/app/components/primer/button_component.rb +8 -8
- data/app/components/primer/close_button.rb +2 -34
- data/app/components/primer/counter_component.rb +2 -106
- data/app/components/primer/details_component.rb +2 -63
- data/app/components/primer/dropdown.html.erb +1 -1
- data/app/components/primer/dropdown.rb +15 -15
- data/app/components/primer/dropdown_menu_component.rb +1 -1
- data/app/components/primer/heading_component.rb +2 -39
- data/app/components/primer/hidden_text_expander.rb +2 -48
- data/app/components/primer/icon_button.html.erb +8 -2
- data/app/components/primer/icon_button.rb +7 -0
- data/app/components/primer/image_crop.rb +1 -1
- data/app/components/primer/label_component.rb +2 -1
- data/app/components/primer/layout_component.rb +4 -4
- data/app/components/primer/link_component.rb +1 -1
- data/app/components/primer/menu_component.rb +5 -5
- data/app/components/primer/navigation/tab_component.rb +12 -12
- data/app/components/primer/popover_component.rb +10 -10
- data/app/components/primer/primer.pcss +1 -0
- data/app/components/primer/subhead_component.rb +10 -10
- data/app/components/primer/timeline_item_component.rb +3 -3
- data/app/lib/primer/join_style_arguments_helper.rb +1 -1
- data/app/lib/primer/view_helper.rb +1 -1
- data/lib/primer/view_components/linters/argument_mappers/close_button.rb +2 -2
- data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +2 -2
- data/lib/primer/view_components/linters/flash_migration_counter.rb +1 -1
- data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +5 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/component_name_migration.rb +5 -0
- data/lib/tasks/docs.rake +5 -5
- data/static/arguments.yml +87 -87
- data/static/audited_at.json +5 -0
- data/static/constants.json +54 -44
- data/static/statuses.json +11 -6
- metadata +11 -3
@@ -25,11 +25,11 @@ module Primer
|
|
25
25
|
|
26
26
|
# @example Default
|
27
27
|
# <%= render(Primer::Dropdown.new) do |c| %>
|
28
|
-
# <% c.
|
28
|
+
# <% c.with_button do %>
|
29
29
|
# Dropdown
|
30
30
|
# <% end %>
|
31
31
|
#
|
32
|
-
# <% c.
|
32
|
+
# <% c.with_menu(header: "Options") do |menu|
|
33
33
|
# menu.item { "Item 1" }
|
34
34
|
# menu.item { "Item 2" }
|
35
35
|
# menu.item { "Item 3" }
|
@@ -42,11 +42,11 @@ module Primer
|
|
42
42
|
# Dividers can be used to separate a group of items. They don't have any content.
|
43
43
|
# @code
|
44
44
|
# <%= render(Primer::Dropdown.new) do |c| %>
|
45
|
-
# <% c.
|
45
|
+
# <% c.with_button do %>
|
46
46
|
# Dropdown
|
47
47
|
# <% end %>
|
48
48
|
#
|
49
|
-
# <% c.
|
49
|
+
# <% c.with_menu(header: "Options") do |menu|
|
50
50
|
# menu.item { "Item 1" }
|
51
51
|
# menu.item { "Item 2" }
|
52
52
|
# menu.item(divider: true)
|
@@ -60,11 +60,11 @@ module Primer
|
|
60
60
|
#
|
61
61
|
# @example With direction
|
62
62
|
# <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
|
63
|
-
# <% c.
|
63
|
+
# <% c.with_button do %>
|
64
64
|
# Dropdown
|
65
65
|
# <% end %>
|
66
66
|
#
|
67
|
-
# <% c.
|
67
|
+
# <% c.with_menu(header: "Options", direction: :s) do |menu|
|
68
68
|
# menu.item { "Item 1" }
|
69
69
|
# menu.item { "Item 2" }
|
70
70
|
# menu.item { "Item 3" }
|
@@ -74,11 +74,11 @@ module Primer
|
|
74
74
|
#
|
75
75
|
# @example With caret
|
76
76
|
# <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
|
77
|
-
# <% c.
|
77
|
+
# <% c.with_button do %>
|
78
78
|
# Dropdown
|
79
79
|
# <% end %>
|
80
80
|
#
|
81
|
-
# <% c.
|
81
|
+
# <% c.with_menu(header: "Options") do |menu|
|
82
82
|
# menu.item { "Item 1" }
|
83
83
|
# menu.item { "Item 2" }
|
84
84
|
# menu.item { "Item 3" }
|
@@ -88,11 +88,11 @@ module Primer
|
|
88
88
|
#
|
89
89
|
# @example Customizing the button
|
90
90
|
# <%= render(Primer::Dropdown.new) do |c| %>
|
91
|
-
# <% c.
|
91
|
+
# <% c.with_button(scheme: :primary, size: :small) do %>
|
92
92
|
# Dropdown
|
93
93
|
# <% end %>
|
94
94
|
#
|
95
|
-
# <% c.
|
95
|
+
# <% c.with_menu(header: "Options") do |menu|
|
96
96
|
# menu.item { "Item 1" }
|
97
97
|
# menu.item { "Item 2" }
|
98
98
|
# menu.item { "Item 3" }
|
@@ -102,11 +102,11 @@ module Primer
|
|
102
102
|
#
|
103
103
|
# @example Menu as list
|
104
104
|
# <%= render(Primer::Dropdown.new) do |c| %>
|
105
|
-
# <% c.
|
105
|
+
# <% c.with_button do %>
|
106
106
|
# Dropdown
|
107
107
|
# <% end %>
|
108
108
|
#
|
109
|
-
# <% c.
|
109
|
+
# <% c.with_menu(as: :list, header: "Options") do |menu|
|
110
110
|
# menu.item { "Item 1" }
|
111
111
|
# menu.item { "Item 2" }
|
112
112
|
# menu.item(divider: true)
|
@@ -117,18 +117,18 @@ module Primer
|
|
117
117
|
#
|
118
118
|
# @example Customizing menu items
|
119
119
|
# <%= render(Primer::Dropdown.new) do |c| %>
|
120
|
-
# <% c.
|
120
|
+
# <% c.with_button do %>
|
121
121
|
# Dropdown
|
122
122
|
# <% end %>
|
123
123
|
#
|
124
|
-
# <% c.
|
124
|
+
# <% c.with_menu(header: "Options") do |menu|
|
125
125
|
# menu.item(tag: :button) { "Item 1" }
|
126
126
|
# menu.item(classes: "custom-class") { "Item 2" }
|
127
127
|
# menu.item { "Item 3" }
|
128
128
|
# end %>
|
129
129
|
# <% end %>
|
130
130
|
#
|
131
|
-
# @param overlay [Symbol] <%= one_of(Primer::
|
131
|
+
# @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
|
132
132
|
# @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
|
133
133
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
134
134
|
def initialize(overlay: :default, with_caret: false, **system_arguments)
|
@@ -18,7 +18,7 @@ module Primer
|
|
18
18
|
|
19
19
|
# @example With a header
|
20
20
|
# <div>
|
21
|
-
# <%= render(Primer::
|
21
|
+
# <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |c| %>
|
22
22
|
# <% c.summary do %>
|
23
23
|
# Dropdown
|
24
24
|
# <% end %>
|
@@ -1,44 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
|
5
|
-
|
6
|
-
# - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
|
7
|
-
# - Use `Heading` as the title of a section or sub section.
|
8
|
-
# - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::Beta::Text) %> with relevant <%= link_to_typography_docs %>
|
9
|
-
# such as `font_size` and `font_weight`.
|
10
|
-
# - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
|
11
|
-
#
|
12
|
-
# @accessibility
|
13
|
-
# While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
|
14
|
-
# When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
|
15
|
-
# consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
|
16
|
-
#
|
17
|
-
# Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
|
18
|
-
# <%= link_to_heading_practices %>
|
19
|
-
class HeadingComponent < Primer::Component
|
20
|
-
status :beta
|
21
|
-
|
22
|
-
TAG_FALLBACK = :h2
|
23
|
-
TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
|
24
|
-
|
25
|
-
# @example Default
|
26
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
|
27
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
|
28
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
|
29
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
|
30
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
|
31
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
|
32
|
-
#
|
33
|
-
# @param tag [String] <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
|
34
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
35
|
-
def initialize(tag:, **system_arguments)
|
36
|
-
@system_arguments = system_arguments
|
37
|
-
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
|
38
|
-
end
|
39
|
-
|
40
|
-
def call
|
41
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
42
|
-
end
|
4
|
+
class HeadingComponent < Primer::Beta::Heading
|
5
|
+
status :deprecated
|
43
6
|
end
|
44
7
|
end
|
@@ -1,53 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
|
5
|
-
|
6
|
-
# @accessibility
|
7
|
-
# `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
|
8
|
-
# The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
|
9
|
-
# if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
|
10
|
-
# `"Expand 5 more comments"` instead of `"More"`.
|
11
|
-
class HiddenTextExpander < Primer::Component
|
12
|
-
# @example Default
|
13
|
-
# <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect")) %>
|
14
|
-
#
|
15
|
-
# @example Inline
|
16
|
-
# <%= render(Primer::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
|
17
|
-
#
|
18
|
-
# @example Styling the button
|
19
|
-
# <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
|
20
|
-
#
|
21
|
-
# @param inline [Boolean] Whether or not the expander is inline.
|
22
|
-
# @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
|
23
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
24
|
-
def initialize(inline: false, button_arguments: {}, **system_arguments)
|
25
|
-
@system_arguments = deny_tag_argument(**system_arguments)
|
26
|
-
@button_arguments = button_arguments
|
27
|
-
|
28
|
-
@system_arguments[:tag] = :span
|
29
|
-
@system_arguments[:classes] = class_names(
|
30
|
-
"hidden-text-expander",
|
31
|
-
@system_arguments[:classes],
|
32
|
-
"inline" => inline
|
33
|
-
)
|
34
|
-
|
35
|
-
aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
|
36
|
-
if aria_label.present?
|
37
|
-
@button_arguments[:"aria-label"] = aria_label
|
38
|
-
@system_arguments[:aria]&.delete(:label)
|
39
|
-
end
|
40
|
-
|
41
|
-
@button_arguments[:classes] = class_names(
|
42
|
-
"ellipsis-expander",
|
43
|
-
button_arguments[:classes]
|
44
|
-
)
|
45
|
-
end
|
46
|
-
|
47
|
-
def call
|
48
|
-
render(Primer::BaseComponent.new(**@system_arguments)) do
|
49
|
-
render(Primer::HellipButton.new(**@button_arguments))
|
50
|
-
end
|
51
|
-
end
|
4
|
+
class HiddenTextExpander < Primer::Alpha::HiddenTextExpander
|
5
|
+
status :deprecated
|
52
6
|
end
|
53
7
|
end
|
@@ -1,6 +1,12 @@
|
|
1
|
-
|
1
|
+
<% if render_tooltip? %>
|
2
|
+
<%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
|
3
|
+
<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
|
4
|
+
<%= render Primer::OcticonComponent.new(icon: @icon) %>
|
5
|
+
<% end -%>
|
6
|
+
<%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
|
7
|
+
<% end %>
|
8
|
+
<% else %>
|
2
9
|
<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
|
3
10
|
<%= render Primer::OcticonComponent.new(icon: @icon) %>
|
4
11
|
<% end -%>
|
5
|
-
<%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
|
6
12
|
<% end %>
|
@@ -3,6 +3,7 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use `IconButton` to render Icon-only buttons without the default button styles.
|
5
5
|
#
|
6
|
+
# `IconButton` will always render with a tooltip unless the tag is `:summary`.
|
6
7
|
# @accessibility
|
7
8
|
# `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
|
8
9
|
# The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
|
@@ -97,5 +98,11 @@ module Primer
|
|
97
98
|
@tooltip_arguments[:type] = :label
|
98
99
|
end
|
99
100
|
end
|
101
|
+
|
102
|
+
private
|
103
|
+
|
104
|
+
def render_tooltip?
|
105
|
+
@system_arguments[:tag] != :summary
|
106
|
+
end
|
100
107
|
end
|
101
108
|
end
|
@@ -21,7 +21,7 @@ module Primer
|
|
21
21
|
#
|
22
22
|
# @example Cropper with a custom loader
|
23
23
|
# <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
|
24
|
-
# <% cropper.
|
24
|
+
# <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
|
25
25
|
# <% end %>
|
26
26
|
#
|
27
27
|
# @param src [String] The path of the image to crop.
|
@@ -77,7 +77,8 @@ module Primer
|
|
77
77
|
|
78
78
|
@variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
|
79
79
|
@scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
|
80
|
-
@size = fetch_or_fallback(SIZE_OPTIONS, size
|
80
|
+
@size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
|
81
|
+
@size = :large if @variant == :large
|
81
82
|
@inline = inline || @variant == :inline
|
82
83
|
|
83
84
|
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
@@ -38,14 +38,14 @@ module Primer
|
|
38
38
|
|
39
39
|
# @example Default
|
40
40
|
# <%= render(Primer::LayoutComponent.new) do |component| %>
|
41
|
-
# <% component.
|
42
|
-
# <% component.
|
41
|
+
# <% component.with_sidebar { "Sidebar" } %>
|
42
|
+
# <% component.with_main { "Main" } %>
|
43
43
|
# <% end %>
|
44
44
|
#
|
45
45
|
# @example Left sidebar
|
46
46
|
# <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
|
47
|
-
# <% component.
|
48
|
-
# <% component.
|
47
|
+
# <% component.with_sidebar { "Sidebar" } %>
|
48
|
+
# <% component.with_main { "Main" } %>
|
49
49
|
# <% end %>
|
50
50
|
#
|
51
51
|
# @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
|
@@ -50,7 +50,7 @@ module Primer
|
|
50
50
|
# Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
|
51
51
|
# @code
|
52
52
|
# <%= render(Primer::LinkComponent.new(href: "#", id: "link-with-tooltip")) do |c| %>
|
53
|
-
# <% c.
|
53
|
+
# <% c.with_tooltip(text: "Tooltip text") %>
|
54
54
|
# Link
|
55
55
|
# <% end %>
|
56
56
|
#
|
@@ -40,20 +40,20 @@ module Primer
|
|
40
40
|
|
41
41
|
# @example Default
|
42
42
|
# <%= render(Primer::MenuComponent.new) do |c| %>
|
43
|
-
# <% c.
|
43
|
+
# <% c.with_heading(tag: :h2) do %>
|
44
44
|
# Heading
|
45
45
|
# <% end %>
|
46
|
-
# <% c.
|
46
|
+
# <% c.with_item(selected: true, href: "#url") do %>
|
47
47
|
# Item 1
|
48
48
|
# <% end %>
|
49
|
-
# <% c.
|
49
|
+
# <% c.with_item(href: "#url") do %>
|
50
50
|
# <%= render(Primer::OcticonComponent.new("check")) %>
|
51
51
|
# With Icon
|
52
52
|
# <% end %>
|
53
|
-
# <% c.
|
53
|
+
# <% c.with_item(href: "#url") do %>
|
54
54
|
# <%= render(Primer::OcticonComponent.new("check")) %>
|
55
55
|
# With Icon and Counter
|
56
|
-
# <%= render(Primer::
|
56
|
+
# <%= render(Primer::Beta::Counter.new(count: 25)) %>
|
57
57
|
# <% end %>
|
58
58
|
# <% end %>
|
59
59
|
#
|
@@ -57,37 +57,37 @@ module Primer
|
|
57
57
|
|
58
58
|
# Counter to be rendered in the Tab right.
|
59
59
|
#
|
60
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::
|
61
|
-
renders_one :counter, Primer::
|
60
|
+
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
|
61
|
+
renders_one :counter, Primer::Beta::Counter
|
62
62
|
|
63
63
|
attr_reader :selected
|
64
64
|
|
65
65
|
# @example Default
|
66
66
|
# <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
|
67
|
-
# <% c.
|
67
|
+
# <% c.with_text { "Selected" } %>
|
68
68
|
# <% end %>
|
69
69
|
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
70
|
-
# <% c.
|
70
|
+
# <% c.with_text { "Not selected" } %>
|
71
71
|
# <% end %>
|
72
72
|
#
|
73
73
|
# @example With icons and counters
|
74
74
|
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
75
|
-
# <% c.
|
76
|
-
# <% c.
|
75
|
+
# <% c.with_icon(:star) %>
|
76
|
+
# <% c.with_text { "Tab" } %>
|
77
77
|
# <% end %>
|
78
78
|
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
79
|
-
# <% c.
|
80
|
-
# <% c.
|
81
|
-
# <% c.
|
79
|
+
# <% c.with_icon(:star) %>
|
80
|
+
# <% c.with_text { "Tab" } %>
|
81
|
+
# <% c.with_counter(count: 10) %>
|
82
82
|
# <% end %>
|
83
83
|
# <%= render(Primer::Navigation::TabComponent.new) do |c| %>
|
84
|
-
# <% c.
|
85
|
-
# <% c.
|
84
|
+
# <% c.with_text { "Tab" } %>
|
85
|
+
# <% c.with_counter(count: 10) %>
|
86
86
|
# <% end %>
|
87
87
|
#
|
88
88
|
# @example Inside a list
|
89
89
|
# <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
|
90
|
-
# <% c.
|
90
|
+
# <% c.with_text { "Tab" } %>
|
91
91
|
# <% end %>
|
92
92
|
#
|
93
93
|
# @example With custom HTML
|
@@ -27,13 +27,13 @@ module Primer
|
|
27
27
|
|
28
28
|
# The heading
|
29
29
|
#
|
30
|
-
# @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::
|
30
|
+
# @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
|
31
31
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
32
32
|
renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
|
33
33
|
system_arguments[:tag] = tag
|
34
34
|
system_arguments[:mb] ||= 2
|
35
35
|
|
36
|
-
Primer::
|
36
|
+
Primer::Beta::Heading.new(**system_arguments)
|
37
37
|
}
|
38
38
|
|
39
39
|
# The body
|
@@ -60,40 +60,40 @@ module Primer
|
|
60
60
|
|
61
61
|
# @example Default
|
62
62
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
63
|
-
# <% component.
|
63
|
+
# <% component.with_heading do %>
|
64
64
|
# Activity feed
|
65
65
|
# <% end %>
|
66
|
-
# <% component.
|
66
|
+
# <% component.with_body do %>
|
67
67
|
# This is the Popover body.
|
68
68
|
# <% end %>
|
69
69
|
# <% end %>
|
70
70
|
#
|
71
71
|
# @example Large
|
72
72
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
73
|
-
# <% component.
|
73
|
+
# <% component.with_heading do %>
|
74
74
|
# Activity feed
|
75
75
|
# <% end %>
|
76
|
-
# <% component.
|
76
|
+
# <% component.with_body(large: true) do %>
|
77
77
|
# This is the large Popover body.
|
78
78
|
# <% end %>
|
79
79
|
# <% end %>
|
80
80
|
#
|
81
81
|
# @example Caret position
|
82
82
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
83
|
-
# <% component.
|
83
|
+
# <% component.with_heading do %>
|
84
84
|
# Activity feed
|
85
85
|
# <% end %>
|
86
|
-
# <% component.
|
86
|
+
# <% component.with_body(caret: :left) do %>
|
87
87
|
# This is the Popover body.
|
88
88
|
# <% end %>
|
89
89
|
# <% end %>
|
90
90
|
#
|
91
91
|
# @example With multiple elements in the body
|
92
92
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
93
|
-
# <% component.
|
93
|
+
# <% component.with_heading do %>
|
94
94
|
# Activity feed
|
95
95
|
# <% end %>
|
96
|
-
# <% component.
|
96
|
+
# <% component.with_body(caret: :left) do %>
|
97
97
|
# <p>This is the Popover body.</p>
|
98
98
|
# <%= render Primer::ButtonComponent.new(type: :submit) do %>
|
99
99
|
# Got it!
|
@@ -0,0 +1 @@
|
|
1
|
+
/* CSS component styles here */
|
@@ -56,27 +56,27 @@ module Primer
|
|
56
56
|
|
57
57
|
# @example Default
|
58
58
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
59
|
-
# <% component.
|
59
|
+
# <% component.with_heading(tag: :h3) do %>
|
60
60
|
# My Heading
|
61
61
|
# <% end %>
|
62
|
-
# <% component.
|
62
|
+
# <% component.with_description do %>
|
63
63
|
# My Description
|
64
64
|
# <% end %>
|
65
65
|
# <% end %>
|
66
66
|
#
|
67
67
|
# @example With dangerous heading
|
68
68
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
69
|
-
# <% component.
|
69
|
+
# <% component.with_heading(tag: :h3, danger: true) do %>
|
70
70
|
# My Heading
|
71
71
|
# <% end %>
|
72
|
-
# <% component.
|
72
|
+
# <% component.with_description do %>
|
73
73
|
# My Description
|
74
74
|
# <% end %>
|
75
75
|
# <% end %>
|
76
76
|
#
|
77
77
|
# @example With long description
|
78
78
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
79
|
-
# <% component.
|
79
|
+
# <% component.with_heading(tag: :h3) do %>
|
80
80
|
# My Heading
|
81
81
|
# <% end %>
|
82
82
|
# <% end %>
|
@@ -84,23 +84,23 @@ module Primer
|
|
84
84
|
#
|
85
85
|
# @example Without border
|
86
86
|
# <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
|
87
|
-
# <% component.
|
87
|
+
# <% component.with_heading do %>
|
88
88
|
# My Heading
|
89
89
|
# <% end %>
|
90
|
-
# <% component.
|
90
|
+
# <% component.with_description do %>
|
91
91
|
# My Description
|
92
92
|
# <% end %>
|
93
93
|
# <% end %>
|
94
94
|
#
|
95
95
|
# @example With actions
|
96
96
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
97
|
-
# <% component.
|
97
|
+
# <% component.with_heading do %>
|
98
98
|
# My Heading
|
99
99
|
# <% end %>
|
100
|
-
# <% component.
|
100
|
+
# <% component.with_description do %>
|
101
101
|
# My Description
|
102
102
|
# <% end %>
|
103
|
-
# <% component.
|
103
|
+
# <% component.with_actions do %>
|
104
104
|
# <%= render(
|
105
105
|
# Primer::ButtonComponent.new(
|
106
106
|
# tag: :a, href: "http://www.google.com", scheme: :danger
|
@@ -40,9 +40,9 @@ module Primer
|
|
40
40
|
# @example Default
|
41
41
|
# <div style="padding-left: 60px">
|
42
42
|
# <%= render(Primer::TimelineItemComponent.new) do |component| %>
|
43
|
-
# <% component.
|
44
|
-
# <% component.
|
45
|
-
# <% component.
|
43
|
+
# <% component.with_avatar(src: "https://github.com/github.png", alt: "github") %>
|
44
|
+
# <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
|
45
|
+
# <% component.with_body { "Success!" } %>
|
46
46
|
# <% end %>
|
47
47
|
# </div>
|
48
48
|
#
|
@@ -10,12 +10,12 @@ module ERBLint
|
|
10
10
|
ATTRIBUTES = %w[type].freeze
|
11
11
|
|
12
12
|
TYPE_OPTIONS = Primer::ViewComponents::Constants.get(
|
13
|
-
component: "Primer::CloseButton",
|
13
|
+
component: "Primer::Beta::CloseButton",
|
14
14
|
constant: "TYPE_OPTIONS"
|
15
15
|
).freeze
|
16
16
|
|
17
17
|
DEFAULT_TYPE = Primer::ViewComponents::Constants.get(
|
18
|
-
component: "Primer::CloseButton",
|
18
|
+
component: "Primer::Beta::CloseButton",
|
19
19
|
constant: "DEFAULT_TYPE"
|
20
20
|
).freeze
|
21
21
|
|
@@ -14,9 +14,9 @@ module ERBLint
|
|
14
14
|
|
15
15
|
TAGS = %w[button].freeze
|
16
16
|
CLASSES = %w[close-button].freeze
|
17
|
-
MESSAGE = "We are migrating close-button to use [Primer::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML."
|
17
|
+
MESSAGE = "We are migrating close-button to use [Primer::Beta::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML."
|
18
18
|
ARGUMENT_MAPPER = ArgumentMappers::CloseButton
|
19
|
-
COMPONENT = "Primer::CloseButton"
|
19
|
+
COMPONENT = "Primer::Beta::CloseButton"
|
20
20
|
|
21
21
|
ALLOWED_OCTICON_ARGS = %w[icon aria-label aria].freeze
|
22
22
|
|
@@ -12,7 +12,7 @@ module ERBLint
|
|
12
12
|
|
13
13
|
TAGS = %w[div].freeze
|
14
14
|
CLASSES = %w[flash].freeze
|
15
|
-
MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
|
15
|
+
MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/beta/flash), please try to use that instead of raw HTML."
|
16
16
|
ARGUMENT_MAPPER = ArgumentMappers::Flash
|
17
17
|
COMPONENT = "Primer::Beta::Flash"
|
18
18
|
|
@@ -7,7 +7,12 @@ module ERBLint
|
|
7
7
|
module DeprecatedComponentsHelpers
|
8
8
|
# If there is no alternative to suggest, set the value to nil
|
9
9
|
COMPONENT_TO_USE_INSTEAD = {
|
10
|
+
"Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
|
11
|
+
"Primer::HeadingComponent" => "Primer::Beta::Heading",
|
10
12
|
"Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
|
13
|
+
"Primer::CloseButton" => "Primer::Beta::CloseButton",
|
14
|
+
"Primer::CounterComponent" => "Primer::Beta::Counter",
|
15
|
+
"Primer::DetailsComponent" => "Primer::Beta::Details",
|
11
16
|
"Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
|
12
17
|
"Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
|
13
18
|
"Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
|
@@ -15,8 +15,13 @@ module RuboCop
|
|
15
15
|
# Primer::Beta::ComponentName.new()
|
16
16
|
class ComponentNameMigration < BaseCop
|
17
17
|
DEPRECATIONS = {
|
18
|
+
"Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
|
19
|
+
"Primer::DetailsComponent" => "Primer::Beta::Details",
|
20
|
+
"Primer::HeadingComponent" => "Primer::Beta::Heading",
|
18
21
|
"Primer::BoxComponent" => "Primer::Box",
|
19
22
|
"Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
|
23
|
+
"Primer::CloseButton" => "Primer::Beta::CloseButton",
|
24
|
+
"Primer::CounterComponent" => "Primer::Beta::Counter",
|
20
25
|
"Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
|
21
26
|
"Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
|
22
27
|
"Primer::BaseButton" => "Primer::Beta::BaseButton",
|
data/lib/tasks/docs.rake
CHANGED
@@ -50,16 +50,16 @@ namespace :docs do
|
|
50
50
|
Primer::Beta::ButtonGroup,
|
51
51
|
Primer::Alpha::ButtonMarketing,
|
52
52
|
Primer::ClipboardCopy,
|
53
|
-
Primer::CloseButton,
|
54
|
-
Primer::
|
55
|
-
Primer::
|
53
|
+
Primer::Beta::CloseButton,
|
54
|
+
Primer::Beta::Counter,
|
55
|
+
Primer::Beta::Details,
|
56
56
|
Primer::Dropdown,
|
57
57
|
Primer::DropdownMenuComponent,
|
58
58
|
Primer::Beta::Flash,
|
59
59
|
Primer::FlexComponent,
|
60
60
|
Primer::FlexItemComponent,
|
61
|
-
Primer::
|
62
|
-
Primer::HiddenTextExpander,
|
61
|
+
Primer::Beta::Heading,
|
62
|
+
Primer::Alpha::HiddenTextExpander,
|
63
63
|
Primer::LabelComponent,
|
64
64
|
Primer::LayoutComponent,
|
65
65
|
Primer::LinkComponent,
|