primer_view_components 0.0.111 → 0.0.112

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.
Files changed (89) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/auto_complete.css +1 -0
  8. data/app/components/primer/alpha/auto_complete.css.json +1 -0
  9. data/app/components/primer/alpha/auto_complete.css.map +1 -0
  10. data/app/components/primer/alpha/auto_complete.pcss +118 -0
  11. data/app/components/primer/alpha/banner.css +1 -1
  12. data/app/components/primer/alpha/banner.css.map +1 -1
  13. data/app/components/primer/alpha/banner.pcss +2 -3
  14. data/app/components/primer/alpha/button_marketing.css +1 -0
  15. data/app/components/primer/alpha/button_marketing.css.json +1 -0
  16. data/app/components/primer/alpha/button_marketing.css.map +1 -0
  17. data/app/components/primer/alpha/button_marketing.pcss +175 -0
  18. data/app/components/primer/{dropdown → alpha/dropdown}/menu.d.ts +0 -0
  19. data/app/components/primer/{dropdown → alpha/dropdown}/menu.html.erb +0 -0
  20. data/app/components/primer/{dropdown → alpha/dropdown}/menu.js +0 -0
  21. data/app/components/primer/alpha/dropdown/menu.rb +105 -0
  22. data/app/components/primer/{dropdown → alpha/dropdown}/menu.ts +0 -0
  23. data/app/components/primer/alpha/dropdown.css +1 -0
  24. data/app/components/primer/alpha/dropdown.css.json +1 -0
  25. data/app/components/primer/{dropdown.css.map → alpha/dropdown.css.map} +1 -1
  26. data/app/components/primer/{dropdown.d.ts → alpha/dropdown.d.ts} +0 -0
  27. data/app/components/primer/{dropdown.html.erb → alpha/dropdown.html.erb} +0 -0
  28. data/app/components/primer/{dropdown.js → alpha/dropdown.js} +0 -0
  29. data/app/components/primer/{dropdown.pcss → alpha/dropdown.pcss} +1 -1
  30. data/app/components/primer/alpha/dropdown.rb +154 -0
  31. data/app/components/primer/{dropdown.ts → alpha/dropdown.ts} +0 -0
  32. data/app/components/primer/alpha/tab_nav.css +1 -0
  33. data/app/components/primer/alpha/tab_nav.css.json +1 -0
  34. data/app/components/primer/alpha/tab_nav.css.map +1 -0
  35. data/app/components/primer/alpha/tab_nav.pcss +100 -0
  36. data/app/components/primer/alpha/underline_nav.css +1 -0
  37. data/app/components/primer/alpha/underline_nav.css.json +1 -0
  38. data/app/components/primer/alpha/underline_nav.css.map +1 -0
  39. data/app/components/primer/alpha/underline_nav.pcss +133 -0
  40. data/app/components/primer/beta/border_box.css +1 -0
  41. data/app/components/primer/beta/border_box.css.json +1 -0
  42. data/app/components/primer/beta/border_box.css.map +1 -0
  43. data/app/components/primer/beta/border_box.pcss +284 -0
  44. data/app/components/primer/beta/link.css +1 -0
  45. data/app/components/primer/beta/link.css.json +1 -0
  46. data/app/components/primer/beta/link.css.map +1 -0
  47. data/app/components/primer/beta/link.pcss +60 -0
  48. data/app/components/primer/{popover_component.css → beta/popover.css} +0 -0
  49. data/app/components/primer/beta/popover.css.json +1 -0
  50. data/app/components/primer/beta/popover.css.map +1 -0
  51. data/app/components/primer/{popover_component.html.erb → beta/popover.html.erb} +0 -0
  52. data/app/components/primer/{popover_component.pcss → beta/popover.pcss} +0 -0
  53. data/app/components/primer/beta/popover.rb +127 -0
  54. data/app/components/primer/component.rb +2 -2
  55. data/app/components/primer/dropdown/menu.rb +5 -90
  56. data/app/components/primer/dropdown.rb +2 -145
  57. data/app/components/primer/menu_component.css +1 -0
  58. data/app/components/primer/menu_component.css.json +1 -0
  59. data/app/components/primer/menu_component.css.map +1 -0
  60. data/app/components/primer/menu_component.pcss +119 -0
  61. data/app/components/primer/popover_component.rb +3 -120
  62. data/app/components/primer/primer.d.ts +1 -1
  63. data/app/components/primer/primer.js +1 -1
  64. data/app/components/primer/primer.pcss +10 -3
  65. data/app/components/primer/primer.ts +1 -1
  66. data/lib/primer/deprecations.rb +4 -2
  67. data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
  68. data/lib/primer/view_components/linters/severity_schema.rb +14 -0
  69. data/lib/primer/view_components/version.rb +1 -1
  70. data/lib/tasks/docs.rake +3 -3
  71. data/previews/primer/alpha/button_marketing_preview.rb +36 -0
  72. data/previews/primer/alpha/dropdown_preview.rb +210 -0
  73. data/previews/primer/alpha/tab_nav_preview.rb +55 -0
  74. data/previews/primer/beta/border_box_preview.rb +65 -13
  75. data/previews/primer/beta/link_preview.rb +28 -0
  76. data/previews/primer/beta/popover_preview.rb +79 -0
  77. data/static/arguments.json +40 -40
  78. data/static/audited_at.json +4 -2
  79. data/static/constants.json +56 -50
  80. data/static/statuses.json +8 -6
  81. metadata +54 -23
  82. data/app/components/primer/dropdown.css +0 -1
  83. data/app/components/primer/dropdown.css.json +0 -1
  84. data/app/components/primer/image.rb +0 -7
  85. data/app/components/primer/popover_component.css.json +0 -1
  86. data/app/components/primer/popover_component.css.map +0 -1
  87. data/app/components/primer/progress_bar_component.rb +0 -7
  88. data/previews/primer/dropdown_preview.rb +0 -208
  89. data/previews/primer/popover_component_preview.rb +0 -34
