primer_view_components 0.0.106 → 0.0.108
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +22 -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_list.css +1 -0
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -0
- data/app/components/primer/alpha/{action_list/action-list.pcss → action_list.pcss} +95 -4
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +1 -0
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.d.ts +2 -1
- data/app/components/primer/alpha/segmented_control.js +0 -1
- data/app/components/primer/alpha/segmented_control.ts +1 -1
- data/app/components/primer/beta/banner.css.json +1 -0
- data/app/components/primer/beta/banner.rb +10 -0
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +1 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +4 -4
- data/app/components/primer/beta/x_banner.d.ts +2 -1
- data/app/components/primer/beta/x_banner.js +0 -1
- data/app/components/primer/beta/x_banner.ts +1 -1
- data/app/components/primer/primer.pcss +2 -2
- data/lib/primer/deprecations.rb +0 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/test.rake +0 -12
- data/static/audited_at.json +0 -1
- data/static/constants.json +0 -2
- data/static/statuses.json +0 -1
- metadata +10 -10
- data/app/components/primer/alpha/action_list/action-list-selection.css +0 -1
- data/app/components/primer/alpha/action_list/action-list-selection.css.map +0 -1
- data/app/components/primer/alpha/action_list/action-list-selection.pcss +0 -92
- data/app/components/primer/alpha/action_list/action-list.css +0 -1
- data/app/components/primer/alpha/action_list/action-list.css.map +0 -1
- data/app/components/primer/image_crop.rb +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA8FF,CAvFE,uDACE,oCAAqC,CACrC,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CAJlG,QAAiB,CAGjB,UAAW,CAHX,SAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAAkB,CAClB,OAAiB,CAAjB,KAKF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,gEAAiE,CADjE,oHAEF,
|
|
1
|
+
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA8FF,CAvFE,uDACE,oCAAqC,CACrC,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CAJlG,QAAiB,CAGjB,UAAW,CAHX,SAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAAkB,CAClB,OAAiB,CAAjB,KAKF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,gEAAiE,CADjE,oHAEF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,yJACF,CAGF,uCACE,0JAA+J,CAC/J,mIAKF,CAHE,wDACE,yJACF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,wJACF,CAGF,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAWF,CATE,oDACE,MAAO,CACP,sBACF,CAEA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-btn-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold, 600);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--primer-control-medium-paddingBlock, 6px);\n margin-bottom: var(--primer-control-medium-paddingBlock, 6px);\n content: '';\n border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal, 400);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));\n border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--medium {\n height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--large {\n height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
declare class SegmentedControlElement extends HTMLElement {
|
|
2
2
|
#private;
|
|
3
3
|
items: HTMLElement[];
|
|
4
4
|
connectedCallback(): void;
|
|
@@ -9,3 +9,4 @@ declare global {
|
|
|
9
9
|
SegmentedControlElement: typeof SegmentedControlElement;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
+
export {};
|
|
@@ -41,7 +41,6 @@ __decorate([
|
|
|
41
41
|
SegmentedControlElement = __decorate([
|
|
42
42
|
controller
|
|
43
43
|
], SegmentedControlElement);
|
|
44
|
-
export { SegmentedControlElement };
|
|
45
44
|
if (!window.customElements.get('segmented-control')) {
|
|
46
45
|
window.SegmentedControlElement = SegmentedControlElement;
|
|
47
46
|
window.customElements.define('segmented-control', SegmentedControlElement);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"primer/beta/banner","selectors":[".Banner",".Banner .Banner-actions",".Banner .Banner-visual",".Banner .Banner-visual>.octicon",".Banner .Banner-visual>*",".Banner .Banner-message",".Banner .Banner-close",".Banner .Banner-visual .octicon",".Banner.Banner--warning",".Banner.Banner--warning .Banner-visual .octicon",".Banner.Banner--error",".Banner.Banner--error .Banner-visual .octicon",".Banner.Banner--success",".Banner.Banner--success .Banner-visual .octicon",".Banner.Banner--full",".Banner.Banner--full-whenNarrow"]}
|
|
@@ -34,6 +34,13 @@ module Primer
|
|
|
34
34
|
:success => "Banner--success"
|
|
35
35
|
}.freeze
|
|
36
36
|
|
|
37
|
+
LEGACY_SCHEME_MAPPINGS = {
|
|
38
|
+
DEFAULT_SCHEME => "",
|
|
39
|
+
:warning => "flash-warn",
|
|
40
|
+
:danger => "flash-error",
|
|
41
|
+
:success => "flash-success"
|
|
42
|
+
}.freeze
|
|
43
|
+
|
|
37
44
|
DEFAULT_ICONS = {
|
|
38
45
|
default: :bell,
|
|
39
46
|
warning: :alert,
|
|
@@ -95,8 +102,11 @@ module Primer
|
|
|
95
102
|
@system_arguments[:classes] = class_names(
|
|
96
103
|
@system_arguments[:classes],
|
|
97
104
|
"Banner",
|
|
105
|
+
"flash", # legacy
|
|
98
106
|
SCHEME_MAPPINGS[@scheme],
|
|
107
|
+
LEGACY_SCHEME_MAPPINGS[@scheme],
|
|
99
108
|
"Banner--full": full,
|
|
109
|
+
"flash-full": full, # legacy
|
|
100
110
|
"Banner--full-whenNarrow": full_when_narrow
|
|
101
111
|
)
|
|
102
112
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)
|
|
1
|
+
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"primer/beta/button","selectors":[".Button",".Button-withTooltip","a.Button,summary.Button",".Button-content",".Button-content--alignStart",".Button-visual",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--large",".Button--large .Button-label",".Button--fullWidth",".Button--primary",".Button--secondary",".Button--secondary[aria-pressed=true]",".Button--invisible",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--danger",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
|
@@ -127,11 +127,11 @@ summary.Button {
|
|
|
127
127
|
padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);
|
|
128
128
|
gap: var(--primer-control-small-gap, 4px);
|
|
129
129
|
|
|
130
|
-
.Button-label {
|
|
130
|
+
& .Button-label {
|
|
131
131
|
line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.Button-content {
|
|
134
|
+
& .Button-content {
|
|
135
135
|
& > :not(:last-child) {
|
|
136
136
|
margin-right: var(--primer-control-small-gap, 4px);
|
|
137
137
|
}
|
|
@@ -143,11 +143,11 @@ summary.Button {
|
|
|
143
143
|
padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);
|
|
144
144
|
gap: var(--primer-control-large-gap, 8px);
|
|
145
145
|
|
|
146
|
-
.Button-label {
|
|
146
|
+
& .Button-label {
|
|
147
147
|
line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
.Button-content {
|
|
150
|
+
& .Button-content {
|
|
151
151
|
& > :not(:last-child) {
|
|
152
152
|
margin-right: var(--primer-control-large-gap, 8px);
|
|
153
153
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
declare class XBannerElement extends HTMLElement {
|
|
2
2
|
root: HTMLElement;
|
|
3
3
|
titleText: HTMLElement;
|
|
4
4
|
dismiss(): void;
|
|
@@ -9,3 +9,4 @@ declare global {
|
|
|
9
9
|
XBannerElement: typeof XBannerElement;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
+
export {};
|
|
@@ -32,7 +32,6 @@ __decorate([
|
|
|
32
32
|
XBannerElement = __decorate([
|
|
33
33
|
controller
|
|
34
34
|
], XBannerElement);
|
|
35
|
-
export { XBannerElement };
|
|
36
35
|
if (!window.customElements.get('x-banner')) {
|
|
37
36
|
window.XBannerElement = XBannerElement;
|
|
38
37
|
window.customElements.define('x-banner', XBannerElement);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* CSS component styles here */
|
|
2
|
+
@import "./alpha/action_list.pcss";
|
|
3
|
+
@import './alpha/segmented_control.pcss';
|
|
2
4
|
@import "./beta/banner.pcss";
|
|
3
5
|
@import "./beta/button.pcss";
|
|
4
|
-
@import "./alpha/action_list/action-list.pcss";
|
|
5
|
-
@import './alpha/segmented_control.pcss';
|
data/lib/primer/deprecations.rb
CHANGED
|
@@ -7,7 +7,6 @@ module Primer
|
|
|
7
7
|
DEPRECATED_COMPONENTS = {
|
|
8
8
|
"Primer::LabelComponent" => "Primer::Beta::Label",
|
|
9
9
|
"Primer::LinkComponent" => "Primer::Beta::Link",
|
|
10
|
-
"Primer::ImageCrop" => "Primer::Alpha::ImageCrop",
|
|
11
10
|
"Primer::Image" => "Primer::Alpha::Image",
|
|
12
11
|
"Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
|
|
13
12
|
"Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
|
data/lib/tasks/test.rake
CHANGED
|
@@ -58,12 +58,6 @@ namespace :test do
|
|
|
58
58
|
t.test_files = FileList["test/accessibility_test.rb"]
|
|
59
59
|
end
|
|
60
60
|
|
|
61
|
-
Rake::TestTask.new(:snapshots) do |t|
|
|
62
|
-
t.warning = false
|
|
63
|
-
t.libs << "test"
|
|
64
|
-
t.test_files = FileList["test/snapshots_test.rb"]
|
|
65
|
-
end
|
|
66
|
-
|
|
67
61
|
task :coverage do
|
|
68
62
|
require "simplecov"
|
|
69
63
|
|
|
@@ -79,9 +73,3 @@ task :test do
|
|
|
79
73
|
Rake::Task["test:all"].invoke
|
|
80
74
|
end
|
|
81
75
|
end
|
|
82
|
-
|
|
83
|
-
task "test:snapshots" => :clean_snapshots
|
|
84
|
-
task :clean_snapshots do
|
|
85
|
-
# Clear folder
|
|
86
|
-
FileUtils.rm_rf("test/snapshots")
|
|
87
|
-
end
|
data/static/audited_at.json
CHANGED
data/static/constants.json
CHANGED
data/static/statuses.json
CHANGED
|
@@ -68,7 +68,6 @@
|
|
|
68
68
|
"Primer::HellipButton": "alpha",
|
|
69
69
|
"Primer::IconButton": "deprecated",
|
|
70
70
|
"Primer::Image": "deprecated",
|
|
71
|
-
"Primer::ImageCrop": "deprecated",
|
|
72
71
|
"Primer::LabelComponent": "deprecated",
|
|
73
72
|
"Primer::LayoutComponent": "alpha",
|
|
74
73
|
"Primer::LinkComponent": "deprecated",
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.108
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2022-
|
|
11
|
+
date: 2022-11-01 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -408,14 +408,12 @@ files:
|
|
|
408
408
|
- app/assets/javascripts/primer_view_components.js.map
|
|
409
409
|
- app/assets/styles/primer_view_components.css
|
|
410
410
|
- app/assets/styles/primer_view_components.css.map
|
|
411
|
+
- app/components/primer/alpha/action_list.css
|
|
412
|
+
- app/components/primer/alpha/action_list.css.json
|
|
413
|
+
- app/components/primer/alpha/action_list.css.map
|
|
411
414
|
- app/components/primer/alpha/action_list.html.erb
|
|
415
|
+
- app/components/primer/alpha/action_list.pcss
|
|
412
416
|
- app/components/primer/alpha/action_list.rb
|
|
413
|
-
- app/components/primer/alpha/action_list/action-list-selection.css
|
|
414
|
-
- app/components/primer/alpha/action_list/action-list-selection.css.map
|
|
415
|
-
- app/components/primer/alpha/action_list/action-list-selection.pcss
|
|
416
|
-
- app/components/primer/alpha/action_list/action-list.css
|
|
417
|
-
- app/components/primer/alpha/action_list/action-list.css.map
|
|
418
|
-
- app/components/primer/alpha/action_list/action-list.pcss
|
|
419
417
|
- app/components/primer/alpha/action_list/divider.rb
|
|
420
418
|
- app/components/primer/alpha/action_list/heading.html.erb
|
|
421
419
|
- app/components/primer/alpha/action_list/heading.rb
|
|
@@ -453,6 +451,7 @@ files:
|
|
|
453
451
|
- app/components/primer/alpha/nav_list/section.html.erb
|
|
454
452
|
- app/components/primer/alpha/nav_list/section.rb
|
|
455
453
|
- app/components/primer/alpha/segmented_control.css
|
|
454
|
+
- app/components/primer/alpha/segmented_control.css.json
|
|
456
455
|
- app/components/primer/alpha/segmented_control.css.map
|
|
457
456
|
- app/components/primer/alpha/segmented_control.d.ts
|
|
458
457
|
- app/components/primer/alpha/segmented_control.html.erb
|
|
@@ -492,6 +491,7 @@ files:
|
|
|
492
491
|
- app/components/primer/beta/avatar_stack.html.erb
|
|
493
492
|
- app/components/primer/beta/avatar_stack.rb
|
|
494
493
|
- app/components/primer/beta/banner.css
|
|
494
|
+
- app/components/primer/beta/banner.css.json
|
|
495
495
|
- app/components/primer/beta/banner.css.map
|
|
496
496
|
- app/components/primer/beta/banner.html.erb
|
|
497
497
|
- app/components/primer/beta/banner.pcss
|
|
@@ -506,6 +506,7 @@ files:
|
|
|
506
506
|
- app/components/primer/beta/breadcrumbs.html.erb
|
|
507
507
|
- app/components/primer/beta/breadcrumbs.rb
|
|
508
508
|
- app/components/primer/beta/button.css
|
|
509
|
+
- app/components/primer/beta/button.css.json
|
|
509
510
|
- app/components/primer/beta/button.css.map
|
|
510
511
|
- app/components/primer/beta/button.html.erb
|
|
511
512
|
- app/components/primer/beta/button.pcss
|
|
@@ -560,7 +561,6 @@ files:
|
|
|
560
561
|
- app/components/primer/icon_button.html.erb
|
|
561
562
|
- app/components/primer/icon_button.rb
|
|
562
563
|
- app/components/primer/image.rb
|
|
563
|
-
- app/components/primer/image_crop.rb
|
|
564
564
|
- app/components/primer/label_component.rb
|
|
565
565
|
- app/components/primer/layout_component.html.erb
|
|
566
566
|
- app/components/primer/layout_component.rb
|
|
@@ -886,7 +886,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
886
886
|
- !ruby/object:Gem::Version
|
|
887
887
|
version: '0'
|
|
888
888
|
requirements: []
|
|
889
|
-
rubygems_version: 3.
|
|
889
|
+
rubygems_version: 3.2.33
|
|
890
890
|
signing_key:
|
|
891
891
|
specification_version: 4
|
|
892
892
|
summary: ViewComponents for the Primer Design System
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem{@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["action-list-selection.pcss"],"names":[],"mappings":"AAQI,iJAEE,SAAU,CACV,6CAA+C,CAF/C,kBAGF,CAGA,mJACE,kBAKF,CAHE,yDAHF,mJAII,2DAEJ,CADE,CAKA,+MACE,2BAA4B,CAC5B,6BAA8B,CAC9B,+CACF,CAEA,iNACE,gCACF,CAOF,mJAEE,SAAU,CACV,gDAAkD,CAFlD,iBAGF,CAGA,qJAGE,2BAA4B,CAD5B,mCAAsC,CADtC,iBAOF,CAHE,yDALF,qJAMI,4DAEJ,CADE,CAKA,iNACE,gCAAiC,CACjC,kCAAmC,CACnC,+CACF,CAGF,iJACE,gCAAiC,CACjC,2EACF,CAjEJ,gBAoEE,uBACE,GACE,2BACF,CAEA,GACE,wBACF,CACF,CAEA,wBACE,GACE,wBACF,CAEA,GACE,2BACF,CACF,CACF","file":"action-list-selection.css","sourcesContent":["/*\n* checkbox item [aria-checked]\n* listbox [aria-selected]\n*/\n.ActionListItem {\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-accent-fg);\n stroke: var(--color-accent-fg);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--color-fg-on-emphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n stroke: var(--color-border-default);\n stroke-width: var(--primer-borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n }\n }\n\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n}\n"]}
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* checkbox item [aria-checked]
|
|
3
|
-
* listbox [aria-selected]
|
|
4
|
-
*/
|
|
5
|
-
.ActionListItem {
|
|
6
|
-
&[aria-checked='true'],
|
|
7
|
-
&[aria-selected='true'] {
|
|
8
|
-
/* multiselect checkmark */
|
|
9
|
-
& .ActionListItem-multiSelectCheckmark {
|
|
10
|
-
visibility: visible;
|
|
11
|
-
opacity: 1;
|
|
12
|
-
transition: visibility 0 linear 0, opacity 50ms;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/* singleselect checkmark */
|
|
16
|
-
& .ActionListItem-singleSelectCheckmark {
|
|
17
|
-
visibility: visible;
|
|
18
|
-
|
|
19
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
20
|
-
animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* checkbox */
|
|
25
|
-
& .ActionListItem-multiSelectIcon {
|
|
26
|
-
& .ActionListItem-multiSelectIconRect {
|
|
27
|
-
fill: var(--color-accent-fg);
|
|
28
|
-
stroke: var(--color-accent-fg);
|
|
29
|
-
stroke-width: var(--primer-borderWidth-thin, 1px);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
& .ActionListItem-multiSelectCheckmark {
|
|
33
|
-
fill: var(--color-fg-on-emphasis);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
&[aria-checked='false'],
|
|
39
|
-
&[aria-selected='false'] {
|
|
40
|
-
/* multiselect checkmark */
|
|
41
|
-
& .ActionListItem-multiSelectCheckmark {
|
|
42
|
-
visibility: hidden;
|
|
43
|
-
opacity: 0;
|
|
44
|
-
transition: visibility 0 linear 50ms, opacity 50ms;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* singleselect checkmark */
|
|
48
|
-
& .ActionListItem-singleSelectCheckmark {
|
|
49
|
-
visibility: hidden;
|
|
50
|
-
transition: visibility 0s linear 200ms;
|
|
51
|
-
clip-path: inset(16px 0 0 0);
|
|
52
|
-
|
|
53
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
54
|
-
animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/* checkbox */
|
|
59
|
-
& .ActionListItem-multiSelectIcon {
|
|
60
|
-
& .ActionListItem-multiSelectIconRect {
|
|
61
|
-
fill: var(--color-canvas-default);
|
|
62
|
-
stroke: var(--color-border-default);
|
|
63
|
-
stroke-width: var(--primer-borderWidth-thin, 1px);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
& .ActionListItem-multiSelectIconRect {
|
|
68
|
-
fill: var(--color-canvas-default);
|
|
69
|
-
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
@keyframes checkmarkIn {
|
|
74
|
-
from {
|
|
75
|
-
clip-path: inset(16px 0 0 0);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
to {
|
|
79
|
-
clip-path: inset(0 0 0 0);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
@keyframes checkmarkOut {
|
|
84
|
-
from {
|
|
85
|
-
clip-path: inset(0 0 0 0);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
to {
|
|
89
|
-
clip-path: inset(16px 0 0 0);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionListWrap--divided .ActionListItem--navActive{& .ActionListItem-label:before,+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,.focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--color-action-list-item-default-active-bg)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}@media screen and (prefers-reduced-motion:no-preference){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{@keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem){.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding:var(--primer-actionListContent-paddingBlock) var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{&:before,+.ActionListItem:before{visibility:hidden}}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--primer-text-body-size-small,12px);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding:var(--base-size-8,8px) var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px)) calc(var(--base-size-8, 8px)*-1) var(--base-size-8,8px);padding:0}.ActionList-sectionDivider{.ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px)) calc(var(--base-size-8, 8px)*-1) var(--base-size-8,8px)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-top:0}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["action-list.pcss","../../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action-list.css","sourcesContent":[":root {\n --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--primer-borderWidth-thin, 1px);\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &:active {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--color-action-list-item-default-hover-bg);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n }\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);\n }\n\n @keyframes ActionListItem-active-bg {\n 50% {\n box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.97);\n }\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal, 400);\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n &:not(.ActionListItem--subItem) {\n .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--color-danger-fg);\n }\n\n & .ActionListItem-visual {\n color: var(--color-danger-fg);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--color-action-list-item-danger-hover-bg);\n\n & .ActionListItem-label {\n color: var(--color-action-list-item-danger-hover-text);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--color-action-list-item-danger-active-bg);\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--primer-actionListContent-paddingBlock);\n padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n color: var(--color-fg-default);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24, 24px);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32, 32px);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36, 36px);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40, 40px);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--color-action-list-item-default-selected-bg);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n &::before,\n + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n color: var(--color-fg-muted);\n pointer-events: none;\n fill: var(--color-fg-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding-inline: var(--primer-actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--primer-borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n list-style: none;\n background: var(--color-action-list-item-inline-divider);\n border: 0;\n }\n\n .ActionList-sectionDivider-title {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n background: var(--color-canvas-subtle);\n border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8, 8px);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4, 4px);\n height: var(--base-size-24, 24px);\n content: '';\n background: var(--color-accent-fg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
|