@primer/view-components 0.21.0-rc.be66f7bb → 0.21.0
Sign up to get free protection for your applications and to get access to all the features.
- 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/banner.css +1 -1
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +1 -2
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/tool_tip.js +46 -77
- package/app/components/primer/beta/flash.css +1 -1
- package/package.json +1 -1
- package/static/info_arch.json +104 -0
- package/static/previews.json +104 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.Banner{background-
|
|
1
|
+
.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,.5rem);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}
|
|
@@ -1 +1 @@
|
|
|
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}:
|
|
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}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.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%)}}
|
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
"dialog.Overlay:not([open])",
|
|
6
6
|
".Overlay--hidden",
|
|
7
7
|
".Overlay--visibilityHidden",
|
|
8
|
-
"
|
|
9
|
-
":popover-open",
|
|
8
|
+
"[popover]:not(.\\:popover-open)",
|
|
10
9
|
".Overlay",
|
|
11
10
|
".Overlay.Overlay--size-auto",
|
|
12
11
|
".Overlay.Overlay--size-full",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
|
1
|
+
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
|
@@ -32,9 +32,7 @@ const isPopoverOpen = (() => {
|
|
|
32
32
|
}
|
|
33
33
|
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
|
34
34
|
})();
|
|
35
|
-
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
|
36
35
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
|
37
|
-
const TOOLTIP_OFFSET = 10;
|
|
38
36
|
const DIRECTION_CLASSES = [
|
|
39
37
|
'tooltip-n',
|
|
40
38
|
'tooltip-s',
|
|
@@ -84,6 +82,8 @@ class ToolTipElement extends HTMLElement {
|
|
|
84
82
|
styles() {
|
|
85
83
|
return `
|
|
86
84
|
:host {
|
|
85
|
+
--tooltip-top: var(--tool-tip-position-top, 0);
|
|
86
|
+
--tooltip-left: var(--tool-tip-position-left, 0);
|
|
87
87
|
padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
|
|
88
88
|
font: var(--text-body-shorthand-small);
|
|
89
89
|
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
|
|
@@ -102,27 +102,29 @@ class ToolTipElement extends HTMLElement {
|
|
|
102
102
|
word-wrap: break-word;
|
|
103
103
|
white-space: normal;
|
|
104
104
|
width: max-content !important;
|
|
105
|
-
inset: var(--
|
|
105
|
+
inset: var(--tooltip-top) auto auto var(--tooltip-left) !important;
|
|
106
106
|
overflow: visible !important;
|
|
107
107
|
text-wrap: balance;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
:host:
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
114
|
-
content: "";
|
|
115
|
-
border: 6px solid transparent;
|
|
116
|
-
opacity: 0;
|
|
110
|
+
:host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) {
|
|
111
|
+
--tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem));
|
|
112
|
+
--tooltip-left: var(--tool-tip-position-left);
|
|
117
113
|
}
|
|
118
114
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
115
|
+
:host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) {
|
|
116
|
+
--tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem));
|
|
117
|
+
--tooltip-left: var(--tool-tip-position-left);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:host(.tooltip-w) {
|
|
121
|
+
--tooltip-top: var(--tool-tip-position-top);
|
|
122
|
+
--tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host(.tooltip-e) {
|
|
126
|
+
--tooltip-top: var(--tool-tip-position-top);
|
|
127
|
+
--tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem));
|
|
126
128
|
}
|
|
127
129
|
|
|
128
130
|
:host:after{
|
|
@@ -134,73 +136,40 @@ class ToolTipElement extends HTMLElement {
|
|
|
134
136
|
content: "";
|
|
135
137
|
}
|
|
136
138
|
|
|
137
|
-
:host(:popover-open),
|
|
138
|
-
:host(:popover-open):before {
|
|
139
|
-
animation-name: tooltip-appear;
|
|
140
|
-
animation-duration: .1s;
|
|
141
|
-
animation-fill-mode: forwards;
|
|
142
|
-
animation-timing-function: ease-in;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
:host(.\\:popover-open),
|
|
146
|
-
:host(.\\:popover-open):before {
|
|
147
|
-
animation-name: tooltip-appear;
|
|
148
|
-
animation-duration: .1s;
|
|
149
|
-
animation-fill-mode: forwards;
|
|
150
|
-
animation-timing-function: ease-in;
|
|
151
|
-
animation-delay: .4s;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
:host(.tooltip-s):before,
|
|
155
|
-
:host(.tooltip-n):before {
|
|
156
|
-
right: 50%;
|
|
157
|
-
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
158
|
-
}
|
|
159
|
-
:host(.tooltip-s):before,
|
|
160
|
-
:host(.tooltip-se):before,
|
|
161
|
-
:host(.tooltip-sw):before {
|
|
162
|
-
bottom: 100%;
|
|
163
|
-
border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
164
|
-
}
|
|
165
139
|
:host(.tooltip-s):after,
|
|
166
140
|
:host(.tooltip-se):after,
|
|
167
141
|
:host(.tooltip-sw):after {
|
|
168
142
|
bottom: 100%
|
|
169
143
|
}
|
|
170
|
-
|
|
171
|
-
:host(.tooltip-ne):before,
|
|
172
|
-
:host(.tooltip-nw):before {
|
|
173
|
-
top: 100%;
|
|
174
|
-
border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
175
|
-
}
|
|
144
|
+
|
|
176
145
|
:host(.tooltip-n):after,
|
|
177
146
|
:host(.tooltip-ne):after,
|
|
178
147
|
:host(.tooltip-nw):after {
|
|
179
148
|
top: 100%;
|
|
180
149
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
150
|
+
|
|
151
|
+
@keyframes tooltip-appear {
|
|
152
|
+
from {
|
|
153
|
+
opacity: 0;
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
}
|
|
190
158
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
159
|
+
|
|
160
|
+
:host(:popover-open),
|
|
161
|
+
:host(:popover-open):before {
|
|
162
|
+
animation-name: tooltip-appear;
|
|
163
|
+
animation-duration: .1s;
|
|
164
|
+
animation-fill-mode: forwards;
|
|
165
|
+
animation-timing-function: ease-in;
|
|
197
166
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
167
|
+
|
|
168
|
+
:host(.\\:popover-open) {
|
|
169
|
+
animation-name: tooltip-appear;
|
|
170
|
+
animation-duration: .1s;
|
|
171
|
+
animation-fill-mode: forwards;
|
|
172
|
+
animation-timing-function: ease-in;
|
|
204
173
|
}
|
|
205
174
|
|
|
206
175
|
@media (forced-colors: active) {
|
|
@@ -390,7 +359,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
390
359
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
391
360
|
}
|
|
392
361
|
else if (direction === 'ne') {
|
|
393
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
362
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
|
394
363
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
395
364
|
}
|
|
396
365
|
else if (direction === 'e') {
|
|
@@ -398,7 +367,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
398
367
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
|
|
399
368
|
}
|
|
400
369
|
else if (direction === 'se') {
|
|
401
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
370
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
|
402
371
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
403
372
|
}
|
|
404
373
|
else if (direction === 's') {
|
|
@@ -406,7 +375,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
406
375
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
407
376
|
}
|
|
408
377
|
else if (direction === 'sw') {
|
|
409
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
378
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
|
410
379
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
|
411
380
|
}
|
|
412
381
|
else if (direction === 'w') {
|
|
@@ -414,7 +383,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
414
383
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
|
|
415
384
|
}
|
|
416
385
|
else if (direction === 'nw') {
|
|
417
|
-
__classPrivateFieldSet(this, _ToolTipElement_align, '
|
|
386
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
|
418
387
|
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
|
419
388
|
}
|
|
420
389
|
}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
|
|
@@ -425,7 +394,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
|
|
|
425
394
|
const position = getAnchoredPosition(this, this.control, {
|
|
426
395
|
side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
|
|
427
396
|
align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
|
|
428
|
-
anchorOffset:
|
|
397
|
+
anchorOffset: 0,
|
|
429
398
|
});
|
|
430
399
|
const anchorSide = position.anchorSide;
|
|
431
400
|
const align = position.anchorAlign;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.flash:not(.Banner){background-
|
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.21.0
|
|
3
|
+
"version": "0.21.0",
|
|
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",
|
package/static/info_arch.json
CHANGED
|
@@ -8778,6 +8778,110 @@
|
|
|
8778
8778
|
"color-contrast"
|
|
8779
8779
|
]
|
|
8780
8780
|
}
|
|
8781
|
+
},
|
|
8782
|
+
{
|
|
8783
|
+
"preview_path": "primer/alpha/tooltip/tooltip_n",
|
|
8784
|
+
"name": "tooltip_n",
|
|
8785
|
+
"snapshot": "interactive",
|
|
8786
|
+
"skip_rules": {
|
|
8787
|
+
"wont_fix": [
|
|
8788
|
+
"region"
|
|
8789
|
+
],
|
|
8790
|
+
"will_fix": [
|
|
8791
|
+
"color-contrast"
|
|
8792
|
+
]
|
|
8793
|
+
}
|
|
8794
|
+
},
|
|
8795
|
+
{
|
|
8796
|
+
"preview_path": "primer/alpha/tooltip/tooltip_s",
|
|
8797
|
+
"name": "tooltip_s",
|
|
8798
|
+
"snapshot": "interactive",
|
|
8799
|
+
"skip_rules": {
|
|
8800
|
+
"wont_fix": [
|
|
8801
|
+
"region"
|
|
8802
|
+
],
|
|
8803
|
+
"will_fix": [
|
|
8804
|
+
"color-contrast"
|
|
8805
|
+
]
|
|
8806
|
+
}
|
|
8807
|
+
},
|
|
8808
|
+
{
|
|
8809
|
+
"preview_path": "primer/alpha/tooltip/tooltip_e",
|
|
8810
|
+
"name": "tooltip_e",
|
|
8811
|
+
"snapshot": "interactive",
|
|
8812
|
+
"skip_rules": {
|
|
8813
|
+
"wont_fix": [
|
|
8814
|
+
"region"
|
|
8815
|
+
],
|
|
8816
|
+
"will_fix": [
|
|
8817
|
+
"color-contrast"
|
|
8818
|
+
]
|
|
8819
|
+
}
|
|
8820
|
+
},
|
|
8821
|
+
{
|
|
8822
|
+
"preview_path": "primer/alpha/tooltip/tooltip_w",
|
|
8823
|
+
"name": "tooltip_w",
|
|
8824
|
+
"snapshot": "interactive",
|
|
8825
|
+
"skip_rules": {
|
|
8826
|
+
"wont_fix": [
|
|
8827
|
+
"region"
|
|
8828
|
+
],
|
|
8829
|
+
"will_fix": [
|
|
8830
|
+
"color-contrast"
|
|
8831
|
+
]
|
|
8832
|
+
}
|
|
8833
|
+
},
|
|
8834
|
+
{
|
|
8835
|
+
"preview_path": "primer/alpha/tooltip/tooltip_se",
|
|
8836
|
+
"name": "tooltip_se",
|
|
8837
|
+
"snapshot": "interactive",
|
|
8838
|
+
"skip_rules": {
|
|
8839
|
+
"wont_fix": [
|
|
8840
|
+
"region"
|
|
8841
|
+
],
|
|
8842
|
+
"will_fix": [
|
|
8843
|
+
"color-contrast"
|
|
8844
|
+
]
|
|
8845
|
+
}
|
|
8846
|
+
},
|
|
8847
|
+
{
|
|
8848
|
+
"preview_path": "primer/alpha/tooltip/tooltip_sw",
|
|
8849
|
+
"name": "tooltip_sw",
|
|
8850
|
+
"snapshot": "interactive",
|
|
8851
|
+
"skip_rules": {
|
|
8852
|
+
"wont_fix": [
|
|
8853
|
+
"region"
|
|
8854
|
+
],
|
|
8855
|
+
"will_fix": [
|
|
8856
|
+
"color-contrast"
|
|
8857
|
+
]
|
|
8858
|
+
}
|
|
8859
|
+
},
|
|
8860
|
+
{
|
|
8861
|
+
"preview_path": "primer/alpha/tooltip/tooltip_ne",
|
|
8862
|
+
"name": "tooltip_ne",
|
|
8863
|
+
"snapshot": "interactive",
|
|
8864
|
+
"skip_rules": {
|
|
8865
|
+
"wont_fix": [
|
|
8866
|
+
"region"
|
|
8867
|
+
],
|
|
8868
|
+
"will_fix": [
|
|
8869
|
+
"color-contrast"
|
|
8870
|
+
]
|
|
8871
|
+
}
|
|
8872
|
+
},
|
|
8873
|
+
{
|
|
8874
|
+
"preview_path": "primer/alpha/tooltip/tooltip_nw",
|
|
8875
|
+
"name": "tooltip_nw",
|
|
8876
|
+
"snapshot": "interactive",
|
|
8877
|
+
"skip_rules": {
|
|
8878
|
+
"wont_fix": [
|
|
8879
|
+
"region"
|
|
8880
|
+
],
|
|
8881
|
+
"will_fix": [
|
|
8882
|
+
"color-contrast"
|
|
8883
|
+
]
|
|
8884
|
+
}
|
|
8781
8885
|
}
|
|
8782
8886
|
],
|
|
8783
8887
|
"subcomponents": [
|
package/static/previews.json
CHANGED
|
@@ -6797,6 +6797,110 @@
|
|
|
6797
6797
|
"color-contrast"
|
|
6798
6798
|
]
|
|
6799
6799
|
}
|
|
6800
|
+
},
|
|
6801
|
+
{
|
|
6802
|
+
"preview_path": "primer/alpha/tooltip/tooltip_n",
|
|
6803
|
+
"name": "tooltip_n",
|
|
6804
|
+
"snapshot": "interactive",
|
|
6805
|
+
"skip_rules": {
|
|
6806
|
+
"wont_fix": [
|
|
6807
|
+
"region"
|
|
6808
|
+
],
|
|
6809
|
+
"will_fix": [
|
|
6810
|
+
"color-contrast"
|
|
6811
|
+
]
|
|
6812
|
+
}
|
|
6813
|
+
},
|
|
6814
|
+
{
|
|
6815
|
+
"preview_path": "primer/alpha/tooltip/tooltip_s",
|
|
6816
|
+
"name": "tooltip_s",
|
|
6817
|
+
"snapshot": "interactive",
|
|
6818
|
+
"skip_rules": {
|
|
6819
|
+
"wont_fix": [
|
|
6820
|
+
"region"
|
|
6821
|
+
],
|
|
6822
|
+
"will_fix": [
|
|
6823
|
+
"color-contrast"
|
|
6824
|
+
]
|
|
6825
|
+
}
|
|
6826
|
+
},
|
|
6827
|
+
{
|
|
6828
|
+
"preview_path": "primer/alpha/tooltip/tooltip_e",
|
|
6829
|
+
"name": "tooltip_e",
|
|
6830
|
+
"snapshot": "interactive",
|
|
6831
|
+
"skip_rules": {
|
|
6832
|
+
"wont_fix": [
|
|
6833
|
+
"region"
|
|
6834
|
+
],
|
|
6835
|
+
"will_fix": [
|
|
6836
|
+
"color-contrast"
|
|
6837
|
+
]
|
|
6838
|
+
}
|
|
6839
|
+
},
|
|
6840
|
+
{
|
|
6841
|
+
"preview_path": "primer/alpha/tooltip/tooltip_w",
|
|
6842
|
+
"name": "tooltip_w",
|
|
6843
|
+
"snapshot": "interactive",
|
|
6844
|
+
"skip_rules": {
|
|
6845
|
+
"wont_fix": [
|
|
6846
|
+
"region"
|
|
6847
|
+
],
|
|
6848
|
+
"will_fix": [
|
|
6849
|
+
"color-contrast"
|
|
6850
|
+
]
|
|
6851
|
+
}
|
|
6852
|
+
},
|
|
6853
|
+
{
|
|
6854
|
+
"preview_path": "primer/alpha/tooltip/tooltip_se",
|
|
6855
|
+
"name": "tooltip_se",
|
|
6856
|
+
"snapshot": "interactive",
|
|
6857
|
+
"skip_rules": {
|
|
6858
|
+
"wont_fix": [
|
|
6859
|
+
"region"
|
|
6860
|
+
],
|
|
6861
|
+
"will_fix": [
|
|
6862
|
+
"color-contrast"
|
|
6863
|
+
]
|
|
6864
|
+
}
|
|
6865
|
+
},
|
|
6866
|
+
{
|
|
6867
|
+
"preview_path": "primer/alpha/tooltip/tooltip_sw",
|
|
6868
|
+
"name": "tooltip_sw",
|
|
6869
|
+
"snapshot": "interactive",
|
|
6870
|
+
"skip_rules": {
|
|
6871
|
+
"wont_fix": [
|
|
6872
|
+
"region"
|
|
6873
|
+
],
|
|
6874
|
+
"will_fix": [
|
|
6875
|
+
"color-contrast"
|
|
6876
|
+
]
|
|
6877
|
+
}
|
|
6878
|
+
},
|
|
6879
|
+
{
|
|
6880
|
+
"preview_path": "primer/alpha/tooltip/tooltip_ne",
|
|
6881
|
+
"name": "tooltip_ne",
|
|
6882
|
+
"snapshot": "interactive",
|
|
6883
|
+
"skip_rules": {
|
|
6884
|
+
"wont_fix": [
|
|
6885
|
+
"region"
|
|
6886
|
+
],
|
|
6887
|
+
"will_fix": [
|
|
6888
|
+
"color-contrast"
|
|
6889
|
+
]
|
|
6890
|
+
}
|
|
6891
|
+
},
|
|
6892
|
+
{
|
|
6893
|
+
"preview_path": "primer/alpha/tooltip/tooltip_nw",
|
|
6894
|
+
"name": "tooltip_nw",
|
|
6895
|
+
"snapshot": "interactive",
|
|
6896
|
+
"skip_rules": {
|
|
6897
|
+
"wont_fix": [
|
|
6898
|
+
"region"
|
|
6899
|
+
],
|
|
6900
|
+
"will_fix": [
|
|
6901
|
+
"color-contrast"
|
|
6902
|
+
]
|
|
6903
|
+
}
|
|
6800
6904
|
}
|
|
6801
6905
|
]
|
|
6802
6906
|
},
|