primer_view_components 0.0.121 → 0.0.123

Sign up to get free protection for your applications and to get access to all the features.
Files changed (136) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +28 -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 +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/item.rb +7 -0
  8. data/app/components/primer/alpha/action_list.css.json +123 -1
  9. data/app/components/primer/alpha/auto_complete.css.json +23 -1
  10. data/app/components/primer/alpha/banner.css.json +24 -1
  11. data/app/components/primer/alpha/button_marketing.css.json +33 -1
  12. data/app/components/primer/alpha/check_box.rb +74 -0
  13. data/app/components/primer/alpha/check_box_group.rb +36 -0
  14. data/app/components/primer/alpha/dialog.css.json +82 -1
  15. data/app/components/primer/alpha/dialog.rb +1 -1
  16. data/app/components/primer/alpha/dropdown.css.json +40 -1
  17. data/app/components/primer/alpha/form_button.rb +32 -0
  18. data/app/components/primer/alpha/form_control.html.erb +26 -0
  19. data/app/components/primer/alpha/form_control.rb +105 -0
  20. data/app/components/primer/alpha/layout.css.json +80 -1
  21. data/app/components/primer/alpha/menu.css.json +28 -1
  22. data/app/components/primer/alpha/multi_input.rb +81 -0
  23. data/app/components/primer/alpha/nav_list/item.rb +4 -0
  24. data/app/components/primer/alpha/nav_list/section.rb +1 -1
  25. data/app/components/primer/alpha/nav_list.d.ts +6 -3
  26. data/app/components/primer/alpha/nav_list.js +95 -6
  27. data/app/components/primer/alpha/nav_list.rb +5 -0
  28. data/app/components/primer/alpha/nav_list.ts +105 -3
  29. data/app/components/primer/alpha/radio_button.rb +25 -0
  30. data/app/components/primer/alpha/radio_button_group.rb +36 -0
  31. data/app/components/primer/alpha/segmented_control.css +1 -1
  32. data/app/components/primer/alpha/segmented_control.css.json +31 -1
  33. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  34. data/app/components/primer/alpha/segmented_control.pcss +43 -12
  35. data/app/components/primer/alpha/select.rb +37 -0
  36. data/app/components/primer/alpha/submit_button.rb +32 -0
  37. data/app/components/primer/alpha/tab_nav.css.json +24 -1
  38. data/app/components/primer/alpha/tab_panels.rb +7 -0
  39. data/app/components/primer/alpha/text_area.rb +24 -0
  40. data/app/components/primer/alpha/text_field.css +2 -2
  41. data/app/components/primer/alpha/text_field.css.json +134 -1
  42. data/app/components/primer/alpha/text_field.css.map +1 -1
  43. data/app/components/primer/alpha/text_field.pcss +27 -0
  44. data/app/components/primer/alpha/text_field.rb +15 -20
  45. data/app/components/primer/alpha/toggle_switch.css +1 -1
  46. data/app/components/primer/alpha/toggle_switch.css.json +40 -1
  47. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  48. data/app/components/primer/alpha/toggle_switch.pcss +31 -61
  49. data/app/components/primer/alpha/underline_nav.css.json +28 -1
  50. data/app/components/primer/beta/avatar.css.json +17 -1
  51. data/app/components/primer/beta/avatar_stack.css.json +28 -1
  52. data/app/components/primer/beta/blankslate.css.json +22 -1
  53. data/app/components/primer/beta/border_box.css.json +54 -1
  54. data/app/components/primer/beta/breadcrumbs.css.json +11 -1
  55. data/app/components/primer/beta/button.css.json +71 -1
  56. data/app/components/primer/beta/counter.css.json +10 -1
  57. data/app/components/primer/beta/flash.css.json +27 -1
  58. data/app/components/primer/beta/label.css.json +25 -1
  59. data/app/components/primer/beta/link.css.json +19 -1
  60. data/app/components/primer/beta/popover.css.json +39 -1
  61. data/app/components/primer/beta/progress_bar.css.json +10 -1
  62. data/app/components/primer/beta/state.css.json +13 -1
  63. data/app/components/primer/beta/subhead.css.json +12 -1
  64. data/app/components/primer/beta/timeline_item.css.json +16 -1
  65. data/app/components/primer/beta/truncate.css.json +12 -1
  66. data/app/components/primer/component.rb +10 -2
  67. data/app/components/primer/truncate.css.json +13 -1
  68. data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
  69. data/app/lib/primer/css/layout.css.json +316 -1
  70. data/app/lib/primer/css/utilities.css.json +1659 -1
  71. data/lib/primer/form_components.rb +26 -6
  72. data/lib/primer/forms/builder.rb +1 -17
  73. data/lib/primer/forms/button.rb +4 -1
  74. data/lib/primer/forms/check_box_group.html.erb +14 -9
  75. data/lib/primer/forms/check_box_group.rb +5 -0
  76. data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
  77. data/lib/primer/forms/dsl/input.rb +33 -2
  78. data/lib/primer/forms/dsl/input_methods.rb +49 -1
  79. data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
  80. data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
  81. data/lib/primer/forms/dsl/text_field_input.rb +7 -5
  82. data/lib/primer/forms/form_control.rb +0 -1
  83. data/lib/primer/forms/group.html.erb +1 -1
  84. data/lib/primer/forms/multi.html.erb +8 -6
  85. data/lib/primer/forms/multi.rb +2 -0
  86. data/lib/primer/forms/radio_button_group.html.erb +14 -9
  87. data/lib/primer/forms/radio_button_group.rb +5 -0
  88. data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
  89. data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
  90. data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
  91. data/lib/primer/forms/text_area.rb +1 -1
  92. data/lib/primer/forms/text_field.rb +5 -1
  93. data/lib/primer/forms/utils.rb +20 -0
  94. data/lib/primer/view_components/engine.rb +1 -1
  95. data/lib/primer/view_components/version.rb +1 -1
  96. data/lib/primer/yard/backend.rb +1 -15
  97. data/lib/primer/yard/component_manifest.rb +44 -25
  98. data/lib/primer/yard/component_ref.rb +40 -0
  99. data/lib/primer/yard/docs_helper.rb +16 -2
  100. data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
  101. data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
  102. data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
  103. data/lib/primer/yard/registry.rb +6 -21
  104. data/lib/primer/yard/renders_many_handler.rb +1 -1
  105. data/lib/primer/yard/renders_one_handler.rb +1 -1
  106. data/lib/primer/yard.rb +14 -0
  107. data/lib/tasks/docs.rake +26 -13
  108. data/previews/pages/forms/01_introduction.md.erb +44 -0
  109. data/previews/pages/forms/02_getting_started.md.erb +125 -0
  110. data/previews/pages/forms/03_caption_templates.md.erb +30 -0
  111. data/previews/pages/forms/04_after_content.md.erb +39 -0
  112. data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
  113. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
  114. data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
  115. data/previews/pages/forms/08_validations.md.erb +28 -0
  116. data/previews/pages/forms/09_compound_forms.md.erb +97 -0
  117. data/previews/primer/alpha/check_box_group_preview.rb +89 -0
  118. data/previews/primer/alpha/check_box_preview.rb +62 -0
  119. data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
  120. data/previews/primer/alpha/form_control_preview.rb +106 -0
  121. data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
  122. data/previews/primer/alpha/multi_input_preview.rb +80 -0
  123. data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
  124. data/previews/primer/alpha/radio_button_preview.rb +62 -0
  125. data/previews/primer/alpha/select_preview.rb +130 -0
  126. data/previews/primer/alpha/text_area_preview.rb +87 -0
  127. data/previews/primer/alpha/text_field_preview.rb +10 -1
  128. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
  129. data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
  130. data/previews/primer/forms/forms_preview.rb +3 -1
  131. data/static/arguments.json +1358 -1328
  132. data/static/audited_at.json +10 -0
  133. data/static/constants.json +20 -0
  134. data/static/previews.json +218 -40
  135. data/static/statuses.json +10 -0
  136. metadata +41 -7
