primer_view_components 0.0.94 → 0.0.96

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +37 -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/dialog.rb +3 -3
  8. data/app/components/primer/alpha/toggle_switch.js +3 -0
  9. data/app/components/primer/alpha/toggle_switch.ts +3 -0
  10. data/app/components/primer/alpha/tool_tip.js +17 -2
  11. data/app/components/primer/alpha/tool_tip.ts +14 -2
  12. data/app/components/primer/beta/button.pcss +27 -15
  13. data/app/components/primer/beta/button.rb +11 -16
  14. data/app/components/primer/beta/icon_button.html.erb +1 -1
  15. data/app/components/primer/beta/icon_button.rb +5 -3
  16. data/app/components/primer/button_component.rb +1 -1
  17. data/app/components/primer/experimental/action_bar.d.ts +14 -0
  18. data/app/components/primer/experimental/action_bar.js +141 -0
  19. data/app/components/primer/icon_button.rb +1 -1
  20. data/app/components/primer/octicon_component.rb +0 -4
  21. data/app/components/primer/octicon_symbols_component.rb +0 -4
  22. data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
  23. data/lib/primer/deprecations.rb +2 -2
  24. data/lib/primer/forms/builder.rb +2 -2
  25. data/lib/primer/forms/check_box.html.erb +5 -1
  26. data/lib/primer/forms/check_box.rb +11 -0
  27. data/lib/primer/forms/dsl/check_box_group_input.rb +17 -4
  28. data/lib/primer/forms/dsl/check_box_input.rb +21 -2
  29. data/lib/primer/view_components/engine.rb +2 -1
  30. data/lib/primer/view_components/version.rb +1 -1
  31. data/lib/tasks/coverage.rake +1 -1
  32. data/lib/tasks/docs.rake +19 -15
  33. data/lib/tasks/static.rake +1 -1
  34. data/lib/tasks/test.rake +54 -0
  35. data/lib/tasks/utilities.rake +1 -0
  36. data/static/arguments.json +2042 -0
  37. data/static/audited_at.json +0 -2
  38. data/static/constants.json +1 -8
  39. data/static/statuses.json +2 -4
  40. metadata +6 -6
  41. data/app/components/primer/base_button.rb +0 -7
  42. data/app/components/primer/button_group.rb +0 -7
  43. data/lib/tasks/deprecated.rake +0 -27
  44. data/static/arguments.yml +0 -1358
