openproject-primer_view_components 0.86.1 → 0.86.2
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 +12 -0
- 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/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +8 -12
- data/app/components/primer/open_project/pagination.rb +33 -28
- data/app/components/primer/open_project/sub_header/quick_filter.rb +26 -0
- data/app/components/primer/open_project/sub_header.html.erb +5 -7
- data/app/components/primer/open_project/sub_header.rb +10 -5
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/dropdown_preview.rb +12 -0
- data/previews/primer/open_project/pagination_preview.rb +5 -0
- data/previews/primer/open_project/sub_header_preview/playground.html.erb +31 -0
- data/previews/primer/open_project/sub_header_preview/quick_filters.html.erb +7 -0
- data/previews/primer/open_project/sub_header_preview.rb +10 -17
- data/static/arguments.json +9 -0
- data/static/audited_at.json +1 -0
- data/static/constants.json +6 -0
- data/static/info_arch.json +25 -6
- data/static/previews.json +6 -6
- data/static/statuses.json +1 -0
- metadata +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-
|
|
1
|
+
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-small);left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:calc(var(--base-size-12) - var(--borderWidth-thin))}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:calc(var(--base-size-12) - var(--borderWidth-thin))}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:calc(var(--base-size-8) + var(--borderWidth-thin))}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:calc(var(--base-size-8) + var(--borderWidth-thin));top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:calc(var(--base-size-8) + var(--borderWidth-thin));top:-14px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,
|
|
1
|
+
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,uCAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,6BAA8B,CAD9B,gDAAiD,CADjD,6CAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAsCF,CA1BE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAGE,sBAA+C,CAA/C,kDACF,CAGA,qBAIE,sBAA2C,CAA3C,8CACF,CAGA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAIE,4BAA6B,CAH7B,aAAc,CAEd,eAAgB,CADhB,sKAAuK,CAGvK,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,mEAAoE,CAHpE,aAAc,CACd,QAAS,CACT,mCAEF,CAEA,iBAGE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,+BAAgC,CADhC,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAwBF,CApBE,wBAME,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CAFZ,QAMF,CAEA,uBAME,kBAAyB,CAEzB,wCAAyC,CAHzC,SAAU,CADV,WAAY,CAFZ,uDAOF,CAGF,iBAEE,SAAU,CAGV,8BAA+B,CAD/B,YAAa,CAHb,KAAM,CAEN,UAsBF,CAlBE,wBAKE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CAFX,QAKF,CAEA,uBAKE,kBAAyB,CAEzB,yCAA0C,CAH1C,UAAW,CAFX,uDAMF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,gCAAiC,CAHjC,QAqCF,CAhCE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAQE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,+CAAgD,CAHhD,WAAY,CACZ,uBAQF,CAEA,wBASE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,2CAA4C,CAJ5C,WAAY,CAEZ,uDAQF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAeF,CAbE,wBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAiBF,CAdE,yBAIE,SAAU,CADV,wBAAyB,CADzB,SAGF,CAEA,wBAKE,SAAU,CADV,wDAAyD,CAFzD,SAIF,CAIA,yBAGE,uBAAwB,CADxB,SAEF,CAEA,wBAIE,uDAAwD,CAFxD,SAGF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock);\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: var(--base-size-2);\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-small);\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n /* stylelint-disable-next-line primer/borders */\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: var(--base-size-8);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: calc(var(--base-size-12) - var(--borderWidth-thin));\n /* stylelint-disable-next-line primer/spacing */\n right: -14px;\n left: auto;\n border-color: transparent;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: var(--base-size-8);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: calc(var(--base-size-12) - var(--borderWidth-thin));\n /* stylelint-disable-next-line primer/spacing */\n left: -14px;\n border-color: transparent;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: var(--base-size-4);\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -8px;\n left: var(--base-size-8);\n /* stylelint-disable-next-line primer/borders */\n border-top: 8px solid var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-right: 8px solid transparent;\n border-bottom: 0;\n /* stylelint-disable-next-line primer/borders */\n border-left: 8px solid transparent;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -7px;\n /* stylelint-disable-next-line primer/spacing */\n left: calc(var(--base-size-8) + var(--borderWidth-thin));\n /* stylelint-disable-next-line primer/borders, primer/colors */\n border-top: 7px solid var(--overlay-bgColor);\n /* stylelint-disable-next-line primer/borders */\n border-right: 7px solid transparent;\n border-bottom: 0;\n /* stylelint-disable-next-line primer/borders */\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n right: var(--base-size-8);\n left: auto;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n /* stylelint-disable-next-line primer/spacing */\n right: calc(var(--base-size-8) + var(--borderWidth-thin));\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n left: var(--base-size-8);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n /* stylelint-disable-next-line primer/spacing */\n left: calc(var(--base-size-8) + var(--borderWidth-thin));\n }\n}\n"]}
|
|
@@ -26,9 +26,7 @@
|
|
|
26
26
|
left: 0;
|
|
27
27
|
z-index: 100;
|
|
28
28
|
width: 160px;
|
|
29
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
30
29
|
padding-top: var(--control-small-paddingBlock);
|
|
31
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
32
30
|
padding-bottom: var(--control-small-paddingBlock);
|
|
33
31
|
margin-top: var(--base-size-2);
|
|
34
32
|
list-style: none;
|
|
@@ -36,7 +34,7 @@
|
|
|
36
34
|
background-clip: padding-box;
|
|
37
35
|
border: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
38
36
|
border-radius: var(--borderRadius-medium);
|
|
39
|
-
box-shadow: var(--shadow-floating-
|
|
37
|
+
box-shadow: var(--shadow-floating-small);
|
|
40
38
|
|
|
41
39
|
&::before,
|
|
42
40
|
&::after {
|
|
@@ -70,7 +68,6 @@
|
|
|
70
68
|
width: auto;
|
|
71
69
|
|
|
72
70
|
& .dropdown-item {
|
|
73
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
74
71
|
padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
|
|
75
72
|
overflow: visible;
|
|
76
73
|
text-overflow: inherit;
|
|
@@ -80,7 +77,6 @@
|
|
|
80
77
|
/* Dropdown items (can be links or buttons) */
|
|
81
78
|
.dropdown-item {
|
|
82
79
|
display: block;
|
|
83
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
84
80
|
padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
|
|
85
81
|
overflow: hidden;
|
|
86
82
|
color: var(--fgColor-default);
|
|
@@ -123,13 +119,11 @@
|
|
|
123
119
|
.dropdown-divider {
|
|
124
120
|
display: block;
|
|
125
121
|
height: 0;
|
|
126
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
127
122
|
margin: var(--stack-gap-condensed) 0;
|
|
128
123
|
border-top: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
129
124
|
}
|
|
130
125
|
|
|
131
126
|
.dropdown-header {
|
|
132
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
133
127
|
padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
|
|
134
128
|
font-size: var(--text-body-size-small);
|
|
135
129
|
color: var(--fgColor-muted);
|
|
@@ -163,7 +157,8 @@
|
|
|
163
157
|
}
|
|
164
158
|
|
|
165
159
|
&::after {
|
|
166
|
-
|
|
160
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
161
|
+
top: calc(var(--base-size-12) - var(--borderWidth-thin));
|
|
167
162
|
/* stylelint-disable-next-line primer/spacing */
|
|
168
163
|
right: -14px;
|
|
169
164
|
left: auto;
|
|
@@ -190,7 +185,8 @@
|
|
|
190
185
|
}
|
|
191
186
|
|
|
192
187
|
&::after {
|
|
193
|
-
|
|
188
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
189
|
+
top: calc(var(--base-size-12) - var(--borderWidth-thin));
|
|
194
190
|
/* stylelint-disable-next-line primer/spacing */
|
|
195
191
|
left: -14px;
|
|
196
192
|
border-color: transparent;
|
|
@@ -228,7 +224,7 @@
|
|
|
228
224
|
/* stylelint-disable-next-line primer/spacing */
|
|
229
225
|
bottom: -7px;
|
|
230
226
|
/* stylelint-disable-next-line primer/spacing */
|
|
231
|
-
left:
|
|
227
|
+
left: calc(var(--base-size-8) + var(--borderWidth-thin));
|
|
232
228
|
/* stylelint-disable-next-line primer/borders, primer/colors */
|
|
233
229
|
border-top: 7px solid var(--overlay-bgColor);
|
|
234
230
|
/* stylelint-disable-next-line primer/borders */
|
|
@@ -274,7 +270,7 @@
|
|
|
274
270
|
/* stylelint-disable-next-line primer/spacing */
|
|
275
271
|
top: -14px;
|
|
276
272
|
/* stylelint-disable-next-line primer/spacing */
|
|
277
|
-
right:
|
|
273
|
+
right: calc(var(--base-size-8) + var(--borderWidth-thin));
|
|
278
274
|
left: auto;
|
|
279
275
|
}
|
|
280
276
|
}
|
|
@@ -290,6 +286,6 @@
|
|
|
290
286
|
/* stylelint-disable-next-line primer/spacing */
|
|
291
287
|
top: -14px;
|
|
292
288
|
/* stylelint-disable-next-line primer/spacing */
|
|
293
|
-
left:
|
|
289
|
+
left: calc(var(--base-size-8) + var(--borderWidth-thin));
|
|
294
290
|
}
|
|
295
291
|
}
|
|
@@ -57,6 +57,10 @@ module Primer
|
|
|
57
57
|
end
|
|
58
58
|
end
|
|
59
59
|
|
|
60
|
+
def render?
|
|
61
|
+
page_count > 1
|
|
62
|
+
end
|
|
63
|
+
|
|
60
64
|
private
|
|
61
65
|
|
|
62
66
|
def cast_integer!(value, name)
|
|
@@ -81,36 +85,45 @@ module Primer
|
|
|
81
85
|
end
|
|
82
86
|
|
|
83
87
|
def build_pagination_model
|
|
84
|
-
|
|
85
|
-
next_page = next_page_item
|
|
86
|
-
|
|
87
|
-
return [prev_page, next_page] unless show_pages || page_count <= 0
|
|
88
|
+
pages = []
|
|
88
89
|
|
|
89
|
-
pages
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
paginated_number_items
|
|
93
|
-
end
|
|
90
|
+
pages << previous_page_item unless first_page?
|
|
91
|
+
pages.concat(number_page_items) if show_pages
|
|
92
|
+
pages << next_page_item unless last_page?
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
pages
|
|
96
95
|
end
|
|
97
96
|
|
|
98
97
|
def previous_page_item
|
|
99
98
|
{
|
|
100
99
|
type: PAGE_TYPE__PREV,
|
|
101
|
-
num: current_page - 1
|
|
102
|
-
disabled: current_page == 1
|
|
100
|
+
num: current_page - 1
|
|
103
101
|
}
|
|
104
102
|
end
|
|
105
103
|
|
|
106
104
|
def next_page_item
|
|
107
105
|
{
|
|
108
106
|
type: PAGE_TYPE__NEXT,
|
|
109
|
-
num: current_page + 1
|
|
110
|
-
disabled: current_page == page_count
|
|
107
|
+
num: current_page + 1
|
|
111
108
|
}
|
|
112
109
|
end
|
|
113
110
|
|
|
111
|
+
def first_page?
|
|
112
|
+
current_page == 1
|
|
113
|
+
end
|
|
114
|
+
|
|
115
|
+
def last_page?
|
|
116
|
+
current_page == page_count
|
|
117
|
+
end
|
|
118
|
+
|
|
119
|
+
def number_page_items
|
|
120
|
+
if all_pages_fit?
|
|
121
|
+
full_pagination_without_breaks
|
|
122
|
+
else
|
|
123
|
+
paginated_number_items
|
|
124
|
+
end
|
|
125
|
+
end
|
|
126
|
+
|
|
114
127
|
def full_pagination_without_breaks
|
|
115
128
|
pages = []
|
|
116
129
|
add_pages(pages, 1, page_count)
|
|
@@ -233,20 +246,12 @@ module Primer
|
|
|
233
246
|
key_string = key.to_s
|
|
234
247
|
content = I18n.t("pagination.#{key_string}")
|
|
235
248
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
else
|
|
243
|
-
props.merge!(
|
|
244
|
-
rel: key_string,
|
|
245
|
-
href: href_builder.call(page[:num]),
|
|
246
|
-
"aria-label": I18n.t("pagination.#{key_string}_page"),
|
|
247
|
-
**@link_arguments
|
|
248
|
-
)
|
|
249
|
-
end
|
|
249
|
+
props.merge!(
|
|
250
|
+
rel: key_string,
|
|
251
|
+
href: href_builder.call(page[:num]),
|
|
252
|
+
"aria-label": I18n.t("pagination.#{key_string}_page"),
|
|
253
|
+
**@link_arguments
|
|
254
|
+
)
|
|
250
255
|
|
|
251
256
|
when PAGE_TYPE__NUM
|
|
252
257
|
key = :"page-#{page[:num]}"
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module OpenProject
|
|
5
|
+
# Thin wrapper for quick filter slots that defers BaseComponent construction to render time,
|
|
6
|
+
# allowing system arguments (e.g. display) to be mutated in before_render.
|
|
7
|
+
# Do not use standalone
|
|
8
|
+
class SubHeader::QuickFilter < Primer::Component
|
|
9
|
+
status :open_project
|
|
10
|
+
|
|
11
|
+
def initialize(**system_arguments)
|
|
12
|
+
@system_arguments = system_arguments
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def merge_system_arguments!(**other_arguments)
|
|
16
|
+
@system_arguments[:aria] = merge_aria(@system_arguments, other_arguments)
|
|
17
|
+
@system_arguments[:data] = merge_data(@system_arguments, other_arguments)
|
|
18
|
+
@system_arguments.merge!(**other_arguments)
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
def call
|
|
22
|
+
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
end
|
|
@@ -7,15 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
<%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<%= quick_filter %>
|
|
13
|
-
<% end %>
|
|
14
|
-
|
|
15
|
-
<%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
|
|
16
|
-
<%= filter_button %>
|
|
10
|
+
<% quick_filters.each do |quick_filter| %>
|
|
11
|
+
<%= quick_filter %>
|
|
17
12
|
<% end %>
|
|
18
13
|
|
|
14
|
+
<%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
|
|
15
|
+
<%= filter_button %>
|
|
16
|
+
|
|
19
17
|
<%= segmented_control %>
|
|
20
18
|
|
|
21
19
|
<% if @segmented_control_block.present? %>
|
|
@@ -10,8 +10,8 @@ module Primer
|
|
|
10
10
|
SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
|
|
11
11
|
FILTER_EXPAND_BUTTON_TARGET_SELECTOR = "sub-header.filterExpandButton"
|
|
12
12
|
|
|
13
|
-
MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
|
|
14
|
-
DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
|
|
13
|
+
MOBILE_ACTIONS_DISPLAY = [:flex, :flex, :none].freeze
|
|
14
|
+
DESKTOP_ACTIONS_DISPLAY = [:none, :none, :flex].freeze
|
|
15
15
|
|
|
16
16
|
# A button or custom content that will render on the right-hand side of the component.
|
|
17
17
|
#
|
|
@@ -177,9 +177,8 @@ module Primer
|
|
|
177
177
|
deny_tag_argument(**kwargs)
|
|
178
178
|
kwargs[:tag] = :div
|
|
179
179
|
kwargs[:mr] ||= 2
|
|
180
|
-
kwargs[:display] = DESKTOP_ACTIONS_DISPLAY
|
|
181
180
|
|
|
182
|
-
|
|
181
|
+
QuickFilter.new(**kwargs)
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
renders_one :segmented_control, lambda { |**system_arguments, &block|
|
|
@@ -235,7 +234,7 @@ module Primer
|
|
|
235
234
|
end
|
|
236
235
|
|
|
237
236
|
def before_render
|
|
238
|
-
if quick_filters.
|
|
237
|
+
if quick_filters.size > 1 && filter_button.nil?
|
|
239
238
|
raise ArgumentError, "You must provide a filter_button when using quick_filters."
|
|
240
239
|
end
|
|
241
240
|
|
|
@@ -243,6 +242,12 @@ module Primer
|
|
|
243
242
|
raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
|
|
244
243
|
end
|
|
245
244
|
|
|
245
|
+
if quick_filters.size > 1
|
|
246
|
+
quick_filters.each do |qf|
|
|
247
|
+
qf.merge_system_arguments!(display: DESKTOP_ACTIONS_DISPLAY)
|
|
248
|
+
end
|
|
249
|
+
end
|
|
250
|
+
|
|
246
251
|
@system_arguments[:classes] = class_names(
|
|
247
252
|
@system_arguments[:classes],
|
|
248
253
|
"SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?
|
|
@@ -54,6 +54,8 @@ module Primer
|
|
|
54
54
|
# @!group Direction
|
|
55
55
|
#
|
|
56
56
|
# @label Direction e
|
|
57
|
+
#
|
|
58
|
+
# @snapshot interactive
|
|
57
59
|
def direction_e
|
|
58
60
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
59
61
|
component.with_button { "Dropdown" }
|
|
@@ -66,6 +68,8 @@ module Primer
|
|
|
66
68
|
end
|
|
67
69
|
|
|
68
70
|
# @label Direction ne
|
|
71
|
+
#
|
|
72
|
+
# @snapshot interactive
|
|
69
73
|
def direction_ne
|
|
70
74
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
71
75
|
component.with_button { "Dropdown" }
|
|
@@ -78,6 +82,8 @@ module Primer
|
|
|
78
82
|
end
|
|
79
83
|
|
|
80
84
|
# @label Direction s
|
|
85
|
+
#
|
|
86
|
+
# @snapshot interactive
|
|
81
87
|
def direction_s
|
|
82
88
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
83
89
|
component.with_button { "Dropdown" }
|
|
@@ -90,6 +96,8 @@ module Primer
|
|
|
90
96
|
end
|
|
91
97
|
|
|
92
98
|
# @label Direction se
|
|
99
|
+
#
|
|
100
|
+
# @snapshot interactive
|
|
93
101
|
def direction_se
|
|
94
102
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
95
103
|
component.with_button { "Dropdown" }
|
|
@@ -102,6 +110,8 @@ module Primer
|
|
|
102
110
|
end
|
|
103
111
|
|
|
104
112
|
# @label Direction sw
|
|
113
|
+
#
|
|
114
|
+
# @snapshot interactive
|
|
105
115
|
def direction_sw
|
|
106
116
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
107
117
|
component.with_button { "Dropdown" }
|
|
@@ -114,6 +124,8 @@ module Primer
|
|
|
114
124
|
end
|
|
115
125
|
|
|
116
126
|
# @label Direction w
|
|
127
|
+
#
|
|
128
|
+
# @snapshot interactive
|
|
117
129
|
def direction_w
|
|
118
130
|
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
|
|
119
131
|
component.with_button { "Dropdown" }
|
|
@@ -23,6 +23,10 @@ module Primer
|
|
|
23
23
|
margin_page_count = (margin_page_count.presence || 1).to_i
|
|
24
24
|
surrounding_page_count = (surrounding_page_count.presence || 2).to_i
|
|
25
25
|
|
|
26
|
+
# Ensure current_page doesn't exceed page_count
|
|
27
|
+
current_page = [current_page, page_count].min
|
|
28
|
+
current_page = [current_page, 1].max # Ensure at least 1
|
|
29
|
+
|
|
26
30
|
render(
|
|
27
31
|
Primer::OpenProject::Pagination.new(
|
|
28
32
|
current_page: current_page,
|
|
@@ -46,6 +50,7 @@ module Primer
|
|
|
46
50
|
)
|
|
47
51
|
)
|
|
48
52
|
end
|
|
53
|
+
|
|
49
54
|
#
|
|
50
55
|
# @!endgroup
|
|
51
56
|
end
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<%= render(Primer::OpenProject::SubHeader.new(collapsed_search: collapsed_search)) do |component|
|
|
2
|
+
component.with_filter_input(name: "filter",
|
|
3
|
+
label: "Filter",
|
|
4
|
+
show_clear_button: show_clear_button,
|
|
5
|
+
value: value) if show_filter_input
|
|
6
|
+
|
|
7
|
+
component.with_filter_button(mobile_label: "All filters") do
|
|
8
|
+
"All filters"
|
|
9
|
+
end if show_filter_button
|
|
10
|
+
|
|
11
|
+
component.with_text { text } unless text.nil?
|
|
12
|
+
|
|
13
|
+
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
|
|
14
|
+
"Create"
|
|
15
|
+
end if show_action_button
|
|
16
|
+
|
|
17
|
+
if show_quick_filter
|
|
18
|
+
component.with_quick_filter do
|
|
19
|
+
render(Primer::Alpha::SelectPanel.new(title: "Version",
|
|
20
|
+
select_variant: :single,
|
|
21
|
+
fetch_strategy: :local,
|
|
22
|
+
dynamic_label: true,
|
|
23
|
+
dynamic_label_prefix: "Version")) do |panel|
|
|
24
|
+
panel.with_show_button { "Version" }
|
|
25
|
+
panel.with_item(label: "1.0")
|
|
26
|
+
panel.with_item(label: "2.0")
|
|
27
|
+
panel.with_item(label: "2.1")
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
end
|
|
31
|
+
end %>
|
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
"All filters"
|
|
6
6
|
end
|
|
7
7
|
|
|
8
|
+
component.with_quick_filter do
|
|
9
|
+
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
|
|
10
|
+
component.with_item(label: "Monthly", selected: true)
|
|
11
|
+
component.with_item(label: "Yearly")
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
|
|
8
15
|
component.with_quick_filter do
|
|
9
16
|
render(Primer::Alpha::SelectPanel.new(title: "Version",
|
|
10
17
|
select_variant: :single,
|
|
@@ -10,6 +10,7 @@ module Primer
|
|
|
10
10
|
# @label Playground
|
|
11
11
|
# @param show_filter_input toggle
|
|
12
12
|
# @param show_filter_button toggle
|
|
13
|
+
# @param show_quick_filter toggle
|
|
13
14
|
# @param show_action_button toggle
|
|
14
15
|
# @param show_clear_button toggle
|
|
15
16
|
# @param collapsed_search toggle
|
|
@@ -19,28 +20,20 @@ module Primer
|
|
|
19
20
|
show_filter_input: true,
|
|
20
21
|
show_clear_button: true,
|
|
21
22
|
show_filter_button: true,
|
|
23
|
+
show_quick_filter: true,
|
|
22
24
|
show_action_button: true,
|
|
23
25
|
collapsed_search: false,
|
|
24
26
|
text: nil,
|
|
25
27
|
value: nil
|
|
26
28
|
)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"Filter"
|
|
36
|
-
end if show_filter_button
|
|
37
|
-
|
|
38
|
-
component.with_text { text } unless text.nil?
|
|
39
|
-
|
|
40
|
-
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
|
|
41
|
-
"Create"
|
|
42
|
-
end if show_action_button
|
|
43
|
-
end
|
|
29
|
+
render_with_template(locals: {show_filter_input: show_filter_input,
|
|
30
|
+
show_clear_button: show_clear_button,
|
|
31
|
+
show_filter_button: show_filter_button,
|
|
32
|
+
show_quick_filter: show_quick_filter,
|
|
33
|
+
show_action_button: show_action_button,
|
|
34
|
+
collapsed_search: collapsed_search,
|
|
35
|
+
text: text,
|
|
36
|
+
value: value})
|
|
44
37
|
end
|
|
45
38
|
|
|
46
39
|
# @label Default
|
data/static/arguments.json
CHANGED
|
@@ -6599,6 +6599,15 @@
|
|
|
6599
6599
|
}
|
|
6600
6600
|
]
|
|
6601
6601
|
},
|
|
6602
|
+
{
|
|
6603
|
+
"component": "OpenProject::SubHeader::QuickFilter",
|
|
6604
|
+
"status": "open_project",
|
|
6605
|
+
"a11y_reviewed": false,
|
|
6606
|
+
"short_name": "OpenProjectSubHeaderQuickFilter",
|
|
6607
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
|
|
6608
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
|
|
6609
|
+
"parameters": []
|
|
6610
|
+
},
|
|
6602
6611
|
{
|
|
6603
6612
|
"component": "OpenProject::SubHeader::SegmentedControl",
|
|
6604
6613
|
"status": "open_project",
|
data/static/audited_at.json
CHANGED
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
"Primer::OpenProject::SubHeader::Button": "",
|
|
174
174
|
"Primer::OpenProject::SubHeader::ButtonGroup": "",
|
|
175
175
|
"Primer::OpenProject::SubHeader::Menu": "",
|
|
176
|
+
"Primer::OpenProject::SubHeader::QuickFilter": "",
|
|
176
177
|
"Primer::OpenProject::SubHeader::SegmentedControl": "2023-02-01",
|
|
177
178
|
"Primer::OpenProject::ZenModeButton": "",
|
|
178
179
|
"Primer::Tooltip": "",
|
data/static/constants.json
CHANGED
|
@@ -1984,16 +1984,19 @@
|
|
|
1984
1984
|
"Button": "Primer::OpenProject::SubHeader::Button",
|
|
1985
1985
|
"ButtonGroup": "Primer::OpenProject::SubHeader::ButtonGroup",
|
|
1986
1986
|
"DESKTOP_ACTIONS_DISPLAY": [
|
|
1987
|
+
"none",
|
|
1987
1988
|
"none",
|
|
1988
1989
|
"flex"
|
|
1989
1990
|
],
|
|
1990
1991
|
"FILTER_EXPAND_BUTTON_TARGET_SELECTOR": "sub-header.filterExpandButton",
|
|
1991
1992
|
"GeneratedSlotMethods": "Primer::OpenProject::SubHeader::GeneratedSlotMethods",
|
|
1992
1993
|
"MOBILE_ACTIONS_DISPLAY": [
|
|
1994
|
+
"flex",
|
|
1993
1995
|
"flex",
|
|
1994
1996
|
"none"
|
|
1995
1997
|
],
|
|
1996
1998
|
"Menu": "Primer::OpenProject::SubHeader::Menu",
|
|
1999
|
+
"QuickFilter": "Primer::OpenProject::SubHeader::QuickFilter",
|
|
1997
2000
|
"SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter",
|
|
1998
2001
|
"SegmentedControl": "Primer::OpenProject::SubHeader::SegmentedControl"
|
|
1999
2002
|
},
|
|
@@ -2006,6 +2009,9 @@
|
|
|
2006
2009
|
"Primer::OpenProject::SubHeader::Menu": {
|
|
2007
2010
|
"GeneratedSlotMethods": "Primer::OpenProject::SubHeader::Menu::GeneratedSlotMethods"
|
|
2008
2011
|
},
|
|
2012
|
+
"Primer::OpenProject::SubHeader::QuickFilter": {
|
|
2013
|
+
"GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickFilter::GeneratedSlotMethods"
|
|
2014
|
+
},
|
|
2009
2015
|
"Primer::OpenProject::SubHeader::SegmentedControl": {
|
|
2010
2016
|
"GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"
|
|
2011
2017
|
},
|