primer_view_components 0.5.0 → 0.6.0

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 (62) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +66 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +3 -2
  4. data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +3 -1
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/alpha/action_list/item.rb +17 -6
  10. data/app/components/primer/alpha/action_list.css +1 -1
  11. data/app/components/primer/alpha/action_list.css.json +2 -0
  12. data/app/components/primer/alpha/action_list.css.map +1 -1
  13. data/app/components/primer/alpha/action_list.pcss +4 -2
  14. data/app/components/primer/alpha/action_list.rb +61 -6
  15. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +3 -2
  16. data/app/components/primer/alpha/action_menu/action_menu_element.js +9 -2
  17. data/app/components/primer/alpha/action_menu/action_menu_element.ts +10 -5
  18. data/app/components/primer/alpha/action_menu/list.rb +63 -34
  19. data/app/components/primer/alpha/action_menu.rb +12 -0
  20. data/app/components/primer/alpha/banner.html.erb +1 -1
  21. data/app/components/primer/alpha/banner.rb +13 -9
  22. data/app/components/primer/alpha/dialog.css +1 -1
  23. data/app/components/primer/alpha/dialog.css.map +1 -1
  24. data/app/components/primer/alpha/dialog.pcss +2 -1
  25. data/app/components/primer/alpha/modal_dialog.js +1 -1
  26. data/app/components/primer/alpha/modal_dialog.ts +1 -1
  27. data/app/components/primer/alpha/nav_list/group.rb +12 -3
  28. data/app/components/primer/alpha/nav_list.rb +80 -16
  29. data/app/components/primer/alpha/tool_tip.js +3 -3
  30. data/app/components/primer/alpha/tool_tip.ts +3 -3
  31. data/app/components/primer/alpha/x_banner.d.ts +3 -1
  32. data/app/components/primer/alpha/x_banner.js +24 -10
  33. data/app/components/primer/alpha/x_banner.ts +14 -12
  34. data/app/components/primer/base_component.rb +1 -1
  35. data/app/components/primer/beta/avatar.rb +1 -1
  36. data/app/components/primer/beta/button.css +1 -1
  37. data/app/components/primer/beta/button.css.map +1 -1
  38. data/app/components/primer/beta/button.pcss +1 -1
  39. data/app/components/primer/beta/counter.css +1 -1
  40. data/app/components/primer/beta/counter.css.map +1 -1
  41. data/app/components/primer/beta/counter.pcss +1 -1
  42. data/app/components/primer/beta/state.css +1 -1
  43. data/app/components/primer/beta/state.css.map +1 -1
  44. data/app/components/primer/beta/state.pcss +3 -3
  45. data/app/forms/submit_button_form.rb +1 -1
  46. data/lib/primer/classify/utilities.yml +2 -0
  47. data/lib/primer/forms/button.rb +0 -5
  48. data/lib/primer/forms/dsl/input.rb +2 -0
  49. data/lib/primer/view_components/version.rb +1 -1
  50. data/lib/primer/yard/lookbook_pages_backend.rb +31 -0
  51. data/lib/tasks/custom_utilities.yml +2 -0
  52. data/previews/primer/alpha/action_list_preview.rb +89 -17
  53. data/previews/primer/alpha/action_menu_preview.rb +79 -37
  54. data/previews/primer/alpha/banner_preview/with_action_button.html.erb +1 -1
  55. data/previews/primer/alpha/banner_preview/with_action_content.html.erb +1 -1
  56. data/previews/primer/alpha/banner_preview.rb +11 -14
  57. data/previews/primer/alpha/nav_list_preview.rb +17 -0
  58. data/static/arguments.json +6 -12
  59. data/static/constants.json +6 -0
  60. data/static/info_arch.json +371 -22
  61. data/static/previews.json +15 -2
  62. metadata +2 -2
