openproject-primer_view_components 0.91.3 → 0.92.0
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 +14 -0
- data/README.md +0 -19
- 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/app/components/primer/open_project/sub_header.rb +37 -29
- data/lib/primer/view_components/version.rb +2 -2
- 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/open_project/sub_header_preview/playground.html.erb +1 -1
- data/previews/primer/open_project/sub_header_preview.rb +19 -20
- data/previews/primer/preview_helpers.rb +16 -0
- data/static/arguments.json +0 -6
- data/static/classes.json +6 -0
- data/static/classnames.cjs +16 -0
- data/static/classnames.js +16 -0
- data/static/info_arch.json +23 -16
- data/static/previews.json +23 -10
- 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(
|
|
@@ -101,24 +101,9 @@ module Primer
|
|
|
101
101
|
system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
|
|
102
102
|
end
|
|
103
103
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
@
|
|
107
|
-
display: trigger_display,
|
|
108
|
-
aria: { label: label },
|
|
109
|
-
mr: 2,
|
|
110
|
-
"data-action": "click:sub-header#expandFilterInput",
|
|
111
|
-
"data-targets": FILTER_EXPAND_BUTTON_TARGET_SELECTOR)
|
|
112
|
-
|
|
113
|
-
@collapsed_filter_cancel = Primer::Beta::IconButton.new(icon: :x,
|
|
114
|
-
"aria-label": I18n.t(:button_cancel),
|
|
115
|
-
scheme: :invisible,
|
|
116
|
-
display: :none,
|
|
117
|
-
data: {
|
|
118
|
-
targets: SHOWN_FILTER_TARGET_SELECTOR,
|
|
119
|
-
action: "click:sub-header#collapseFilterInput"
|
|
120
|
-
})
|
|
121
|
-
|
|
104
|
+
@filter_input_label = label
|
|
105
|
+
@filter_input_icon = system_arguments[:leading_visual][:icon]
|
|
106
|
+
@filter_input_value = system_arguments[:value]
|
|
122
107
|
|
|
123
108
|
Primer::Alpha::TextField.new(name: name, label: label, **system_arguments)
|
|
124
109
|
}
|
|
@@ -225,27 +210,19 @@ module Primer
|
|
|
225
210
|
Primer::BaseComponent.new(**system_arguments)
|
|
226
211
|
}
|
|
227
212
|
|
|
228
|
-
# @param collapsed_search [Boolean] When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it.
|
|
229
213
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
230
|
-
def initialize(
|
|
231
|
-
@collapsed_search = collapsed_search
|
|
214
|
+
def initialize(**system_arguments)
|
|
232
215
|
@system_arguments = system_arguments
|
|
233
216
|
@system_arguments[:tag] = :"sub-header"
|
|
234
217
|
|
|
235
|
-
filter_container_display = collapsed_search ? :none : DESKTOP_ACTIONS_DISPLAY
|
|
236
|
-
|
|
237
|
-
@filter_container = Primer::BaseComponent.new(tag: :div,
|
|
238
|
-
classes: "SubHeader-filterContainer",
|
|
239
|
-
display: filter_container_display,
|
|
240
|
-
mr: 2,
|
|
241
|
-
data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
|
|
242
|
-
|
|
243
218
|
@system_arguments[:classes] = class_names(
|
|
244
219
|
"SubHeader",
|
|
245
220
|
system_arguments[:classes]
|
|
246
221
|
)
|
|
247
222
|
end
|
|
248
223
|
|
|
224
|
+
private
|
|
225
|
+
|
|
249
226
|
def before_render
|
|
250
227
|
all_quick_actions = [quick_sort, quick_group].compact + quick_filters
|
|
251
228
|
|
|
@@ -263,6 +240,8 @@ module Primer
|
|
|
263
240
|
end
|
|
264
241
|
end
|
|
265
242
|
|
|
243
|
+
setup_filter_input_collapse if filter_input.present?
|
|
244
|
+
|
|
266
245
|
@system_arguments[:classes] = class_names(
|
|
267
246
|
@system_arguments[:classes],
|
|
268
247
|
"SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && all_quick_actions.empty?
|
|
@@ -273,6 +252,35 @@ module Primer
|
|
|
273
252
|
system_arguments[:classes] = class_names(system_arguments[:classes], "SubHeader-hiddenOnExpand")
|
|
274
253
|
system_arguments
|
|
275
254
|
end
|
|
255
|
+
|
|
256
|
+
def setup_filter_input_collapse
|
|
257
|
+
collapsed_search = [filter_button, quick_filters, quick_sort, quick_group, @segmented_control_block].any?(&:present?) && @filter_input_value.blank?
|
|
258
|
+
|
|
259
|
+
filter_container_display = collapsed_search ? :none : DESKTOP_ACTIONS_DISPLAY
|
|
260
|
+
@filter_container = Primer::BaseComponent.new(tag: :div,
|
|
261
|
+
classes: "SubHeader-filterContainer",
|
|
262
|
+
display: filter_container_display,
|
|
263
|
+
mr: 2,
|
|
264
|
+
data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
|
|
265
|
+
|
|
266
|
+
trigger_display = collapsed_search ? :inline_flex : [:inline_flex, :inline_flex, :none]
|
|
267
|
+
|
|
268
|
+
@collapsed_filter_trigger = Primer::Beta::IconButton.new(icon: @filter_input_icon,
|
|
269
|
+
display: trigger_display,
|
|
270
|
+
aria: { label: @filter_input_label },
|
|
271
|
+
mr: 2,
|
|
272
|
+
"data-action": "click:sub-header#expandFilterInput",
|
|
273
|
+
"data-targets": FILTER_EXPAND_BUTTON_TARGET_SELECTOR)
|
|
274
|
+
|
|
275
|
+
@collapsed_filter_cancel = Primer::Beta::IconButton.new(icon: :x,
|
|
276
|
+
"aria-label": I18n.t(:button_cancel),
|
|
277
|
+
scheme: :invisible,
|
|
278
|
+
display: :none,
|
|
279
|
+
data: {
|
|
280
|
+
targets: SHOWN_FILTER_TARGET_SELECTOR,
|
|
281
|
+
action: "click:sub-header#collapseFilterInput"
|
|
282
|
+
})
|
|
283
|
+
end
|
|
276
284
|
end
|
|
277
285
|
end
|
|
278
286
|
end
|
|
@@ -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
|
|
@@ -13,7 +13,6 @@ module Primer
|
|
|
13
13
|
# @param show_quick_filter toggle
|
|
14
14
|
# @param show_action_button toggle
|
|
15
15
|
# @param show_clear_button toggle
|
|
16
|
-
# @param collapsed_search toggle
|
|
17
16
|
# @param text text
|
|
18
17
|
# @param value text
|
|
19
18
|
def playground(
|
|
@@ -22,22 +21,21 @@ module Primer
|
|
|
22
21
|
show_filter_button: true,
|
|
23
22
|
show_quick_filter: true,
|
|
24
23
|
show_action_button: true,
|
|
25
|
-
collapsed_search: true,
|
|
26
24
|
text: nil,
|
|
27
25
|
value: nil
|
|
28
26
|
)
|
|
29
27
|
bool = ActiveModel::Type::Boolean.new
|
|
30
|
-
render_with_template(locals: {show_filter_input: bool.cast(show_filter_input),
|
|
28
|
+
render_with_template(locals: { show_filter_input: bool.cast(show_filter_input),
|
|
31
29
|
show_clear_button: bool.cast(show_clear_button),
|
|
32
30
|
show_filter_button: bool.cast(show_filter_button),
|
|
33
31
|
show_quick_filter: bool.cast(show_quick_filter),
|
|
34
32
|
show_action_button: bool.cast(show_action_button),
|
|
35
|
-
collapsed_search: bool.cast(collapsed_search),
|
|
36
33
|
text: text,
|
|
37
|
-
value: value})
|
|
34
|
+
value: value })
|
|
38
35
|
end
|
|
39
36
|
|
|
40
37
|
# @label Default
|
|
38
|
+
# @snapshot
|
|
41
39
|
def default
|
|
42
40
|
render(Primer::OpenProject::SubHeader.new) do |component|
|
|
43
41
|
component.with_filter_input(name: "filter", label: "Filter")
|
|
@@ -93,21 +91,6 @@ module Primer
|
|
|
93
91
|
end
|
|
94
92
|
end
|
|
95
93
|
|
|
96
|
-
# @label With expanded search
|
|
97
|
-
def expanded_search
|
|
98
|
-
render(Primer::OpenProject::SubHeader.new(collapsed_search: false)) do |component|
|
|
99
|
-
component.with_filter_input(name: "filter", label: "Filter")
|
|
100
|
-
component.with_filter_button(scheme: :default) do |button|
|
|
101
|
-
button.with_trailing_visual_counter(count: "15")
|
|
102
|
-
"Filter"
|
|
103
|
-
end
|
|
104
|
-
|
|
105
|
-
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
|
|
106
|
-
"Create"
|
|
107
|
-
end
|
|
108
|
-
end
|
|
109
|
-
end
|
|
110
|
-
|
|
111
94
|
# @label With QuickFilters
|
|
112
95
|
def quick_filters
|
|
113
96
|
render_with_template(locals: {})
|
|
@@ -130,6 +113,22 @@ module Primer
|
|
|
130
113
|
end
|
|
131
114
|
end
|
|
132
115
|
end
|
|
116
|
+
|
|
117
|
+
# @label With filter value (expanded)
|
|
118
|
+
# @snapshot
|
|
119
|
+
def expanded_search
|
|
120
|
+
render(Primer::OpenProject::SubHeader.new) do |component|
|
|
121
|
+
component.with_filter_input(name: "filter", label: "Filter", value: "Some search term")
|
|
122
|
+
component.with_filter_button(scheme: :default) do |button|
|
|
123
|
+
button.with_trailing_visual_counter(count: "15")
|
|
124
|
+
"Filter"
|
|
125
|
+
end
|
|
126
|
+
|
|
127
|
+
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
|
|
128
|
+
"Create"
|
|
129
|
+
end
|
|
130
|
+
end
|
|
131
|
+
end
|
|
133
132
|
end
|
|
134
133
|
end
|
|
135
134
|
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/arguments.json
CHANGED
|
@@ -6513,12 +6513,6 @@
|
|
|
6513
6513
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
|
|
6514
6514
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
|
|
6515
6515
|
"parameters": [
|
|
6516
|
-
{
|
|
6517
|
-
"name": "collapsed_search",
|
|
6518
|
-
"type": "Boolean",
|
|
6519
|
-
"default": "`true`",
|
|
6520
|
-
"description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
|
|
6521
|
-
},
|
|
6522
6516
|
{
|
|
6523
6517
|
"name": "system_arguments",
|
|
6524
6518
|
"type": "Hash",
|
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
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
module.exports = new Set([
|
|
2
|
+
':popover-open',
|
|
2
3
|
'ActionBar',
|
|
3
4
|
'ActionBar--large',
|
|
4
5
|
'ActionBar--small',
|
|
@@ -15,9 +16,13 @@ module.exports = new Set([
|
|
|
15
16
|
'ActionListContent--hasActiveSubItem',
|
|
16
17
|
'ActionListContent--sizeLarge',
|
|
17
18
|
'ActionListContent--sizeXLarge',
|
|
19
|
+
'ActionListContent--visual16',
|
|
20
|
+
'ActionListContent--visual20',
|
|
21
|
+
'ActionListContent--visual24',
|
|
18
22
|
'ActionListHeader',
|
|
19
23
|
'ActionListItem',
|
|
20
24
|
'ActionListItem--danger',
|
|
25
|
+
'ActionListItem--disabled',
|
|
21
26
|
'ActionListItem--hasSubItem',
|
|
22
27
|
'ActionListItem--navActive',
|
|
23
28
|
'ActionListItem--subItem',
|
|
@@ -72,6 +77,9 @@ module.exports = new Set([
|
|
|
72
77
|
'Box-footer',
|
|
73
78
|
'Box-header',
|
|
74
79
|
'Box-header--blue',
|
|
80
|
+
'Box-list',
|
|
81
|
+
'Box-list--roundedBottom',
|
|
82
|
+
'Box-list--roundedTop',
|
|
75
83
|
'Box-row',
|
|
76
84
|
'Box-row--blue',
|
|
77
85
|
'Box-row--drag-button',
|
|
@@ -95,6 +103,7 @@ module.exports = new Set([
|
|
|
95
103
|
'Button--labelWrap',
|
|
96
104
|
'Button--large',
|
|
97
105
|
'Button--link',
|
|
106
|
+
'Button--medium',
|
|
98
107
|
'Button--primary',
|
|
99
108
|
'Button--secondary',
|
|
100
109
|
'Button--small',
|
|
@@ -107,6 +116,7 @@ module.exports = new Set([
|
|
|
107
116
|
'Button-visual',
|
|
108
117
|
'ButtonGroup',
|
|
109
118
|
'CollapsibleHeader',
|
|
119
|
+
'CollapsibleHeader--collapsed',
|
|
110
120
|
'CollapsibleHeader--multi-line',
|
|
111
121
|
'CollapsibleHeader-description',
|
|
112
122
|
'CollapsibleHeader-title-line',
|
|
@@ -137,6 +147,7 @@ module.exports = new Set([
|
|
|
137
147
|
'FormControl-input-trailingAction',
|
|
138
148
|
'FormControl-input-trailingAction--divider',
|
|
139
149
|
'FormControl-input-trailingVisualLabel',
|
|
150
|
+
'FormControl-input-trailingVisualText',
|
|
140
151
|
'FormControl-input-trailingVisualWrap',
|
|
141
152
|
'FormControl-input-width--auto',
|
|
142
153
|
'FormControl-input-width--large',
|
|
@@ -275,6 +286,7 @@ module.exports = new Set([
|
|
|
275
286
|
'Overlay-form',
|
|
276
287
|
'Overlay-header',
|
|
277
288
|
'Overlay-header--divided',
|
|
289
|
+
'Overlay-header--large',
|
|
278
290
|
'Overlay-headerContentWrap',
|
|
279
291
|
'Overlay-headerFilter',
|
|
280
292
|
'Overlay-title',
|
|
@@ -452,6 +464,9 @@ module.exports = new Set([
|
|
|
452
464
|
'btn-small-mktg',
|
|
453
465
|
'btn-subtle-mktg',
|
|
454
466
|
'close-button',
|
|
467
|
+
'container-lg',
|
|
468
|
+
'container-md',
|
|
469
|
+
'container-xl',
|
|
455
470
|
'css-truncate',
|
|
456
471
|
'css-truncate-overflow',
|
|
457
472
|
'css-truncate-target',
|
|
@@ -480,6 +495,7 @@ module.exports = new Set([
|
|
|
480
495
|
'flash-messages',
|
|
481
496
|
'flash-success',
|
|
482
497
|
'flash-warn',
|
|
498
|
+
'focus',
|
|
483
499
|
'form-control',
|
|
484
500
|
'has-modal',
|
|
485
501
|
'has-modal-disable-scroll',
|