@primer/view-components 0.17.0-rc.d8e01cb4 → 0.17.0-rc.e1788977
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.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +6 -3
- package/app/components/primer/dialog_helper.js +8 -0
- package/package.json +3 -3
- package/static/classes.json +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));color:var(--fgColor-default,var(--color-fg-default));display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset}.Overlay.Overlay--placement-left{border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}
|
|
1
|
+
body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));color:var(--fgColor-default,var(--color-fg-default));display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "alpha/dialog",
|
|
3
3
|
"selectors": [
|
|
4
|
+
"body.has-modal",
|
|
4
5
|
"dialog.Overlay:not([open])",
|
|
5
6
|
".Overlay--hidden",
|
|
6
7
|
".Overlay--visibilityHidden",
|
|
@@ -17,6 +18,7 @@
|
|
|
17
18
|
".Overlay.Overlay--height-auto",
|
|
18
19
|
".Overlay.Overlay--placement-left",
|
|
19
20
|
".Overlay.Overlay--placement-right",
|
|
21
|
+
".Overlay.Overlay--motion-scaleFade",
|
|
20
22
|
".Overlay.Overlay--height-xsmall",
|
|
21
23
|
".Overlay.Overlay--height-small",
|
|
22
24
|
".Overlay.Overlay--height-medium",
|
|
@@ -28,7 +30,7 @@
|
|
|
28
30
|
".Overlay.Overlay--width-large",
|
|
29
31
|
".Overlay.Overlay--width-xlarge",
|
|
30
32
|
".Overlay.Overlay--width-xxlarge",
|
|
31
|
-
".Overlay
|
|
33
|
+
".Overlay:modal",
|
|
32
34
|
".Overlay-form",
|
|
33
35
|
".Overlay-header",
|
|
34
36
|
".Overlay-header.Overlay-header--divided",
|
|
@@ -54,9 +56,10 @@
|
|
|
54
56
|
".Overlay-closeButton:hover",
|
|
55
57
|
".Overlay-closeButton.close-button",
|
|
56
58
|
".Overlay--full",
|
|
57
|
-
".Overlay--placement-left-whenNarrow",
|
|
58
59
|
".Overlay--placement-right-whenNarrow",
|
|
59
|
-
".Overlay--placement-
|
|
60
|
+
".Overlay.Overlay--placement-left-whenNarrow",
|
|
61
|
+
".Overlay.Overlay--placement-right-whenNarrow",
|
|
62
|
+
".Overlay.Overlay--placement-bottom-whenNarrow",
|
|
60
63
|
".Overlay--full-whenNarrow"
|
|
61
64
|
]
|
|
62
65
|
}
|
|
@@ -48,6 +48,14 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
48
48
|
const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
|
|
49
49
|
document.addEventListener('click', dialogInvokerButtonHandler);
|
|
50
50
|
document.addEventListener('click', this, { signal });
|
|
51
|
+
this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
|
|
52
|
+
new MutationObserver(records => {
|
|
53
|
+
for (const record of records) {
|
|
54
|
+
if (record.target === this.dialog) {
|
|
55
|
+
this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}).observe(this, { subtree: true, attributeFilter: ['open'] });
|
|
51
59
|
}
|
|
52
60
|
disconnectedCallback() {
|
|
53
61
|
var _a;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.17.0-rc.
|
|
3
|
+
"version": "0.17.0-rc.e1788977",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@github/include-fragment-element": "^6.1.1",
|
|
52
52
|
"@github/relative-time-element": "^4.0.0",
|
|
53
53
|
"@github/tab-container-element": "^3.1.2",
|
|
54
|
-
"@oddbird/popover-polyfill": "^0.3.
|
|
54
|
+
"@oddbird/popover-polyfill": "^0.3.8",
|
|
55
55
|
"@primer/behaviors": "^1.3.4"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@github/prettier-config": "0.0.6",
|
|
64
64
|
"@playwright/test": "^1.35.1",
|
|
65
65
|
"@primer/css": "21.1.1",
|
|
66
|
-
"@primer/primitives": "7.15.
|
|
66
|
+
"@primer/primitives": "7.15.6",
|
|
67
67
|
"@primer/stylelint-config": "^12.7.2",
|
|
68
68
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
69
69
|
"@rollup/plugin-typescript": "^8.3.3",
|
package/static/classes.json
CHANGED
|
@@ -381,12 +381,6 @@
|
|
|
381
381
|
"Overlay--hidden": [
|
|
382
382
|
"Primer::Alpha::Dialog"
|
|
383
383
|
],
|
|
384
|
-
"Overlay--placement-bottom-whenNarrow": [
|
|
385
|
-
"Primer::Alpha::Dialog"
|
|
386
|
-
],
|
|
387
|
-
"Overlay--placement-left-whenNarrow": [
|
|
388
|
-
"Primer::Alpha::Dialog"
|
|
389
|
-
],
|
|
390
384
|
"Overlay--placement-right-whenNarrow": [
|
|
391
385
|
"Primer::Alpha::Dialog"
|
|
392
386
|
],
|