data/app/components/primer/beta/button.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--fgColor-muted);\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link-rest);\n fill: var(--fgColor-link-rest);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
1
+ {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--fgColor-muted);\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link-rest);\n fill: var(--fgColor-link-rest);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
data/app/components/primer/beta/button.pcss CHANGED
@@ -165,7 +165,7 @@ summary.Button {
165
165
  fill: var(--button-primary-iconColor-rest);
166
166
  background-color: var(--button-primary-bgColor-rest);
167
167
  border-color: var(--button-primary-borderColor-rest);
168
- box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
168
+ box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
169
169
 
170
170
  &:hover:not(:disabled) {
171
171
  background-color: var(--button-primary-bgColor-hover);
data/app/components/primer/beta/counter.css CHANGED
@@ -1 +1 @@
1
- .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}
1
+ .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}
data/app/components/primer/beta/counter.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,yEAA8C,CAC9C,6GAAgE,CAChE,iBAAkB,CAJlB,oDAA6B,CAN7B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,uEAAiD,CADjD,2DAEF,CAEA,oBAEE,yEAA8C,CAD9C,gDAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--fgColor-default);\n text-align: center;\n background-color: var(--bgColor-neutral-muted);\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--fgColor-muted);\n background-color: var(--bgColor-neutral-muted);\n}\n"]}
1
+ {"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,wEAA0E,CAC1E,6GAAgE,CAChE,iBAAkB,CAJlB,oDAA6B,CAN7B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,uEAAiD,CADjD,2DAEF,CAEA,oBAEE,yEAA8C,CAD9C,gDAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--fgColor-default);\n text-align: center;\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--fgColor-muted);\n background-color: var(--bgColor-neutral-muted);\n}\n"]}
data/app/components/primer/beta/counter.pcss CHANGED
@@ -9,7 +9,7 @@
9
9
  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
10
10
  color: var(--fgColor-default);
11
11
  text-align: center;
12
- background-color: var(--bgColor-neutral-muted);
12
+ background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
13
13
  border: var(--borderWidth-thin) solid var(--counter-borderColor);
14
14
  border-radius: 2em;
15
15
 
data/app/components/primer/beta/state.css CHANGED
@@ -1 +1 @@
1
- .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-fg))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-fg))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-fg))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}
1
+ .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}
data/app/components/primer/beta/state.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,8CAAuC,CACvC,8CAA2C,CAC3C,uDAAgD,CAHhD,6DAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,uEAAiD,CACjD,4DACF,CAEA,yCALE,2DAQF,CAHA,aAEE,kEACF,CAEA,eAEE,kEACF,CAEA,8BAJE,2DAOF,CAHA,eAEE,sEACF,CAIA,cAEE,4CAAsC,CACtC,sCAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n display: inline-block;\n padding: 5px var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--control-medium-lineBoxHeight);\n text-align: center;\n white-space: nowrap;\n border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis);\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis);\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n padding: 0 10px;\n font-size: var(--text-body-size-small);\n line-height: var(--base-size-24);\n\n & .octicon {\n width: 1em; /* Ensures different icons don't change State indicator width */\n }\n}\n"]}
1
+ {"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,8CAAuC,CACvC,8CAA2C,CAC3C,uDAAgD,CAHhD,6DAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,uEAAiD,CACjD,4DACF,CAEA,yCALE,2DAQF,CAHA,aAEE,wEACF,CAEA,eAEE,wEACF,CAEA,8BAJE,2DAOF,CAHA,eAEE,4EACF,CAIA,cAEE,4CAAsC,CACtC,sCAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n display: inline-block;\n padding: 5px var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--control-medium-lineBoxHeight);\n text-align: center;\n white-space: nowrap;\n border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n padding: 0 10px;\n font-size: var(--text-body-size-small);\n line-height: var(--base-size-24);\n\n & .octicon {\n width: 1em; /* Ensures different icons don't change State indicator width */\n }\n}\n"]}
data/app/components/primer/beta/state.pcss CHANGED
@@ -24,17 +24,17 @@
24
24
 
25
25
  .State--open {
26
26
  color: var(--fgColor-onEmphasis);
27
- background-color: var(--bgColor-open-emphasis);
27
+ background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
28
28
  }
29
29
 
30
30
  .State--merged {
31
31
  color: var(--fgColor-onEmphasis);
32
- background-color: var(--bgColor-done-emphasis);
32
+ background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
33
33
  }
34
34
 
35
35
  .State--closed {
36
36
  color: var(--fgColor-onEmphasis);
37
- background-color: var(--bgColor-closed-emphasis);
37
+ background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
38
38
  }
39
39
 
40
40
  /* Small 24px */
data/app/forms/submit_button_form.rb CHANGED
@@ -14,7 +14,7 @@ class SubmitButtonForm < ApplicationForm
14
14
  )
15
15
 
16
16
  my_form.group(layout: :horizontal) do |button_group|
