primer_view_components 0.7.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +22 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.json +1 -0
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +6 -0
  11. data/app/components/primer/alpha/action_menu/action_menu_element.js +37 -6
  12. data/app/components/primer/alpha/action_menu/action_menu_element.ts +39 -5
  13. data/app/components/primer/beta/button.css +1 -1
  14. data/app/components/primer/beta/button.css.json +1 -0
  15. data/app/components/primer/beta/button.css.map +1 -1
  16. data/app/components/primer/beta/button.pcss +4 -0
  17. data/app/components/primer/beta/button.rb +6 -1
  18. data/app/components/primer/beta/flash.css +1 -1
  19. data/app/components/primer/beta/flash.css.map +1 -1
  20. data/app/components/primer/beta/flash.html.erb +1 -3
  21. data/app/components/primer/beta/flash.pcss +1 -2
  22. data/app/components/primer/component.rb +1 -1
  23. data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
  24. data/lib/primer/view_components/version.rb +1 -1
  25. data/lib/primer/view_components.rb +18 -0
  26. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  27. data/previews/primer/beta/button_preview/leading_visual_svg.html.erb +12 -0
  28. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  29. data/previews/primer/beta/button_preview/trailing_visual.html.erb +1 -1
  30. data/previews/primer/beta/button_preview.rb +22 -0
  31. data/static/info_arch.json +14 -1
  32. data/static/previews.json +13 -0
  33. metadata +3 -2
