primer_view_components 0.5.1 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +50 -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 +1 -1
  25. data/app/components/primer/alpha/nav_list/group.rb +12 -3
  26. data/app/components/primer/alpha/nav_list.rb +80 -16
  27. data/app/components/primer/alpha/tool_tip.js +3 -3
  28. data/app/components/primer/alpha/tool_tip.ts +3 -3
  29. data/app/components/primer/alpha/x_banner.d.ts +3 -1
  30. data/app/components/primer/alpha/x_banner.js +24 -10
  31. data/app/components/primer/alpha/x_banner.ts +14 -12
  32. data/app/components/primer/base_component.rb +1 -1
  33. data/app/components/primer/beta/avatar.rb +1 -1
  34. data/app/components/primer/beta/button.css +1 -1
  35. data/app/components/primer/beta/button.css.map +1 -1
  36. data/app/components/primer/beta/button.pcss +1 -1
  37. data/app/forms/submit_button_form.rb +1 -1
  38. data/lib/primer/classify/utilities.yml +2 -0
  39. data/lib/primer/forms/button.rb +0 -5
  40. data/lib/primer/forms/dsl/input.rb +2 -0
  41. data/lib/primer/view_components/version.rb +2 -2
  42. data/lib/primer/yard/lookbook_pages_backend.rb +31 -0
  43. data/lib/tasks/custom_utilities.yml +2 -0
  44. data/previews/primer/alpha/action_list_preview.rb +89 -17
  45. data/previews/primer/alpha/action_menu_preview.rb +79 -37
  46. data/previews/primer/alpha/banner_preview/with_action_button.html.erb +1 -1
  47. data/previews/primer/alpha/banner_preview/with_action_content.html.erb +1 -1
  48. data/previews/primer/alpha/banner_preview.rb +11 -14
  49. data/previews/primer/alpha/nav_list_preview.rb +17 -0
  50. data/static/arguments.json +6 -12
  51. data/static/constants.json +6 -0
  52. data/static/info_arch.json +371 -22
  53. data/static/previews.json +15 -2
  54. 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/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,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 5
9
- PATCH = 1
8
+ MINOR = 6
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
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 %>
data/previews/primer/alpha/banner_preview.rb CHANGED
@@ -8,15 +8,14 @@ module Primer
8
8
  #
9
9
  # @param full toggle
10
10
  # @param full_when_narrow toggle
11
- # @param dismissible toggle
11
+ # @param dismiss_scheme [Symbol] select [none, remove, hide]
12
12
  # @param icon [Symbol] octicon
13
13
  # @param scheme [Symbol] select [default, warning, danger, success]
14
14
  # @param content text
15
15
  # @param description text
16
- # @param reappear [Boolean]
17
- def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
16
+ def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
18
17
  icon = nil if icon == :none
19
- render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
18
+ render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
20
19
  end
21
20
 
22
21
  # @label Default
@@ -54,8 +53,8 @@ module Primer
54
53
 
55
54
  # @label Dismissable
56
55
  # @snapshot
57
- def dismissable
58
- render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissable banner." }
56
+ def dismissible
57
+ render(Primer::Alpha::Banner.new(dismiss_scheme: :hide, reappear: true)) { "This is a dismissable banner." }
59
58
  end
60
59
 
61
60
  # @!group Full Width
@@ -76,29 +75,27 @@ module Primer
76
75
  # @label With action button
77
76
  #
78
77
  # @param full toggle
79
- # @param dismissible toggle
78
+ # @param dismiss_scheme [Symbol] select [none, remove, hide]
80
79
  # @param icon [Symbol] octicon
81
80
  # @param scheme [Symbol] select [default, warning, danger, success]
82
81
  # @param content text
83
- # @param reappear [Boolean]
84
82
  # @snapshot
85
- def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
83
+ def with_action_button(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner with an action!")
86
84
  icon = nil if icon == :none
87
- render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
85
+ render_with_template(locals: { full: full, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, content: content })
88
86
  end
89
87
 
90
88
  # @label With action content
91
89
  #
92
90
  # @param full toggle
93
- # @param dismissible toggle
91
+ # @param dismiss_scheme [Symbol] select [none, remove, hide]
94
92
  # @param icon [Symbol] octicon
95
93
  # @param scheme [Symbol] select [default, warning, danger, success]
96
94
  # @param content text
97
- # @param reappear [Boolean]
98
95
  # @snapshot
99
- def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
96
+ def with_action_content(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "Did you know? Comments can be edited.")
100
97
  icon = nil if icon == :none
101
- render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
98
+ render_with_template(locals: { full: full, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, content: content })
102
99
  end
103
100
  end
104
101
  end
data/previews/primer/alpha/nav_list_preview.rb CHANGED
@@ -50,6 +50,15 @@ module Primer
50
50
  list.with_group do |group|
51
51
  group.with_heading(title: "Access")
52
52
 
53
+ group.with_avatar_item(
54
+ src: "https://avatars.githubusercontent.com/u/103004183?v=4",
55
+ username: "hulk_smash",
56
+ full_name: "Bruce Banner",
57
+ full_name_scheme: :inline,
58
+ href: "/profile",
59
+ avatar_arguments: { shape: :square }
60
+ )
61
+
53
62
  group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
54
63
  item.with_leading_visual_icon(icon: :people)
55
64
  end
@@ -82,6 +91,14 @@ module Primer
82
91
  list.with_item(label: "Change password", href: "/change_password") do |item|
83
92
  item.with_leading_visual_icon(icon: :key)
84
93
  end
94
+
95
+ list.with_avatar_item(
96
+ src: "https://avatars.githubusercontent.com/u/103004183?v=4",
97
+ username: "hulk_smash",
98
+ full_name: "Bruce Banner",
99
+ full_name_scheme: :inline,
100
+ href: "/profile"
101
+ )
85
102
  end
86
103
  end
87
104