17
- button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3) do |component|
17
+ button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3, disabled: true) do |component|
18
18
  component.with_leading_visual_icon(icon: :"check-circle")
19
19
  end
20
20
 
data/lib/primer/classify/utilities.yml CHANGED
@@ -1558,6 +1558,8 @@
1558
1558
  :text_transform:
1559
1559
  :uppercase:
1560
1560
  - text-uppercase
1561
+ :capitalize:
1562
+ - text-capitalize
1561
1563
  :text_align:
1562
1564
  :right:
1563
1565
  - text-right
data/lib/primer/forms/button.rb CHANGED
@@ -39,11 +39,6 @@ module Primer
39
39
 
40
40
  # rails uses a string for this, but PVC wants a symbol
41
41
  @input.merge_input_arguments!(type: type.to_sym)
42
-
43
- # Never disable buttons. This overrides the global
44
- # ActionView::Base.automatically_disable_submit_tag setting.
45
- # Disabling buttons is not accessible.
46
- @input.remove_input_data(:disable_with)
47
42
  end
48
43
 
49
44
  def input_arguments
data/lib/primer/forms/dsl/input.rb CHANGED
@@ -147,9 +147,11 @@ module Primer
147
147
  input_data[key] = value
148
148
  end
149
149
 
150
+ # :nocov:
150
151
  def remove_input_data(key)
151
152
  input_data.delete(key)
152
153
  end
154
+ # :nocov:
153
155
 
154
156
  def merge_input_arguments!(arguments)
155
157
  arguments.each do |k, v|
data/lib/primer/view_components/version.rb CHANGED
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 5
8
+ MINOR = 6
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
data/lib/primer/yard/lookbook_pages_backend.rb CHANGED
@@ -176,6 +176,7 @@ module Primer
176
176
  each_component do |component_ref|
177
177
  page_for(component_ref).generate
178
178
  end
179
+ generate_system_args_docs
179
180
  end
180
181
 
181
182
  def page_for(component_ref)
@@ -194,6 +195,36 @@ module Primer
194
195
  def each_component(&block)
195
196
  manifest.each(&block)
196
197
  end
198
+
199
+ def generate_system_args_docs
200
+ docs = registry.find(Primer::BaseComponent)
201
+
202
+ path = File.expand_path(
203
+ File.join(
204
+ *%w[.. .. .. previews pages system-arguments.md.erb]
205
+ ), __dir__
206
+ )
207
+
208
+ data = {
209
+ "description_md" => docs.base_docstring.to_s,
210
+ "args_md" => view_context.render(inline: docs.constructor.base_docstring)
211
+ }
212
+
213
+ frontmatter = {
214
+ "title" => "System arguments",
215
+ "id" => "system_arguments",
216
+ "data" => data
217
+ }
218
+
219
+ File.write(
220
+ path, <<~ERB
221
+ #{YAML.dump(frontmatter)}
222
+ ---
223
+ <%= @page.data[:description_md] %>
224
+ <%= @page.data[:args_md] %>
225
+ ERB
226
+ )
227
+ end
197
228
  end
198
229
  end
199
230
  end
data/lib/tasks/custom_utilities.yml CHANGED
@@ -51,6 +51,8 @@
51
51
  :text_transform:
52
52
  :uppercase:
53
53
  - text-uppercase
54
+ :capitalize:
55
+ - text-capitalize
54
56
  :text_align:
55
57
  :right:
56
58
  - text-right
data/previews/primer/alpha/action_list_preview.rb CHANGED
@@ -100,11 +100,13 @@ module Primer
100
100
  scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
101
101
  show_dividers: false
102
102
  )
103
- render(Primer::Alpha::ActionList.new(
104
- role: role,
105
- scheme: scheme,
106
- show_dividers: show_dividers
107
- )) do |component|
103
+ render(
104
+ Primer::Alpha::ActionList.new(
105
+ role: role,
106
+ scheme: scheme,
107
+ show_dividers: show_dividers
108
+ )
109
+ ) do |component|
108
110
  component.with_heading(title: "Action List")
109
111
  component.with_item(label: "Item one", href: "/") do |item|
110
112
  item.with_leading_visual_icon(icon: :gear)
@@ -145,9 +147,11 @@ module Primer
145
147
  list_id: "unique-id",
146
148
  subtitle: "This is a subtitle"