data/app/components/primer/alpha/action_list.css CHANGED
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.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,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);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(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,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(--control-transparent-bgColor-hover,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(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,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(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,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-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);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(--control-medium-gap,.5rem)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,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,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.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,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,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]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[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){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--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,.25rem);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,.5rem);position:relative}.ActionListItem-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);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.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(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.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,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);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(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,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(--control-transparent-bgColor-hover,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(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,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(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,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-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);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(--control-medium-gap,.5rem)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,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,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.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,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,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]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[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){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--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-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);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,.5rem);position:relative}.ActionListItem-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);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.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(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
data/app/components/primer/alpha/action_list.css.json CHANGED
@@ -110,6 +110,7 @@
110
110
  ".ActionListItem-visual--leading",
111
111
  ".ActionListItem-visual--trailing",
112
112
  ".ActionListItem-action--trailing",
113
+ ".ActionListItem-visual--leading svg",
113
114
  ".ActionListItem-descriptionWrap",
114
115
  ".ActionListItem-descriptionWrap .ActionListItem-label",
115
116
  ".ActionListItem-descriptionWrap--inline",
data/app/components/primer/alpha/action_list.css.map CHANGED
@@ -1 +1 @@
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 --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, 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(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, 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: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\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(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\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(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\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);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\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));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\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 &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-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(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\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(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\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(--control-medium-gap);\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(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-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);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\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);\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)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\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 /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\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 @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 }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--control-checked-bgColor-rest);\n stroke: var(--control-checked-bgColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--fgColor-onEmphasis);\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 @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 }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n stroke: var(--control-borderColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\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);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\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);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-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(--control-medium-lineBoxHeight);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-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(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\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(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\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)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
1
+ {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"AAAA,MACE,4EACF,CAIA,kBAEE,sCAAkC,CADlC,oCAEF,CAGA,gBACE,eACF,CAEA,uBACE,gCACF,CAKE,sDAKE,UAGF,CAIE,8HALA,gFAAkF,CADlF,UAAW,CAHX,aAAc,CAFd,iBAAkB,CAClB,kDAAqD,CAErD,UAgBA,CARA,wEAKE,gDAGF,CAGA,8FACE,aACF,CAmBJ,4dAEE,iBACF,CAIA,gBAGE,8DAAyD,CACzD,gDAAyC,CAFzC,eAAgB,CADhB,iBAyMF,CAlME,6CAEE,cACF,CAGA,qBAOI,gRAEE,iBACF,CAEJ,CAGA,mDACE,YACF,CAKE,8DACE,SAWF,CATE,qBACE,oEACE,wGACF,CACF,CAEA,qEACE,0GACF,CAQF,qBACE,2HAEE,wGAA0D,CAD1D,cASF,CANE,yNAIE,gKAA+E,CAF/E,6DAAkD,CAClD,kEAEF,CAEJ,CAEA,6HACE,oGAaF,CAXE,6LAIE,gKAA+E,CAF/E,6DAAkD,CAClD,kEAEF,CAEA,8YAEE,iBACF,CAMJ,oCAEE,wGAAuD,CADvD,8CAmBF,CAhBE,qBACE,0CACE,wGACF,CACF,CAEA,sGAEE,iBACF,CAIA,0CC3KF,0EAA8C,CAC9C,gDAAyC,CAFzC,UAAW,CADX,iCAA2B,CAF3B,uCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,+BDgLE,CAKF,0CAEE,uBA2BF,CAxBI,8FACE,gDACF,CAGF,uEACE,wGAiBF,CAfE,qBACE,6EACE,wGACF,CACF,CAEA,4KAEE,iBACF,CAGA,6EC3MJ,0EAA8C,CAC9C,gDAAyC,CAFzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,+BDgNI,CASA,0UAEE,qEACF,CAEA,iKACE,oEACF,CAGF,qBACE,yFAEE,wBAA6B,CAD7B,kBAEF,CACF,CAWA,2HACE,+DACF,CAEA,qBACE,6CACE,4FAOF,CALE,gNAGE,yFACF,CAEJ,CAGE,iEACE,8FAOF,CALE,4QAGE,yFACF,CAOR,mBAcE,uCAAwC,CAIxC,iBAAkB,CATlB,wBAA6B,CAC7B,WAAY,CACZ,gDAAyC,CALzC,yDAAkC,CAJlC,YAAa,CAcb,qFAAsF,CACtF,oFAAsF,CAFtF,8BAA+B,CAX/B,mDAAoD,CACpD,kEAA6D,CAJ7D,iBAAkB,CAMlB,eAAgB,CAMhB,yBAA0B,CAD1B,qCAAsC,CAJtC,wBAAiB,CAAjB,gBAAiB,CALjB,UAyPF,CAvOE,qCACE,4CACF,CAIA,yBACE,oBACF,CAIE,gIAEE,qEACF,CAEA,8DACE,oEACF,CAEA,qBACE,6CAEE,wBAA6B,CAD7B,kBAEF,CACF,CASE,yDADF,wDAEI,wFAMJ,CALE,CAEA,2EACE,uCACF,CAKA,uGACE,qCACF,CAKA,uGACE,wCACF,CAKA,uGACE,uCACF,CAKF,oEAEE,oBAAqB,CADrB,gCAEF,CAEA,6DACE,WAAY,CAGZ,SAAU,CAFV,gBAAiB,CAGjB,uBAAwB,CAFxB,kBAGF,CAGE,iGACE,gDACF,CAKF,qEAEE,mBAAoB,CADpB,gCAEF,CAEA,8DACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAGhB,uDAAqD,CAFrD,iBAGF,CAGA,4EACE,wGAeF,CAbE,kGACE,gDACF,CAEA,sLAEE,iBACF,CAGA,kFCvZJ,0EAA8C,CAC9C,gDAAyC,CAFzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmB,CAFnB,iBAAkB,CAClB,oBAAqB,CAErB,+BD4ZI,CAWF,uJAEE,SAAU,CACV,6CAA+C,CAF/C,kBAGF,CAGA,yJACE,kBAcF,CAZE,yDAHF,yJAII,2DAAmE,CACnE,uBACE,GACE,2BACF,CAEA,GACE,wBACF,CACF,CAEJ,CADE,CAKA,qNACE,6EAAyC,CACzC,+EAA2C,CAC3C,wCACF,CAEA,uNACE,0DACF,CAOF,yJAEE,SAAU,CACV,gDAAkD,CAFlD,iBAGF,CAGA,2JAGE,2BAA4B,CAD5B,mCAAsC,CADtC,iBAgBF,CAZE,yDALF,2JAMI,4DAAoE,CACpE,wBACE,GACE,wBACF,CAEA,GACE,2BACF,CACF,CAEJ,CADE,CAKA,uNACE,uDAA4B,CAC5B,8DAAuC,CACvC,wCACF,CAGF,uJACE,uDAA4B,CAC5B,gGACF,CAKF,gDACE,2EACF,CAEA,iDACE,4EACF,CAGA,wBAlPF,mBAmPI,2EASJ,CARE,CAIE,8EACE,gBACF,CAMJ,gCACE,uBACF,CAEA,gCACE,uBACF,CAEA,iCACE,wBACF,CAEA,iCACE,wBACF,CAIA,oCACE,iBACF,CAIA,gCAEE,YAAa,CACb,qBAAsB,CACtB,6BAAuB,CAHvB,eAQF,CAHE,sDACE,gDACF,CAIF,wCAGE,oBAAqB,CADrB,kBAAmB,CAEnB,4BAAuB,CAHvB,iBAIF,CAGA,4BAIE,gDAA2B,CAH3B,4CAAsC,CACtC,8CAA2C,CAC3C,oDAEF,CAIA,8CAME,+CAA0B,CAC1B,kBAAmB,CAHnB,gDAA2B,CAF3B,YAAa,CACb,sDAA+C,CAE/C,mBAGF,CAGA,sBAKE,oDAA6B,CAH7B,8CAAuC,CACvC,8CAA2C,CAG3C,eAAgB,CAFhB,qDAA+C,CAH/C,iBAMF,CAEA,gCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAKA,kEACE,4CAAsC,CACtC,oDACF,CAIA,6BAGE,kBAAmB,CAFnB,YAAa,CACb,gBAEF,CAEA,+BAEE,2BAA4B,CAD5B,wBAEF,CAKE,oEACE,iBACF,CAIE,2JACE,kBACF,CAQF,uCAOE,gDAA2B,CAN3B,YAAa,CAOb,qBAAsB,CAJtB,4CAAsC,CAEtC,gDAA6C,CAD7C,oDAA8C,CAF9C,sCAAiC,CADjC,oDAOF,CAGA,iCAQE,gFAAkF,CAClF,QAAS,CART,aAAc,CACd,gDAA+B,CAK/B,eAAgB,CAFhB,yCAAoC,CADpC,8FAAsE,CAEtE,+CAA4C,CAH5C,SAOF,CAEA,4DAGE,gDAA2B,CAF3B,4CAAsC,CACtC,gDAEF,CAGF,mCAIE,0DAAgC,CAEhC,mIAAmH,CADnH,gIAAgH,CAHhH,yCAAoC,CADpC,8FAAsE,CAEtE,+CAcF,CARE,yCAEE,qBAAsB,CADtB,+BAEF,CAEA,+CACE,oBACF","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, 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(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, 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: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\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(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\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(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\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);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\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));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\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 &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-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(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\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(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\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(--control-medium-gap);\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(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-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);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\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);\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)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\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 /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\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 @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 }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--control-checked-bgColor-rest);\n stroke: var(--control-checked-bgColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--fgColor-onEmphasis);\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 @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 }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n stroke: var(--control-borderColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\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/* have leading visual svg filled with chosen color */\n\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\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);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\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);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-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(--control-medium-lineBoxHeight);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-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(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\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(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\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)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
data/app/components/primer/alpha/action_list.pcss CHANGED
@@ -549,6 +549,12 @@
549
549
  grid-area: trailingAction;
550
550
  }
551
551
 
552
+ /* have leading visual svg filled with chosen color */
553
+
554
+ .ActionListItem-visual--leading svg {
555
+ fill: currentcolor;
556
+ }
557
+
552
558
  /* wrapper span
553
559
  default block */
554
560
  .ActionListItem-descriptionWrap {
data/app/components/primer/alpha/action_menu/action_menu_element.js CHANGED
@@ -63,8 +63,9 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
63
63
  if (!id)
64
64
  return null;
65
65
  for (const el of this.querySelectorAll(`[aria-controls]`)) {
66
- if (el.getAttribute('aria-controls') === id)
66
+ if (el.getAttribute('aria-controls') === id) {
67
67
  return el;
68
+ }
68
69
  }
69
70
  return null;
70
71
  }
@@ -95,15 +96,18 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
95
96
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
96
97
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
97
98
  if (this.includeFragment) {
98
- this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
99
+ this.includeFragment.addEventListener('include-fragment-replaced', this, {
100
+ signal
101
+ });
99
102
  }
100
103
  }
