primer_view_components 0.0.110 → 0.0.112
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +50 -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_list/item.rb +2 -2
- data/app/components/primer/alpha/auto_complete.css +1 -0
- data/app/components/primer/alpha/auto_complete.css.json +1 -0
- data/app/components/primer/alpha/auto_complete.css.map +1 -0
- data/app/components/primer/alpha/auto_complete.pcss +118 -0
- 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.pcss +2 -3
- data/app/components/primer/alpha/button_marketing.css +1 -0
- data/app/components/primer/alpha/button_marketing.css.json +1 -0
- data/app/components/primer/alpha/button_marketing.css.map +1 -0
- data/app/components/primer/alpha/button_marketing.pcss +175 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.d.ts +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.html.erb +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.js +0 -0
- data/app/components/primer/alpha/dropdown/menu.rb +105 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.ts +0 -0
- data/app/components/primer/alpha/dropdown.css +1 -0
- data/app/components/primer/alpha/dropdown.css.json +1 -0
- data/app/components/primer/alpha/dropdown.css.map +1 -0
- data/app/components/primer/{dropdown.d.ts → alpha/dropdown.d.ts} +0 -0
- data/app/components/primer/{dropdown.html.erb → alpha/dropdown.html.erb} +0 -0
- data/app/components/primer/{dropdown.js → alpha/dropdown.js} +0 -0
- data/app/components/primer/alpha/dropdown.pcss +260 -0
- data/app/components/primer/alpha/dropdown.rb +154 -0
- data/app/components/primer/{dropdown.ts → alpha/dropdown.ts} +0 -0
- data/app/components/primer/alpha/tab_nav.css +1 -0
- data/app/components/primer/alpha/tab_nav.css.json +1 -0
- data/app/components/primer/alpha/tab_nav.css.map +1 -0
- data/app/components/primer/alpha/tab_nav.pcss +100 -0
- data/app/components/primer/alpha/underline_nav.css +1 -0
- data/app/components/primer/alpha/underline_nav.css.json +1 -0
- data/app/components/primer/alpha/underline_nav.css.map +1 -0
- data/app/components/primer/alpha/underline_nav.pcss +133 -0
- data/app/components/primer/alpha/x_banner.d.ts +2 -1
- data/app/components/primer/alpha/x_banner.js +0 -1
- data/app/components/primer/alpha/x_banner.ts +1 -1
- data/app/components/primer/beta/avatar.css +1 -0
- data/app/components/primer/beta/avatar.css.json +1 -0
- data/app/components/primer/beta/avatar.css.map +1 -0
- data/app/components/primer/beta/avatar.pcss +73 -0
- data/app/components/primer/beta/avatar_stack.css +1 -0
- data/app/components/primer/beta/avatar_stack.css.json +1 -0
- data/app/components/primer/beta/avatar_stack.css.map +1 -0
- data/app/components/primer/beta/avatar_stack.pcss +141 -0
- data/app/components/primer/beta/border_box.css +1 -0
- data/app/components/primer/beta/border_box.css.json +1 -0
- data/app/components/primer/beta/border_box.css.map +1 -0
- data/app/components/primer/beta/border_box.pcss +284 -0
- data/app/components/primer/beta/button.rb +1 -1
- data/app/components/primer/beta/flash.css +1 -0
- data/app/components/primer/beta/flash.css.json +1 -0
- data/app/components/primer/beta/flash.css.map +1 -0
- data/app/components/primer/beta/flash.pcss +143 -0
- data/app/components/primer/beta/link.css +1 -0
- data/app/components/primer/beta/link.css.json +1 -0
- data/app/components/primer/beta/link.css.map +1 -0
- data/app/components/primer/beta/link.pcss +60 -0
- data/app/components/primer/beta/popover.css +1 -0
- data/app/components/primer/beta/popover.css.json +1 -0
- data/app/components/primer/beta/popover.css.map +1 -0
- data/app/components/primer/{popover_component.html.erb → beta/popover.html.erb} +0 -0
- data/app/components/primer/beta/popover.pcss +225 -0
- data/app/components/primer/beta/popover.rb +127 -0
- data/app/components/primer/component.rb +2 -2
- data/app/components/primer/dropdown/menu.rb +5 -90
- data/app/components/primer/dropdown.rb +2 -145
- data/app/components/primer/menu_component.css +1 -0
- data/app/components/primer/menu_component.css.json +1 -0
- data/app/components/primer/menu_component.css.map +1 -0
- data/app/components/primer/menu_component.pcss +119 -0
- data/app/components/primer/popover_component.rb +3 -120
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +14 -1
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/timeline_item_component.css +1 -0
- data/app/components/primer/timeline_item_component.css.json +1 -0
- data/app/components/primer/timeline_item_component.css.map +1 -0
- data/app/components/primer/timeline_item_component.pcss +93 -0
- data/lib/primer/deprecations.rb +4 -3
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
- data/lib/primer/view_components/linters/severity_schema.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/previews/primer/alpha/banner_preview.rb +1 -1
- data/previews/primer/alpha/button_marketing_preview.rb +36 -0
- data/previews/primer/alpha/dropdown_preview.rb +210 -0
- data/previews/primer/alpha/tab_nav_preview.rb +55 -0
- data/previews/primer/beta/avatar_preview.rb +61 -5
- data/previews/primer/beta/avatar_stack_preview.rb +54 -12
- data/previews/primer/beta/blankslate_preview.rb +29 -5
- data/previews/primer/beta/border_box_preview.rb +65 -13
- data/previews/primer/beta/flash_preview.rb +45 -8
- data/previews/primer/beta/label_preview.rb +86 -8
- data/previews/primer/beta/link_preview.rb +28 -0
- data/previews/primer/beta/popover_preview.rb +79 -0
- data/static/arguments.json +40 -40
- data/static/audited_at.json +4 -3
- data/static/constants.json +56 -52
- data/static/statuses.json +8 -7
- metadata +70 -16
- data/app/components/primer/counter_component.rb +0 -7
- data/app/components/primer/image.rb +0 -7
- data/app/components/primer/progress_bar_component.rb +0 -7
- data/previews/primer/dropdown_preview.rb +0 -57
- data/previews/primer/popover_component_preview.rb +0 -34
@@ -1,150 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
|
5
|
-
|
6
|
-
class Dropdown < Primer::Component
|
7
|
-
# Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
|
8
|
-
# but it is locked as a `summary` tag.
|
9
|
-
renders_one :button, lambda { |**system_arguments|
|
10
|
-
@button_arguments = system_arguments
|
11
|
-
@button_arguments[:button] = true
|
12
|
-
@button_arguments[:dropdown] = @with_caret
|
13
|
-
|
14
|
-
Primer::Content.new
|
15
|
-
}
|
16
|
-
|
17
|
-
# Required context menu for the dropdown.
|
18
|
-
#
|
19
|
-
# @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
|
20
|
-
# @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>
|
21
|
-
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
22
|
-
# @param header [String] Optional string to display as the header
|
23
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
24
|
-
renders_one :menu, "Primer::Dropdown::Menu"
|
25
|
-
|
26
|
-
# @example Default
|
27
|
-
# <%= render(Primer::Dropdown.new) do |c| %>
|
28
|
-
# <% c.with_button do %>
|
29
|
-
# Dropdown
|
30
|
-
# <% end %>
|
31
|
-
#
|
32
|
-
# <% c.with_menu(header: "Options") do |menu|
|
33
|
-
# menu.item { "Item 1" }
|
34
|
-
# menu.item { "Item 2" }
|
35
|
-
# menu.item { "Item 3" }
|
36
|
-
# end %>
|
37
|
-
# <% end %>
|
38
|
-
#
|
39
|
-
# @example With dividers
|
40
|
-
#
|
41
|
-
# @description
|
42
|
-
# Dividers can be used to separate a group of items. They don't have any content.
|
43
|
-
# @code
|
44
|
-
# <%= render(Primer::Dropdown.new) do |c| %>
|
45
|
-
# <% c.with_button do %>
|
46
|
-
# Dropdown
|
47
|
-
# <% end %>
|
48
|
-
#
|
49
|
-
# <% c.with_menu(header: "Options") do |menu|
|
50
|
-
# menu.item { "Item 1" }
|
51
|
-
# menu.item { "Item 2" }
|
52
|
-
# menu.item(divider: true)
|
53
|
-
# menu.item { "Item 3" }
|
54
|
-
# menu.item { "Item 4" }
|
55
|
-
# menu.item(divider: true)
|
56
|
-
# menu.item { "Item 5" }
|
57
|
-
# menu.item { "Item 6" }
|
58
|
-
# end %>
|
59
|
-
# <% end %>
|
60
|
-
#
|
61
|
-
# @example With direction
|
62
|
-
# <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
|
63
|
-
# <% c.with_button do %>
|
64
|
-
# Dropdown
|
65
|
-
# <% end %>
|
66
|
-
#
|
67
|
-
# <% c.with_menu(header: "Options", direction: :s) do |menu|
|
68
|
-
# menu.item { "Item 1" }
|
69
|
-
# menu.item { "Item 2" }
|
70
|
-
# menu.item { "Item 3" }
|
71
|
-
# menu.item { "Item 4" }
|
72
|
-
# end %>
|
73
|
-
# <% end %>
|
74
|
-
#
|
75
|
-
# @example With caret
|
76
|
-
# <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
|
77
|
-
# <% c.with_button do %>
|
78
|
-
# Dropdown
|
79
|
-
# <% end %>
|
80
|
-
#
|
81
|
-
# <% c.with_menu(header: "Options") do |menu|
|
82
|
-
# menu.item { "Item 1" }
|
83
|
-
# menu.item { "Item 2" }
|
84
|
-
# menu.item { "Item 3" }
|
85
|
-
# menu.item { "Item 4" }
|
86
|
-
# end %>
|
87
|
-
# <% end %>
|
88
|
-
#
|
89
|
-
# @example Customizing the button
|
90
|
-
# <%= render(Primer::Dropdown.new) do |c| %>
|
91
|
-
# <% c.with_button(scheme: :primary, size: :small) do %>
|
92
|
-
# Dropdown
|
93
|
-
# <% end %>
|
94
|
-
#
|
95
|
-
# <% c.with_menu(header: "Options") do |menu|
|
96
|
-
# menu.item { "Item 1" }
|
97
|
-
# menu.item { "Item 2" }
|
98
|
-
# menu.item { "Item 3" }
|
99
|
-
# menu.item { "Item 4" }
|
100
|
-
# end %>
|
101
|
-
# <% end %>
|
102
|
-
#
|
103
|
-
# @example Menu as list
|
104
|
-
# <%= render(Primer::Dropdown.new) do |c| %>
|
105
|
-
# <% c.with_button do %>
|
106
|
-
# Dropdown
|
107
|
-
# <% end %>
|
108
|
-
#
|
109
|
-
# <% c.with_menu(as: :list, header: "Options") do |menu|
|
110
|
-
# menu.item { "Item 1" }
|
111
|
-
# menu.item { "Item 2" }
|
112
|
-
# menu.item(divider: true)
|
113
|
-
# menu.item { "Item 3" }
|
114
|
-
# menu.item { "Item 4" }
|
115
|
-
# end %>
|
116
|
-
# <% end %>
|
117
|
-
#
|
118
|
-
# @example Customizing menu items
|
119
|
-
# <%= render(Primer::Dropdown.new) do |c| %>
|
120
|
-
# <% c.with_button do %>
|
121
|
-
# Dropdown
|
122
|
-
# <% end %>
|
123
|
-
#
|
124
|
-
# <% c.with_menu(header: "Options") do |menu|
|
125
|
-
# menu.item(tag: :button) { "Item 1" }
|
126
|
-
# menu.item(classes: "custom-class") { "Item 2" }
|
127
|
-
# menu.item { "Item 3" }
|
128
|
-
# end %>
|
129
|
-
# <% end %>
|
130
|
-
#
|
131
|
-
# @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
|
132
|
-
# @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
|
133
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
134
|
-
def initialize(overlay: :default, with_caret: false, **system_arguments)
|
135
|
-
@with_caret = with_caret
|
136
|
-
|
137
|
-
@system_arguments = system_arguments
|
138
|
-
@system_arguments[:overlay] = overlay
|
139
|
-
@system_arguments[:reset] = true
|
140
|
-
@system_arguments[:classes] = class_names(
|
141
|
-
@system_arguments[:classes],
|
142
|
-
"dropdown"
|
143
|
-
)
|
144
|
-
end
|
145
|
-
|
146
|
-
def render?
|
147
|
-
button.present? && menu.present?
|
148
|
-
end
|
4
|
+
class Dropdown < Primer::Alpha::Dropdown
|
5
|
+
status :deprecated
|
149
6
|
end
|
150
7
|
end
|
@@ -0,0 +1 @@
|
|
1
|
+
.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"menu_component","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["menu_component.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu_component.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n list-style: none;\n background-color: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-neutral-subtle);\n }\n\n &:active {\n background-color: var(--color-canvas-subtle);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--color-menu-bg-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--color-primer-border-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--primer-control-small-gap, 4px);\n }\n\n & .menu-warning {\n float: right;\n color: var(--color-attention-fg);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--primer-control-small-gap, 4px);\n }\n\n &.alert {\n & .Counter {\n color: var(--color-danger-fg);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n}\n"]}
|
@@ -0,0 +1,119 @@
|
|
1
|
+
/* menu */
|
2
|
+
|
3
|
+
/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
|
4
|
+
|
5
|
+
.menu {
|
6
|
+
margin-bottom: var(--primer-stack-gap-normal, 16px);
|
7
|
+
list-style: none;
|
8
|
+
background-color: var(--color-canvas-default);
|
9
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
|
10
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
11
|
+
}
|
12
|
+
|
13
|
+
.menu-item {
|
14
|
+
position: relative;
|
15
|
+
display: block;
|
16
|
+
padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
|
17
|
+
color: var(--color-fg-default);
|
18
|
+
border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
|
19
|
+
|
20
|
+
&:first-child {
|
21
|
+
border-top: 0;
|
22
|
+
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
|
23
|
+
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
|
24
|
+
|
25
|
+
&::before {
|
26
|
+
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
&:last-child {
|
31
|
+
border-bottom: 0;
|
32
|
+
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
|
33
|
+
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
|
34
|
+
|
35
|
+
&::before {
|
36
|
+
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
&:hover {
|
41
|
+
text-decoration: none;
|
42
|
+
background-color: var(--color-neutral-subtle);
|
43
|
+
}
|
44
|
+
|
45
|
+
&:active {
|
46
|
+
background-color: var(--color-canvas-subtle);
|
47
|
+
}
|
48
|
+
|
49
|
+
&.selected,
|
50
|
+
&[aria-selected='true'],
|
51
|
+
&[aria-current]:not([aria-current='false']) {
|
52
|
+
cursor: default;
|
53
|
+
background-color: var(--color-menu-bg-active);
|
54
|
+
|
55
|
+
&::before {
|
56
|
+
position: absolute;
|
57
|
+
top: 0;
|
58
|
+
bottom: 0;
|
59
|
+
left: 0;
|
60
|
+
width: 2px;
|
61
|
+
content: '';
|
62
|
+
background-color: var(--color-primer-border-active);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
& .octicon {
|
67
|
+
width: 16px;
|
68
|
+
margin-right: var(--primer-control-medium-gap, 8px);
|
69
|
+
color: var(--color-fg-muted);
|
70
|
+
text-align: center;
|
71
|
+
}
|
72
|
+
|
73
|
+
& .Counter {
|
74
|
+
float: right;
|
75
|
+
margin-left: var(--primer-control-small-gap, 4px);
|
76
|
+
}
|
77
|
+
|
78
|
+
& .menu-warning {
|
79
|
+
float: right;
|
80
|
+
color: var(--color-attention-fg);
|
81
|
+
}
|
82
|
+
|
83
|
+
& .avatar {
|
84
|
+
float: left;
|
85
|
+
margin-right: var(--primer-control-small-gap, 4px);
|
86
|
+
}
|
87
|
+
|
88
|
+
&.alert {
|
89
|
+
& .Counter {
|
90
|
+
color: var(--color-danger-fg);
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
.menu-heading {
|
96
|
+
display: block;
|
97
|
+
padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
|
98
|
+
margin-top: 0;
|
99
|
+
margin-bottom: 0;
|
100
|
+
font-size: inherit;
|
101
|
+
font-weight: var(--base-text-weight-semibold, 600);
|
102
|
+
color: var(--color-fg-default);
|
103
|
+
border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
|
104
|
+
|
105
|
+
&:hover {
|
106
|
+
text-decoration: none;
|
107
|
+
}
|
108
|
+
|
109
|
+
&:first-child {
|
110
|
+
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
|
111
|
+
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
|
112
|
+
}
|
113
|
+
|
114
|
+
&:last-child {
|
115
|
+
border-bottom: 0;
|
116
|
+
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
|
117
|
+
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
|
118
|
+
}
|
119
|
+
}
|
@@ -1,125 +1,8 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
5
|
-
|
6
|
-
|
7
|
-
class PopoverComponent < Primer::Component
|
8
|
-
status :beta
|
9
|
-
|
10
|
-
CARET_DEFAULT = :top
|
11
|
-
CARET_MAPPINGS = {
|
12
|
-
CARET_DEFAULT => "",
|
13
|
-
:bottom => "Popover-message--bottom",
|
14
|
-
:bottom_right => "Popover-message--bottom-right",
|
15
|
-
:bottom_left => "Popover-message--bottom-left",
|
16
|
-
:left => "Popover-message--left",
|
17
|
-
:left_bottom => "Popover-message--left-bottom",
|
18
|
-
:left_top => "Popover-message--left-top",
|
19
|
-
:right => "Popover-message--right",
|
20
|
-
:right_bottom => "Popover-message--right-bottom",
|
21
|
-
:right_top => "Popover-message--right-top",
|
22
|
-
:top_left => "Popover-message--top-left",
|
23
|
-
:top_right => "Popover-message--top-right"
|
24
|
-
}.freeze
|
25
|
-
|
26
|
-
DEFAULT_HEADING_TAG = :h4
|
27
|
-
|
28
|
-
# The heading
|
29
|
-
#
|
30
|
-
# @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
|
31
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
32
|
-
renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
|
33
|
-
system_arguments[:tag] = tag
|
34
|
-
system_arguments[:mb] ||= 2
|
35
|
-
|
36
|
-
Primer::Beta::Heading.new(**system_arguments)
|
37
|
-
}
|
38
|
-
|
39
|
-
# The body
|
40
|
-
#
|
41
|
-
# @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
|
42
|
-
# @param large [Boolean] Whether to use the large version of the component.
|
43
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
44
|
-
renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
|
45
|
-
@body_arguments = system_arguments
|
46
|
-
@body_arguments[:classes] = class_names(
|
47
|
-
@body_arguments[:classes],
|
48
|
-
"Popover-message Box",
|
49
|
-
CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
|
50
|
-
"Popover-message--large" => large
|
51
|
-
)
|
52
|
-
@body_arguments[:p] ||= 4
|
53
|
-
@body_arguments[:mt] ||= 2
|
54
|
-
@body_arguments[:mx] ||= :auto
|
55
|
-
@body_arguments[:text_align] ||= :left
|
56
|
-
@body_arguments[:box_shadow] ||= :large
|
57
|
-
|
58
|
-
Primer::Content.new
|
59
|
-
}
|
60
|
-
|
61
|
-
# @example Default
|
62
|
-
# <%= render Primer::PopoverComponent.new do |component| %>
|
63
|
-
# <% component.with_heading do %>
|
64
|
-
# Activity feed
|
65
|
-
# <% end %>
|
66
|
-
# <% component.with_body do %>
|
67
|
-
# This is the Popover body.
|
68
|
-
# <% end %>
|
69
|
-
# <% end %>
|
70
|
-
#
|
71
|
-
# @example Large
|
72
|
-
# <%= render Primer::PopoverComponent.new do |component| %>
|
73
|
-
# <% component.with_heading do %>
|
74
|
-
# Activity feed
|
75
|
-
# <% end %>
|
76
|
-
# <% component.with_body(large: true) do %>
|
77
|
-
# This is the large Popover body.
|
78
|
-
# <% end %>
|
79
|
-
# <% end %>
|
80
|
-
#
|
81
|
-
# @example Caret position
|
82
|
-
# <%= render Primer::PopoverComponent.new do |component| %>
|
83
|
-
# <% component.with_heading do %>
|
84
|
-
# Activity feed
|
85
|
-
# <% end %>
|
86
|
-
# <% component.with_body(caret: :left) do %>
|
87
|
-
# This is the Popover body.
|
88
|
-
# <% end %>
|
89
|
-
# <% end %>
|
90
|
-
#
|
91
|
-
# @example With multiple elements in the body
|
92
|
-
# <%= render Primer::PopoverComponent.new do |component| %>
|
93
|
-
# <% component.with_heading do %>
|
94
|
-
# Activity feed
|
95
|
-
# <% end %>
|
96
|
-
# <% component.with_body(caret: :left) do %>
|
97
|
-
# <p>This is the Popover body.</p>
|
98
|
-
# <%= render Primer::ButtonComponent.new(type: :submit) do %>
|
99
|
-
# Got it!
|
100
|
-
# <% end %>
|
101
|
-
# <% end %>
|
102
|
-
# <% end %>
|
103
|
-
#
|
104
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
105
|
-
def initialize(**system_arguments)
|
106
|
-
@system_arguments = deny_tag_argument(**system_arguments)
|
107
|
-
@system_arguments[:tag] = :div
|
108
|
-
@system_arguments[:classes] = class_names(
|
109
|
-
system_arguments[:classes],
|
110
|
-
"Popover"
|
111
|
-
)
|
112
|
-
@system_arguments[:position] ||= :relative
|
113
|
-
@system_arguments[:right] = false unless @system_arguments.delete(:right)
|
114
|
-
@system_arguments[:left] = false unless @system_arguments.delete(:left)
|
115
|
-
end
|
116
|
-
|
117
|
-
def render?
|
118
|
-
body.present?
|
119
|
-
end
|
120
|
-
|
121
|
-
def body_component
|
122
|
-
Primer::Box.new(**@body_arguments)
|
123
|
-
end
|
4
|
+
# :nodoc:
|
5
|
+
class PopoverComponent < Primer::Beta::Popover
|
6
|
+
status :deprecated
|
124
7
|
end
|
125
8
|
end
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import './alpha/dropdown';
|
1
2
|
import './alpha/image_crop';
|
2
3
|
import './alpha/modal_dialog';
|
3
4
|
import './alpha/nav_list';
|
@@ -7,7 +8,6 @@ import './alpha/tool_tip';
|
|
7
8
|
import './alpha/x_banner';
|
8
9
|
import './beta/auto_complete/auto_complete';
|
9
10
|
import './clipboard_copy';
|
10
|
-
import './dropdown';
|
11
11
|
import './local_time';
|
12
12
|
import './tab_container_component';
|
13
13
|
import './time_ago_component';
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import './alpha/dropdown';
|
1
2
|
import './alpha/image_crop';
|
2
3
|
import './alpha/modal_dialog';
|
3
4
|
import './alpha/nav_list';
|
@@ -7,7 +8,6 @@ import './alpha/tool_tip';
|
|
7
8
|
import './alpha/x_banner';
|
8
9
|
import './beta/auto_complete/auto_complete';
|
9
10
|
import './clipboard_copy';
|
10
|
-
import './dropdown';
|
11
11
|
import './local_time';
|
12
12
|
import './tab_container_component';
|
13
13
|
import './time_ago_component';
|
@@ -1,15 +1,28 @@
|
|
1
1
|
/* CSS component styles here */
|
2
2
|
@import "./alpha/action_list.pcss";
|
3
|
+
@import "./alpha/auto_complete.pcss";
|
3
4
|
@import "./alpha/banner.pcss";
|
5
|
+
@import "./alpha/dropdown.pcss";
|
6
|
+
@import "./alpha/tab_nav.pcss";
|
7
|
+
@import "./alpha/button_marketing.pcss";
|
4
8
|
@import "./alpha/toggle_switch.pcss";
|
9
|
+
@import "./alpha/underline_nav.pcss";
|
5
10
|
@import "./alpha/segmented_control.pcss";
|
11
|
+
@import "./beta/avatar.pcss";
|
12
|
+
@import "./beta/avatar_stack.pcss";
|
13
|
+
@import "./beta/border_box.pcss";
|
14
|
+
@import "./beta/blankslate.pcss";
|
6
15
|
@import "./beta/breadcrumbs.pcss";
|
7
16
|
@import "./beta/button.pcss";
|
8
17
|
@import "./beta/counter.pcss";
|
18
|
+
@import "./beta/flash.pcss";
|
9
19
|
@import "./beta/label.pcss";
|
10
|
-
@import "./beta/
|
20
|
+
@import "./beta/link.pcss";
|
21
|
+
@import "./beta/popover.pcss";
|
11
22
|
@import "./beta/progress_bar.pcss";
|
12
23
|
@import "./beta/truncate.pcss";
|
24
|
+
@import "./menu_component.pcss";
|
13
25
|
@import "./state_component.pcss";
|
14
26
|
@import "./subhead_component.pcss";
|
27
|
+
@import "./timeline_item_component.pcss";
|
15
28
|
@import "./truncate.pcss";
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import './alpha/dropdown'
|
1
2
|
import './alpha/image_crop'
|
2
3
|
import './alpha/modal_dialog'
|
3
4
|
import './alpha/nav_list'
|
@@ -7,7 +8,6 @@ import './alpha/tool_tip'
|
|
7
8
|
import './alpha/x_banner'
|
8
9
|
import './beta/auto_complete/auto_complete'
|
9
10
|
import './clipboard_copy'
|
10
|
-
import './dropdown'
|
11
11
|
import './local_time'
|
12
12
|
import './tab_container_component'
|
13
13
|
import './time_ago_component'
|
@@ -0,0 +1 @@
|
|
1
|
+
.TimelineItem{display:flex;margin-left:var(--primer-stack-gap-normal,16px);padding:var(--primer-stack-padding-normal,16px) 0;position:relative}.TimelineItem:before{background-color:var(--color-border-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--primer-borderWidth-thick,2px)}.TimelineItem:target .TimelineItem-badge{border-color:var(--color-accent-emphasis);box-shadow:0 0 .2em var(--color-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--color-timeline-badge-bg);border:var(--primer-borderWidth-thick,2px) solid var(--color-canvas-default);border-radius:50%;color:var(--color-fg-muted);display:flex;flex-shrink:0;height:var(--primer-control-medium-size,32px);justify-content:center;margin-left:calc(var(--primer-control-medium-size, 32px)/-2 + 1px);margin-right:var(--primer-controlStack-medium-gap-condensed,8px);position:relative;width:var(--primer-control-medium-size,32px);z-index:1}.TimelineItem-badge--success{background-color:var(--color-success-emphasis);border:var(--primer-borderWidth-thin,1px) solid #0000;color:var(--color-fg-on-emphasis)}.TimelineItem-body{color:var(--color-fg-muted);flex:auto;margin-top:var(--base-size-4,4px);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--color-canvas-default);border:0;border-top:var(--primer-borderWidth-thicker,4px) solid var(--color-border-default);height:var(--primer-stack-gap-spacious,24px);margin:0;margin-bottom:calc(var(--primer-stack-gap-normal, 16px)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,4px)}.TimelineItem--condensed:last-child{padding-bottom:var(--primer-stack-gap-normal,16px)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--color-canvas-default);border:0;color:var(--color-fg-muted);height:var(--base-size-16,16px);margin-bottom:var(--base-size-8,8px);margin-top:var(--base-size-8,8px)}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"timeline_item_component","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["timeline_item_component.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item_component.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--primer-stack-padding-normal, 16px) 0;\n margin-left: var(--primer-stack-gap-normal, 16px);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--primer-borderWidth-thick, 2px);\n content: '';\n background-color: var(--color-border-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--color-accent-emphasis);\n box-shadow: 0 0 0.2em var(--color-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--primer-control-medium-size, 32px);\n height: var(--primer-control-medium-size, 32px);\n margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n color: var(--color-fg-muted);\n align-items: center;\n background-color: var(--color-timeline-badge-bg);\n border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-success-emphasis);\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4, 4px);\n color: var(--color-fg-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--primer-stack-gap-spacious, 24px);\n margin: 0;\n margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n margin-left: -56px;\n background-color: var(--color-canvas-default);\n border: 0;\n border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4, 4px);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--primer-stack-gap-normal, 16px);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16, 16px);\n margin-top: var(--base-size-8, 8px);\n margin-bottom: var(--base-size-8, 8px);\n color: var(--color-fg-muted);\n background-color: var(--color-canvas-default);\n border: 0;\n }\n}\n"]}
|
@@ -0,0 +1,93 @@
|
|
1
|
+
/* TimelineItem */
|
2
|
+
|
3
|
+
.TimelineItem {
|
4
|
+
position: relative;
|
5
|
+
display: flex;
|
6
|
+
padding: var(--primer-stack-padding-normal, 16px) 0;
|
7
|
+
margin-left: var(--primer-stack-gap-normal, 16px);
|
8
|
+
|
9
|
+
/* The Timeline */
|
10
|
+
&::before {
|
11
|
+
position: absolute;
|
12
|
+
top: 0;
|
13
|
+
bottom: 0;
|
14
|
+
left: 0;
|
15
|
+
display: block;
|
16
|
+
width: var(--primer-borderWidth-thick, 2px);
|
17
|
+
content: '';
|
18
|
+
background-color: var(--color-border-muted);
|
19
|
+
}
|
20
|
+
|
21
|
+
&:target .TimelineItem-badge {
|
22
|
+
border-color: var(--color-accent-emphasis);
|
23
|
+
box-shadow: 0 0 0.2em var(--color-accent-muted);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.TimelineItem-badge {
|
28
|
+
position: relative;
|
29
|
+
z-index: 1;
|
30
|
+
display: flex;
|
31
|
+
width: var(--primer-control-medium-size, 32px);
|
32
|
+
height: var(--primer-control-medium-size, 32px);
|
33
|
+
margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);
|
34
|
+
margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);
|
35
|
+
color: var(--color-fg-muted);
|
36
|
+
align-items: center;
|
37
|
+
background-color: var(--color-timeline-badge-bg);
|
38
|
+
border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);
|
39
|
+
border-radius: 50%;
|
40
|
+
justify-content: center;
|
41
|
+
flex-shrink: 0;
|
42
|
+
}
|
43
|
+
|
44
|
+
.TimelineItem-badge--success {
|
45
|
+
color: var(--color-fg-on-emphasis);
|
46
|
+
background-color: var(--color-success-emphasis);
|
47
|
+
border: var(--primer-borderWidth-thin, 1px) solid transparent;
|
48
|
+
}
|
49
|
+
|
50
|
+
.TimelineItem-body {
|
51
|
+
min-width: 0;
|
52
|
+
max-width: 100%;
|
53
|
+
margin-top: var(--base-size-4, 4px);
|
54
|
+
color: var(--color-fg-muted);
|
55
|
+
flex: auto;
|
56
|
+
}
|
57
|
+
|
58
|
+
.TimelineItem-avatar {
|
59
|
+
position: absolute;
|
60
|
+
left: -72px;
|
61
|
+
z-index: 1;
|
62
|
+
}
|
63
|
+
|
64
|
+
.TimelineItem-break {
|
65
|
+
position: relative;
|
66
|
+
z-index: 1;
|
67
|
+
height: var(--primer-stack-gap-spacious, 24px);
|
68
|
+
margin: 0;
|
69
|
+
margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);
|
70
|
+
margin-left: -56px;
|
71
|
+
background-color: var(--color-canvas-default);
|
72
|
+
border: 0;
|
73
|
+
border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);
|
74
|
+
}
|
75
|
+
|
76
|
+
.TimelineItem--condensed {
|
77
|
+
padding-top: var(--base-size-4, 4px);
|
78
|
+
padding-bottom: 0;
|
79
|
+
|
80
|
+
/* TimelineItem--condensed is often grouped. (commits) */
|
81
|
+
&:last-child {
|
82
|
+
padding-bottom: var(--primer-stack-gap-normal, 16px);
|
83
|
+
}
|
84
|
+
|
85
|
+
& .TimelineItem-badge {
|
86
|
+
height: var(--base-size-16, 16px);
|
87
|
+
margin-top: var(--base-size-8, 8px);
|
88
|
+
margin-bottom: var(--base-size-8, 8px);
|
89
|
+
color: var(--color-fg-muted);
|
90
|
+
background-color: var(--color-canvas-default);
|
91
|
+
border: 0;
|
92
|
+
}
|
93
|
+
}
|
data/lib/primer/deprecations.rb
CHANGED
@@ -7,16 +7,17 @@ module Primer
|
|
7
7
|
DEPRECATED_COMPONENTS = {
|
8
8
|
"Primer::LabelComponent" => "Primer::Beta::Label",
|
9
9
|
"Primer::LinkComponent" => "Primer::Beta::Link",
|
10
|
-
"Primer::Image" => "Primer::Alpha::Image",
|
11
10
|
"Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
|
12
11
|
"Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
|
13
12
|
"Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
|
14
13
|
"Primer::BoxComponent" => "Primer::Box",
|
15
|
-
"Primer::CounterComponent" => "Primer::Beta::Counter",
|
16
14
|
"Primer::DropdownMenuComponent" => nil,
|
15
|
+
"Primer::Dropdown" => "Primer::Alpha::Dropdown",
|
16
|
+
"Primer::Dropdown::Menu" => "Primer::Alpha::Dropdown::Menu",
|
17
|
+
"Primer::Dropdown::Menu::Item" => "Primer::Alpha::Dropdown::Menu::Item",
|
17
18
|
"Primer::IconButton" => "Primer::Beta::IconButton",
|
18
19
|
"Primer::Tooltip" => "Primer::Alpha::Tooltip",
|
19
|
-
"Primer::
|
20
|
+
"Primer::PopoverComponent" => "Primer::Beta::Popover"
|
20
21
|
}.freeze
|
21
22
|
|
22
23
|
def self.deprecated?(name)
|
@@ -1,6 +1,8 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
require_relative "helpers/deprecated_components_helpers"
|
4
|
+
require_relative "severity_schema"
|
5
|
+
|
4
6
|
require "erblint-github/linters/custom_helpers"
|
5
7
|
|
6
8
|
module ERBLint
|
@@ -11,6 +13,8 @@ module ERBLint
|
|
11
13
|
include ERBLint::LinterRegistry
|
12
14
|
include Helpers::DeprecatedComponentsHelpers
|
13
15
|
|
16
|
+
self.config_schema = SeveritySchema
|
17
|
+
|
14
18
|
def run(processed_source)
|
15
19
|
processed_source.ast.descendants(:erb).each do |erb_node|
|
16
20
|
_, _, code_node = *erb_node
|
@@ -21,10 +25,7 @@ module ERBLint
|
|
21
25
|
deprecated_components.each do |component|
|
22
26
|
next unless code.include?(component)
|
23
27
|
|
24
|
-
add_offense(
|
25
|
-
erb_node.loc,
|
26
|
-
message(component)
|
27
|
-
)
|
28
|
+
add_offense(erb_node.loc, message(component))
|
28
29
|
end
|
29
30
|
end
|
30
31
|
|
@@ -44,6 +45,16 @@ module ERBLint
|
|
44
45
|
end
|
45
46
|
end
|
46
47
|
end
|
48
|
+
|
49
|
+
# this override is necessary because of the github/erblint-github `CustomHelpers`
|
50
|
+
# module. `counter_correct?` is provided by this module, and calls `add_offense`
|
51
|
+
# directly. there is no simple way to modify this without updating the gem and
|
52
|
+
# creating what would likely be an API that is non-standard and/or difficult to use
|
53
|
+
#
|
54
|
+
# https://github.com/github/erblint-github/blob/main/lib/erblint-github/linters/custom_helpers.rb
|
55
|
+
def add_offense(source_range, message, context = nil, severity = nil)
|
56
|
+
super(source_range, message, context, severity || @config.severity)
|
57
|
+
end
|
47
58
|
end
|
48
59
|
end
|
49
60
|
end
|