@@ -10,18 +10,6 @@
10
10
  align-items: center;
11
11
  display: inline-flex;
12
12
  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
13
-
14
- &:hover {
15
- & .ToggleSwitch-knob {
16
- background-color: var(--color-btn-hover-bg);
17
- }
18
- }
19
-
20
- &:active {
21
- & .ToggleSwitch-knob {
22
- background-color: var(--color-btn-active-bg);
23
- }
24
- }
25
13
  }
26
14
 
27
15
  .ToggleSwitch--checked {
@@ -56,7 +44,15 @@
56
44
 
57
45
  &:focus,
58
46
  &:focus-visible {
59
- outline-offset: 0;
47
+ outline-offset: 1px;
48
+ }
49
+
50
+ &:hover {
51
+ background-color: var(--color-switch-track-hover-bg);
52
+ }
53
+
54
+ &:active {
55
+ background-color: var(--color-switch-track-active-bg);
60
56
  }
61
57
 
62
58
  @media (pointer: coarse) {
@@ -75,42 +71,29 @@
75
71
  }
76
72
 
77
73
  .ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
78
- background-color: var(--color-canvas-subtle);
79
- border-color: var(--color-border-subtle);
80
-
81
- &:hover,
82
- &:active {
83
- background-color: var(--color-canvas-subtle);
84
-
85
- /* This is the most straightforward way of setting the knob's styles when the
86
- ** switch is both checked and disabled. */
87
-
88
- & .ToggleSwitch-knob {
89
- background-color: var(--color-switch-knob-checked-disabled-bg);
90
- }
91
- }
92
-
93
- & .ToggleSwitch-knob {
94
- background-color: var(--color-switch-knob-checked-disabled-bg);
95
- }
74
+ background-color: var(--color-switch-track-disabled-bg);
75
+ color: var(--color-switch-track-checked-disabled-fg);
76
+ border-color: transparent;
96
77
  }