101
104
  disconnectedCallback() {
102
105
  __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
103
106
  }
104
107
  handleEvent(event) {
105
- var _a, _b;
106
- if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event)) {
108
+ var _a, _b, _c, _d, _e;
109
+ const activation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event);
110
+ if (event.target === this.invokerElement && activation) {
107
111
  if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
108
112
  event.preventDefault();
109
113
  (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
@@ -111,13 +115,40 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
111
115
  return;
112
116
  }
113
117
  }
114
- if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(':popover-open')))
118
+ // Ignore events within dialogs within menus
119
+ if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
120
+ return;
121
+ }
122
+ // If a dialog has been rendered within the menu, we do not want to hide
123
+ // the entire menu, as that will also hide the Dialog. Instead we want to
124
+ // show the Dialog while hiding just the visible part of the menu.
125
+ if ((activation || event.type === 'click') && ((_d = event.target) === null || _d === void 0 ? void 0 : _d.closest('[data-show-dialog-id]'))) {
126
+ const dialogInvoker = event.target.closest('[data-show-dialog-id]');
127
+ const dialog = this.ownerDocument.getElementById((dialogInvoker === null || dialogInvoker === void 0 ? void 0 : dialogInvoker.getAttribute('data-show-dialog-id')) || '');
128
+ if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
129
+ this.querySelector('.ActionListWrap').style.display = 'none';
130
+ const dialog_controller = new AbortController();
131
+ const { signal } = dialog_controller;
132
+ const handleDialogClose = () => {
133
+ var _a, _b;
134
+ dialog_controller.abort();
135
+ this.querySelector('.ActionListWrap').style.display = '';
136
+ if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
137
+ (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
138
+ }
139
+ };
140
+ dialog.addEventListener('close', handleDialogClose, { signal });
141
+ dialog.addEventListener('cancel', handleDialogClose, { signal });
142
+ return;
143
+ }
144
+ }
145
+ if (!((_e = this.popoverElement) === null || _e === void 0 ? void 0 : _e.matches(':popover-open')))
115
146
  return;
