openproject-primer_view_components 0.91.3 → 0.91.4
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 +6 -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/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +5 -3
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +29 -16
- data/app/components/primer/beta/border_box.rb +6 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/file_tree_view_preview.rb +2 -13
- data/previews/primer/alpha/tree_view_preview.rb +2 -13
- data/previews/primer/beta/border_box_preview.rb +24 -0
- data/previews/primer/open_project/border_box/collapsible_header_preview.rb +2 -12
- data/previews/primer/open_project/filterable_tree_view_preview.rb +2 -15
- data/previews/primer/preview_helpers.rb +16 -0
- data/static/classes.json +6 -0
- data/static/classnames.cjs +2 -0
- data/static/classnames.js +2 -0
- data/static/info_arch.json +13 -0
- data/static/previews.json +13 -0
- metadata +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);line-height:1.25}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{padding:var(--stack-padding-spacious);line-height:1.25}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){padding:var(--stack-padding-spacious);margin:calc(var(--stack-gap-spacious)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{padding:var(--stack-padding-normal);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{padding:var(--stack-padding-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-default)}.Box-body:last-
|
|
1
|
+
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);line-height:1.25}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{padding:var(--stack-padding-spacious);line-height:1.25}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){padding:var(--stack-padding-spacious);margin:calc(var(--stack-gap-spacious)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{padding:var(--stack-padding-normal);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{padding:var(--stack-padding-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-default)}.Box-body:first-child{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-body:last-child,.Box-header:last-child{margin-bottom:calc(var(--borderWidth-thin)*-1);border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);list-style-type:none;border-top:var(--borderWidth-thin) solid var(--borderColor-muted)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted)}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted)}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted)}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted)}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);border-top:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.Box-list--roundedTop>.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-list--roundedBottom>.Box-row:last-of-type{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-of-type{border-color:var(--borderColor-danger-emphasis)}.Box-header--blue{background-color:var(--bgColor-accent-muted);border-color:var(--borderColor-accent-muted)}.Box-row--yellow{background-color:var(--bgColor-attention-muted)}.Box-row--blue{background-color:var(--bgColor-accent-muted)}.Box-row--gray{background-color:var(--bgColor-muted)}.Box-btn-octicon.btn-octicon{padding:var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-small-gap-spacious)*-1);line-height:var(--text-title-lineHeight-large)}
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
".Box-header",
|
|
18
18
|
".Box-title",
|
|
19
19
|
".Box-body",
|
|
20
|
-
".Box-body:
|
|
20
|
+
".Box-body:first-child",
|
|
21
|
+
".Box-body:last-child",
|
|
22
|
+
".Box-header:last-child",
|
|
21
23
|
".Box-row",
|
|
22
|
-
".Box-row:first-of-type",
|
|
23
|
-
".Box-row:last-of-type",
|
|
24
24
|
".Box-row.Box-row--unread",
|
|
25
25
|
".Box-row.unread",
|
|
26
26
|
".Box-row.navigation-focus .Box-row--drag-button",
|
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
".Box-row-link:hover",
|
|
37
37
|
".Box-row--drag-button",
|
|
38
38
|
".Box-footer",
|
|
39
|
+
".Box-list--roundedTop>.Box-row:first-of-type",
|
|
40
|
+
".Box-list--roundedBottom>.Box-row:last-of-type",
|
|
39
41
|
".Box--scrollable",
|
|
40
42
|
".Box--blue",
|
|
41
43
|
".Box--blue .Box-header",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,wCACF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDACE,kGAAmG,CACnG,wGAA6G,CAC7G,gBACF,CAGF,yBACE,kEACF,CAIA,2BACE,qCAAsC,CACtC,gBACF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDACE,qCAAsC,CACtC,yCACF,CAGF,wBACE,qCACF,CAGF,YACE,mCAAoC,CACpC,0EAA+E,CAC/E,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,iDAAkD,CAClD,kDACF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UACE,mCAAoC,CACpC,
|
|
1
|
+
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,wCACF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDACE,kGAAmG,CACnG,wGAA6G,CAC7G,gBACF,CAGF,yBACE,kEACF,CAIA,2BACE,qCAAsC,CACtC,gBACF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDACE,qCAAsC,CACtC,yCACF,CAGF,wBACE,qCACF,CAGF,YACE,mCAAoC,CACpC,0EAA+E,CAC/E,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,iDAAkD,CAClD,kDACF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UACE,mCAAoC,CACpC,sEACF,CAGA,sBACE,iDAAkD,CAClD,kDACF,CAGA,4CACE,8CAAiD,CACjD,qDAAsD,CACtD,oDACF,CAGA,SACE,mCAAoC,CACpC,2CAA8C,CAC9C,oBAAqB,CAGrB,iEAuCF,CAnCE,yCAIE,2DACF,CAIE,gDACE,2BAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,qCAMF,CAHE,6DACE,SACF,CAMJ,sCACE,qCACF,CAIA,sCACE,4CACF,CAIA,2BACE,qCACF,CAIA,2BACE,4CACF,CAOA,yBADF,cAEI,4BAQJ,CALI,kCAFA,4BAAqB,CAArB,oBAKA,CAHA,oBACE,2BAEF,CACF,CAKF,sBACE,SACF,CAEA,YACE,mCAAoC,CACpC,2CAA8C,CAG9C,mEAAyC,CACzC,uEACF,CAQA,6CACE,iDAAkD,CAClD,kDACF,CAGA,+CACE,qDAAsD,CACtD,oDACF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,4CAKA,CAHA,uBACE,4CAEF,CAUA,gEACE,4CACF,CAeE,+FACE,+CACF,CAIJ,kBACE,4CAA6C,CAC7C,4CACF,CAIA,iBACE,+CACF,CAEA,eACE,4CACF,CAEA,eACE,qCACF,CAKE,6BACE,oDAAqD,CACrD,sDAAyD,CACzD,8CACF","file":"border_box.css","sourcesContent":["/* stylelint-disable primer/spacing */\n/* stylelint-disable primer/typography */\n\n/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n background-color: var(--bgColor-default);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n line-height: 1.25;\n\n & .Box-header {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-body {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: 1.25;\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n}\n\n.Box--spacious {\n & .Box-header {\n padding: var(--stack-padding-spacious);\n line-height: 1.25;\n }\n\n & .Box-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Box-body {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--stack-padding-spacious);\n margin: calc(var(--stack-gap-spacious) * -1);\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-spacious);\n }\n}\n\n.Box-header {\n padding: var(--stack-padding-normal);\n margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n background-color: var(--bgColor-muted);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n padding: var(--stack-padding-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Ensures a top border/background doesn't poke out when the body is the first element. */\n.Box-body:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n}\n\n/* Ensures bottom-border doesn't poke out when the element is the last element. */\n.Box-header:last-child, .Box-body:last-child {\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n}\n\n/* Box rows */\n.Box-row {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1);\n list-style-type: none; /* To account for applying Box component to a list */\n border-top-color: var(--borderColor-muted);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n\n /* Adds a blue vertical line to the left of the row\n ** For indicating a row item is unread */\n &.Box-row--unread,\n /* .unread to be deprecated with .Box-row-unread */\n &.unread {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n }\n\n &.navigation-focus {\n /* Focus styles for when drag icon */\n & .Box-row--drag-button {\n color: var(--fgColor-accent);\n cursor: grab;\n opacity: 100;\n }\n\n /* Grabbing while row is dragged */\n &.is-dragging .Box-row--drag-button {\n cursor: grabbing;\n }\n\n /* Row dragging styles */\n &.sortable-chosen {\n background-color: var(--bgColor-muted);\n }\n\n /* Makes dragging row background gray */\n &.sortable-ghost {\n background-color: var(--bgColor-muted);\n\n /* Hides contents of row while dragging so row looks solid gray */\n & .Box-row--drag-hide {\n opacity: 0;\n }\n }\n }\n}\n\n.Box-row--focus-gray {\n &.navigation-focus {\n background-color: var(--bgColor-muted);\n }\n}\n\n.Box-row--focus-blue {\n &.navigation-focus {\n background-color: var(--bgColor-accent-muted);\n }\n}\n\n.Box-row--hover-gray {\n &:hover {\n background-color: var(--bgColor-muted);\n }\n}\n\n.Box-row--hover-blue {\n &:hover {\n background-color: var(--bgColor-accent-muted);\n }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n @media (min-width: 768px) {\n color: var(--fgColor-default);\n text-decoration: none;\n\n &:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n }\n }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n opacity: 0;\n}\n\n.Box-footer {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n border-top-color: var(--borderColor-default);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Outer corners for rows.\n** The list only claims a corner when Ruby says it sits at that edge of the box\n** (`Box-list--roundedTop` / `Box-list--roundedBottom`, set in\n** BorderBox#before_render), so header/body/footer automatically win when present. */\n\n/* First row of a list that starts the box */\n.Box-list--roundedTop > .Box-row:first-of-type {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n}\n\n/* Last row of a list that ends the box */\n.Box-list--roundedBottom > .Box-row:last-of-type {\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n max-height: 324px;\n overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n border-color: var(--borderColor-accent-muted);\n\n & .Box-header {\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-body {\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-row {\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-footer {\n border-color: var(--borderColor-accent-muted);\n }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n border-color: var(--borderColor-danger-emphasis);\n\n & .Box-row {\n &:first-of-type {\n border-color: var(--borderColor-danger-emphasis);\n }\n }\n\n & .Box-body {\n &:last-of-type {\n border-color: var(--borderColor-danger-emphasis);\n }\n }\n}\n\n.Box-header--blue {\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */\n }\n}\n"]}
|
|
@@ -90,13 +90,19 @@
|
|
|
90
90
|
.Box-body {
|
|
91
91
|
padding: var(--stack-padding-normal);
|
|
92
92
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
93
|
+
}
|
|
93
94
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
95
|
+
/* Ensures a top border/background doesn't poke out when the body is the first element. */
|
|
96
|
+
.Box-body:first-child {
|
|
97
|
+
border-top-left-radius: var(--borderRadius-medium);
|
|
98
|
+
border-top-right-radius: var(--borderRadius-medium);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Ensures bottom-border doesn't poke out when the element is the last element. */
|
|
102
|
+
.Box-header:last-child, .Box-body:last-child {
|
|
103
|
+
margin-bottom: calc(var(--borderWidth-thin) * -1);
|
|
104
|
+
border-bottom-right-radius: var(--borderRadius-medium);
|
|
105
|
+
border-bottom-left-radius: var(--borderRadius-medium);
|
|
100
106
|
}
|
|
101
107
|
|
|
102
108
|
/* Box rows */
|
|
@@ -108,16 +114,6 @@
|
|
|
108
114
|
border-top-style: solid;
|
|
109
115
|
border-top-width: var(--borderWidth-thin);
|
|
110
116
|
|
|
111
|
-
&:first-of-type {
|
|
112
|
-
border-top-left-radius: var(--borderRadius-medium);
|
|
113
|
-
border-top-right-radius: var(--borderRadius-medium);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
&:last-of-type {
|
|
117
|
-
border-bottom-right-radius: var(--borderRadius-medium);
|
|
118
|
-
border-bottom-left-radius: var(--borderRadius-medium);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
117
|
/* Adds a blue vertical line to the left of the row
|
|
122
118
|
** For indicating a row item is unread */
|
|
123
119
|
&.Box-row--unread,
|
|
@@ -211,6 +207,23 @@
|
|
|
211
207
|
border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
|
|
212
208
|
}
|
|
213
209
|
|
|
210
|
+
/* Outer corners for rows.
|
|
211
|
+
** The list only claims a corner when Ruby says it sits at that edge of the box
|
|
212
|
+
** (`Box-list--roundedTop` / `Box-list--roundedBottom`, set in
|
|
213
|
+
** BorderBox#before_render), so header/body/footer automatically win when present. */
|
|
214
|
+
|
|
215
|
+
/* First row of a list that starts the box */
|
|
216
|
+
.Box-list--roundedTop > .Box-row:first-of-type {
|
|
217
|
+
border-top-left-radius: var(--borderRadius-medium);
|
|
218
|
+
border-top-right-radius: var(--borderRadius-medium);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Last row of a list that ends the box */
|
|
222
|
+
.Box-list--roundedBottom > .Box-row:last-of-type {
|
|
223
|
+
border-bottom-right-radius: var(--borderRadius-medium);
|
|
224
|
+
border-bottom-left-radius: var(--borderRadius-medium);
|
|
225
|
+
}
|
|
226
|
+
|
|
214
227
|
/* Option for a box with scrolling content */
|
|
215
228
|
.Box--scrollable {
|
|
216
229
|
max-height: 324px;
|
|
@@ -100,6 +100,12 @@ module Primer
|
|
|
100
100
|
private
|
|
101
101
|
|
|
102
102
|
def before_render
|
|
103
|
+
@list_arguments[:classes] = class_names(
|
|
104
|
+
@list_arguments[:classes],
|
|
105
|
+
"Box-list--roundedTop" => header.blank? && body.blank?,
|
|
106
|
+
"Box-list--roundedBottom" => footer.blank?
|
|
107
|
+
)
|
|
108
|
+
|
|
103
109
|
return unless header
|
|
104
110
|
|
|
105
111
|
@list_arguments[:aria] = merge_aria(
|
|
@@ -4,6 +4,8 @@ module Primer
|
|
|
4
4
|
module Alpha
|
|
5
5
|
# @label FileTreeView
|
|
6
6
|
class FileTreeViewPreview < ViewComponent::Preview
|
|
7
|
+
include Primer::PreviewHelpers
|
|
8
|
+
|
|
7
9
|
# @label Default
|
|
8
10
|
#
|
|
9
11
|
# @snapshot interactive
|
|
@@ -30,19 +32,6 @@ module Primer
|
|
|
30
32
|
|
|
31
33
|
private
|
|
32
34
|
|
|
33
|
-
def coerce_bool(value)
|
|
34
|
-
case value
|
|
35
|
-
when true, false
|
|
36
|
-
value
|
|
37
|
-
when "true"
|
|
38
|
-
true
|
|
39
|
-
when "false"
|
|
40
|
-
false
|
|
41
|
-
else
|
|
42
|
-
false
|
|
43
|
-
end
|
|
44
|
-
end
|
|
45
|
-
|
|
46
35
|
def populate(node, data, node_arguments)
|
|
47
36
|
return unless data
|
|
48
37
|
|
|
@@ -4,6 +4,8 @@ module Primer
|
|
|
4
4
|
module Alpha
|
|
5
5
|
# @label TreeView
|
|
6
6
|
class TreeViewPreview < ViewComponent::Preview
|
|
7
|
+
include Primer::PreviewHelpers
|
|
8
|
+
|
|
7
9
|
# @label Default
|
|
8
10
|
#
|
|
9
11
|
# @snapshot interactive
|
|
@@ -216,19 +218,6 @@ module Primer
|
|
|
216
218
|
|
|
217
219
|
private
|
|
218
220
|
|
|
219
|
-
def coerce_bool(value)
|
|
220
|
-
case value
|
|
221
|
-
when true, false
|
|
222
|
-
value
|
|
223
|
-
when "true"
|
|
224
|
-
true
|
|
225
|
-
when "false"
|
|
226
|
-
false
|
|
227
|
-
else
|
|
228
|
-
false
|
|
229
|
-
end
|
|
230
|
-
end
|
|
231
|
-
|
|
232
221
|
def populate(node, data, node_arguments)
|
|
233
222
|
return unless data
|
|
234
223
|
|
|
@@ -4,6 +4,8 @@ module Primer
|
|
|
4
4
|
module Beta
|
|
5
5
|
# @label BorderBox
|
|
6
6
|
class BorderBoxPreview < ViewComponent::Preview
|
|
7
|
+
include Primer::PreviewHelpers
|
|
8
|
+
|
|
7
9
|
# @label Playground
|
|
8
10
|
#
|
|
9
11
|
# @param list_id text
|
|
@@ -57,6 +59,28 @@ module Primer
|
|
|
57
59
|
end
|
|
58
60
|
end
|
|
59
61
|
|
|
62
|
+
# Only the first and last element may round the corners of the box.
|
|
63
|
+
# Toggle the slots to check that the rounding follows.
|
|
64
|
+
#
|
|
65
|
+
# @label Roundedness playground
|
|
66
|
+
# @hidden
|
|
67
|
+
# @param header [Boolean] toggle
|
|
68
|
+
# @param body [Boolean] toggle
|
|
69
|
+
# @param rows [Boolean] toggle
|
|
70
|
+
# @param footer [Boolean] toggle
|
|
71
|
+
def roundedness_playground(header: true, body: false, rows: true, footer: false)
|
|
72
|
+
render(Primer::Beta::BorderBox.new) do |component|
|
|
73
|
+
component.with_header { "Header" } if coerce_bool(header)
|
|
74
|
+
component.with_body { "Body" } if coerce_bool(body)
|
|
75
|
+
if coerce_bool(rows)
|
|
76
|
+
component.with_row { "Row one" }
|
|
77
|
+
component.with_row { "Row two" }
|
|
78
|
+
component.with_row { "Row three" }
|
|
79
|
+
end
|
|
80
|
+
component.with_footer { "Footer" } if coerce_bool(footer)
|
|
81
|
+
end
|
|
82
|
+
end
|
|
83
|
+
|
|
60
84
|
# @!group Padding
|
|
61
85
|
#
|
|
62
86
|
# @label Default
|
|
@@ -8,6 +8,8 @@ module Primer
|
|
|
8
8
|
module BorderBox
|
|
9
9
|
# @label CollapsibleHeader
|
|
10
10
|
class CollapsibleHeaderPreview < ViewComponent::Preview
|
|
11
|
+
include Primer::PreviewHelpers
|
|
12
|
+
|
|
11
13
|
# @label Playground
|
|
12
14
|
# @param title [String]
|
|
13
15
|
# @param description [String]
|
|
@@ -91,18 +93,6 @@ module Primer
|
|
|
91
93
|
}
|
|
92
94
|
)
|
|
93
95
|
end
|
|
94
|
-
|
|
95
|
-
private
|
|
96
|
-
|
|
97
|
-
# URL params are always strings; coerce to actual booleans before passing to the component.
|
|
98
|
-
def coerce_bool(value)
|
|
99
|
-
case value
|
|
100
|
-
when true, false then value
|
|
101
|
-
when "true" then true
|
|
102
|
-
when "false" then false
|
|
103
|
-
else false
|
|
104
|
-
end
|
|
105
|
-
end
|
|
106
96
|
end
|
|
107
97
|
end
|
|
108
98
|
end
|
|
@@ -4,6 +4,8 @@ module Primer
|
|
|
4
4
|
module OpenProject
|
|
5
5
|
# @label FilterableTreeView
|
|
6
6
|
class FilterableTreeViewPreview < ViewComponent::Preview
|
|
7
|
+
include Primer::PreviewHelpers
|
|
8
|
+
|
|
7
9
|
# @label Playground
|
|
8
10
|
#
|
|
9
11
|
# @param expanded [Boolean] toggle
|
|
@@ -170,21 +172,6 @@ module Primer
|
|
|
170
172
|
expanded: coerce_bool(expanded)
|
|
171
173
|
})
|
|
172
174
|
end
|
|
173
|
-
|
|
174
|
-
private
|
|
175
|
-
|
|
176
|
-
def coerce_bool(value)
|
|
177
|
-
case value
|
|
178
|
-
when true, false
|
|
179
|
-
value
|
|
180
|
-
when "true"
|
|
181
|
-
true
|
|
182
|
-
when "false"
|
|
183
|
-
false
|
|
184
|
-
else
|
|
185
|
-
false
|
|
186
|
-
end
|
|
187
|
-
end
|
|
188
175
|
end
|
|
189
176
|
end
|
|
190
177
|
end
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
# :nodoc:
|
|
5
|
+
module PreviewHelpers
|
|
6
|
+
# Lookbook toggle params arrive as the strings "true"/"false" rather than actual booleans.
|
|
7
|
+
def coerce_bool(value)
|
|
8
|
+
case value
|
|
9
|
+
when true, false then value
|
|
10
|
+
when "true" then true
|
|
11
|
+
when "false" then false
|
|
12
|
+
else false
|
|
13
|
+
end
|
|
14
|
+
end
|
|
15
|
+
end
|
|
16
|
+
end
|
data/static/classes.json
CHANGED
|
@@ -148,6 +148,12 @@
|
|
|
148
148
|
"Box-header--blue": [
|
|
149
149
|
"Primer::Beta::BorderBox"
|
|
150
150
|
],
|
|
151
|
+
"Box-list--roundedBottom": [
|
|
152
|
+
"Primer::Beta::BorderBox"
|
|
153
|
+
],
|
|
154
|
+
"Box-list--roundedTop": [
|
|
155
|
+
"Primer::Beta::BorderBox"
|
|
156
|
+
],
|
|
151
157
|
"Box-row": [
|
|
152
158
|
"Primer::Beta::BorderBox"
|
|
153
159
|
],
|
data/static/classnames.cjs
CHANGED
data/static/classnames.js
CHANGED
data/static/info_arch.json
CHANGED
|
@@ -13690,6 +13690,19 @@
|
|
|
13690
13690
|
]
|
|
13691
13691
|
}
|
|
13692
13692
|
},
|
|
13693
|
+
{
|
|
13694
|
+
"preview_path": "primer/beta/border_box/roundedness_playground",
|
|
13695
|
+
"name": "roundedness_playground",
|
|
13696
|
+
"snapshot": "false",
|
|
13697
|
+
"skip_rules": {
|
|
13698
|
+
"wont_fix": [
|
|
13699
|
+
"region"
|
|
13700
|
+
],
|
|
13701
|
+
"will_fix": [
|
|
13702
|
+
"color-contrast"
|
|
13703
|
+
]
|
|
13704
|
+
}
|
|
13705
|
+
},
|
|
13693
13706
|
{
|
|
13694
13707
|
"preview_path": "primer/beta/border_box/padding_default",
|
|
13695
13708
|
"name": "padding_default",
|
data/static/previews.json
CHANGED
|
@@ -5971,6 +5971,19 @@
|
|
|
5971
5971
|
]
|
|
5972
5972
|
}
|
|
5973
5973
|
},
|
|
5974
|
+
{
|
|
5975
|
+
"preview_path": "primer/beta/border_box/roundedness_playground",
|
|
5976
|
+
"name": "roundedness_playground",
|
|
5977
|
+
"snapshot": "false",
|
|
5978
|
+
"skip_rules": {
|
|
5979
|
+
"wont_fix": [
|
|
5980
|
+
"region"
|
|
5981
|
+
],
|
|
5982
|
+
"will_fix": [
|
|
5983
|
+
"color-contrast"
|
|
5984
|
+
]
|
|
5985
|
+
}
|
|
5986
|
+
},
|
|
5974
5987
|
{
|
|
5975
5988
|
"preview_path": "primer/beta/border_box/padding_default",
|
|
5976
5989
|
"name": "padding_default",
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: openproject-primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.91.
|
|
4
|
+
version: 0.91.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
@@ -1279,6 +1279,7 @@ files:
|
|
|
1279
1279
|
- previews/primer/open_project/sub_header_preview/playground.html.erb
|
|
1280
1280
|
- previews/primer/open_project/sub_header_preview/quick_filters.html.erb
|
|
1281
1281
|
- previews/primer/open_project/zen_mode_button_preview.rb
|
|
1282
|
+
- previews/primer/preview_helpers.rb
|
|
1282
1283
|
- previews/primer/url_helpers.rb
|
|
1283
1284
|
- static/arguments.json
|
|
1284
1285
|
- static/assets/view-components.svg
|