97
78
 
98
79
  .ToggleSwitch-track[aria-checked='true'] {
99
80
  background-color: var(--color-switch-track-checked-bg);
100
81
  border-color: var(--color-switch-track-checked-border);
101
82
 
102
- &:hover {
103
- background-color: var(--color-switch-track-checked-hover-bg);
104
- }
83
+ &:not([aria-disabled='true']) {
84
+ &:hover {
85
+ background-color: var(--color-switch-track-checked-hover-bg);
86
+ }
105
87
 
106
- &:active {
107
- background-color: var(--color-switch-track-checked-active-bg);
88
+ &:active {
89
+ background-color: var(--color-switch-track-checked-active-bg);
90
+ }
108
91
  }
109
92
 
110
93
  & .ToggleSwitch-knob {
111
94
  background-color: var(--color-switch-knob-checked-bg);
112
- border: 0;
113
- transform: translateX(calc(100% + 1px));
95
+ border-color: var(--color-switch-knob-checked-border);
96
+ transform: translateX(100%);
114
97
  }
115
98
 
116
99
  & .ToggleSwitch-lineIcon {
@@ -124,33 +107,21 @@
124
107
 
125
108
  .ToggleSwitch-track[aria-disabled='true'] {
126
109
  cursor: not-allowed;
127
- background-color: var(--color-canvas-subtle);
128
- border-color: var(--color-border-subtle);
110
+ background-color: var(--color-switch-track-disabled-bg);
111
+ border-color: transparent;
129
112
  transition-property: none;
130
113
 
131
- &:hover,
132
- &:active {
133
- & .ToggleSwitch-knob {
134
- background-color: var(--color-btn-bg);
135
- }
136
- }
137
-
138
114
  & .ToggleSwitch-knob {
139
115
  border-color: var(--color-border-default);
140
116
  box-shadow: none;
141
-
142
- &:hover,
143
- &:active {
144
- background-color: var(--color-btn-bg);
145
- }
146
117
  }
147
118
 
148
119
  & .ToggleSwitch-lineIcon {
149
- color: var(--color-fg-subtle);
120
+ color: var(--color-switch-track-disabled-fg);
150
121
  }
151
122
 
152
123
  & .ToggleSwitch-circleIcon {
153
- color: var(--color-fg-subtle);
124
+ color: var(--color-switch-track-disabled-fg);
154
125
  }
155
126
  }
156
127
 
@@ -164,7 +135,7 @@
164
135
 
165
136
  .ToggleSwitch-lineIcon {
166
137
  line-height: 0;
167
- color: var(--color-accent-fg);
138
+ color: var(--color-switch-track-checked-fg);
168
139
  transition-duration: 80ms;
169
140
  transition-property: transform;
170
141
  transform: translateX(-100%);
@@ -173,7 +144,7 @@
173
144
 
174
145
  .ToggleSwitch-circleIcon {
175
146
  line-height: 0;
176
- color: var(--color-fg-default);
147
+ color: var(--color-switch-track-fg);
177
148
  transition-duration: 80ms;
178
149
  transition-property: transform;
179
150
  transform: translateX(0);
@@ -182,18 +153,17 @@
182
153
 
183
154
  .ToggleSwitch-knob {
184
155
  position: absolute;
185
- top: -1px;
186
- bottom: -1px;
156
+ top: 0;
157
+ bottom: 0;
187
158
  z-index: 1;
188
159
  width: 50%;
189
- background-color: var(--color-btn-bg);
190
- border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
160
+ background-color: var(--color-switch-knob-bg);
161
+ border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);
191
162
  border-radius: var(--primer-borderRadius-medium, 6px);
192
163
  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
193
164
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
194
165
  transition-duration: 80ms;
195
166
  transition-property: transform;
196
- transform: translateX(-1px);
197
167
 
198
168
  @media (prefers-reduced-motion) {
199
169
  transition: none;
@@ -1 +1,28 @@
1
- {"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
1
+ {
2
+ "name": "alpha/underline_nav",
3
+ "selectors": [
4
+ ".UnderlineNav",
5
+ ".UnderlineNav .Counter",
6
+ ".UnderlineNav .Counter--primary",
7
+ ".UnderlineNav-body",
8
+ ".UnderlineNav-item",
9
+ ".UnderlineNav-item:focus",
10
+ ".UnderlineNav-item:focus-visible",
11
+ ".UnderlineNav-item:hover",
12
+ ".UnderlineNav-item [data-content]:before",
13
+ ".UnderlineNav-item:before",
14
+ ".UnderlineNav-item.selected",
15
+ ".UnderlineNav-item[aria-current]:not([aria-current=false])",
16
+ ".UnderlineNav-item[role=tab][aria-selected=true]",
17
+ ".UnderlineNav-item.selected:after",
18
+ ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
19
+ ".UnderlineNav-item[role=tab][aria-selected=true]:after",
20
+ ".UnderlineNav--right",
21
+ ".UnderlineNav--right .UnderlineNav-actions",
22
+ ".UnderlineNav-actions",
23
+ ".UnderlineNav--full",
24
+ ".UnderlineNav--full .UnderlineNav-body",
25
+ ".UnderlineNav-octicon",
26
+ ".UnderlineNav-container"
27
+ ]
28
+ }
@@ -1 +1,17 @@
1
- {"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1",".avatar-2",".avatar-small",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}
1
+ {
2
+ "name": "beta/avatar",
3
+ "selectors": [
4
+ ".avatar",
5
+ ".avatar-link",
6
+ ".avatar-group-item",
7
+ ".avatar-1",
8
+ ".avatar-2",
9
+ ".avatar-small",
10
+ ".avatar-3",
11
+ ".avatar-4",
12
+ ".avatar-5",
13
+ ".avatar-6",
14
+ ".avatar-7",
15
+ ".avatar-8"
16
+ ]
17
+ }
@@ -1 +1,28 @@
1
- {"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more:after",".avatar.avatar-more:before",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more:before",".AvatarStack--right .avatar.avatar-more:after",".AvatarStack--right .avatar"]}
1
+ {
2
+ "name": "beta/avatar_stack",
3
+ "selectors": [
4
+ ".AvatarStack",
5
+ ".AvatarStack .AvatarStack-body",
6
+ ".AvatarStack.AvatarStack--two",
7
+ ".AvatarStack.AvatarStack--three-plus",
8
+ ".AvatarStack-body",
9
+ ".AvatarStack-body .avatar",
10
+ ".AvatarStack-body .avatar:first-child",
11
+ ".AvatarStack-body .avatar:last-child",
12
+ ".AvatarStack-body .avatar img",
13
+ ".AvatarStack-body .avatar:nth-child(n+4)",
14
+ ".AvatarStack-body:hover .avatar",
15
+ ".AvatarStack-body:hover .avatar:nth-child(n+4)",
16
+ ".AvatarStack-body:hover .avatar-more",
17
+ ".avatar.avatar-more",
18
+ ".avatar.avatar-more:after",
19
+ ".avatar.avatar-more:before",
20
+ ".AvatarStack--right .AvatarStack-body",
21
+ ".AvatarStack--right .AvatarStack-body:hover .avatar",
22
+ ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
23
+ ".AvatarStack--right .avatar.avatar-more",
24
+ ".AvatarStack--right .avatar.avatar-more:before",
25
+ ".AvatarStack--right .avatar.avatar-more:after",
26
+ ".AvatarStack--right .avatar"
27
+ ]
28
+ }
@@ -1 +1,22 @@
1
- {"name":"beta/blankslate","selectors":[".blankslate",".blankslate p",".blankslate code",".blankslate img",".blankslate-icon",".blankslate-image",".blankslate-heading",".blankslate-action",".blankslate-action:first-of-type",".blankslate-action:last-of-type",".blankslate-capped",".blankslate-spacious",".blankslate-narrow",".blankslate-large img",".blankslate-large h3",".blankslate-large p",".blankslate-clean-background"]}
1
+ {
2
+ "name": "beta/blankslate",
3
+ "selectors": [
4
+ ".blankslate",
5
+ ".blankslate p",
6
+ ".blankslate code",
7
+ ".blankslate img",
8
+ ".blankslate-icon",
9
+ ".blankslate-image",
10
+ ".blankslate-heading",
11
+ ".blankslate-action",
12
+ ".blankslate-action:first-of-type",
13
+ ".blankslate-action:last-of-type",
14
+ ".blankslate-capped",
15
+ ".blankslate-spacious",
16
+ ".blankslate-narrow",
17
+ ".blankslate-large img",
18
+ ".blankslate-large h3",
19
+ ".blankslate-large p",
20
+ ".blankslate-clean-background"
21
+ ]
22
+ }
@@ -1 +1,54 @@
1
- {"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-header",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-footer",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-footer",".Box--blue .Box-row",".Box--danger",".Box--danger .Box-body:last-of-type",".Box--danger .Box-row:first-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}
1
+ {
2
+ "name": "beta/border_box",
3
+ "selectors": [
4
+ ".Box",
5
+ ".Box--condensed",
6
+ ".Box--condensed .Box-body",
7
+ ".Box--condensed .Box-footer",
8
+ ".Box--condensed .Box-header",
9
+ ".Box--condensed .Box-btn-octicon.btn-octicon",
10
+ ".Box--condensed .Box-row",
11
+ ".Box--spacious .Box-header",
12
+ ".Box--spacious .Box-title",
13
+ ".Box--spacious .Box-body",
14
+ ".Box--spacious .Box-btn-octicon.btn-octicon",
15
+ ".Box--spacious .Box-footer",
16
+ ".Box--spacious .Box-row",
17
+ ".Box-header",
18
+ ".Box-title",
19
+ ".Box-body",
20
+ ".Box-body:last-of-type",
21
+ ".Box-row",
22
+ ".Box-row:first-of-type",
23
+ ".Box-row:last-of-type",
24
+ ".Box-row.Box-row--unread",
25
+ ".Box-row.unread",
26
+ ".Box-row.navigation-focus .Box-row--drag-button",
27
+ ".Box-row.navigation-focus.is-dragging .Box-row--drag-button",
28
+ ".Box-row.navigation-focus.sortable-chosen",
29
+ ".Box-row.navigation-focus.sortable-ghost",
30
+ ".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",
31
+ ".Box-row--focus-gray.navigation-focus",
32
+ ".Box-row--focus-blue.navigation-focus",
33
+ ".Box-row--hover-gray:hover",
34
+ ".Box-row--hover-blue:hover",
35
+ ".Box-row-link",
36
+ ".Box-row-link:hover",
37
+ ".Box-row--drag-button",
38
+ ".Box-footer",
39
+ ".Box--scrollable",
40
+ ".Box--blue",
41
+ ".Box--blue .Box-header",
42
+ ".Box--blue .Box-body",
43
+ ".Box--blue .Box-footer",
44
+ ".Box--blue .Box-row",
45
+ ".Box--danger",
46
+ ".Box--danger .Box-body:last-of-type",
47
+ ".Box--danger .Box-row:first-of-type",
48
+ ".Box-header--blue",
49
+ ".Box-row--yellow",
50
+ ".Box-row--blue",
51
+ ".Box-row--gray",
52
+ ".Box-btn-octicon.btn-octicon"
53
+ ]
54
+ }
@@ -1 +1,11 @@
1
- {"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",".breadcrumb-item-selected:after",".breadcrumb-item[aria-current]:not([aria-current=false]):after",".breadcrumb-item-selected a"]}
1
+ {
2
+ "name": "beta/breadcrumbs",
3
+ "selectors": [
4
+ ".breadcrumb-item",
5
+ ".breadcrumb-item:after",
6
+ ".breadcrumb-item:first-child",
7
+ ".breadcrumb-item-selected:after",
8
+ ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
9
+ ".breadcrumb-item-selected a"
10
+ ]
11
+ }
@@ -1 +1,71 @@
1
- {"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
1
+ {
2
+ "name": "beta/button",
3
+ "selectors": [
4
+ ":root",
5
+ ".Button",
6
+ ".Button:before",
7
+ ".Button:hover",
8
+ ".Button:active",
9
+ ".Button:disabled",
10
+ ".Button[aria-disabled=true]",
11
+ ".Button-withTooltip",
12
+ "a.Button",
13
+ "summary.Button",
14
+ "a.Button:hover",
15
+ "summary.Button:hover",
16
+ ".Button-content",
17
+ ".Button-content>:not(:last-child)",
18
+ ".Button-content--alignStart",
19
+ ".Button-visual",
20
+ ".Button-visual .Counter",
21
+ ".Button-label",
22
+ ".Button-leadingVisual",
23
+ ".Button-trailingVisual",
24
+ ".Button-trailingAction",
25
+ ".Button--small",
26
+ ".Button--small .Button-label",
27
+ ".Button--small .Button-content>:not(:last-child)",
28
+ ".Button--large",
29
+ ".Button--large .Button-label",
30
+ ".Button--large .Button-content>:not(:last-child)",
31
+ ".Button--fullWidth",
32
+ ".Button--primary",
33
+ ".Button--primary:hover:not(:disabled)",
34
+ ".Button--primary:focus",
35
+ ".Button--primary:focus:not(:focus-visible)",
36
+ ".Button--primary:focus-visible",
37
+ ".Button--primary:active:not(:disabled)",
38
+ ".Button--primary[aria-pressed=true]",
39
+ ".Button--primary:disabled",
40
+ ".Button--primary[aria-disabled=true]",
41
+ ".Button--secondary",
42
+ ".Button--secondary:hover:not(:disabled)",
43
+ ".Button--secondary:active:not(:disabled)",
44
+ ".Button--secondary[aria-pressed=true]",
45
+ ".Button--secondary:disabled",
46
+ ".Button--secondary[aria-disabled=true]",
47
+ ".Button--invisible",
48
+ ".Button--invisible:hover:not(:disabled)",
49
+ ".Button--invisible:active:not(:disabled)",
50
+ ".Button--invisible[aria-pressed=true]",
51
+ ".Button--invisible:disabled",
52
+ ".Button--invisible[aria-disabled=true]",
53
+ ".Button--invisible.Button--invisible-noVisuals .Button-label",
54
+ ".Button--invisible .Button-visual",
55
+ ".Button--link",
56
+ ".Button--link:hover:not(:disabled)",
57
+ ".Button--link:focus",
58
+ ".Button--link:focus-visible",
59
+ ".Button--link:disabled",
60
+ ".Button--link[aria-disabled=true]",
61
+ ".Button--danger",
62
+ ".Button--danger:hover:not(:disabled)",
63
+ ".Button--danger:active:not(:disabled)",
64
+ ".Button--danger[aria-pressed=true]",
65
+ ".Button--danger:disabled",
66
+ ".Button--danger[aria-disabled=true]",
67
+ ".Button--iconOnly",
68
+ ".Button--iconOnly.Button--small",
69
+ ".Button--iconOnly.Button--large"
70
+ ]
71
+ }
@@ -1 +1,10 @@
1
- {"name":"beta/counter","selectors":[".Counter",".Counter:empty",".Counter .octicon",".Counter--primary",".Counter--secondary"]}
1
+ {
2
+ "name": "beta/counter",
3
+ "selectors": [
4
+ ".Counter",
5
+ ".Counter:empty",
6
+ ".Counter .octicon",
7
+ ".Counter--primary",
8
+ ".Counter--secondary"
9
+ ]
10
+ }
@@ -1 +1,27 @@
1
- {"name":"beta/flash","selectors":[".flash:not(.Banner)",".flash:not(.Banner) .octicon",".flash:not(.Banner) p:last-child",".flash-messages",".flash-close:not(.Banner-close)",".flash-close:not(.Banner-close):hover",".flash-close:not(.Banner-close):active",".flash-close:not(.Banner-close) .octicon",".flash-action:not(.Banner-actions)",".flash-action.btn:not(.Banner-actions) .octicon",".flash-action.btn-primary:not(.Banner-actions)",".flash-action.btn-primary:not(.Banner-actions) .octicon",".flash-warn:not(.Banner)",".flash-warn:not(.Banner) .octicon",".flash-error:not(.Banner)",".flash-error:not(.Banner) .octicon",".flash-success:not(.Banner)",".flash-success:not(.Banner) .octicon",".flash-full:not(.Banner)",".flash-banner",".flash-full",".warning"]}
1
+ {
2
+ "name": "beta/flash",
3
+ "selectors": [
4
+ ".flash:not(.Banner)",
5
+ ".flash:not(.Banner) .octicon",
6
+ ".flash:not(.Banner) p:last-child",
7
+ ".flash-messages",
8
+ ".flash-close:not(.Banner-close)",
9
+ ".flash-close:not(.Banner-close):hover",
10
+ ".flash-close:not(.Banner-close):active",
11
+ ".flash-close:not(.Banner-close) .octicon",
12
+ ".flash-action:not(.Banner-actions)",
13
+ ".flash-action.btn:not(.Banner-actions) .octicon",
14
+ ".flash-action.btn-primary:not(.Banner-actions)",
15
+ ".flash-action.btn-primary:not(.Banner-actions) .octicon",
16
+ ".flash-warn:not(.Banner)",
17
+ ".flash-warn:not(.Banner) .octicon",
18
+ ".flash-error:not(.Banner)",
19
+ ".flash-error:not(.Banner) .octicon",
20
+ ".flash-success:not(.Banner)",
21
+ ".flash-success:not(.Banner) .octicon",
22
+ ".flash-full:not(.Banner)",
23
+ ".flash-banner",
24
+ ".flash-full",
25
+ ".warning"
26
+ ]
27
+ }
@@ -1 +1,25 @@
1
- {"name":"beta/label","selectors":[".labels",".Label",".label",".Label:hover",".label:hover",".Label--large",".Label--inline",".Label--primary",".Label--secondary",".Label--accent",".Label--info",".Label--success",".Label--attention",".Label--warning",".Label--severe",".Label--danger",".Label--open",".Label--closed",".Label--done",".Label--sponsors"]}
1
+ {
2
+ "name": "beta/label",
3
+ "selectors": [
4
+ ".labels",
5
+ ".Label",
6
+ ".label",
7
+ ".Label:hover",
8
+ ".label:hover",
9
+ ".Label--large",
10
+ ".Label--inline",
11
+ ".Label--primary",
12
+ ".Label--secondary",
13
+ ".Label--accent",
14
+ ".Label--info",
15
+ ".Label--success",
16
+ ".Label--attention",
17
+ ".Label--warning",
18
+ ".Label--severe",
19
+ ".Label--danger",
20
+ ".Label--open",
21
+ ".Label--closed",
22
+ ".Label--done",
23
+ ".Label--sponsors"
24
+ ]
25
+ }
@@ -1 +1,19 @@
1
- {"name":"beta/link","selectors":[".Link",".Link:hover",".Link:focus",".Link:focus-visible",".Link--primary",".Link--primary:hover",".Link--secondary",".Link--secondary:hover",".Link--muted",".Link--muted:hover",".Link--onHover:hover",".Link--muted:hover [class*=color-fg]",".Link--primary:hover [class*=color-fg]",".Link--secondary:hover [class*=color-fg]"]}
1
+ {
2
+ "name": "beta/link",
3
+ "selectors": [
4
+ ".Link",
5
+ ".Link:hover",
6
+ ".Link:focus",
7
+ ".Link:focus-visible",
8
+ ".Link--primary",
9
+ ".Link--primary:hover",
10
+ ".Link--secondary",
11
+ ".Link--secondary:hover",
12
+ ".Link--muted",
13
+ ".Link--muted:hover",
14
+ ".Link--onHover:hover",
15
+ ".Link--muted:hover [class*=color-fg]",
16
+ ".Link--primary:hover [class*=color-fg]",
17
+ ".Link--secondary:hover [class*=color-fg]"
18
+ ]
19
+ }
@@ -1 +1,39 @@
1
- {"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}
1
+ {
2
+ "name": "beta/popover",
3
+ "selectors": [
4
+ ".Popover",
5
+ ".Popover-message",
6
+ ".Popover-message:after",
7
+ ".Popover-message:before",
8
+ ".Popover-message--no-caret:after",
9
+ ".Popover-message--no-caret:before",
10
+ ".Popover-message--bottom-left:after",
11
+ ".Popover-message--bottom-left:before",
12
+ ".Popover-message--bottom-right:after",
13
+ ".Popover-message--bottom-right:before",
14
+ ".Popover-message--bottom:after",
15
+ ".Popover-message--bottom:before",
16
+ ".Popover-message--bottom-right",
17
+ ".Popover-message--top-right",
18
+ ".Popover-message--top-right:after",
19
+ ".Popover-message--top-right:before",
20
+ ".Popover-message--bottom-left",
21
+ ".Popover-message--top-left",
22
+ ".Popover-message--top-left:after",
23
+ ".Popover-message--top-left:before",
24
+ ".Popover-message--left-bottom:after",
25
+ ".Popover-message--left-bottom:before",
26
+ ".Popover-message--left-top:after",
27
+ ".Popover-message--left-top:before",
28
+ ".Popover-message--left:after",
29
+ ".Popover-message--left:before",
30
+ ".Popover-message--right-bottom:after",
31
+ ".Popover-message--right-bottom:before",
32
+ ".Popover-message--right-top:after",
33
+ ".Popover-message--right-top:before",
34
+ ".Popover-message--right:after",
35
+ ".Popover-message--right:before",
36
+ ".Popover-message--large",
37
+ ".Popover-message>.btn-octicon"
38
+ ]
39
+ }
@@ -1 +1,10 @@
1
- {"name":"beta/progress_bar","selectors":[".Progress",".Progress--large",".Progress--small",".Progress-item",".Progress-item+.Progress-item"]}
1
+ {
2
+ "name": "beta/progress_bar",
3
+ "selectors": [
4
+ ".Progress",
5
+ ".Progress--large",
6
+ ".Progress--small",
7
+ ".Progress-item",
8
+ ".Progress-item+.Progress-item"
9
+ ]
10
+ }
@@ -1 +1,13 @@
1
- {"name":"beta/state","selectors":[".State",".state",".State--draft",".State--open",".State--merged",".State--closed",".State--small",".State--small .octicon"]}
1
+ {
2
+ "name": "beta/state",
3
+ "selectors": [
4
+ ".State",
5
+ ".state",
6
+ ".State--draft",
7
+ ".State--open",
8
+ ".State--merged",
9
+ ".State--closed",
10
+ ".State--small",
11
+ ".State--small .octicon"
12
+ ]
13
+ }
@@ -1 +1,12 @@
1
- {"name":"beta/subhead","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions+.Subhead-description"]}
1
+ {
2
+ "name": "beta/subhead",
3
+ "selectors": [
4
+ ".Subhead",
5
+ ".Subhead--spacious",
6
+ ".Subhead-heading",
7
+ ".Subhead-heading--danger",
8
+ ".Subhead-description",
9
+ ".Subhead-actions",
10
+ ".Subhead-actions+.Subhead-description"
11
+ ]
12
+ }
@@ -1 +1,16 @@
1
- {"name":"beta/timeline_item","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"]}
1
+ {
2
+ "name": "beta/timeline_item",
3
+ "selectors": [
4
+ ".TimelineItem",
5
+ ".TimelineItem:before",
6
+ ".TimelineItem:target .TimelineItem-badge",
7
+ ".TimelineItem-badge",
8
+ ".TimelineItem-badge--success",
9
+ ".TimelineItem-body",
10
+ ".TimelineItem-avatar",
11
+ ".TimelineItem-break",
12
+ ".TimelineItem--condensed",
13
+ ".TimelineItem--condensed:last-child",
14
+ ".TimelineItem--condensed .TimelineItem-badge"
15
+ ]
16
+ }
@@ -1 +1,12 @@
1
- {"name":"beta/truncate","selectors":[".Truncate",".Truncate>.Truncate-text",".Truncate>.Truncate-text+.Truncate-text",".Truncate>.Truncate-text.Truncate-text--primary",".Truncate>.Truncate-text.Truncate-text--expandable:active",".Truncate>.Truncate-text.Truncate-text--expandable:focus",".Truncate>.Truncate-text.Truncate-text--expandable:hover"]}
1
+ {
2
+ "name": "beta/truncate",
3
+ "selectors": [
4
+ ".Truncate",
5
+ ".Truncate>.Truncate-text",
6
+ ".Truncate>.Truncate-text+.Truncate-text",
7
+ ".Truncate>.Truncate-text.Truncate-text--primary",
8
+ ".Truncate>.Truncate-text.Truncate-text--expandable:active",
9
+ ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
10
+ ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
11
+ ]
12
+ }
@@ -6,8 +6,16 @@ module Primer
6
6
  # @private
7
7
  # :nocov:
8
8
  class Component < ViewComponent::Base
9
- include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
10
- include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
9
+ if Module.const_defined?("ViewComponent::SlotableV2") &&
10
+ !(ViewComponent::Base < ViewComponent::SlotableV2)
11
+ include ViewComponent::SlotableV2
12
+ end
13
+
14
+ if Module.const_defined?("ViewComponent::PolymorphicSlots") &&
15
+ !(ViewComponent::Base < ViewComponent::PolymorphicSlots)
16
+ include ViewComponent::PolymorphicSlots
17
+ end
18
+
11
19
  include ClassNameHelper
12
20
  include FetchOrFallbackHelper
13
21
  include TestSelectorHelper