data/app/components/primer/dropdown.rb CHANGED
@@ -1,150 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # `Dropdown` is a lightweight context menu for housing navigation and actions.
5
- # They're great for instances where you don't need the full power (and code) of the SelectMenu.
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
data/app/components/primer/menu_component.css ADDED
@@ -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)}
data/app/components/primer/menu_component.css.json ADDED
@@ -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"]}
data/app/components/primer/menu_component.css.map ADDED
@@ -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"]}
data/app/components/primer/menu_component.pcss ADDED
@@ -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
+ }
data/app/components/primer/popover_component.rb CHANGED
@@ -1,125 +1,8 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
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
- #
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
- 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
data/app/components/primer/primer.d.ts CHANGED
@@ -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';
data/app/components/primer/primer.js CHANGED
@@ -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';
data/app/components/primer/primer.pcss CHANGED
@@ -1,20 +1,27 @@
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";
6
11
  @import "./beta/avatar.pcss";
7
12
  @import "./beta/avatar_stack.pcss";
13
+ @import "./beta/border_box.pcss";
14
+ @import "./beta/blankslate.pcss";
8
15
  @import "./beta/breadcrumbs.pcss";
9
16
  @import "./beta/button.pcss";
10
17
  @import "./beta/counter.pcss";
11
18
  @import "./beta/flash.pcss";
12
19
  @import "./beta/label.pcss";
13
- @import "./beta/blankslate.pcss";
20
+ @import "./beta/link.pcss";
21
+ @import "./beta/popover.pcss";
14
22
  @import "./beta/progress_bar.pcss";
15
23
  @import "./beta/truncate.pcss";
16
- @import "./dropdown.pcss";
17
- @import "./popover_component.pcss";
24
+ @import "./menu_component.pcss";
18
25
  @import "./state_component.pcss";
