primer_view_components 0.0.94 → 0.0.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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