147
149
  )
148
- render(Primer::Alpha::ActionList::Heading.new(
149
- scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
150
- ))
150
+ render(
151
+ Primer::Alpha::ActionList::Heading.new(
152
+ scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
153
+ )
154
+ )
151
155
  end
152
156
 
153
157
  # @label Item [playground]
@@ -162,7 +166,6 @@ module Primer
162
166
  # @param description_scheme [Symbol] select [inline, block]
163
167
  # @param active toggle
164
168
  # @param leading_visual_icon [Symbol] octicon
165
- # @param leading_visual_avatar_src text
166
169
  # @param trailing_visual_icon [Symbol] octicon
167
170
  # @param trailing_visual_label text
168
171
  # @param trailing_visual_counter number
@@ -183,7 +186,6 @@ module Primer
183
186
  active: false,
184
187
  expanded: false,
185
188
  leading_visual_icon: nil,
186
- leading_visual_avatar_src: nil,
187
189
  trailing_visual_icon: nil,
188
190
  trailing_visual_label: nil,
189
191
  trailing_visual_counter: nil,
@@ -206,11 +208,7 @@ module Primer
206
208
  expanded: expanded,
207
209
  id: "tooltip-test"
208
210
  ) do |item|
209
- if leading_visual_icon && leading_visual_icon != :none
210
- item.with_leading_visual_icon(icon: leading_visual_icon)
211
- elsif leading_visual_avatar_src
212
- item.with_leading_visual_avatar(src: leading_visual_avatar_src, alt: "An avatar")
213
- end
211
+ item.with_leading_visual_icon(icon: leading_visual_icon) if leading_visual_icon && leading_visual_icon != :none
214
212
 
215
213
  if trailing_visual_icon && trailing_visual_icon != :none
216
214
  item.with_trailing_visual_icon(icon: trailing_visual_icon)
@@ -224,13 +222,87 @@ module Primer
224
222
 
225
223
  if private_leading_action_icon && private_leading_action_icon != :none
226
224
  item.with_private_leading_action_icon(icon: private_leading_action_icon)
227
- elsif private_trailing_action_icon
225
+ elsif private_trailing_action_icon && private_trailing_action_icon != :none
228
226
  item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
229
227
  end
230
228
 
231
229
  item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
232
230
 
233
- item.description { description } if description
231
+ item.with_description { description } if description
232
+
233
+ item.with_tooltip(text: "Tooltip text", for_id: "tooltip-test", type: :description) if tooltip
234
+ end
235
+
236
+ render(list)
237
+ end
238
+
239
+ # @label Avatar item [playground]
240
+ #
241
+ # @param username text
242
+ # @param truncate_label toggle
243
+ # @param src text
244
+ # @param shape [Symbol] select [circle, square]
245
+ # @param size [Symbol] select [medium, large, xlarge]
246
+ # @param scheme [Symbol] select [default, danger]
247
+ # @param disabled toggle
248
+ # @param full_name text
249
+ # @param full_name_scheme [Symbol] select [inline, block]
250
+ # @param active toggle
251
+ # @param trailing_visual_icon [Symbol] octicon
252
+ # @param trailing_visual_label text
253
+ # @param trailing_visual_counter number
254
+ # @param trailing_visual_text text
255
+ # @param private_trailing_action_icon [Symbol] octicon
256
+ # @param trailing_action toggle
257
+ # @param tooltip toggle
258
+ def avatar_item(
259
+ username: "hulk_smash",
260
+ truncate_label: false,
261
+ src: "https://avatars.githubusercontent.com/u/103004183?v=4",
262
+ shape: Primer::Beta::Avatar::DEFAULT_SHAPE,
263
+ size: Primer::Alpha::ActionList::Item::DEFAULT_SIZE,
264
+ scheme: Primer::Alpha::ActionList::Item::DEFAULT_SCHEME,
265
+ disabled: false,
266
+ full_name: "Bruce Banner",
267
+ full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME,
268
+ active: false,
269
+ expanded: false,
270
+ trailing_visual_icon: nil,
271
+ trailing_visual_label: nil,
272
+ trailing_visual_counter: nil,
273
+ trailing_visual_text: nil,
274
+ private_trailing_action_icon: nil,
275
+ trailing_action: false,
276
+ tooltip: false
277
+ )
278
+ list = Primer::Alpha::ActionList.new(aria: { label: "Action List" })
279
+ list.with_avatar_item(
280
+ username: username,
281
+ truncate_label: truncate_label,
282
+ src: src,
283
+ size: size,
284
+ scheme: scheme,
285
+ disabled: disabled,
286
+ full_name: full_name,
287
+ full_name_scheme: full_name_scheme,
288
+ active: active,
289
+ expanded: expanded,
290
+ id: "tooltip-test",
291
+ avatar_arguments: { shape: shape }
292
+ ) do |item|
293
+ if trailing_visual_icon && trailing_visual_icon != :none
294
+ item.with_trailing_visual_icon(icon: trailing_visual_icon)
295
+ elsif trailing_visual_label
296
+ item.with_trailing_visual_label { trailing_visual_label }
297
+ elsif trailing_visual_counter
298
+ item.with_trailing_visual_counter(count: trailing_visual_counter)
299
+ elsif trailing_visual_text
300
+ item.with_trailing_visual_text(trailing_visual_text)
301
+ end
302
+
303
+ item.with_private_trailing_action_icon(icon: private_trailing_action_icon) if private_trailing_action_icon && private_trailing_action_icon != :none
304
+
305
+ item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
234
306
 
