primer_view_components 0.17.0 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +20 -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.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +11 -33
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +0 -4
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +1 -18
- data/app/components/primer/alpha/segmented_control.rb +0 -1
- data/app/components/primer/dialog_helper.js +18 -5
- data/app/components/primer/dialog_helper.ts +17 -4
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +9 -0
- data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +7 -0
- data/previews/primer/alpha/dialog_preview.rb +23 -0
- data/previews/primer/alpha/segmented_control_preview.rb +1 -52
- data/static/classes.json +0 -3
- data/static/constants.json +2 -4
- data/static/info_arch.json +13 -65
- data/static/previews.json +13 -65
- metadata +3 -2
@@ -11,7 +11,7 @@ module Primer
|
|
11
11
|
# @param full_width [Boolean] toggle
|
12
12
|
# @param hide_labels [Boolean] toggle
|
13
13
|
# @param icon [Symbol] octicon
|
14
|
-
# @param size select [small, medium
|
14
|
+
# @param size select [small, medium]
|
15
15
|
def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
|
16
16
|
if icon == :none
|
17
17
|
icon = hide_labels ? :zap : nil
|
@@ -55,17 +55,6 @@ module Primer
|
|
55
55
|
component.with_item(label: "Blame")
|
56
56
|
end
|
57
57
|
end
|
58
|
-
|
59
|
-
# @label Size large
|
60
|
-
# @param hide_labels [Boolean] toggle
|
61
|
-
# @snapshot
|
62
|
-
def full_width_large(hide_labels: false)
|
63
|
-
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
|
64
|
-
component.with_item(label: "Preview", selected: true)
|
65
|
-
component.with_item(label: "Raw")
|
66
|
-
component.with_item(label: "Blame")
|
67
|
-
end
|
68
|
-
end
|
69
58
|
# @!endgroup
|
70
59
|
|
71
60
|
# @!group Icons and text
|
@@ -88,16 +77,6 @@ module Primer
|
|
88
77
|
component.with_item(label: "Blame", icon: :people)
|
89
78
|
end
|
90
79
|
end
|
91
|
-
|
92
|
-
# @label Size large
|
93
|
-
# @snapshot
|
94
|
-
def icons_and_text_large
|
95
|
-
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
|
96
|
-
component.with_item(label: "Preview", icon: :eye, selected: true)
|
97
|
-
component.with_item(label: "Raw", icon: :"file-code")
|
98
|
-
component.with_item(label: "Blame", icon: :people)
|
99
|
-
end
|
100
|
-
end
|
101
80
|
# @!endgroup
|
102
81
|
|
103
82
|
# @!group Trailing Label
|
@@ -122,17 +101,6 @@ module Primer
|
|
122
101
|
end
|
123
102
|
end
|
124
103
|
end
|
125
|
-
|
126
|
-
# @label Size large
|
127
|
-
# @snapshot
|
128
|
-
def trailing_label_width_large
|
129
|
-
render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
|
130
|
-
component.with_item(label: "Monthly")
|
131
|
-
component.with_item(label: "Yearly", selected: true) do |button|
|
132
|
-
button.with_trailing_visual_label(scheme: :accent) { "-8%" }
|
133
|
-
end
|
134
|
-
end
|
135
|
-
end
|
136
104
|
# @!endgroup
|
137
105
|
|
138
106
|
# @!group Icons only
|
@@ -156,16 +124,6 @@ module Primer
|
|
156
124
|
end
|
157
125
|
end
|
158
126
|
|
159
|
-
# @label Size large
|
160
|
-
# @snapshot
|
161
|
-
def icon_only_large
|
162
|
-
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
|
163
|
-
component.with_item(label: "Preview", icon: :eye, selected: true)
|
164
|
-
component.with_item(label: "Raw", icon: :"file-code")
|
165
|
-
component.with_item(label: "Blame", icon: :people)
|
166
|
-
end
|
167
|
-
end
|
168
|
-
|
169
127
|
# @label Full width, size small
|
170
128
|
def icon_only_full_width_small
|
171
129
|
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
|
@@ -183,15 +141,6 @@ module Primer
|
|
183
141
|
component.with_item(label: "Blame", icon: :people)
|
184
142
|
end
|
185
143
|
end
|
186
|
-
|
187
|
-
# @label Full width, size large
|
188
|
-
def icon_only_full_width_large
|
189
|
-
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
|
190
|
-
component.with_item(label: "Preview", icon: :eye, selected: true)
|
191
|
-
component.with_item(label: "Raw", icon: :"file-code")
|
192
|
-
component.with_item(label: "Blame", icon: :people)
|
193
|
-
end
|
194
|
-
end
|
195
144
|
# @!endgroup
|
196
145
|
|
197
146
|
# NOTE: this preview uses a group to force it's display below the other groups
|
data/static/classes.json
CHANGED
data/static/constants.json
CHANGED
@@ -565,13 +565,11 @@
|
|
565
565
|
"Item": "Primer::Alpha::SegmentedControl::Item",
|
566
566
|
"SIZE_MAPPINGS": {
|
567
567
|
"small": "SegmentedControl--small",
|
568
|
-
"medium": "SegmentedControl--medium"
|
569
|
-
"large": "SegmentedControl--large"
|
568
|
+
"medium": "SegmentedControl--medium"
|
570
569
|
},
|
571
570
|
"SIZE_OPTIONS": [
|
572
571
|
"small",
|
573
|
-
"medium"
|
574
|
-
"large"
|
572
|
+
"medium"
|
575
573
|
]
|
576
574
|
},
|
577
575
|
"Primer::Alpha::SegmentedControl::Item": {
|
data/static/info_arch.json
CHANGED
@@ -3375,6 +3375,19 @@
|
|
3375
3375
|
"color-contrast"
|
3376
3376
|
]
|
3377
3377
|
}
|
3378
|
+
},
|
3379
|
+
{
|
3380
|
+
"preview_path": "primer/alpha/dialog/dialog_inside_overlay",
|
3381
|
+
"name": "dialog_inside_overlay",
|
3382
|
+
"snapshot": "false",
|
3383
|
+
"skip_rules": {
|
3384
|
+
"wont_fix": [
|
3385
|
+
"region"
|
3386
|
+
],
|
3387
|
+
"will_fix": [
|
3388
|
+
"color-contrast"
|
3389
|
+
]
|
3390
|
+
}
|
3378
3391
|
}
|
3379
3392
|
],
|
3380
3393
|
"subcomponents": [
|
@@ -6657,19 +6670,6 @@
|
|
6657
6670
|
]
|
6658
6671
|
}
|
6659
6672
|
},
|
6660
|
-
{
|
6661
|
-
"preview_path": "primer/alpha/segmented_control/full_width_large",
|
6662
|
-
"name": "full_width_large",
|
6663
|
-
"snapshot": "true",
|
6664
|
-
"skip_rules": {
|
6665
|
-
"wont_fix": [
|
6666
|
-
"region"
|
6667
|
-
],
|
6668
|
-
"will_fix": [
|
6669
|
-
"color-contrast"
|
6670
|
-
]
|
6671
|
-
}
|
6672
|
-
},
|
6673
6673
|
{
|
6674
6674
|
"preview_path": "primer/alpha/segmented_control/icons_and_text_small",
|
6675
6675
|
"name": "icons_and_text_small",
|
@@ -6696,19 +6696,6 @@
|
|
6696
6696
|
]
|
6697
6697
|
}
|
6698
6698
|
},
|
6699
|
-
{
|
6700
|
-
"preview_path": "primer/alpha/segmented_control/icons_and_text_large",
|
6701
|
-
"name": "icons_and_text_large",
|
6702
|
-
"snapshot": "true",
|
6703
|
-
"skip_rules": {
|
6704
|
-
"wont_fix": [
|
6705
|
-
"region"
|
6706
|
-
],
|
6707
|
-
"will_fix": [
|
6708
|
-
"color-contrast"
|
6709
|
-
]
|
6710
|
-
}
|
6711
|
-
},
|
6712
6699
|
{
|
6713
6700
|
"preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
|
6714
6701
|
"name": "trailing_label_width_small",
|
@@ -6735,19 +6722,6 @@
|
|
6735
6722
|
]
|
6736
6723
|
}
|
6737
6724
|
},
|
6738
|
-
{
|
6739
|
-
"preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
|
6740
|
-
"name": "trailing_label_width_large",
|
6741
|
-
"snapshot": "true",
|
6742
|
-
"skip_rules": {
|
6743
|
-
"wont_fix": [
|
6744
|
-
"region"
|
6745
|
-
],
|
6746
|
-
"will_fix": [
|
6747
|
-
"color-contrast"
|
6748
|
-
]
|
6749
|
-
}
|
6750
|
-
},
|
6751
6725
|
{
|
6752
6726
|
"preview_path": "primer/alpha/segmented_control/icon_only_small",
|
6753
6727
|
"name": "icon_only_small",
|
@@ -6774,19 +6748,6 @@
|
|
6774
6748
|
]
|
6775
6749
|
}
|
6776
6750
|
},
|
6777
|
-
{
|
6778
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_large",
|
6779
|
-
"name": "icon_only_large",
|
6780
|
-
"snapshot": "true",
|
6781
|
-
"skip_rules": {
|
6782
|
-
"wont_fix": [
|
6783
|
-
"region"
|
6784
|
-
],
|
6785
|
-
"will_fix": [
|
6786
|
-
"color-contrast"
|
6787
|
-
]
|
6788
|
-
}
|
6789
|
-
},
|
6790
6751
|
{
|
6791
6752
|
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
|
6792
6753
|
"name": "icon_only_full_width_small",
|
@@ -6813,19 +6774,6 @@
|
|
6813
6774
|
]
|
6814
6775
|
}
|
6815
6776
|
},
|
6816
|
-
{
|
6817
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
|
6818
|
-
"name": "icon_only_full_width_large",
|
6819
|
-
"snapshot": "false",
|
6820
|
-
"skip_rules": {
|
6821
|
-
"wont_fix": [
|
6822
|
-
"region"
|
6823
|
-
],
|
6824
|
-
"will_fix": [
|
6825
|
-
"color-contrast"
|
6826
|
-
]
|
6827
|
-
}
|
6828
|
-
},
|
6829
6777
|
{
|
6830
6778
|
"preview_path": "primer/alpha/segmented_control/with_link_as_tag",
|
6831
6779
|
"name": "with_link_as_tag",
|
data/static/previews.json
CHANGED
@@ -3139,6 +3139,19 @@
|
|
3139
3139
|
"color-contrast"
|
3140
3140
|
]
|
3141
3141
|
}
|
3142
|
+
},
|
3143
|
+
{
|
3144
|
+
"preview_path": "primer/alpha/dialog/dialog_inside_overlay",
|
3145
|
+
"name": "dialog_inside_overlay",
|
3146
|
+
"snapshot": "false",
|
3147
|
+
"skip_rules": {
|
3148
|
+
"wont_fix": [
|
3149
|
+
"region"
|
3150
|
+
],
|
3151
|
+
"will_fix": [
|
3152
|
+
"color-contrast"
|
3153
|
+
]
|
3154
|
+
}
|
3142
3155
|
}
|
3143
3156
|
]
|
3144
3157
|
},
|
@@ -5209,19 +5222,6 @@
|
|
5209
5222
|
]
|
5210
5223
|
}
|
5211
5224
|
},
|
5212
|
-
{
|
5213
|
-
"preview_path": "primer/alpha/segmented_control/full_width_large",
|
5214
|
-
"name": "full_width_large",
|
5215
|
-
"snapshot": "true",
|
5216
|
-
"skip_rules": {
|
5217
|
-
"wont_fix": [
|
5218
|
-
"region"
|
5219
|
-
],
|
5220
|
-
"will_fix": [
|
5221
|
-
"color-contrast"
|
5222
|
-
]
|
5223
|
-
}
|
5224
|
-
},
|
5225
5225
|
{
|
5226
5226
|
"preview_path": "primer/alpha/segmented_control/icons_and_text_small",
|
5227
5227
|
"name": "icons_and_text_small",
|
@@ -5248,19 +5248,6 @@
|
|
5248
5248
|
]
|
5249
5249
|
}
|
5250
5250
|
},
|
5251
|
-
{
|
5252
|
-
"preview_path": "primer/alpha/segmented_control/icons_and_text_large",
|
5253
|
-
"name": "icons_and_text_large",
|
5254
|
-
"snapshot": "true",
|
5255
|
-
"skip_rules": {
|
5256
|
-
"wont_fix": [
|
5257
|
-
"region"
|
5258
|
-
],
|
5259
|
-
"will_fix": [
|
5260
|
-
"color-contrast"
|
5261
|
-
]
|
5262
|
-
}
|
5263
|
-
},
|
5264
5251
|
{
|
5265
5252
|
"preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
|
5266
5253
|
"name": "trailing_label_width_small",
|
@@ -5287,19 +5274,6 @@
|
|
5287
5274
|
]
|
5288
5275
|
}
|
5289
5276
|
},
|
5290
|
-
{
|
5291
|
-
"preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
|
5292
|
-
"name": "trailing_label_width_large",
|
5293
|
-
"snapshot": "true",
|
5294
|
-
"skip_rules": {
|
5295
|
-
"wont_fix": [
|
5296
|
-
"region"
|
5297
|
-
],
|
5298
|
-
"will_fix": [
|
5299
|
-
"color-contrast"
|
5300
|
-
]
|
5301
|
-
}
|
5302
|
-
},
|
5303
5277
|
{
|
5304
5278
|
"preview_path": "primer/alpha/segmented_control/icon_only_small",
|
5305
5279
|
"name": "icon_only_small",
|
@@ -5326,19 +5300,6 @@
|
|
5326
5300
|
]
|
5327
5301
|
}
|
5328
5302
|
},
|
5329
|
-
{
|
5330
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_large",
|
5331
|
-
"name": "icon_only_large",
|
5332
|
-
"snapshot": "true",
|
5333
|
-
"skip_rules": {
|
5334
|
-
"wont_fix": [
|
5335
|
-
"region"
|
5336
|
-
],
|
5337
|
-
"will_fix": [
|
5338
|
-
"color-contrast"
|
5339
|
-
]
|
5340
|
-
}
|
5341
|
-
},
|
5342
5303
|
{
|
5343
5304
|
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
|
5344
5305
|
"name": "icon_only_full_width_small",
|
@@ -5365,19 +5326,6 @@
|
|
5365
5326
|
]
|
5366
5327
|
}
|
5367
5328
|
},
|
5368
|
-
{
|
5369
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
|
5370
|
-
"name": "icon_only_full_width_large",
|
5371
|
-
"snapshot": "false",
|
5372
|
-
"skip_rules": {
|
5373
|
-
"wont_fix": [
|
5374
|
-
"region"
|
5375
|
-
],
|
5376
|
-
"will_fix": [
|
5377
|
-
"color-contrast"
|
5378
|
-
]
|
5379
|
-
}
|
5380
|
-
},
|
5381
5329
|
{
|
5382
5330
|
"preview_path": "primer/alpha/segmented_control/with_link_as_tag",
|
5383
5331
|
"name": "with_link_as_tag",
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.18.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-
|
11
|
+
date: 2024-02-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -728,6 +728,7 @@ files:
|
|
728
728
|
- previews/primer/alpha/dialog_preview/autofocus_element.html.erb
|
729
729
|
- previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb
|
730
730
|
- previews/primer/alpha/dialog_preview/custom_header.html.erb
|
731
|
+
- previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb
|
731
732
|
- previews/primer/alpha/dialog_preview/nested_dialog.html.erb
|
732
733
|
- previews/primer/alpha/dialog_preview/scroll_container.html.erb
|
733
734
|
- previews/primer/alpha/dialog_preview/test.html.erb
|