primer_view_components 0.0.36 → 0.0.41
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 +220 -24
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/components/primer/auto_complete.rb +3 -1
- data/app/components/primer/auto_complete/item.rb +1 -1
- data/app/components/primer/avatar_component.rb +22 -3
- data/app/components/primer/avatar_stack_component.rb +8 -5
- data/app/components/primer/base_button.rb +47 -0
- data/app/components/primer/base_component.rb +14 -10
- data/app/components/primer/blankslate_component.rb +10 -7
- data/app/components/primer/border_box_component.rb +1 -1
- data/app/components/primer/box_component.rb +1 -1
- data/app/components/primer/breadcrumb_component.rb +1 -1
- data/app/components/primer/button_component.html.erb +9 -0
- data/app/components/primer/button_component.rb +39 -21
- data/app/components/primer/{button_group_component.html.erb → button_group.html.erb} +0 -0
- data/app/components/primer/button_group.rb +61 -0
- data/app/components/primer/button_marketing_component.rb +4 -9
- data/app/components/primer/clipboard_copy.html.erb +8 -0
- data/app/components/primer/clipboard_copy.rb +26 -0
- data/app/components/primer/clipboard_copy_component.d.ts +1 -0
- data/app/components/primer/clipboard_copy_component.js +34 -0
- data/app/components/primer/clipboard_copy_component.ts +39 -0
- data/app/components/primer/close_button.rb +11 -2
- data/app/components/primer/component.rb +21 -2
- data/app/components/primer/counter_component.rb +6 -1
- data/app/components/primer/details_component.rb +1 -1
- data/app/components/primer/dropdown/menu_component.rb +1 -1
- data/app/components/primer/dropdown_component.rb +1 -1
- data/app/components/primer/flash_component.rb +3 -3
- data/app/components/primer/flex_component.rb +28 -1
- data/app/components/primer/flex_item_component.rb +20 -1
- data/app/components/primer/heading_component.rb +25 -4
- data/app/components/primer/hidden_text_expander.rb +2 -4
- data/app/components/primer/icon_button.rb +65 -0
- data/app/components/primer/image.rb +46 -0
- data/app/components/primer/image_crop.d.ts +1 -0
- data/app/components/primer/image_crop.html.erb +12 -0
- data/app/components/primer/image_crop.js +1 -0
- data/app/components/primer/image_crop.rb +36 -0
- data/app/components/primer/image_crop.ts +1 -0
- data/app/components/primer/label_component.rb +7 -3
- data/app/components/primer/layout_component.rb +1 -1
- data/app/components/primer/link_component.rb +1 -1
- data/app/components/primer/local_time.d.ts +1 -0
- data/app/components/primer/local_time.js +1 -0
- data/app/components/primer/local_time.rb +59 -0
- data/app/components/primer/local_time.ts +1 -0
- data/app/components/primer/{markdown_component.rb → markdown.rb} +6 -5
- data/app/components/primer/menu_component.rb +1 -1
- data/app/components/primer/navigation/tab_component.rb +8 -1
- data/app/components/primer/octicon_component.html.erb +7 -0
- data/app/components/primer/octicon_component.rb +53 -19
- data/app/components/primer/octicon_symbols_component.html.erb +3 -0
- data/app/components/primer/octicon_symbols_component.rb +61 -0
- data/app/components/primer/popover_component.rb +1 -1
- data/app/components/primer/primer.d.ts +3 -0
- data/app/components/primer/primer.js +3 -0
- data/app/components/primer/primer.ts +3 -0
- data/app/components/primer/progress_bar_component.rb +1 -1
- data/app/components/primer/spinner_component.rb +3 -3
- data/app/components/primer/state_component.rb +2 -2
- data/app/components/primer/subhead_component.rb +34 -4
- data/app/components/primer/tab_container_component.rb +1 -1
- data/app/components/primer/tab_nav_component.html.erb +2 -0
- data/app/components/primer/tab_nav_component.rb +23 -10
- data/app/components/primer/text_component.rb +6 -3
- data/app/components/primer/time_ago_component.rb +1 -1
- data/app/components/primer/timeline_item_component.rb +1 -1
- data/app/components/primer/{tooltip_component.rb → tooltip.rb} +11 -9
- data/app/components/primer/truncate.rb +1 -1
- data/app/components/primer/underline_nav_component.rb +1 -1
- data/app/lib/primer/classify.rb +11 -36
- data/app/lib/primer/classify/cache.rb +20 -15
- data/app/lib/primer/classify/flex.rb +111 -0
- data/app/lib/primer/classify/functional_border_colors.rb +1 -2
- data/app/lib/primer/fetch_or_fallback_helper.rb +2 -2
- data/app/lib/primer/octicon/cache.rb +42 -0
- data/app/lib/primer/view_helper.rb +2 -1
- data/lib/primer/view_components.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/coverage.rake +14 -0
- data/lib/tasks/docs.rake +315 -0
- data/lib/tasks/statuses.rake +12 -0
- data/lib/yard/docs_helper.rb +57 -0
- data/static/statuses.json +54 -1
- metadata +50 -11
- data/app/components/primer/button_group_component.rb +0 -35
- data/app/components/primer/foo_bar.d.ts +0 -1
- data/app/components/primer/foo_bar.js +0 -1
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use
|
4
|
+
# Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|
5
5
|
#
|
6
6
|
# By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
|
7
7
|
class PopoverComponent < Primer::Component
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use
|
4
|
+
# Use `Spinner` to let users know that content is being loaded.
|
5
5
|
class SpinnerComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
@@ -27,10 +27,10 @@ module Primer
|
|
27
27
|
# <%= render(Primer::SpinnerComponent.new(size: :large)) %>
|
28
28
|
#
|
29
29
|
# @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
|
30
|
-
def initialize(size: DEFAULT_SIZE, **system_arguments)
|
30
|
+
def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
|
31
31
|
@system_arguments = system_arguments
|
32
32
|
@system_arguments[:tag] = :svg
|
33
|
-
@system_arguments[:style] ||=
|
33
|
+
@system_arguments[:style] ||= style
|
34
34
|
@system_arguments[:animation] = :rotate
|
35
35
|
@system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
36
36
|
@system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
4
|
+
# Use `State` for rendering the status of an item.
|
5
5
|
class StateComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
@@ -29,7 +29,7 @@ module Primer
|
|
29
29
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
30
30
|
|
31
31
|
TAG_DEFAULT = :span
|
32
|
-
TAG_OPTIONS = [TAG_DEFAULT, :div
|
32
|
+
TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
|
33
33
|
|
34
34
|
# @example Default
|
35
35
|
# <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
|
@@ -1,16 +1,28 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use the
|
4
|
+
# Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
|
5
|
+
#
|
6
|
+
# - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
|
7
|
+
# - Use a succint, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
|
8
|
+
# - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::LinkComponent) %>.
|
9
|
+
#
|
10
|
+
# @accessibility
|
11
|
+
# The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
|
12
|
+
# <%= link_to_heading_practices %>
|
5
13
|
class SubheadComponent < Primer::Component
|
6
14
|
status :beta
|
7
15
|
|
16
|
+
DEFAULT_HEADING_TAG = :div
|
17
|
+
HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
|
18
|
+
|
8
19
|
# The heading
|
9
20
|
#
|
21
|
+
# @param tag [Symbol] <%= one_of(Primer::SubheadComponent::HEADING_TAG_OPTIONS)%>
|
10
22
|
# @param danger [Boolean] Whether to style the heading as dangerous.
|
11
23
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
12
|
-
renders_one :heading, lambda { |danger: false, **system_arguments|
|
13
|
-
system_arguments[:tag]
|
24
|
+
renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
|
25
|
+
system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
|
14
26
|
system_arguments[:classes] = class_names(
|
15
27
|
system_arguments[:classes],
|
16
28
|
"Subhead-heading",
|
@@ -42,7 +54,7 @@ module Primer
|
|
42
54
|
|
43
55
|
# @example Default
|
44
56
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
45
|
-
# <% component.heading do %>
|
57
|
+
# <% component.heading(tag: :h3) do %>
|
46
58
|
# My Heading
|
47
59
|
# <% end %>
|
48
60
|
# <% component.description do %>
|
@@ -50,6 +62,24 @@ module Primer
|
|
50
62
|
# <% end %>
|
51
63
|
# <% end %>
|
52
64
|
#
|
65
|
+
# @example With dangerous heading
|
66
|
+
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
67
|
+
# <% component.heading(tag: :h3, danger: true) do %>
|
68
|
+
# My Heading
|
69
|
+
# <% end %>
|
70
|
+
# <% component.description do %>
|
71
|
+
# My Description
|
72
|
+
# <% end %>
|
73
|
+
# <% end %>
|
74
|
+
#
|
75
|
+
# @example With long description
|
76
|
+
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
77
|
+
# <% component.heading(tag: :h3) do %>
|
78
|
+
# My Heading
|
79
|
+
# <% end %>
|
80
|
+
# <% end %>
|
81
|
+
# <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
|
82
|
+
#
|
53
83
|
# @example Without border
|
54
84
|
# <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
|
55
85
|
# <% component.heading do %>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use TabContainer to create tabbed content with keyboard support. This component does not add any styles.
|
4
|
+
# Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
|
5
5
|
# It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::TabNavComponent) %>.
|
6
6
|
#
|
7
7
|
# This component requires javascript.
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
|
4
|
+
# Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
|
5
5
|
class TabNavComponent < Primer::Component
|
6
6
|
include Primer::TabbedComponentHelper
|
7
7
|
|
@@ -22,6 +22,9 @@ module Primer
|
|
22
22
|
)
|
23
23
|
}
|
24
24
|
|
25
|
+
# Renders extra content to the `TabNav`. This will be rendered after the tabs.
|
26
|
+
renders_one :extra
|
27
|
+
|
25
28
|
# @example Default
|
26
29
|
# <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
|
27
30
|
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
@@ -68,12 +71,24 @@ module Primer
|
|
68
71
|
# <% end %>
|
69
72
|
# <% end %>
|
70
73
|
#
|
74
|
+
# @example With extra content
|
75
|
+
# <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
|
76
|
+
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
|
77
|
+
# <% c.tab(href: "#") { "Tab 2" } %>
|
78
|
+
# <% c.tab(href: "#") { "Tab 3" } %>
|
79
|
+
# <% c.extra do %>
|
80
|
+
# <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
|
81
|
+
# <% end %>
|
82
|
+
# <% end %>
|
83
|
+
#
|
71
84
|
# @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
|
72
85
|
# @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
|
86
|
+
# @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
|
73
87
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
74
|
-
def initialize(label:, with_panel: false, **system_arguments)
|
88
|
+
def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
|
75
89
|
@with_panel = with_panel
|
76
90
|
@system_arguments = system_arguments
|
91
|
+
@body_arguments = body_arguments
|
77
92
|
|
78
93
|
@system_arguments[:tag] ||= :div
|
79
94
|
@system_arguments[:classes] = class_names(
|
@@ -81,15 +96,13 @@ module Primer
|
|
81
96
|
system_arguments[:classes]
|
82
97
|
)
|
83
98
|
|
84
|
-
@body_arguments =
|
85
|
-
|
86
|
-
classes: "tabnav-tabs",
|
87
|
-
aria: {
|
88
|
-
label: label
|
89
|
-
}
|
90
|
-
}
|
91
|
-
|
99
|
+
@body_arguments[:tag] = navigation_tag(with_panel)
|
100
|
+
@body_arguments[:"aria-label"] = label
|
92
101
|
@body_arguments[:role] = :tablist if @with_panel
|
102
|
+
@body_arguments[:classes] = class_names(
|
103
|
+
"tabnav-tabs",
|
104
|
+
body_arguments[:classes]
|
105
|
+
)
|
93
106
|
end
|
94
107
|
end
|
95
108
|
end
|
@@ -1,18 +1,21 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
4
|
+
# `Text` is a wrapper component that will apply typography styles to the text inside.
|
5
5
|
class TextComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
8
|
+
DEFAULT_TAG = :span
|
9
|
+
|
8
10
|
# @example Default
|
9
11
|
# <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
|
10
12
|
# <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
|
11
13
|
#
|
14
|
+
# @param tag [Symbol]
|
12
15
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
13
|
-
def initialize(**system_arguments)
|
16
|
+
def initialize(tag: DEFAULT_TAG, **system_arguments)
|
14
17
|
@system_arguments = system_arguments
|
15
|
-
@system_arguments[:tag]
|
18
|
+
@system_arguments[:tag] = tag
|
16
19
|
end
|
17
20
|
|
18
21
|
def call
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use
|
4
|
+
# Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
|
5
5
|
class TimeAgoComponent < Primer::Component
|
6
6
|
status :beta
|
7
7
|
|
@@ -19,7 +19,7 @@ module Primer
|
|
19
19
|
|
20
20
|
# Badge that will be connected to other TimelineItems.
|
21
21
|
#
|
22
|
-
# @param icon [String] Name of
|
22
|
+
# @param icon [String] Name of <%= link_to_octicons %> to use.
|
23
23
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
24
24
|
renders_one :badge, "BadgeComponent"
|
25
25
|
|
@@ -1,8 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
5
|
-
class
|
4
|
+
# `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
|
5
|
+
class Tooltip < Primer::Component
|
6
|
+
status :beta
|
7
|
+
|
6
8
|
DIRECTION_DEFAULT = :n
|
7
9
|
ALIGN_DEFAULT = :default
|
8
10
|
MULTILINE_DEFAULT = false
|
@@ -28,34 +30,34 @@ module Primer
|
|
28
30
|
|
29
31
|
# @example Default
|
30
32
|
# <div class="pt-5">
|
31
|
-
# <%= render(Primer::
|
33
|
+
# <%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
|
32
34
|
# </div>
|
33
35
|
#
|
34
36
|
# @example Wrapping another component
|
35
37
|
# <div class="pt-5">
|
36
|
-
# <%= render(Primer::
|
38
|
+
# <%= render(Primer::Tooltip.new(label: "Even bolder")) do %>
|
37
39
|
# <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
|
38
40
|
# <% end %>
|
39
41
|
# </div>
|
40
42
|
#
|
41
43
|
# @example With a direction
|
42
44
|
# <div class="pt-5">
|
43
|
-
# <%= render(Primer::
|
45
|
+
# <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
|
44
46
|
# </div>
|
45
47
|
#
|
46
48
|
# @example With an alignment
|
47
49
|
# <div class="pt-5">
|
48
|
-
# <%= render(Primer::
|
50
|
+
# <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
|
49
51
|
# </div>
|
50
52
|
#
|
51
53
|
# @example Without a delay
|
52
54
|
# <div class="pt-5">
|
53
|
-
# <%= render(Primer::
|
55
|
+
# <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
|
54
56
|
# </div>
|
55
57
|
#
|
56
58
|
# @param label [String] the text to appear in the tooltip
|
57
|
-
# @param direction [String] Direction of the tooltip. <%= one_of(Primer::
|
58
|
-
# @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::
|
59
|
+
# @param direction [String] Direction of the tooltip. <%= one_of(Primer::Tooltip::DIRECTION_OPTIONS) %>
|
60
|
+
# @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::Tooltip::ALIGN_MAPPING.keys) %>
|
59
61
|
# @param multiline [Boolean] Use this when you have long content
|
60
62
|
# @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
|
61
63
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
# Use
|
4
|
+
# Use `UnderlineNav` to style navigation with a minimal
|
5
5
|
# underlined selected state, typically used for navigation placed at the top
|
6
6
|
# of the page.
|
7
7
|
class UnderlineNavComponent < Primer::Component
|
data/app/lib/primer/classify.rb
CHANGED
@@ -3,35 +3,29 @@
|
|
3
3
|
module Primer
|
4
4
|
# :nodoc:
|
5
5
|
class Classify
|
6
|
-
DIRECTION_KEY = :direction
|
7
|
-
JUSTIFY_CONTENT_KEY = :justify_content
|
8
|
-
ALIGN_ITEMS_KEY = :align_items
|
9
6
|
DISPLAY_KEY = :display
|
10
7
|
SPACING_KEYS = Primer::Classify::Spacing::KEYS
|
11
|
-
RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
|
12
|
-
BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
|
13
8
|
|
14
9
|
# Keys where we can simply translate { key: value } into ".key-value"
|
15
10
|
CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
|
16
11
|
|
17
12
|
INVALID_CLASS_NAME_PREFIXES =
|
18
|
-
(["bg-", "color-", "text-", "d-", "v-align-", "wb-", "
|
13
|
+
(["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
|
19
14
|
|
20
15
|
COLOR_KEY = :color
|
21
16
|
BG_KEY = :bg
|
22
17
|
VERTICAL_ALIGN_KEY = :vertical_align
|
23
18
|
WORD_BREAK_KEY = :word_break
|
24
19
|
TEXT_KEYS = %i[text_align font_weight].freeze
|
25
|
-
FLEX_KEY = :flex
|
26
|
-
FLEX_GROW_KEY = :flex_grow
|
27
|
-
FLEX_SHRINK_KEY = :flex_shrink
|
28
|
-
ALIGN_SELF_KEY = :align_self
|
29
20
|
WIDTH_KEY = :width
|
30
21
|
HEIGHT_KEY = :height
|
31
22
|
BOX_SHADOW_KEY = :box_shadow
|
32
23
|
VISIBILITY_KEY = :visibility
|
33
24
|
ANIMATION_KEY = :animation
|
34
25
|
|
26
|
+
BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
|
27
|
+
RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
|
28
|
+
|
35
29
|
BOOLEAN_MAPPINGS = {
|
36
30
|
underline: {
|
37
31
|
mappings: [
|
@@ -89,6 +83,7 @@ module Primer
|
|
89
83
|
BORDER_MARGIN_KEYS +
|
90
84
|
TYPOGRAPHY_KEYS +
|
91
85
|
TEXT_KEYS +
|
86
|
+
Primer::Classify::Flex::KEYS +
|
92
87
|
[
|
93
88
|
BORDER_KEY,
|
94
89
|
BORDER_COLOR_KEY,
|
@@ -98,13 +93,6 @@ module Primer
|
|
98
93
|
DISPLAY_KEY,
|
99
94
|
VERTICAL_ALIGN_KEY,
|
100
95
|
WORD_BREAK_KEY,
|
101
|
-
DIRECTION_KEY,
|
102
|
-
JUSTIFY_CONTENT_KEY,
|
103
|
-
ALIGN_ITEMS_KEY,
|
104
|
-
FLEX_KEY,
|
105
|
-
FLEX_GROW_KEY,
|
106
|
-
FLEX_SHRINK_KEY,
|
107
|
-
ALIGN_SELF_KEY,
|
108
96
|
WIDTH_KEY,
|
109
97
|
HEIGHT_KEY,
|
110
98
|
BOX_SHADOW_KEY,
|
@@ -120,7 +108,7 @@ module Primer
|
|
120
108
|
extracted_results[:class] = [
|
121
109
|
validated_class_names(classes),
|
122
110
|
extracted_results.delete(:classes)
|
123
|
-
].compact.join(" ").presence
|
111
|
+
].compact.join(" ").strip.presence
|
124
112
|
|
125
113
|
extracted_results[:style] = [
|
126
114
|
extracted_results.delete(:styles),
|
@@ -135,13 +123,13 @@ module Primer
|
|
135
123
|
def validated_class_names(classes)
|
136
124
|
return if classes.blank?
|
137
125
|
|
138
|
-
if ENV["RAILS_ENV"] == "development"
|
126
|
+
if ENV["RAILS_ENV"] == "development" && !ENV["PRIMER_WARNINGS_DISABLED"]
|
139
127
|
invalid_class_names =
|
140
128
|
classes.split(" ").each_with_object([]) do |class_name, memo|
|
141
129
|
memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
|
142
130
|
end
|
143
131
|
|
144
|
-
raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production." if invalid_class_names.any?
|
132
|
+
raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
|
145
133
|
end
|
146
134
|
|
147
135
|
classes
|
@@ -216,23 +204,10 @@ module Primer
|
|
216
204
|
memo[:classes] << "#{key.to_s.dasherize}-#{val}"
|
217
205
|
elsif key == BORDER_RADIUS_KEY
|
218
206
|
memo[:classes] << "rounded-#{val}"
|
219
|
-
elsif key
|
220
|
-
memo[:classes] <<
|
221
|
-
elsif key == JUSTIFY_CONTENT_KEY
|
222
|
-
formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
|
223
|
-
memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
|
224
|
-
elsif key == ALIGN_ITEMS_KEY
|
225
|
-
memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
|
226
|
-
elsif key == FLEX_KEY
|
227
|
-
memo[:classes] << "flex-#{val}"
|
228
|
-
elsif key == FLEX_GROW_KEY
|
229
|
-
memo[:classes] << "flex-grow-#{val}"
|
230
|
-
elsif key == FLEX_SHRINK_KEY
|
231
|
-
memo[:classes] << "flex-shrink-#{val}"
|
232
|
-
elsif key == ALIGN_SELF_KEY
|
233
|
-
memo[:classes] << "flex-self-#{val}"
|
207
|
+
elsif Primer::Classify::Flex::KEYS.include?(key)
|
208
|
+
memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
|
234
209
|
elsif key == WIDTH_KEY || key == HEIGHT_KEY
|
235
|
-
if val == :fit
|
210
|
+
if val == :fit
|
236
211
|
memo[:classes] << "#{key}-#{val}"
|
237
212
|
else
|
238
213
|
memo[key] = val
|