235
307
  item.with_tooltip(text: "Tooltip text", for_id: "tooltip-test", type: :description) if tooltip
236
308
  end
data/previews/primer/alpha/action_menu_preview.rb CHANGED
@@ -27,15 +27,18 @@ module Primer
27
27
 
28
28
  # @label Content labels
29
29
  #
30
- def content_labels
31
- end
30
+ def content_labels; end
32
31
 
33
32
  # @label Default
34
33
  #
35
34
  # @snapshot interactive
36
35
  def default
37
36
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
38
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
37
+ menu.with_show_button do |button|
38
+ button.with_trailing_action_icon(icon: :"triangle-down")
39
+ "Menu"
40
+ end
41
+
39
42
  menu.with_item(label: "Copy link")
40
43
  menu.with_item(label: "Quote reply")
41
44
  menu.with_item(label: "Reference in new issue")
@@ -54,7 +57,10 @@ module Primer
54
57
  # @snapshot interactive
55
58
  def wide
56
59
  render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
57
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "A wider menu" }
60
+ menu.with_show_button do |button|
61
+ button.with_trailing_action_icon(icon: :"triangle-down")
62
+ "A wider menu"
63
+ end
58
64
 
59
65
  menu.with_item(label: "Default", active: true, value: "default") do |item|
60
66
  item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
@@ -93,18 +99,30 @@ module Primer
93
99
  def multiple_select
94
100
  render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
95
101
  menu.with_show_button { "Menu" }
96
- menu.with_item(label: "langermank", description_scheme: :inline) do |item|
97
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
98
- item.with_description.with_content("Katie Langerman")
99
- end
100
- menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
101
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
102
- item.with_description.with_content("Jon Rohan")
103
- end
104
- menu.with_item(label: "broccolinisoup", description_scheme: :inline) do |item|
105
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
106
- item.with_description.with_content("Armağan Ersöz")
107
- end
102
+
103
+ menu.with_avatar_item(
104
+ src: "https://avatars.githubusercontent.com/u/18661030?v=4",
105
+ username: "langermank",
106
+ full_name: "Katie Langerman",
107
+ full_name_scheme: :inline,
108
+ avatar_arguments: { shape: :square }
109
+ )
110
+
111
+ menu.with_avatar_item(
112
+ src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
113
+ username: "jonrohan",
114
+ full_name: "Jon Rohan",
115
+ full_name_scheme: :inline,
116
+ avatar_arguments: { shape: :square }
117
+ )
118
+
119
+ menu.with_avatar_item(
120
+ src: "https://avatars.githubusercontent.com/u/1446503?v=4",
121
+ username: "broccolinisoup",
122
+ full_name: "Armağan Ersöz",
123
+ full_name_scheme: :inline,
124
+ avatar_arguments: { shape: :square }
125
+ )
108
126
  end
109
127
  end
110
128
 
@@ -136,7 +154,10 @@ module Primer
136
154
  # @snapshot interactive
137
155
  def single_select_with_internal_label
138
156
  render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
139
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
157
+ menu.with_show_button do |button|
158
+ button.with_trailing_action_icon(icon: :"triangle-down")
159
+ "Menu"
160
+ end
140
161
  menu.with_item(label: "Copy link") do |item|