116
147
  if (event.type === 'include-fragment-replaced') {
117
148
  if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
118
149
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
119
150
  }
120
- else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
151
+ else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
121
152
  // Hide popover after current event loop to prevent changes in focus from
122
153
  // altering the target of the event. Not doing this specifically affects
123
154
  // <a> tags. It causes the event to be sent to the currently focused element
data/app/components/primer/alpha/action_menu/action_menu_element.ts CHANGED
@@ -13,7 +13,8 @@ const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[r
13
13
 
14
14
  @controller
15
15
  export class ActionMenuElement extends HTMLElement {
16
- @target includeFragment: IncludeFragmentElement
16
+ @target
17
+ includeFragment: IncludeFragmentElement
17
18
 
18
19
  #abortController: AbortController
19
20
  #originalLabel = ''
@@ -57,7 +58,9 @@ export class ActionMenuElement extends HTMLElement {
57
58
  const id = this.querySelector('[role=menu]')?.id
58
59
  if (!id) return null
59
60
  for (const el of this.querySelectorAll(`[aria-controls]`)) {
60
- if (el.getAttribute('aria-controls') === id) return el as HTMLButtonElement
61
+ if (el.getAttribute('aria-controls') === id) {
62
+ return el as HTMLButtonElement
63
+ }
61
64
  }
62
65
  return null
63
66
  }
@@ -94,7 +97,9 @@ export class ActionMenuElement extends HTMLElement {
94
97
  this.#updateInput()
95
98
 
96
99
  if (this.includeFragment) {
97
- this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
100
+ this.includeFragment.addEventListener('include-fragment-replaced', this, {
101
+ signal
102
+ })
98
103
  }
99
104
  }
100
105
 
@@ -103,7 +108,8 @@ export class ActionMenuElement extends HTMLElement {
103
108
  }
104
109
 
105
110
  handleEvent(event: Event) {
106
- if (event.target === this.invokerElement && this.#isActivationKeydown(event)) {
111
+ const activation = this.#isActivationKeydown(event)
112
+ if (event.target === this.invokerElement && activation) {
107
113
  if (this.#firstItem) {
108
114
  event.preventDefault()
109
115
  this.popoverElement?.showPopover()
@@ -112,11 +118,39 @@ export class ActionMenuElement extends HTMLElement {
112
118
  }
113
119
  }
114
120
 
121
+ // Ignore events within dialogs within menus
122
+ if ((event.target as Element)?.closest('dialog') || (event.target as Element)?.closest('modal-dialog')) {
123
+ return
124
+ }
125
+
126
+ // If a dialog has been rendered within the menu, we do not want to hide
127
+ // the entire menu, as that will also hide the Dialog. Instead we want to
128
+ // show the Dialog while hiding just the visible part of the menu.
129
+ if ((activation || event.type === 'click') && (event.target as HTMLElement)?.closest('[data-show-dialog-id]')) {
130
+ const dialogInvoker = (event.target as HTMLElement)!.closest('[data-show-dialog-id]')
131
+ const dialog = this.ownerDocument.getElementById(dialogInvoker?.getAttribute('data-show-dialog-id') || '')
132
+ if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
133
+ this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
134
+ const dialog_controller = new AbortController()
135
+ const {signal} = dialog_controller
136
+ const handleDialogClose = () => {
137
+ dialog_controller.abort()
138
+ this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
139
+ if (this.popoverElement?.matches(':popover-open')) {
140
+ this.popoverElement?.hidePopover()
141
+ }
142
+ }
143
+ dialog.addEventListener('close', handleDialogClose, {signal})
144
+ dialog.addEventListener('cancel', handleDialogClose, {signal})
145
+ return
146
+ }
147
+ }
148
+
115
149
  if (!this.popoverElement?.matches(':popover-open')) return
116
150
 
117
151
  if (event.type === 'include-fragment-replaced') {
118
152
  if (this.#firstItem) this.#firstItem.focus()
119
- } else if (this.#isActivationKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
153
+ } else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
120
154
  // Hide popover after current event loop to prevent changes in focus from
121
155
  // altering the target of the event. Not doing this specifically affects
122
156
  // <a> tags. It causes the event to be sent to the currently focused element
data/app/components/primer/beta/button.css CHANGED
@@ -1 +1 @@
1
- :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.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(--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: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(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,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(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,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(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
1
+ :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.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(--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: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(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow)),var(--shadow-highlight,var(--color-btn-primary-inset-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,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(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,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(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled);color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
data/app/components/primer/beta/button.css.json CHANGED
@@ -18,6 +18,7 @@
18
18
  ".Button-visual .Counter",
19
19
  ".Button-label",
20
20
  ".Button-leadingVisual",
21
+ ".Button-leadingVisual svg",
21
22
  ".Button-trailingVisual",
22
23
  ".Button-trailingAction",
23
24
  ".Button--small",
data/app/components/primer/beta/button.css.map CHANGED
@@ -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 --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--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\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\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(--control-medium-gap);\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 & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\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) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\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(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--fgColor-muted);\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\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,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\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 --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--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\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\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(--control-medium-gap);\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 & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\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(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--fgColor-muted);\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\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,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
data/app/components/primer/beta/button.pcss CHANGED
@@ -110,6 +110,10 @@ summary.Button {
110
110
  grid-area: leadingVisual;
111
111
  }
112
112
 
113
+ .Button-leadingVisual svg {
114
+ fill: currentcolor;
115
+ }
116
+
113
117
  .Button-trailingVisual {
114
118
  grid-area: trailingVisual;
115
119
  }
data/app/components/primer/beta/button.rb CHANGED
@@ -41,10 +41,15 @@ module Primer
41
41
  #
42
42
  # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
43
43
  #
44
+ # - `leading_visual_svg` to render a SVG.
45
+ #
44
46
  # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
45
47
  renders_one :leading_visual, types: {
46
48
  icon: lambda { |**system_arguments|
47
49
  Primer::Beta::Octicon.new(**system_arguments)
50
+ },
51
+ svg: lambda { |**system_arguments|
52
+ Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
48
53
  }
49
54
  }
50
55
 
@@ -81,7 +86,7 @@ module Primer
81
86
  renders_one :tooltip, lambda { |**system_arguments|
82
87
  raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
83
88
 
84
- ActiveSupport::Deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
89
+ ::Primer::ViewComponents.deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
85
90
  system_arguments[:for_id] = @id
86
91
  system_arguments[:type] = :description
87
92
 
data/app/components/primer/beta/flash.css CHANGED
@@ -1 +1 @@
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:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);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}
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}
data/app/components/primer/beta/flash.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
1
+ {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
data/app/components/primer/beta/flash.html.erb CHANGED
@@ -1,9 +1,7 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <%= primer_octicon @icon if @icon %><%= content %>
3
3
  <% if @dismissible %>
4
- <button class="flash-close js-flash-close" type="button" aria-label="Close">
5
- <%= primer_octicon "x" %>
6
- </button>
4
+ <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
7
5
  <% end %>
8
6
 
9
7
  <%= action %>
data/app/components/primer/beta/flash.pcss CHANGED
@@ -31,8 +31,7 @@
31
31
  /* Close button */
32
32
  .flash-close:not(.Banner-close) {
33
33
  float: right;
34
- padding: var(--control-medium-paddingInline-spacious);
35
- margin: calc(var(--control-medium-paddingInline-spacious) * -1);
34
+ margin-top: calc(var(--base-size-4) * -1);
36
35
  text-align: center;
37
36
  cursor: pointer;
38
37