19
26
  @import "./subhead_component.pcss";
20
27
  @import "./timeline_item_component.pcss";
data/app/components/primer/primer.ts CHANGED
@@ -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'
data/lib/primer/deprecations.rb CHANGED
@@ -7,15 +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
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",
16
18
  "Primer::IconButton" => "Primer::Beta::IconButton",
17
19
  "Primer::Tooltip" => "Primer::Alpha::Tooltip",
18
- "Primer::ProgressBarComponent" => "Primer::Beta::ProgressBar"
20
+ "Primer::PopoverComponent" => "Primer::Beta::Popover"
19
21
  }.freeze
20
22
 
21
23
  def self.deprecated?(name)
data/lib/primer/view_components/linters/deprecated_components_counter.rb CHANGED
@@ -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
data/lib/primer/view_components/linters/severity_schema.rb ADDED
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "erb_lint/utils/severity_levels"
4
+
5
+ module ERBLint
6
+ module Linters
7
+ class SeveritySchema < LinterConfig
8
+ # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
9
+ # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb
10
+
11
+ property :severity, accepts: ERBLint::Utils::SeverityLevels::SEVERITY_NAMES, default: nil, reader: :severity
12
+ end
13
+ end
14
+ end
data/lib/primer/view_components/version.rb CHANGED
@@ -6,7 +6,7 @@ module Primer
6
6
  module VERSION
7
7
  MAJOR = 0
8
8
  MINOR = 0
9
- PATCH = 111
9
+ PATCH = 112
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
data/lib/tasks/docs.rake CHANGED
@@ -58,7 +58,7 @@ namespace :docs do
58
58
  Primer::Beta::Counter,
59
59
  Primer::Beta::Details,
60
60
  Primer::Alpha::Dialog,
61
- Primer::Dropdown,
61
+ Primer::Alpha::Dropdown,
62
62
  Primer::DropdownMenuComponent,
63
63
  Primer::Beta::Flash,
64
64
  Primer::Beta::Heading,
@@ -70,7 +70,7 @@ namespace :docs do
70
70
  Primer::MenuComponent,
71
71
  Primer::Navigation::TabComponent,
72
72
  Primer::OcticonComponent,
73
- Primer::PopoverComponent,
73
+ Primer::Beta::Popover,
74
74
  Primer::Beta::ProgressBar,
75
75
  Primer::StateComponent,
76
76
  Primer::SpinnerComponent,
@@ -99,7 +99,7 @@ namespace :docs do
99
99
  ]
100
100
 
101
101
  js_components = [
102
- Primer::Dropdown,
102
+ Primer::Alpha::Dropdown,
103
103
  Primer::LocalTime,
104
104
  Primer::Alpha::ImageCrop,
105
105
  Primer::Beta::AutoComplete,
data/previews/primer/alpha/button_marketing_preview.rb CHANGED
@@ -21,6 +21,42 @@ module Primer
21
21
  def default(tag: :button, type: :button, scheme: :default, variant: :default)
22
22
  render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
23
23
  end
24
+
25
+ # @!group Size Variants
26
+ #
27
+ # @label Default
28
+ def sizes_default
29
+ render(Primer::Alpha::ButtonMarketing.new) { "Default" }
30
+ end
31
+
32
+ # @label Large
33
+ def sizes_large
34
+ render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
35
+ end
36
+ # @!endgroup
37
+
38
+ # @!group Schemes
39
+ #
40
+ # @label Default
41
+ def scheme_default
42
+ render(Primer::Alpha::ButtonMarketing.new) { "Default" }
43
+ end
44
+
45
+ # @label Primary
46
+ def scheme_primary
47
+ render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
48
+ end
49
+
50
+ # @label Outline
51
+ def scheme_outline
52
+ render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
53
+ end
54
+
55
+ # @label Transparent
56
+ def scheme_transparent
57
+ render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
58
+ end
59
+ # @!endgroup
24
60
  end
25
61
  end
26
62
  end