primer_view_components 0.0.41 → 0.0.42
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +46 -0
- data/app/components/primer/auto_complete.rb +1 -1
- data/app/components/primer/base_component.rb +5 -2
- data/app/components/primer/button_group.rb +1 -1
- data/app/components/primer/component.rb +1 -1
- data/app/components/primer/hidden_text_expander.rb +2 -2
- data/app/components/primer/image_crop.rb +1 -1
- data/app/components/primer/markdown.rb +6 -2
- data/app/components/primer/octicon_component.rb +1 -1
- data/app/components/primer/tab_nav_component.html.erb +3 -1
- data/app/components/primer/tab_nav_component.rb +24 -2
- data/app/components/primer/truncate.rb +6 -2
- data/app/lib/primer/classify.rb +11 -3
- data/lib/primer/view_components/engine.rb +2 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +35 -0
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 84c899ab3302b9bffbfe3f0d6471a732d3f457fa8f2eec84a3e7e4b9a9e003b0
|
4
|
+
data.tar.gz: b3f96f4caf1154320ebe772c3696526901ad07b9cd0b2327383b94b995c8bac4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9cab0b4a7016357d29d099e07ae047a335dc4e394422250cada38c4f861900433a639b20748ae239a0962eb49c4cb0b5a1279746bfab2c5713f51647834c6056
|
7
|
+
data.tar.gz: 89e0b7c38eff95e73b6e0f829153b14033644bd74553fef7a784a9d25d16b7fd52aea7305e4163c1ef294a8a758c4278d24b5f25d6bb194be994f31dd07401e5
|
data/CHANGELOG.md
CHANGED
@@ -2,6 +2,48 @@
|
|
2
2
|
|
3
3
|
## main
|
4
4
|
|
5
|
+
## 0.0.42
|
6
|
+
|
7
|
+
### New
|
8
|
+
|
9
|
+
* Add `font_family`, `font_style` and `text_transform` system arguments.
|
10
|
+
|
11
|
+
*Manuel Puyol*
|
12
|
+
|
13
|
+
* Add more options for `font_size` and `font_weight`.
|
14
|
+
|
15
|
+
*Manuel Puyol*
|
16
|
+
|
17
|
+
### Updates
|
18
|
+
|
19
|
+
* Add `align` option to the `TabNav` extra slot to allow HTML ordering.
|
20
|
+
|
21
|
+
*Manuel Puyol*
|
22
|
+
|
23
|
+
### Misc
|
24
|
+
|
25
|
+
* Auto-generate component previews from doc examples and run integration test checks.
|
26
|
+
|
27
|
+
*Kate Higa, Joel Hawksley*
|
28
|
+
|
29
|
+
* Configure previews controller to allow view helper usage in preview template.
|
30
|
+
|
31
|
+
*Kate Higa*
|
32
|
+
|
33
|
+
* Only include `ViewComponent::SlotableV2` if `ViewComponent::Base` does not already include it.
|
34
|
+
|
35
|
+
*Manuel Puyol*
|
36
|
+
|
37
|
+
* Add `force_system_arguments` option to raise an error if a class is used instead of using System Arguments.
|
38
|
+
|
39
|
+
*Manuel Puyol*
|
40
|
+
|
41
|
+
### Breaking changes
|
42
|
+
|
43
|
+
* Restrict allowed tags for `Truncate`, `Markdown`, and `HiddenTextExpander`.
|
44
|
+
|
45
|
+
*Kate Higa*
|
46
|
+
|
5
47
|
## 0.0.41
|
6
48
|
|
7
49
|
### New
|
@@ -46,6 +88,10 @@
|
|
46
88
|
|
47
89
|
### Breaking changes
|
48
90
|
|
91
|
+
* Rename `TooltipComponent` to `Tooltip`.
|
92
|
+
|
93
|
+
*Manuel Puyol*
|
94
|
+
|
49
95
|
* Don't allow `OcticonComponent` height/width values under 16px
|
50
96
|
|
51
97
|
*Jon Rohan*
|
@@ -54,7 +54,7 @@ module Primer
|
|
54
54
|
# @example With custom classes for the results
|
55
55
|
# <%= render(Primer::AutoComplete.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
|
56
56
|
# <% c.input(type: :text, name: "input") %>
|
57
|
-
# <% c.results(classes: "
|
57
|
+
# <% c.results(classes: "custom-class") do %>
|
58
58
|
# <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
|
59
59
|
# Selected
|
60
60
|
# <% end %>
|
@@ -129,9 +129,12 @@ module Primer
|
|
129
129
|
#
|
130
130
|
# | Name | Type | Description |
|
131
131
|
# | :- | :- | :- |
|
132
|
-
# | `
|
133
|
-
# | `
|
132
|
+
# | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
|
133
|
+
# | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
|
134
|
+
# | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
|
135
|
+
# | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
|
134
136
|
# | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
|
137
|
+
# | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
|
135
138
|
# | `underline` | Boolean | Whether text should be underlined. |
|
136
139
|
# | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
|
137
140
|
#
|
@@ -22,7 +22,7 @@ module Primer
|
|
22
22
|
# <% component.button(scheme: :primary) { "Primary" } %>
|
23
23
|
# <% component.button(scheme: :danger) { "Danger" } %>
|
24
24
|
# <% component.button(scheme: :outline) { "Outline" } %>
|
25
|
-
# <% component.button(classes: "
|
25
|
+
# <% component.button(classes: "custom-class") { "Custom class" } %>
|
26
26
|
# <% end %>
|
27
27
|
#
|
28
28
|
# @example Variants
|
@@ -5,7 +5,7 @@ require "view_component/version"
|
|
5
5
|
module Primer
|
6
6
|
# @private
|
7
7
|
class Component < ViewComponent::Base
|
8
|
-
include ViewComponent::SlotableV2 unless ViewComponent::
|
8
|
+
include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
|
9
9
|
include ClassNameHelper
|
10
10
|
include FetchOrFallbackHelper
|
11
11
|
include TestSelectorHelper
|
@@ -10,14 +10,14 @@ module Primer
|
|
10
10
|
# <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
|
11
11
|
#
|
12
12
|
# @example Styling the button
|
13
|
-
# <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "
|
13
|
+
# <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "custom-class" })) %>
|
14
14
|
#
|
15
15
|
# @param inline [Boolean] Whether or not the expander is inline.
|
16
16
|
# @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
|
17
17
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
18
18
|
def initialize(inline: false, button_arguments: {}, **system_arguments)
|
19
19
|
@system_arguments = system_arguments
|
20
|
-
@system_arguments[:tag]
|
20
|
+
@system_arguments[:tag] = :span
|
21
21
|
@system_arguments[:classes] = class_names(
|
22
22
|
"hidden-text-expander",
|
23
23
|
@system_arguments[:classes],
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
#
|
21
21
|
# @example Cropper with a custom loader
|
22
22
|
# <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
|
23
|
-
# <% cropper.loading(style: "width: 120px"
|
23
|
+
# <% cropper.loading(style: "width: 120px").with_content("Loading...") %>
|
24
24
|
# <% end %>
|
25
25
|
#
|
26
26
|
# @param src [String] The path of the image to crop.
|
@@ -4,6 +4,9 @@ module Primer
|
|
4
4
|
# Use `Markdown` to wrap markdown content
|
5
5
|
class Markdown < Primer::Component
|
6
6
|
status :beta
|
7
|
+
|
8
|
+
DEFAULT_TAG = :div
|
9
|
+
TAG_OPTIONS = [DEFAULT_TAG, :article, :td].freeze
|
7
10
|
# @example Default
|
8
11
|
# <%= render(Primer::Markdown.new) do %>
|
9
12
|
# <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href="https://github.com">Links </a> should be blue with no underlines (unless hovered over).</p>
|
@@ -276,10 +279,11 @@ module Primer
|
|
276
279
|
# <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
|
277
280
|
# <% end %>
|
278
281
|
#
|
282
|
+
# @param tag [Symbol] <%= one_of(Primer::Markdown::TAG_OPTIONS) %>
|
279
283
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
280
|
-
def initialize(**system_arguments)
|
284
|
+
def initialize(tag: DEFAULT_TAG, **system_arguments)
|
281
285
|
@system_arguments = system_arguments
|
282
|
-
@system_arguments[:tag]
|
286
|
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
283
287
|
|
284
288
|
@system_arguments[:classes] = class_names(
|
285
289
|
"markdown-body",
|
@@ -35,7 +35,7 @@ module Primer
|
|
35
35
|
icon_key = icon_name || icon
|
36
36
|
|
37
37
|
# Don't allow sizes under 16px
|
38
|
-
if system_arguments[:height].present? && system_arguments[:height] < 16 || system_arguments[:width].present? && system_arguments[:width] < 16
|
38
|
+
if system_arguments[:height].present? && system_arguments[:height].to_i < 16 || system_arguments[:width].present? && system_arguments[:width].to_i < 16
|
39
39
|
system_arguments.delete(:height)
|
40
40
|
system_arguments.delete(:width)
|
41
41
|
end
|
@@ -1,12 +1,14 @@
|
|
1
1
|
<%= wrapper do %>
|
2
2
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
3
|
-
<%= extra %>
|
3
|
+
<%= extra if @align == :left %>
|
4
4
|
|
5
5
|
<%= render Primer::BaseComponent.new(**@body_arguments) do %>
|
6
6
|
<% tabs.each do |tab| %>
|
7
7
|
<%= tab %>
|
8
8
|
<% end %>
|
9
9
|
<% end %>
|
10
|
+
|
11
|
+
<%= extra if @align == :right %>
|
10
12
|
<% end %>
|
11
13
|
|
12
14
|
<% if @with_panel %>
|
@@ -5,6 +5,9 @@ module Primer
|
|
5
5
|
class TabNavComponent < Primer::Component
|
6
6
|
include Primer::TabbedComponentHelper
|
7
7
|
|
8
|
+
DEFAULT_EXTRA_ALIGN = :left
|
9
|
+
EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
|
10
|
+
|
8
11
|
# Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
|
9
12
|
#
|
10
13
|
# @param selected [Boolean] Whether the tab is selected.
|
@@ -23,7 +26,13 @@ module Primer
|
|
23
26
|
}
|
24
27
|
|
25
28
|
# Renders extra content to the `TabNav`. This will be rendered after the tabs.
|
26
|
-
|
29
|
+
#
|
30
|
+
# @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
|
31
|
+
renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
|
32
|
+
@align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
|
33
|
+
|
34
|
+
view_context.capture { block&.call }
|
35
|
+
}
|
27
36
|
|
28
37
|
# @example Default
|
29
38
|
# <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
|
@@ -72,7 +81,7 @@ module Primer
|
|
72
81
|
# <% end %>
|
73
82
|
#
|
74
83
|
# @example With extra content
|
75
|
-
# <%= render(Primer::TabNavComponent.new(label: "
|
84
|
+
# <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
|
76
85
|
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
77
86
|
# <% c.tab(href: "#") { "Tab 2" } %>
|
78
87
|
# <% c.tab(href: "#") { "Tab 3" } %>
|
@@ -81,11 +90,24 @@ module Primer
|
|
81
90
|
# <% end %>
|
82
91
|
# <% end %>
|
83
92
|
#
|
93
|
+
# @example Adding extra content after the tabs
|
94
|
+
# <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
|
95
|
+
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
96
|
+
# <% c.tab(href: "#") { "Tab 2" } %>
|
97
|
+
# <% c.tab(href: "#") { "Tab 3" } %>
|
98
|
+
# <% c.extra(align: :right) do %>
|
99
|
+
# <div>
|
100
|
+
# <%= render(Primer::ButtonComponent.new) { "Button" } %>
|
101
|
+
# </div>
|
102
|
+
# <% end %>
|
103
|
+
# <% end %>
|
104
|
+
#
|
84
105
|
# @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
|
85
106
|
# @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
|
86
107
|
# @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
|
87
108
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
88
109
|
def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
|
110
|
+
@align = DEFAULT_EXTRA_ALIGN
|
89
111
|
@with_panel = with_panel
|
90
112
|
@system_arguments = system_arguments
|
91
113
|
@body_arguments = body_arguments
|
@@ -5,6 +5,9 @@ module Primer
|
|
5
5
|
class Truncate < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
8
|
+
DEFAULT_TAG = :div
|
9
|
+
TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
|
10
|
+
|
8
11
|
# @example Default
|
9
12
|
# <div class="col-2">
|
10
13
|
# <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
|
@@ -19,13 +22,14 @@ module Primer
|
|
19
22
|
# @example Custom size
|
20
23
|
# <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
|
21
24
|
#
|
25
|
+
# @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
|
22
26
|
# @param inline [Boolean] Whether the element is inline (or inline-block).
|
23
27
|
# @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
|
24
28
|
# @param max_width [Integer] Sets the max-width of the text.
|
25
29
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
26
|
-
def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
|
30
|
+
def initialize(tag: DEFAULT_TAG, inline: false, expandable: false, max_width: nil, **system_arguments)
|
27
31
|
@system_arguments = system_arguments
|
28
|
-
@system_arguments[:tag]
|
32
|
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
29
33
|
@system_arguments[:classes] = class_names(
|
30
34
|
@system_arguments[:classes],
|
31
35
|
"css-truncate",
|
data/app/lib/primer/classify.rb
CHANGED
@@ -16,7 +16,7 @@ module Primer
|
|
16
16
|
BG_KEY = :bg
|
17
17
|
VERTICAL_ALIGN_KEY = :vertical_align
|
18
18
|
WORD_BREAK_KEY = :word_break
|
19
|
-
TEXT_KEYS = %i[text_align
|
19
|
+
TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
|
20
20
|
WIDTH_KEY = :width
|
21
21
|
HEIGHT_KEY = :height
|
22
22
|
BOX_SHADOW_KEY = :box_shadow
|
@@ -123,7 +123,7 @@ module Primer
|
|
123
123
|
def validated_class_names(classes)
|
124
124
|
return if classes.blank?
|
125
125
|
|
126
|
-
if
|
126
|
+
if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
|
127
127
|
invalid_class_names =
|
128
128
|
classes.split(" ").each_with_object([]) do |class_name, memo|
|
129
129
|
memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
|
@@ -215,7 +215,11 @@ module Primer
|
|
215
215
|
elsif TEXT_KEYS.include?(key)
|
216
216
|
memo[:classes] << "text-#{val.to_s.dasherize}"
|
217
217
|
elsif TYPOGRAPHY_KEYS.include?(key)
|
218
|
-
memo[:classes] <<
|
218
|
+
memo[:classes] << if val == :small || val == :normal
|
219
|
+
"text-#{val.to_s.dasherize}"
|
220
|
+
else
|
221
|
+
"f#{val.to_s.dasherize}"
|
222
|
+
end
|
219
223
|
elsif key == BOX_SHADOW_KEY
|
220
224
|
memo[:classes] << if val == true
|
221
225
|
"color-shadow-small"
|
@@ -236,6 +240,10 @@ module Primer
|
|
236
240
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
|
237
241
|
end
|
238
242
|
end
|
243
|
+
|
244
|
+
def force_system_arguments?
|
245
|
+
Rails.application.config.primer_view_components.force_system_arguments
|
246
|
+
end
|
239
247
|
end
|
240
248
|
|
241
249
|
Cache.preload!
|
@@ -13,7 +13,9 @@ module Primer
|
|
13
13
|
]
|
14
14
|
|
15
15
|
config.primer_view_components = ActiveSupport::OrderedOptions.new
|
16
|
+
|
16
17
|
config.primer_view_components.force_functional_colors = true
|
18
|
+
config.primer_view_components.force_system_arguments = false
|
17
19
|
config.primer_view_components.silence_deprecations = false
|
18
20
|
|
19
21
|
initializer "primer_view_components.assets" do |app|
|
data/lib/tasks/docs.rake
CHANGED
@@ -302,6 +302,41 @@ namespace :docs do
|
|
302
302
|
|
303
303
|
puts "Markdown compiled."
|
304
304
|
|
305
|
+
# Generate previews from documentation examples
|
306
|
+
components.each do |component|
|
307
|
+
documentation = registry.get(component.name)
|
308
|
+
short_name = component.name.gsub(/Primer|::/, "")
|
309
|
+
initialize_method = documentation.meths.find(&:constructor?)
|
310
|
+
|
311
|
+
next unless initialize_method.tags(:example).any?
|
312
|
+
|
313
|
+
yard_example_tags = initialize_method.tags(:example)
|
314
|
+
|
315
|
+
path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview.rb")
|
316
|
+
path.dirname.mkdir unless path.dirname.exist?
|
317
|
+
|
318
|
+
File.open(path, "w") do |f|
|
319
|
+
f.puts("module Primer")
|
320
|
+
f.puts(" module Docs")
|
321
|
+
f.puts(" class #{short_name}Preview < ViewComponent::Preview")
|
322
|
+
|
323
|
+
yard_example_tags.each_with_index do |tag, index|
|
324
|
+
method_name = tag.name.split("|").first.downcase.parameterize.underscore
|
325
|
+
f.puts(" def #{method_name}; end")
|
326
|
+
f.puts unless index == yard_example_tags.size - 1
|
327
|
+
path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
|
328
|
+
path.dirname.mkdir unless path.dirname.exist?
|
329
|
+
File.open(path, "w") do |view_file|
|
330
|
+
view_file.puts(tag.text.to_s)
|
331
|
+
end
|
332
|
+
end
|
333
|
+
|
334
|
+
f.puts(" end")
|
335
|
+
f.puts(" end")
|
336
|
+
f.puts("end")
|
337
|
+
end
|
338
|
+
end
|
339
|
+
|
305
340
|
if components_without_examples.any?
|
306
341
|
puts
|
307
342
|
puts "The following components have no examples defined: #{components_without_examples.map(&:name).join(', ')}. Consider adding an example?"
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.42
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-05-
|
11
|
+
date: 2021-05-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -482,7 +482,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
482
482
|
- !ruby/object:Gem::Version
|
483
483
|
version: '0'
|
484
484
|
requirements: []
|
485
|
-
rubygems_version: 3.
|
485
|
+
rubygems_version: 3.0.3
|
486
486
|
signing_key:
|
487
487
|
specification_version: 4
|
488
488
|
summary: ViewComponents for the Primer Design System
|