openproject-primer_view_components 0.91.0 → 0.91.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 +16 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.js +1 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +1 -0
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.json +2 -0
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +20 -0
- data/app/components/primer/alpha/layout.rb +3 -1
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +6 -0
- data/app/components/primer/alpha/tree_view/tree_view.d.ts +1 -1
- data/app/components/primer/alpha/tree_view/tree_view.js +13 -3
- data/app/components/primer/alpha/tree_view/tree_view.ts +17 -3
- data/app/components/primer/open_project/border_box/collapsible_header.d.ts +1 -2
- data/app/components/primer/open_project/border_box/collapsible_header.js +1 -0
- data/app/components/primer/open_project/border_box/collapsible_header.ts +1 -1
- data/app/components/primer/open_project/collapsible_section.d.ts +1 -2
- data/app/components/primer/open_project/collapsible_section.js +1 -0
- data/app/components/primer/open_project/collapsible_section.ts +1 -1
- data/app/components/primer/open_project/zen_mode_button.js +0 -1
- data/app/components/primer/open_project/zen_mode_button.ts +0 -1
- data/app/controllers/primer/view_components/action_menu_controller.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/action_menu_preview/with_deferred_content_near_bottom_of_viewport.html.erb +10 -0
- data/previews/primer/alpha/action_menu_preview.rb +7 -0
- data/previews/primer/alpha/layout_preview.rb +16 -0
- data/static/classnames.cjs +2 -0
- data/static/classnames.js +2 -0
- data/static/constants.json +6 -2
- data/static/info_arch.json +40 -1
- data/static/previews.json +39 -0
- metadata +2 -1
|
@@ -480,6 +480,7 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
|
|
|
480
480
|
_ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
|
|
481
481
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
|
|
482
482
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
|
|
483
|
+
this.overlay?.update();
|
|
483
484
|
// async items have loaded, so component is ready
|
|
484
485
|
this.setAttribute('data-ready', 'true');
|
|
485
486
|
};
|
|
@@ -472,6 +472,7 @@ export class ActionMenuElement extends HTMLElement {
|
|
|
472
472
|
#handleIncludeFragmentReplaced() {
|
|
473
473
|
this.#firstItem?.focus()
|
|
474
474
|
this.#softDisableItems()
|
|
475
|
+
this.overlay?.update()
|
|
475
476
|
|
|
476
477
|
// async items have loaded, so component is ready
|
|
477
478
|
this.setAttribute('data-ready', 'true')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
|
1
|
+
.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg :is(.Layout-divider,.Layout-main,.Layout-sidebar){width:100%!important;grid-column:1!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{height:1px;grid-row:2}.Layout-divider--flowRow-hidden:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){display:none}.Layout-divider--flowRow-shallow:is(.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider){height:8px;margin-right:0;background:var(--bgColor-inset);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin) 0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));gap:var(--Layout-gutter)}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}@media (min-width:1012px){.Layout.Layout--sidebar-xwide{--Layout-sidebar-width:408px}}@media (min-width:1280px){.Layout.Layout--sidebar-xwide{--Layout-sidebar-width:440px}}@media (min-width:1012px){.Layout.Layout--sidebar-xxwide{--Layout-sidebar-width:512px}}@media (min-width:1280px){.Layout.Layout--sidebar-xxwide{--Layout-sidebar-width:544px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--borderColor-default)}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main :is(.Layout-main-centered-lg,.Layout-main-centered-md,.Layout-main-centered-xl){margin-right:auto;margin-left:auto}:is(.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl)>:is(.container-lg,.container-md,.container-xl){margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
".Layout.Layout--gutter-spacious",
|
|
52
52
|
".Layout.Layout--sidebar-narrow",
|
|
53
53
|
".Layout.Layout--sidebar-wide",
|
|
54
|
+
".Layout.Layout--sidebar-xwide",
|
|
55
|
+
".Layout.Layout--sidebar-xxwide",
|
|
54
56
|
".Layout.Layout--sidebarPosition-start .Layout-sidebar",
|
|
55
57
|
".Layout.Layout--sidebarPosition-start .Layout-main",
|
|
56
58
|
".Layout.Layout--sidebarPosition-end",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAkFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,
|
|
1
|
+
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAkFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBAoKF,CAlKE,wCANF,QA7EE,kBAAmB,CACnB,mCAoPF,CAlPE,0DAGE,oBAAsB,CACtB,uBACF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCACE,UAAW,CACX,UAcF,CAZE,4EACE,YACF,CAEA,6EACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,mFAGE,oBAAsB,CACtB,uBACF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEACE,UAAW,CACX,UAcF,CAZE,qGACE,YACF,CAEA,sGACE,UAAW,CACX,cAAe,CACf,+BAAgC,CAChC,uCAAwC,CACxC,kBAAmB,CACnB,sCACF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QAwBE,qBAAsB,CACtB,sGAAwG,CACxG,wBA8IF,CA5IE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBA6HJ,CA5HE,CAEA,4BACE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAjEF,QAkEI,4BAsGJ,CArGE,CAEA,yBArEF,QAsEI,4BAkGJ,CAjGE,CAEA,0BAzEF,QA0EI,4BA8FJ,CA7FE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAIA,0BADF,8BAEI,4BAMJ,CALE,CAEA,0BALF,8BAMI,4BAEJ,CADE,CAIA,0BADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCACE,aAAc,CACd,aAAc,CACd,SAAU,CAEV,iBAAkB,CAElB,qCACF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,6FAGE,iBAAkB,CAClB,gBAOF,CALE,sKAGE,aACF,CAGF,sCACE,6FACF,CAEA,sCACE,4FACF,CAEA,sCACE,6FACF","file":"layout.css","sourcesContent":["/* Layout */\n\n/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */\n\n@define-mixin flow-as-row {\n grid-auto-flow: row;\n grid-template-columns: 1fr !important;\n\n & .Layout-sidebar,\n & .Layout-divider,\n & .Layout-main {\n width: 100% !important;\n grid-column: 1 !important;\n }\n\n &.Layout--sidebarPosition-flowRow-start {\n & .Layout-sidebar {\n grid-row: 1;\n }\n\n & .Layout-main {\n grid-row: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 2 / span 2;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-none {\n & .Layout-sidebar {\n display: none;\n }\n }\n\n &.Layout--divided {\n @mixin flow-as-row-divider;\n\n & .Layout-main {\n grid-row: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 3 / span 1;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n }\n}\n\n@define-mixin flow-as-row-divider {\n --Layout-gutter: 0;\n\n & .Layout-divider {\n height: 1px;\n grid-row: 2;\n\n &.Layout-divider--flowRow-hidden {\n display: none;\n }\n\n &.Layout-divider--flowRow-shallow {\n height: 8px;\n margin-right: 0;\n background: var(--bgColor-inset);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin) 0;\n }\n }\n}\n\n.Layout {\n display: grid;\n\n --Layout-sidebar-width: 220px;\n --Layout-gutter: 16px;\n\n @media (max-width: calc(544px - 0.02px)) {\n @mixin flow-as-row;\n }\n\n &.Layout--flowRow-until-md {\n @media (max-width: calc(768px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n &.Layout--flowRow-until-lg {\n @media (max-width: calc(1012px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n /* Flow as column */\n\n grid-auto-flow: column;\n grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n gap: var(--Layout-gutter);\n\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-divider {\n display: none;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n\n /* Gutter spacing */\n\n @media (min-width: 1012px) {\n --Layout-gutter: 24px;\n }\n\n &.Layout--gutter-none {\n --Layout-gutter: 0px;\n }\n\n &.Layout--gutter-condensed {\n --Layout-gutter: 16px;\n }\n\n &.Layout--gutter-spacious {\n @media (min-width: 1012px) {\n --Layout-gutter: 32px;\n }\n\n @media (min-width: 1280px) {\n --Layout-gutter: 40px;\n }\n }\n\n /* Sidebar width */\n @media (min-width: 544px) {\n --Layout-sidebar-width: 220px;\n }\n\n @media (min-width: 768px) {\n --Layout-sidebar-width: 256px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 296px;\n }\n\n &.Layout--sidebar-narrow {\n @media (min-width: 768px) {\n --Layout-sidebar-width: 240px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 256px;\n }\n }\n\n &.Layout--sidebar-wide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 320px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 336px;\n }\n }\n\n &.Layout--sidebar-xwide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 408px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 440px;\n }\n }\n\n &.Layout--sidebar-xxwide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 512px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 544px;\n }\n }\n\n /* Sidebar position */\n\n &.Layout--sidebarPosition-start {\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-end {\n grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n & .Layout-main {\n grid-column: 1;\n }\n\n & .Layout-sidebar {\n grid-column: 2 / span 2;\n }\n }\n\n /* Sidebar divider */\n\n &.Layout--divided {\n & .Layout-divider {\n display: block;\n grid-column: 2;\n width: 1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-default);\n }\n\n & .Layout-main {\n grid-column: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-end {\n & .Layout-sidebar {\n grid-column: 3 / span 1;\n }\n\n & .Layout-main {\n grid-column: 1;\n }\n }\n }\n}\n\n.Layout-divider {\n display: none;\n width: 1px;\n}\n\n.Layout-sidebar {\n width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n min-width: 0;\n\n /* Centered main column\n ** FIXME: right-aligned sidebar */\n & .Layout-main-centered-md,\n & .Layout-main-centered-lg,\n & .Layout-main-centered-xl {\n margin-right: auto;\n margin-left: auto;\n\n & > .container-md,\n & > .container-lg,\n & > .container-xl {\n margin-left: 0;\n }\n }\n\n & .Layout-main-centered-md {\n max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
|
|
@@ -177,6 +177,26 @@
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
+
&.Layout--sidebar-xwide {
|
|
181
|
+
@media (min-width: 1012px) {
|
|
182
|
+
--Layout-sidebar-width: 408px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@media (min-width: 1280px) {
|
|
186
|
+
--Layout-sidebar-width: 440px;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&.Layout--sidebar-xxwide {
|
|
191
|
+
@media (min-width: 1012px) {
|
|
192
|
+
--Layout-sidebar-width: 512px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media (min-width: 1280px) {
|
|
196
|
+
--Layout-sidebar-width: 544px;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
180
200
|
/* Sidebar position */
|
|
181
201
|
|
|
182
202
|
&.Layout--sidebarPosition-start {
|
|
@@ -50,7 +50,9 @@ module Primer
|
|
|
50
50
|
SIDEBAR_WIDTH_MAPPINGS = {
|
|
51
51
|
SIDEBAR_WIDTH_DEFAULT => "",
|
|
52
52
|
:narrow => "Layout--sidebar-narrow",
|
|
53
|
-
:wide => "Layout--sidebar-wide"
|
|
53
|
+
:wide => "Layout--sidebar-wide",
|
|
54
|
+
:xwide => "Layout--sidebar-xwide",
|
|
55
|
+
:xxwide => "Layout--sidebar-xxwide"
|
|
54
56
|
}.freeze
|
|
55
57
|
SIDEBAR_WIDTH_OPTIONS = SIDEBAR_WIDTH_MAPPINGS.keys.freeze
|
|
56
58
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{--toggleSwitch-knob-inset:var(--borderWidth-thin);--toggleSwitch-knob-offset:calc(var(--toggleSwitch-knob-inset)*2);align-items:center;gap:var(--controlStack-medium-gap-condensed)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{position:relative;display:block;width:var(--base-size-64);height:var(--control-medium-size);padding:0;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:background-color,border-color;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.ToggleSwitch-track:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{color:var(--control-checked-fgColor-disabled);background-color:var(--controlTrack-bgColor-disabled);border-color:#0000}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);transform:translateX(calc(100% - var(--toggleSwitch-knob-offset)))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{cursor:not-allowed;background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default)}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{line-height:0;transition-duration:80ms;transition-property:transform;flex:1 0 50%}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{position:absolute;inset-block:var(--toggleSwitch-knob-inset);inset-inline-start:var(--toggleSwitch-knob-inset);z-index:1;width:50%;background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:transform}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:var(--text-body-size-medium);line-height:var(--text-title-lineHeight-large);color:var(--fgColor-default);text-align:right}.ToggleSwitch-statusIcon{display:flex;width:var(--base-size-16);margin-top:.063rem}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{width:var(--base-size-48);height:var(--control-xsmall-size)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{--toggleSwitch-knob-inset:var(--borderWidth-thin);--toggleSwitch-knob-offset:calc(var(--toggleSwitch-knob-inset)*2);align-items:center;gap:var(--controlStack-medium-gap-condensed)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{position:relative;display:block;width:var(--base-size-64);height:var(--control-medium-size);padding:0;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:background-color,border-color;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.ToggleSwitch-track:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{color:var(--control-checked-fgColor-disabled);background-color:var(--controlTrack-bgColor-disabled);border-color:#0000}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);transform:translateX(calc(100% - var(--toggleSwitch-knob-offset)))}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{cursor:not-allowed;background-color:var(--controlTrack-bgColor-disabled);border-color:#0000;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default)}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{line-height:0;transition-duration:80ms;transition-property:transform;flex:1 0 50%}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{position:absolute;inset-block:var(--toggleSwitch-knob-inset);inset-inline-start:var(--toggleSwitch-knob-inset);z-index:1;width:50%;background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));transition-timing-function:cubic-bezier(.5,1,.89,1);transition-duration:80ms;transition-property:transform}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:var(--text-body-size-medium);line-height:var(--text-title-lineHeight-large);color:var(--fgColor-default);text-align:right}.ToggleSwitch-statusIcon{display:flex;flex:none;align-items:center;justify-content:center;width:var(--base-size-16);height:var(--base-size-16);line-height:0;margin-top:.063rem}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{width:var(--base-size-48);height:var(--control-xsmall-size)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAUF,CAPA,cACE,iDAAkD,CAClD,iEAAoE,CAEpE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBACE,iBAAkB,CAClB,aAAc,CACd,yBAA0B,CAC1B,iCAAkC,CAClC,SAAU,CACV,eAAgB,CAChB,4BAAqB,CAArB,oBAAqB,CACrB,cAAe,CACf,wBAAiB,CAAjB,gBAAiB,CACjB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CACzC,mDAAyD,CACzD,wBAAyB,CACzB,iDAAmD,CACnD,eA4BF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC9DN,kBAAA,QAAA,SAAA,WAAA,YAAA,gBAAA,WAAA,2CD8DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,6CAA8C,CAC9C,qDAAsD,CACtD,kBACF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,kEACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BACE,kBAAmB,CACnB,qDAAsD,CACtD,kBAAyB,CACzB,wBAaF,CAXE,iDACE,uCACF,CAMA,4GACE,0CACF,CAGF,oBACE,YAAa,CACb,kBAAmB,CACnB,UAAW,CACX,WAAY,CACZ,eACF,CAEA,uBAGE,yCAA0C,CAG1C,2BAEF,CAEA,gDARE,aAAc,CAEd,wBAAyB,CACzB,6BAA8B,CAE9B,YAWF,CARA,yBAGE,sCAAuC,CAGvC,uBAEF,CAEA,mBACE,iBAAkB,CAClB,0CAA2C,CAC3C,iDAAkD,CAClD,SAAU,CACV,SAAU,CACV,gDAAiD,CACjD,wEAAyE,CAEzE,gFAAiF,CACjF,mDAAyD,CACzD,wBAAyB,CACzB,6BAKF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBACE,iBAAkB,CAClB,sCAAuC,CACvC,8CAA+C,CAC/C,4BAA6B,CAC7B,gBACF,CAEA,yBACE,YAAa,CACb,yBAA0B,
|
|
1
|
+
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAUF,CAPA,cACE,iDAAkD,CAClD,iEAAoE,CAEpE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBACE,iBAAkB,CAClB,aAAc,CACd,yBAA0B,CAC1B,iCAAkC,CAClC,SAAU,CACV,eAAgB,CAChB,4BAAqB,CAArB,oBAAqB,CACrB,cAAe,CACf,wBAAiB,CAAjB,gBAAiB,CACjB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CACzC,mDAAyD,CACzD,wBAAyB,CACzB,iDAAmD,CACnD,eA4BF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC9DN,kBAAA,QAAA,SAAA,WAAA,YAAA,gBAAA,WAAA,2CD8DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,6CAA8C,CAC9C,qDAAsD,CACtD,kBACF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,kEACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BACE,kBAAmB,CACnB,qDAAsD,CACtD,kBAAyB,CACzB,wBAaF,CAXE,iDACE,uCACF,CAMA,4GACE,0CACF,CAGF,oBACE,YAAa,CACb,kBAAmB,CACnB,UAAW,CACX,WAAY,CACZ,eACF,CAEA,uBAGE,yCAA0C,CAG1C,2BAEF,CAEA,gDARE,aAAc,CAEd,wBAAyB,CACzB,6BAA8B,CAE9B,YAWF,CARA,yBAGE,sCAAuC,CAGvC,uBAEF,CAEA,mBACE,iBAAkB,CAClB,0CAA2C,CAC3C,iDAAkD,CAClD,SAAU,CACV,SAAU,CACV,gDAAiD,CACjD,wEAAyE,CAEzE,gFAAiF,CACjF,mDAAyD,CACzD,wBAAyB,CACzB,6BAKF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBACE,iBAAkB,CAClB,sCAAuC,CACvC,8CAA+C,CAC/C,4BAA6B,CAC7B,gBACF,CAEA,yBACE,YAAa,CACb,SAAU,CACV,kBAAmB,CACnB,sBAAuB,CACvB,yBAA0B,CAC1B,0BAA2B,CAE3B,aAAc,CAEd,kBACF,CAGE,0CACE,qCACF,CAEA,yCACE,yBAA0B,CAC1B,iCACF,CAIA,6CACE,0BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n --toggleSwitch-knob-inset: var(--borderWidth-thin);\n --toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset));\n\n align-items: center;\n display: inline-flex;\n gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64);\n height: var(--control-medium-size);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 1px;\n }\n\n &:hover {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active {\n background-color: var(--controlTrack-bgColor-active);\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n color: var(--control-checked-fgColor-disabled);\n background-color: var(--controlTrack-bgColor-disabled);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--control-checked-bgColor-rest);\n border-color: var(--borderColor-transparent);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--control-checked-bgColor-hover);\n }\n\n &:active {\n background-color: var(--control-checked-bgColor-active);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--controlKnob-bgColor-checked);\n border-color: var(--controlKnob-borderColor-checked);\n transform: translateX(calc(100% - var(--toggleSwitch-knob-offset)));\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[disabled] {\n cursor: not-allowed;\n background-color: var(--controlTrack-bgColor-disabled);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--borderColor-default);\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n /* stylelint-disable-next-line primer/typography */\n line-height: 0;\n color: var(--control-checked-fgColor-rest);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n /* stylelint-disable-next-line primer/typography */\n line-height: 0;\n color: var(--controlTrack-fgColor-rest);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n inset-block: var(--toggleSwitch-knob-inset);\n inset-inline-start: var(--toggleSwitch-knob-inset);\n z-index: 1;\n width: 50%;\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-title-lineHeight-large);\n color: var(--fgColor-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--base-size-16);\n height: var(--base-size-16);\n /* stylelint-disable-next-line primer/typography */\n line-height: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--text-body-size-small);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48);\n height: var(--control-xsmall-size);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--fgColor-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}\n",null]}
|
|
@@ -184,7 +184,13 @@
|
|
|
184
184
|
|
|
185
185
|
.ToggleSwitch-statusIcon {
|
|
186
186
|
display: flex;
|
|
187
|
+
flex: none;
|
|
188
|
+
align-items: center;
|
|
189
|
+
justify-content: center;
|
|
187
190
|
width: var(--base-size-16);
|
|
191
|
+
height: var(--base-size-16);
|
|
192
|
+
/* stylelint-disable-next-line primer/typography */
|
|
193
|
+
line-height: 0;
|
|
188
194
|
/* stylelint-disable-next-line primer/spacing */
|
|
189
195
|
margin-top: 0.063rem;
|
|
190
196
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { SelectStrategy, SelectVariant, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
|
|
1
|
+
import { type SelectStrategy, type SelectVariant, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
|
|
2
2
|
import type { TreeViewCheckedValue, TreeViewNodeInfo, TreeViewNodeType } from '../../shared_events';
|
|
3
3
|
export declare class TreeViewElement extends HTMLElement {
|
|
4
4
|
#private;
|
|
@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
15
15
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
16
16
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
17
17
|
};
|
|
18
|
-
var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
|
|
18
|
+
var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_containsCheckedTreeItem, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
|
|
19
19
|
import { controller, target } from '@github/catalyst';
|
|
20
20
|
import { useRovingTabIndex } from './tree_view_roving_tab_index';
|
|
21
21
|
let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
@@ -36,7 +36,6 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
|
36
36
|
for (const addedNode of mutation.addedNodes) {
|
|
37
37
|
if (!(addedNode instanceof HTMLElement))
|
|
38
38
|
continue;
|
|
39
|
-
// eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
|
|
40
39
|
if (addedNode.querySelector('[aria-expanded=true]')) {
|
|
41
40
|
__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, addedNode);
|
|
42
41
|
}
|
|
@@ -50,6 +49,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
|
50
49
|
// nodes based on the component's select strategy. These two observers can conflict and cause infinite
|
|
51
50
|
// looping, so we make sure something actually changed before computing inputs again.
|
|
52
51
|
const somethingChanged = mutations.some(m => {
|
|
52
|
+
if (m.type === 'childList') {
|
|
53
|
+
return __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_containsCheckedTreeItem).call(this, m.addedNodes) || __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_containsCheckedTreeItem).call(this, m.removedNodes);
|
|
54
|
+
}
|
|
53
55
|
if (!(m.target instanceof HTMLElement))
|
|
54
56
|
return false;
|
|
55
57
|
return m.target.getAttribute('aria-checked') !== m.oldValue;
|
|
@@ -62,6 +64,7 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
|
62
64
|
childList: true,
|
|
63
65
|
subtree: true,
|
|
64
66
|
attributeFilter: ['aria-checked'],
|
|
67
|
+
attributeOldValue: true,
|
|
65
68
|
});
|
|
66
69
|
// Correctly initialize the form
|
|
67
70
|
if (this.formInputContainer) {
|
|
@@ -278,7 +281,6 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
|
278
281
|
}
|
|
279
282
|
updateHiddenFormInputs() {
|
|
280
283
|
const newInputs = [];
|
|
281
|
-
// eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
|
|
282
284
|
for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
|
|
283
285
|
const newInput = this.formInputPrototype.cloneNode();
|
|
284
286
|
newInput.removeAttribute('data-target');
|
|
@@ -300,6 +302,14 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
|
|
|
300
302
|
};
|
|
301
303
|
_TreeViewElement_abortController = new WeakMap();
|
|
302
304
|
_TreeViewElement_instances = new WeakSet();
|
|
305
|
+
_TreeViewElement_containsCheckedTreeItem = function _TreeViewElement_containsCheckedTreeItem(nodes) {
|
|
306
|
+
return [...nodes].some(node => {
|
|
307
|
+
if (!(node instanceof Element))
|
|
308
|
+
return false;
|
|
309
|
+
return (node.matches('[role=treeitem][aria-checked=true]') ||
|
|
310
|
+
Boolean(node.querySelector('[role=treeitem][aria-checked=true]')));
|
|
311
|
+
});
|
|
312
|
+
};
|
|
303
313
|
_TreeViewElement_autoExpandFrom = function _TreeViewElement_autoExpandFrom(root) {
|
|
304
314
|
for (const element of root.querySelectorAll('[aria-expanded=true]')) {
|
|
305
315
|
this.expandAncestorsForNode(element);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {controller, target} from '@github/catalyst'
|
|
2
|
-
import {SelectStrategy, SelectVariant, TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
|
|
2
|
+
import {type SelectStrategy, type SelectVariant, TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
|
|
3
3
|
import {useRovingTabIndex} from './tree_view_roving_tab_index'
|
|
4
4
|
import type {TreeViewCheckedValue, TreeViewNodeInfo, TreeViewNodeType} from '../../shared_events'
|
|
5
5
|
|
|
@@ -24,7 +24,6 @@ export class TreeViewElement extends HTMLElement {
|
|
|
24
24
|
for (const addedNode of mutation.addedNodes) {
|
|
25
25
|
if (!(addedNode instanceof HTMLElement)) continue
|
|
26
26
|
|
|
27
|
-
// eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
|
|
28
27
|
if (addedNode.querySelector('[aria-expanded=true]')) {
|
|
29
28
|
this.#autoExpandFrom(addedNode)
|
|
30
29
|
}
|
|
@@ -39,6 +38,10 @@ export class TreeViewElement extends HTMLElement {
|
|
|
39
38
|
// nodes based on the component's select strategy. These two observers can conflict and cause infinite
|
|
40
39
|
// looping, so we make sure something actually changed before computing inputs again.
|
|
41
40
|
const somethingChanged = mutations.some(m => {
|
|
41
|
+
if (m.type === 'childList') {
|
|
42
|
+
return this.#containsCheckedTreeItem(m.addedNodes) || this.#containsCheckedTreeItem(m.removedNodes)
|
|
43
|
+
}
|
|
44
|
+
|
|
42
45
|
if (!(m.target instanceof HTMLElement)) return false
|
|
43
46
|
return m.target.getAttribute('aria-checked') !== m.oldValue
|
|
44
47
|
})
|
|
@@ -52,6 +55,7 @@ export class TreeViewElement extends HTMLElement {
|
|
|
52
55
|
childList: true,
|
|
53
56
|
subtree: true,
|
|
54
57
|
attributeFilter: ['aria-checked'],
|
|
58
|
+
attributeOldValue: true,
|
|
55
59
|
})
|
|
56
60
|
|
|
57
61
|
// Correctly initialize the form
|
|
@@ -66,6 +70,17 @@ export class TreeViewElement extends HTMLElement {
|
|
|
66
70
|
})
|
|
67
71
|
}
|
|
68
72
|
|
|
73
|
+
#containsCheckedTreeItem(nodes: NodeList): boolean {
|
|
74
|
+
return [...nodes].some(node => {
|
|
75
|
+
if (!(node instanceof Element)) return false
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
node.matches('[role=treeitem][aria-checked=true]') ||
|
|
79
|
+
Boolean(node.querySelector('[role=treeitem][aria-checked=true]'))
|
|
80
|
+
)
|
|
81
|
+
})
|
|
82
|
+
}
|
|
83
|
+
|
|
69
84
|
rootLeafNodes(): NodeListOf<HTMLElement> {
|
|
70
85
|
return this.querySelectorAll(':scope > ul > li > .TreeViewItemContainer [role=treeitem]')
|
|
71
86
|
}
|
|
@@ -485,7 +500,6 @@ export class TreeViewElement extends HTMLElement {
|
|
|
485
500
|
updateHiddenFormInputs() {
|
|
486
501
|
const newInputs = []
|
|
487
502
|
|
|
488
|
-
// eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
|
|
489
503
|
for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
|
|
490
504
|
const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
|
|
491
505
|
newInput.removeAttribute('data-target')
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CollapsibleElement } from '../collapsible';
|
|
2
|
-
declare class CollapsibleHeaderElement extends CollapsibleElement {
|
|
2
|
+
export declare class CollapsibleHeaderElement extends CollapsibleElement {
|
|
3
3
|
connectedCallback(): void;
|
|
4
4
|
get baseClass(): string;
|
|
5
5
|
}
|
|
@@ -8,4 +8,3 @@ declare global {
|
|
|
8
8
|
CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
-
export {};
|
|
@@ -2,7 +2,7 @@ import {controller} from '@github/catalyst'
|
|
|
2
2
|
import {CollapsibleElement} from '../collapsible'
|
|
3
3
|
|
|
4
4
|
@controller('collapsible-header')
|
|
5
|
-
class CollapsibleHeaderElement extends CollapsibleElement {
|
|
5
|
+
export class CollapsibleHeaderElement extends CollapsibleElement {
|
|
6
6
|
connectedCallback() {
|
|
7
7
|
if (!this.closest('.Box')) {
|
|
8
8
|
throw new Error('No surrounding BorderBox found')
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CollapsibleElement } from './collapsible';
|
|
2
|
-
declare class CollapsibleSectionElement extends CollapsibleElement {
|
|
2
|
+
export declare class CollapsibleSectionElement extends CollapsibleElement {
|
|
3
3
|
get baseClass(): string;
|
|
4
4
|
}
|
|
5
5
|
declare global {
|
|
@@ -7,4 +7,3 @@ declare global {
|
|
|
7
7
|
CollapsibleSectionElement: typeof CollapsibleSectionElement;
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
export {};
|
|
@@ -2,7 +2,7 @@ import {controller} from '@github/catalyst'
|
|
|
2
2
|
import {CollapsibleElement} from './collapsible'
|
|
3
3
|
|
|
4
4
|
@controller('collapsible-section')
|
|
5
|
-
class CollapsibleSectionElement extends CollapsibleElement {
|
|
5
|
+
export class CollapsibleSectionElement extends CollapsibleElement {
|
|
6
6
|
get baseClass(): string {
|
|
7
7
|
return 'CollapsibleSection'
|
|
8
8
|
}
|
|
@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { controller, target } from '@github/catalyst';
|
|
8
8
|
let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
|
|
9
|
-
// eslint-disable-next-line custom-elements/no-constructor
|
|
10
9
|
constructor() {
|
|
11
10
|
super();
|
|
12
11
|
this.inZenMode = false;
|
|
@@ -5,7 +5,6 @@ class ZenModeButtonElement extends HTMLElement {
|
|
|
5
5
|
@target button: HTMLElement
|
|
6
6
|
inZenMode = false
|
|
7
7
|
|
|
8
|
-
// eslint-disable-next-line custom-elements/no-constructor
|
|
9
8
|
constructor() {
|
|
10
9
|
super()
|
|
11
10
|
document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this))
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%# The invoker is pinned near the bottom of the viewport, leaving enough room for the loading %>
|
|
2
|
+
<%# spinner placeholder to fit below it but not enough for the full deferred content, reproducing %>
|
|
3
|
+
<%# the scenario from DREAM-729. The `delay` param forces the fragment response to arrive after the %>
|
|
4
|
+
<%# overlay has already been positioned using the placeholder's size, instead of racing the fetch %>
|
|
5
|
+
<%# against the initial position calculation. %>
|
|
6
|
+
<div style="position: fixed; bottom: 100px; right: 0;">
|
|
7
|
+
<%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-bottom", src: primer_view_components.action_menu_deferred_path(delay: 0.3))) do |menu| %>
|
|
8
|
+
<% menu.with_show_button { "Menu with deferred content" } %>
|
|
9
|
+
<% end %>
|
|
10
|
+
</div>
|
|
@@ -310,6 +310,13 @@ module Primer
|
|
|
310
310
|
render_with_template(locals: { nest_in_sub_menu: nest_in_sub_menu })
|
|
311
311
|
end
|
|
312
312
|
|
|
313
|
+
# @label With deferred content near the bottom of the viewport
|
|
314
|
+
#
|
|
315
|
+
# @hidden
|
|
316
|
+
def with_deferred_content_near_bottom_of_viewport
|
|
317
|
+
render_with_template
|
|
318
|
+
end
|
|
319
|
+
|
|
313
320
|
# @label With deferred preloaded content
|
|
314
321
|
#
|
|
315
322
|
def with_deferred_preloaded_content
|
|
@@ -131,6 +131,22 @@ module Primer
|
|
|
131
131
|
component.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
|
|
132
132
|
end
|
|
133
133
|
end
|
|
134
|
+
|
|
135
|
+
# @label XWide
|
|
136
|
+
def sidebar_width_xwide
|
|
137
|
+
render(Primer::Alpha::Layout.new) do |component|
|
|
138
|
+
component.with_main(bg: :attention, p: 6) { "Main content" }
|
|
139
|
+
component.with_sidebar(width: :xwide, bg: :accent, p: 6) { "Sidebar content" }
|
|
140
|
+
end
|
|
141
|
+
end
|
|
142
|
+
|
|
143
|
+
# @label XXWide
|
|
144
|
+
def sidebar_width_xxwide
|
|
145
|
+
render(Primer::Alpha::Layout.new) do |component|
|
|
146
|
+
component.with_main(bg: :attention, p: 6) { "Main content" }
|
|
147
|
+
component.with_sidebar(width: :xxwide, bg: :accent, p: 6) { "Sidebar content" }
|
|
148
|
+
end
|
|
149
|
+
end
|
|
134
150
|
#
|
|
135
151
|
# @!endgroup
|
|
136
152
|
|
data/static/classnames.cjs
CHANGED
|
@@ -206,6 +206,8 @@ module.exports = new Set([
|
|
|
206
206
|
'Layout--gutter-spacious',
|
|
207
207
|
'Layout--sidebar-narrow',
|
|
208
208
|
'Layout--sidebar-wide',
|
|
209
|
+
'Layout--sidebar-xwide',
|
|
210
|
+
'Layout--sidebar-xxwide',
|
|
209
211
|
'Layout--sidebarPosition-end',
|
|
210
212
|
'Layout--sidebarPosition-flowRow-end',
|
|
211
213
|
'Layout--sidebarPosition-flowRow-none',
|
data/static/classnames.js
CHANGED
|
@@ -206,6 +206,8 @@ const classNames = new Set([
|
|
|
206
206
|
'Layout--gutter-spacious',
|
|
207
207
|
'Layout--sidebar-narrow',
|
|
208
208
|
'Layout--sidebar-wide',
|
|
209
|
+
'Layout--sidebar-xwide',
|
|
210
|
+
'Layout--sidebar-xxwide',
|
|
209
211
|
'Layout--sidebarPosition-end',
|
|
210
212
|
'Layout--sidebarPosition-flowRow-end',
|
|
211
213
|
'Layout--sidebarPosition-flowRow-none',
|
data/static/constants.json
CHANGED
|
@@ -469,12 +469,16 @@
|
|
|
469
469
|
"SIDEBAR_WIDTH_MAPPINGS": {
|
|
470
470
|
"default": "",
|
|
471
471
|
"narrow": "Layout--sidebar-narrow",
|
|
472
|
-
"wide": "Layout--sidebar-wide"
|
|
472
|
+
"wide": "Layout--sidebar-wide",
|
|
473
|
+
"xwide": "Layout--sidebar-xwide",
|
|
474
|
+
"xxwide": "Layout--sidebar-xxwide"
|
|
473
475
|
},
|
|
474
476
|
"SIDEBAR_WIDTH_OPTIONS": [
|
|
475
477
|
"default",
|
|
476
478
|
"narrow",
|
|
477
|
-
"wide"
|
|
479
|
+
"wide",
|
|
480
|
+
"xwide",
|
|
481
|
+
"xxwide"
|
|
478
482
|
],
|
|
479
483
|
"STACKING_BREAKPOINT_DEFAULT": "md",
|
|
480
484
|
"STACKING_BREAKPOINT_MAPPINGS": {
|
data/static/info_arch.json
CHANGED
|
@@ -1438,6 +1438,19 @@
|
|
|
1438
1438
|
]
|
|
1439
1439
|
}
|
|
1440
1440
|
},
|
|
1441
|
+
{
|
|
1442
|
+
"preview_path": "primer/alpha/action_menu/with_deferred_content_near_bottom_of_viewport",
|
|
1443
|
+
"name": "with_deferred_content_near_bottom_of_viewport",
|
|
1444
|
+
"snapshot": "false",
|
|
1445
|
+
"skip_rules": {
|
|
1446
|
+
"wont_fix": [
|
|
1447
|
+
"region"
|
|
1448
|
+
],
|
|
1449
|
+
"will_fix": [
|
|
1450
|
+
"color-contrast"
|
|
1451
|
+
]
|
|
1452
|
+
}
|
|
1453
|
+
},
|
|
1441
1454
|
{
|
|
1442
1455
|
"preview_path": "primer/alpha/action_menu/with_deferred_preloaded_content",
|
|
1443
1456
|
"name": "with_deferred_preloaded_content",
|
|
@@ -5229,7 +5242,7 @@
|
|
|
5229
5242
|
"name": "width",
|
|
5230
5243
|
"type": "Symbol",
|
|
5231
5244
|
"default": "N/A",
|
|
5232
|
-
"description": "One of `:default`, `:narrow`, or `:
|
|
5245
|
+
"description": "One of `:default`, `:narrow`, `:wide`, `:xwide`, or `:xxwide`."
|
|
5233
5246
|
},
|
|
5234
5247
|
{
|
|
5235
5248
|
"name": "col_placement",
|
|
@@ -5423,6 +5436,32 @@
|
|
|
5423
5436
|
]
|
|
5424
5437
|
}
|
|
5425
5438
|
},
|
|
5439
|
+
{
|
|
5440
|
+
"preview_path": "primer/alpha/layout/sidebar_width_xwide",
|
|
5441
|
+
"name": "sidebar_width_xwide",
|
|
5442
|
+
"snapshot": "false",
|
|
5443
|
+
"skip_rules": {
|
|
5444
|
+
"wont_fix": [
|
|
5445
|
+
"region"
|
|
5446
|
+
],
|
|
5447
|
+
"will_fix": [
|
|
5448
|
+
"color-contrast"
|
|
5449
|
+
]
|
|
5450
|
+
}
|
|
5451
|
+
},
|
|
5452
|
+
{
|
|
5453
|
+
"preview_path": "primer/alpha/layout/sidebar_width_xxwide",
|
|
5454
|
+
"name": "sidebar_width_xxwide",
|
|
5455
|
+
"snapshot": "false",
|
|
5456
|
+
"skip_rules": {
|
|
5457
|
+
"wont_fix": [
|
|
5458
|
+
"region"
|
|
5459
|
+
],
|
|
5460
|
+
"will_fix": [
|
|
5461
|
+
"color-contrast"
|
|
5462
|
+
]
|
|
5463
|
+
}
|
|
5464
|
+
},
|
|
5426
5465
|
{
|
|
5427
5466
|
"preview_path": "primer/alpha/layout/sidebar_col_placement_start",
|
|
5428
5467
|
"name": "sidebar_col_placement_start",
|