141
162
  item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
142
163
  end
@@ -151,18 +172,29 @@ module Primer
151
172
  def multiple_selected_items
152
173
  render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
153
174
  menu.with_show_button { "Menu" }
154
- menu.with_item(label: "langermank", description_scheme: :inline, active: true) do |item|
155
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
156
- item.with_description.with_content("Katie Langerman")
157
- end
158
- menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
159
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
160
- item.with_description.with_content("Jon Rohan")
161
- end
162
- menu.with_item(label: "broccolinisoup", description_scheme: :inline, active: true) do |item|
163
- item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
164
- item.with_description.with_content("Armağan Ersöz")
165
- end
175
+
176
+ menu.with_avatar_item(
177
+ src: "https://avatars.githubusercontent.com/u/18661030?v=4",
178
+ username: "langermank",
179
+ full_name: "Katie Langerman",
180
+ full_name_scheme: :inline,
181
+ active: true
182
+ )
183
+
184
+ menu.with_avatar_item(
185
+ src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
186
+ username: "jonrohan",
187
+ full_name: "Jon Rohan",
188
+ full_name_scheme: :inline
189
+ )
190
+
191
+ menu.with_avatar_item(
192
+ src: "https://avatars.githubusercontent.com/u/1446503?v=4",
193
+ username: "broccolinisoup",
194
+ full_name: "Armağan Ersöz",
195
+ full_name_scheme: :inline,
196
+ active: true
197
+ )
166
198
  end
167
199
  end
168
200
 
@@ -184,8 +216,7 @@ module Primer
184
216
 
185
217
  # @label With actions
186
218
  #
187
- def with_actions
188
- end
219
+ def with_actions; end
189
220
 
190
221
  # @label Single select form
191
222
  #
@@ -229,7 +260,10 @@ module Primer
229
260
  #
230
261
  def block_description
231
262
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
232
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
263
+ menu.with_show_button do |button|
264
+ button.with_trailing_action_icon(icon: :"triangle-down")
265
+ "Menu"
266
+ end
233
267
  menu.with_item(label: "Item label") do |item|
234
268
  item.with_description.with_content("Block description")
235
269
  end
@@ -246,7 +280,10 @@ module Primer
246
280
  #
247
281
  def inline_description
248
282
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
249
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
283
+ menu.with_show_button do |button|
284
+ button.with_trailing_action_icon(icon: :"triangle-down")
285
+ "Menu"
286
+ end
250
287
  menu.with_item(label: "Item label", description_scheme: :inline) do |item|
251
288
  item.with_description.with_content("Inline description")
252
289
  end
@@ -257,7 +294,10 @@ module Primer
257
294
  #
258
295
  def leading_visual
259
296
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
260
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
297
+ menu.with_show_button do |button|
298
+ button.with_trailing_action_icon(icon: :"triangle-down")
299
+ "Menu"
300
+ end
261
301
  menu.with_item(label: "Item label", description_scheme: :inline) do |item|
262
302
  item.with_leading_visual_icon(icon: :gear)
263
303
  item.with_description.with_content("Inline description")
@@ -269,7 +309,10 @@ module Primer
269
309
  #
270
310
  def leading_visual_single_select
271
311
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1", select_variant: :single)) do |menu|
272
- menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
312
+ menu.with_show_button do |button|
313
+ button.with_trailing_action_icon(icon: :"triangle-down")
314
+ "Menu"
315
+ end
273
316
  menu.with_item(label: "Item label", description_scheme: :inline) do |item|
274
317
  item.with_leading_visual_icon(icon: :gear)
275
318
  item.with_description.with_content("Inline description")
@@ -279,8 +322,7 @@ module Primer
279
322
 
280
323
  # @label Two menus
281
324
  #
282
- def two_menus
283
- end
325
+ def two_menus; end
284
326
  end
285
327
  end
286
328
  end
data/previews/primer/alpha/banner_preview/with_action_button.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
1
+ <%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
2
2
  <% component.with_action_button(size: :medium) { "Take action" } %>
3
3
  <%= content %>
4
4
  <% end %>
data/previews/primer/alpha/banner_preview/with_action_content.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
1
+ <%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
2
2
  <% component.with_action_content do %>
3
3
  <%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
4
4
  <% end %>