data/app/assets/styles/primer_view_components.css CHANGED
@@ -1 +1 @@
1
- :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 12px;padding:0 var(--primer-control-small-paddingInline-normal,12px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 12px;padding:0 var(--primer-control-large-paddingInline-normal,12px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-fg-default);border:none;color:var(--color-fg-default)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{.Button-label:not(:only-child){color:var(--color-btn-text)}.Button-content:not(:only-child){.Button-label{color:var(--color-btn-text)}}}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}
1
+ :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 8px;padding:0 var(--primer-control-small-paddingInline-condensed,8px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 16px;padding:0 var(--primer-control-large-paddingInline-spacious,16px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-btn-text);color:var(--color-btn-text)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--link{fill:var(--color-accent-default);border:none;color:var(--color-accent-default)}.Button--link:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--link.Button--active,.Button--link.Button--pressed,.Button--link:active,.Button--link[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--link.Button--disabled,.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:transparent;border-color:transparent;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}
data/app/assets/styles/primer_view_components.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button */\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active,\n &.Button--active {\n transition: none;\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-normal, 12px);\n gap: var(--primer-control-small-gap, 4px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-normal, 12px);\n gap: var(--primer-control-large-gap, 8px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active,\n &.Button--active {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* link color without svg */\n.Button--invisible {\n color: var(--color-fg-default);\n fill: var(--color-fg-default);\n border: none;\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n /* box-shadow: var(--color-primer-shadow-inset); */\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if visual is present, muted label color */\n .Button-label:not(:only-child) {\n color: var(--color-btn-text);\n }\n\n /* if trailingAction is present, muted label color */\n .Button-content:not(:only-child) {\n .Button-label {\n color: var(--color-btn-text);\n }\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button */\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active,\n &.Button--active {\n transition: none;\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active,\n &.Button--active {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n fill: var(--color-btn-text);\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--link {\n color: var(--color-accent-default);\n fill: var(--color-accent-default);\n border: none;\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n /* box-shadow: var(--color-primer-shadow-inset); */\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
data/app/components/primer/alpha/dialog.rb CHANGED
@@ -105,10 +105,10 @@ module Primer
105
105
  # <% end %>
106
106
  # @param id [String] The id of the dialog.
107
107
  # @param title [String] Describes the content of the dialog.
108
- # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
108
+ # @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.
109
109
  # @param size [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::SIZE_OPTIONS) %>
110
- # @param position [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
111
- # @param position_narrow [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
110
+ # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
111
+ # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
112
112
  # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
113
113
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
114
114
  def initialize(
data/app/components/primer/alpha/toggle_switch.js CHANGED
@@ -102,6 +102,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
102
102
  const response = await fetch(this.src, {
103
103
  credentials: 'same-origin',
104
104
  method: 'POST',
105
+ headers: {
106
+ 'Requested-With': 'XMLHttpRequest'
107
+ },
105
108
  body
106
109
  });
107
110
  if (response.ok) {
data/app/components/primer/alpha/toggle_switch.ts CHANGED
@@ -124,6 +124,9 @@ export class ToggleSwitchElement extends HTMLElement {
124
124
  const response = await fetch(this.src, {
125
125
  credentials: 'same-origin',
126
126
  method: 'POST',
127
+ headers: {
128
+ 'Requested-With': 'XMLHttpRequest'
129
+ },
127
130
  body
128
131
  })
129
132
  if (response.ok) {
data/app/components/primer/alpha/tool_tip.js CHANGED
@@ -247,7 +247,12 @@ class ToolTipElement extends HTMLElement {
247
247
  if (this.type === 'label') {
248
248
  let labelledBy = this.control.getAttribute('aria-labelledby');
249
249
  if (labelledBy) {
250
- labelledBy = `${labelledBy} ${this.id}`;
250
+ if (!labelledBy.split(' ').includes(this.id)) {
251
+ labelledBy = `${labelledBy} ${this.id}`;
252
+ }
253
+ else {
254
+ labelledBy = `${labelledBy}`;
255
+ }
251
256
  }
252
257
  else {
253
258
  labelledBy = this.id;
@@ -258,7 +263,17 @@ class ToolTipElement extends HTMLElement {
258
263
  }
259
264
  else {
260
265
  let describedBy = this.control.getAttribute('aria-describedby');
261
- describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
266
+ if (describedBy) {
267
+ if (!describedBy.split(' ').includes(this.id)) {
268
+ describedBy = `${describedBy} ${this.id}`;
269
+ }
270
+ else {
271
+ describedBy = `${describedBy}`;
272
+ }
273
+ }
274
+ else {
275
+ describedBy = this.id;
276
+ }
262
277
  this.control.setAttribute('aria-describedby', describedBy);
263
278
  }
264
279
  }
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -264,7 +264,11 @@ class ToolTipElement extends HTMLElement {
264
264
  if (this.type === 'label') {
265
265
  let labelledBy = this.control.getAttribute('aria-labelledby')
266
266
  if (labelledBy) {
267
- labelledBy = `${labelledBy} ${this.id}`
267
+ if (!labelledBy.split(' ').includes(this.id)) {
268
+ labelledBy = `${labelledBy} ${this.id}`
269
+ } else {
270
+ labelledBy = `${labelledBy}`
271
+ }
268
272
  } else {
269
273
  labelledBy = this.id
270
274
  }
@@ -274,7 +278,15 @@ class ToolTipElement extends HTMLElement {
274
278
  this.setAttribute('aria-hidden', 'true')
275
279
  } else {
276
280
  let describedBy = this.control.getAttribute('aria-describedby')
277
- describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
281
+ if (describedBy) {
282
+ if (!describedBy.split(' ').includes(this.id)) {
283
+ describedBy = `${describedBy} ${this.id}`
284
+ } else {
285
+ describedBy = `${describedBy}`
286
+ }
287
+ } else {
288
+ describedBy = this.id
289
+ }
278
290
  this.control.setAttribute('aria-describedby', describedBy)
279
291
  }
280
292
  } else if (name === 'data-direction') {
data/app/components/primer/beta/button.pcss CHANGED
@@ -123,7 +123,7 @@ summary.Button {
123
123
  .Button--small {
124
124
  font-size: var(--primer-text-body-size-small, 12px);
125
125
  height: var(--primer-control-small-size, 28px);
126
- padding: 0 var(--primer-control-small-paddingInline-normal, 12px);
126
+ padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);
127
127
  gap: var(--primer-control-small-gap, 4px);
128
128
 
129
129
  .Button-label {
@@ -139,7 +139,7 @@ summary.Button {
139
139
 
140
140
  .Button--large {
141
141
  height: var(--primer-control-large-size, 40px);
142
- padding: 0 var(--primer-control-large-paddingInline-normal, 12px);
142
+ padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);
143
143
  gap: var(--primer-control-large-gap, 8px);
144
144
 
145
145
  .Button-label {
@@ -240,11 +240,9 @@ summary.Button {
240
240
  }
241
241
  }
242
242
 
243
- /* link color without svg */
244
243
  .Button--invisible {
245
- color: var(--color-fg-default);
246
- fill: var(--color-fg-default);
247
- border: none;
244
+ color: var(--color-btn-text);
245
+ fill: var(--color-btn-text);
248
246
 
249
247
  &:hover {
250
248
  background-color: var(--color-action-list-item-default-hover-bg);
@@ -255,7 +253,6 @@ summary.Button {
255
253
  &.Button--active,
256
254
  &.Button--pressed {
257
255
  background-color: var(--color-action-list-item-default-active-bg);
258
- /* box-shadow: var(--color-primer-shadow-inset); */
259
256
  }
260
257
 
261
258
  &:disabled,
@@ -266,17 +263,32 @@ summary.Button {
266
263
  border-color: var(--color-btn-border);
267
264
  fill: var(--color-primer-fg-disabled);
268
265
  }
266
+ }
267
+
268
+ .Button--link {
269
+ color: var(--color-accent-default);
270
+ fill: var(--color-accent-default);
271
+ border: none;
269
272
 
270
- /* if visual is present, muted label color */
271
- .Button-label:not(:only-child) {
272
- color: var(--color-btn-text);
273
+ &:hover {
274
+ background-color: var(--color-action-list-item-default-hover-bg);
273
275
  }
274
276
 
275
- /* if trailingAction is present, muted label color */
276
- .Button-content:not(:only-child) {
277
- .Button-label {
278
- color: var(--color-btn-text);
279
- }
277
+ &[aria-pressed='true'],
278
+ &:active,
279
+ &.Button--active,
280
+ &.Button--pressed {
281
+ background-color: var(--color-action-list-item-default-active-bg);
282
+ /* box-shadow: var(--color-primer-shadow-inset); */
283
+ }
284
+
285
+ &:disabled,
286
+ &.Button--disabled,
287
+ &[aria-disabled='true'] {
288
+ color: var(--color-primer-fg-disabled);
289
+ background-color: transparent;
290
+ border-color: transparent;
291
+ fill: var(--color-primer-fg-disabled);
280
292
  }
281
293
  }
282
294
 
data/app/components/primer/beta/button.rb CHANGED
@@ -7,16 +7,14 @@ module Primer
7
7
  status :beta
8
8
 
9
9
  DEFAULT_SCHEME = :default
10
- LINK_SCHEME = :link
11
10
  SCHEME_MAPPINGS = {
12
11
  DEFAULT_SCHEME => "",
13
12
  :primary => "Button--primary",
14
13
  :secondary => "Button--secondary",
15
14
  :default => "Button--secondary",
16
15
  :danger => "Button--danger",
17
- :outline => "btn-outline",
18
16
  :invisible => "Button--invisible",
19
- LINK_SCHEME => "btn-link"
17
+ :link => "Button--link"
20
18
  }.freeze
21
19
  SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
22
20
 
@@ -93,17 +91,15 @@ module Primer
93
91
  # <%= render(Primer::Beta::Button.new) { "Default" } %>
94
92
  # <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
95
93
  # <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
96
- # <%= render(Primer::Beta::Button.new(scheme: :outline)) { "Outline" } %>
97
94
  # <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
98
- # <%= render(Primer::Beta::Button.new(scheme: :link)) { "Link" } %>
99
95
  #
100
96
  # @example Sizes
101
97
  # <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
102
98
  # <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
103
99
  #
104
- # @example Block
105
- # <%= render(Primer::Beta::Button.new(block: :true)) { "Block" } %>
106
- # <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary block" } %>
100
+ # @example Full width
101
+ # <%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
102
+ # <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
107
103
  #
108
104
  # @example With leading visual
109
105
  # <%= render(Primer::Beta::Button.new) do |c| %>
@@ -135,7 +131,7 @@ module Primer
135
131
  #
136
132
  # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
137
133
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
138
- # @param full_width [Boolean] Whether button is full-width with `display: block`.
134
+ # @param block [Boolean] Whether button is full-width with `display: block`.
139
135
  # @param align_content [Symbol] <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
140
136
  # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
141
137
  # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
@@ -143,7 +139,7 @@ module Primer
143
139
  def initialize(
144
140
  scheme: DEFAULT_SCHEME,
145
141
  size: DEFAULT_SIZE,
146
- full_width: false,
142
+ block: false,
147
143
  align_content: DEFAULT_ALIGN_CONTENT,
148
144
  **system_arguments
149
145
  )
@@ -153,6 +149,9 @@ module Primer
153
149
 
154
150
  @id = @system_arguments[:id]
155
151
 
152
+ raise ArgumentError, "The `variant:` argument is no longer supported on Primer::Beta::Button. Consider `scheme:` or `size:`." if !Rails.env.production? && @system_arguments[:variant].present?
153
+ raise ArgumentError, "The `dropdown:` argument is no longer supported on Primer::Beta::Button. Use the `trailing_action` slot instead." if !Rails.env.production? && @system_arguments[:dropdown].present?
154
+
156
155
  @align_content_classes = class_names(
157
156
  "Button-content",
158
157
  system_arguments[:classes],
@@ -163,17 +162,13 @@ module Primer
163
162
  system_arguments[:classes],
164
163
  SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
165
164
  SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
166
- "Button" => !link?,
167
- "Button--fullWidth" => full_width
165
+ "Button",
166
+ "Button--fullWidth" => block
168
167
  )
169
168
  end
170
169
 
171
170
  private
172
171
 
173
- def link?
174
- @scheme == LINK_SCHEME
175
- end
176
-
177
172
  def trimmed_content
178
173
  return if content.blank?
179
174
 
data/app/components/primer/beta/icon_button.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip") do %>
1
+ <%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
2
2
  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
3
3
  <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %>
4
4
  <% end -%>
data/app/components/primer/beta/icon_button.rb CHANGED
@@ -47,17 +47,19 @@ module Primer
47
47
  # <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
48
48
  #
49
49
  # @param icon [String] Name of <%= link_to_octicons %> to use.
50
+ # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
50
51
  # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
51
52
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
52
- # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
53
- # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
53
+ # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
54
+ # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
54
55
  # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
55
56
  # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
56
57
  # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
57
58
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
58
- def initialize(icon:, scheme: DEFAULT_SCHEME, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
59
+ def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
59
60
  @icon = icon
60
61
 
62
+ @wrapper_arguments = wrapper_arguments
61
63
  @system_arguments = system_arguments
62
64
  @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
63
65
 
data/app/components/primer/button_component.rb CHANGED
@@ -3,7 +3,7 @@
3
3
  module Primer
4
4
  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
5
5
  class ButtonComponent < Primer::Component
6
- status :beta
6
+ status :deprecated
7
7
 
8
8
  DEFAULT_SCHEME = :default
9
9
  LINK_SCHEME = :link
data/app/components/primer/experimental/action_bar.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export declare class ActionBarElement extends HTMLElement {
2
+ #private;
3
+ items: HTMLElement[];
4
+ menuItems: HTMLElement[];
5
+ itemContainer: HTMLElement;
6
+ moreMenu: HTMLElement;
7
+ connectedCallback(): void;
8
+ disconnectedCallback(): void;
9
+ }
10
+ declare global {
11
+ interface Window {
12
+ ActionBarElement: typeof ActionBarElement;
13
+ }
14
+ }
data/app/components/primer/experimental/action_bar.js ADDED
@@ -0,0 +1,141 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
8
+ if (kind === "m") throw new TypeError("Private method is not writable");
9
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
10
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
11
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
12
+ };
13
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
14
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
15
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
16
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
17
+ };
18
+ var _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_shrinking, _ActionBarElement_growing;
19
+ import { controller, targets, target } from '@github/catalyst';
20
+ import { focusZone, FocusKeys } from '@primer/behaviors';
21
+ let ActionBarElement = class ActionBarElement extends HTMLElement {
22
+ constructor() {
23
+ super(...arguments);
24
+ _ActionBarElement_instances.add(this);
25
+ _ActionBarElement_observer.set(this, void 0);
26
+ _ActionBarElement_initialBarWidth.set(this, void 0);
27
+ _ActionBarElement_previousBarWidth.set(this, void 0);
28
+ _ActionBarElement_itemGap.set(this, void 0);
29
+ _ActionBarElement_focusController.set(this, void 0);
30
+ _ActionBarElement_focusSettings.set(this, {
31
+ bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
32
+ });
33
+ }
34
+ connectedCallback() {
35
+ var _a, _b, _c;
36
+ __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
37
+ __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, this.offsetWidth, "f");
38
+ __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
39
+ // Calculate the width of all the items before hiding anything
40
+ for (const item of this.items) {
41
+ const width = item.getBoundingClientRect().width;
42
+ const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
43
+ const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
44
+ item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
45
+ }
46
+ __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
47
+ this.style.maxWidth = `${this.itemContainer.offsetWidth}px`;
48
+ // Calculate visible items on page load until there is enough space
49
+ // to show all items or the first item is hidden
50
+ while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5 && !this.items[0].hidden) {
51
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
52
+ }
53
+ this.style.overflow = 'visible';
54
+ __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
55
+ for (const entry of entries) {
56
+ // Only recalculate if the bar width changed
57
+ if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
58
+ if (entry.contentRect.width < __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
59
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
60
+ }
61
+ else {
62
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_growing).call(this);
63
+ }
64
+ __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, entry.contentRect.width, "f");
65
+ }
66
+ }
67
+ }), "f");
68
+ __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
69
+ }
70
+ disconnectedCallback() {
71
+ var _a;
72
+ (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
73
+ __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
74
+ }
75
+ };
76
+ _ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
77
+ // Get the offset of the item container from the container edge
78
+ return this.offsetWidth - this.itemContainer.offsetWidth;
79
+ }, _ActionBarElement_shrinking = function _ActionBarElement_shrinking() {
80
+ var _a;
81
+ if (this.items[0].hidden) {
82
+ return;
83
+ }
84
+ const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
85
+ if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + gapSpace) {
86
+ const visibleItems = this.items.filter(item => !item.hidden);
87
+ const hiddenMenuItems = this.menuItems.filter(item => item.hidden);
88
+ visibleItems[visibleItems.length - 1].hidden = true;
89
+ hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
90
+ if (this.moreMenu.hidden) {
91
+ this.moreMenu.hidden = false;
92
+ }
93
+ // Reset focus controller
94
+ (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
95
+ __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
96
+ }
97
+ }, _ActionBarElement_growing = function _ActionBarElement_growing() {
98
+ var _a;
99
+ if (this.moreMenu.hidden) {
100
+ return;
101
+ }
102
+ const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
103
+ const hiddenItems = this.items.filter(item => item.hidden);
104
+ if (hiddenItems.length === 0) {
105
+ return;
106
+ }
107
+ const hiddenItemWidth = Number(hiddenItems[0].getAttribute('data-offset-width'));
108
+ if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= this.moreMenu.offsetWidth + hiddenItemWidth + gapSpace) {
109
+ const visibleMenuItems = this.menuItems.filter(item => !item.hidden);
110
+ hiddenItems[0].hidden = false;
111
+ visibleMenuItems[0].hidden = true;
112
+ if (hiddenItems.length === 2) {
113
+ hiddenItems[1].hidden = false;
114
+ visibleMenuItems[1].hidden = true;
115
+ }
116
+ // If there was only one item left, hide the more menu
117
+ if (hiddenItems.length <= 2) {
118
+ this.moreMenu.hidden = true;
119
+ }
120
+ // Reset focus controller
121
+ (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
122
+ __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
123
+ }
124
+ };
125
+ __decorate([
126
+ targets
127
+ ], ActionBarElement.prototype, "items", void 0);
128
+ __decorate([
129
+ targets
130
+ ], ActionBarElement.prototype, "menuItems", void 0);
131
+ __decorate([
132
+ target
133
+ ], ActionBarElement.prototype, "itemContainer", void 0);
134
+ __decorate([
135
+ target
136
+ ], ActionBarElement.prototype, "moreMenu", void 0);
137
+ ActionBarElement = __decorate([
138
+ controller
139
+ ], ActionBarElement);
140
+ export { ActionBarElement };
141
+ window.ActionBarElement = ActionBarElement;
data/app/components/primer/icon_button.rb CHANGED
@@ -12,7 +12,7 @@ module Primer
12
12
  # Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
13
13
  # [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
14
14
  class IconButton < Primer::Component
15
- status :beta
15
+ status :deprecated
16
16
 
17
17
  DEFAULT_SCHEME = :default
18
18
  SCHEME_MAPPINGS = {
data/app/components/primer/octicon_component.rb CHANGED
@@ -82,9 +82,5 @@ module Primer
82
82
  )
83
83
  @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
84
84
  end
85
-
86
- def self._after_compile
87
- Primer::Octicon::Cache.preload!
88
- end
89
85
  end
90
86
  end
data/app/components/primer/octicon_symbols_component.rb CHANGED
@@ -39,10 +39,6 @@ module Primer
39
39
  @icons.any?
40
40
  end
41
41
 
42
- def self._after_compile
43
- Primer::Octicon::Cache.preload!
44
- end
45
-
46
42
  def symbol_tags
47
43
  safe_join(
48
44
  @icons.values.map do |icon|
data/app/lib/primer/fetch_or_fallback_helper.rb CHANGED
@@ -33,7 +33,7 @@ module Primer
33
33
 
34
34
  given_value
35
35
  else
36
- if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
36
+ if fallback_raises && ENV["RAILS_ENV"] != "production"
37
37
  raise InvalidValueError, <<~MSG
38
38
  fetch_or_fallback was called with an invalid value.
39
39
 
data/lib/primer/deprecations.rb CHANGED
@@ -7,10 +7,9 @@ module Primer
7
7
  DEPRECATED_COMPONENTS = {
8
8
  "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
9
9
  "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
10
- "Primer::BaseButton" => "Primer::Beta::BaseButton",
11
10
  "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
12
11
  "Primer::BoxComponent" => "Primer::Box",
13
- "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
12
+ "Primer::ButtonComponent" => "Primer::Beta::Button",
14
13
  "Primer::CloseButton" => "Primer::Beta::CloseButton",
15
14
  "Primer::CounterComponent" => "Primer::Beta::Counter",
16
15
  "Primer::DetailsComponent" => "Primer::Beta::Details",
@@ -19,6 +18,7 @@ module Primer
19
18
  "Primer::FlexItemComponent" => nil,
20
19
  "Primer::HeadingComponent" => "Primer::Beta::Heading",
21
20
  "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
21
+ "Primer::IconButton" => "Primer::Beta::IconButton",
22
22
  "Primer::Tooltip" => "Primer::Alpha::Tooltip"
23
23
  }.freeze
24
24