openproject-primer_view_components 0.22.1 → 0.23.0

data/app/components/primer/beta/button.css.map

@@ -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\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &:hover:not(:disabled, .Button--inactive) {\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, .Button--inactive) {\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  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--button-invisible-bgColor-hover);\n\n    & .Button-visual {\n      color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n    }\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(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled, .Button--inactive) {\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, .Button--inactive) {\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);\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\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\n  color: var(--button-inactive-fgColor);\n  cursor: default;\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"]}
+{"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\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &:hover:not(:disabled, .Button--inactive) {\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, .Button--inactive) {\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  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\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(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled, .Button--inactive) {\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, .Button--inactive) {\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);\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\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\n  color: var(--button-inactive-fgColor);\n  cursor: default;\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

@@ -247,11 +247,7 @@ summary.Button {
   }
 
   &:hover:not(:disabled, .Button--inactive) {
-    background-color: var(--button-invisible-bgColor-hover);
-
-    & .Button-visual {
-      color: var(--button-invisible-iconColor-hover, var(--color-fg-default));
-    }
+    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
   }
 
   &[aria-pressed='true'],

data/app/components/primer/beta/button_group.rb

@@ -14,6 +14,13 @@ module Primer
       #   def with_button(icon: nil, **system_arguments)
       #   end
 
+      # @!parse
+      #   # Adds a button that activates a menu when clicked.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::ButtonGroup::MenuButton) %>.
+      #   def with_menu_button(**system_arguments)
+      #   end
+
       # @!parse
       #   # Adds a <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
       #   #
@@ -21,7 +28,7 @@ module Primer
       #   def with_clipboard_copy_button(**system_arguments)
       #   end
 
-      # List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).
+      # List of buttons to be rendered. Add buttons via the `#with_button`, `#with_menu_button`, and `#with_clipboard_copy_button` methods (see below).
       renders_many :buttons, types: {
         button: {
           renders: lambda { |icon: nil, **kwargs|
@@ -38,6 +45,14 @@ module Primer
           as: :button
         },
 
+        menu_button: {
+          renders: lambda { |**system_arguments|
+            MenuButton.new(**system_arguments)
+          },
+
+          as: :menu_button
+        },
+
         clipboard_copy_button: {
           renders: lambda { |**kwargs|
             kwargs[:size] = @size
@@ -67,6 +82,43 @@ module Primer
       def render?
         buttons.any?
       end
+
+      # Renders a button in a <%= link_to_component(Primer::Beta::ButtonGroup) %> that displays an <%= link_to_component(Primer::Alpha::ActionMenu) %> when clicked.
+      # This component should not be used outside of a `ButtonGroup` context.
+      #
+      # This component yields both the button and the list to the block when rendered.
+      #
+      # ```erb
+      # <%= render(Primer::Beta::ButtonGroup.new) do |group| %>
+      #   <% group.with_menu_button do |menu, button| %>
+      #     <% menu.with_item(label: "Item 1") %>
+      #     <% button.with_trailing_visual_icon(icon: "triangle-down") %>
+      #   <% end %>
+      # <% end %>
+      # ```
+      #
+      class MenuButton < Primer::Component
+        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(menu_arguments: {}, button_arguments: {})
+          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
+          @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block.call(@menu, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@menu)
+        end
+      end
     end
   end
 end

data/app/components/primer/beta/clipboard_copy.ts

@@ -50,6 +50,6 @@ document.addEventListener('clipboard-copy', ({target}) => {
     setTimeout(() => {
       showCopy(target)
       clipboardCopyElementTimers.delete(target)
-    }, CLIPBOARD_COPY_TIMER_DURATION)
+    }, CLIPBOARD_COPY_TIMER_DURATION),
   )
 })

data/app/components/primer/beta/flash.rb

@@ -2,9 +2,11 @@
 
 module Primer
   module Beta
+    # This component has been deprecated. Use [Banner](<%= link_to_component(Primer::Alpha::Banner) %>) instead.
+    #
     # Use `Flash` to inform users of successful or pending actions.
     class Flash < Primer::Component
-      status :beta
+      status :deprecated
 
       # Optional action content showed on the right side of the component.
       #

data/app/components/primer/beta/nav_list.js

@@ -47,21 +47,19 @@ let NavListElement = class NavListElement extends HTMLElement {
     }
     // expand collapsible item onClick
     expandItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.nextElementSibling?.removeAttribute('data-hidden');
         item.setAttribute('aria-expanded', 'true');
     }
     collapseItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
+        item.nextElementSibling?.setAttribute('data-hidden', '');
         item.setAttribute('aria-expanded', 'false');
         item.focus();
     }
     itemIsExpanded(item) {
-        if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
+        if (item?.tagName === 'A') {
             return true;
         }
-        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+        return item?.getAttribute('aria-expanded') === 'true';
     }
     // expand/collapse item
     handleItemWithSubItemClick(e) {
@@ -77,6 +75,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         else {
             this.expandItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
     // collapse item
@@ -97,18 +96,18 @@ let NavListElement = class NavListElement extends HTMLElement {
         if (this.itemIsExpanded(button) && e.key === 'Escape') {
             this.collapseItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
 };
 _NavListElement_instances = new WeakSet();
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
-    var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
         if (navItem.classList.contains('ActionListItem--hasSubItem')) {
             continue;
         }
-        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        const keys = navItem.getAttribute('data-item-id')?.split(' ') || [];
         if (keys.includes(itemId)) {
             return navItem;
         }
@@ -152,10 +151,9 @@ _NavListElement_deselect = function _NavListElement_deselect(navItem) {
     }
 };
 _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
-    var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;
-    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent');
     if (parent) {
         return parent;
     }

data/app/components/primer/beta/nav_list.ts

@@ -74,6 +74,7 @@ export class NavListElement extends HTMLElement {
       this.expandItem(button)
     }
 
+    /* eslint-disable-next-line no-restricted-syntax */
     e.stopPropagation()
   }
 
@@ -96,6 +97,7 @@ export class NavListElement extends HTMLElement {
       this.collapseItem(button)
     }
 
+    /* eslint-disable-next-line no-restricted-syntax */
     e.stopPropagation()
   }
 

data/app/components/primer/beta/nav_list_group_element.js

@@ -44,7 +44,6 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
         return this.showMoreItem.getAttribute('src') || '';
     }
     async showMore(e) {
-        var _a, _b;
         e.preventDefault();
         if (this.showMoreDisabled)
             return;
@@ -69,11 +68,11 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
             return;
         }
         const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
-        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list-group.focusMarkers');
+        fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers');
         const listId = e.target.closest('button').getAttribute('data-list-id');
         const list = document.getElementById(listId);
         list.append(fragment);
-        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.focusMarkers.pop()?.focus();
         this.showMoreDisabled = false;
     }
     setShowMoreItemState() {

data/app/components/primer/dialog_helper.js

@@ -12,11 +12,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
-    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    const button = target?.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
         return;
     // If the user is clicking a valid dialog trigger
-    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    let dialogId = button?.getAttribute('data-show-dialog-id');
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
@@ -25,6 +25,41 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
+            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+            // any popover that is currently open, regardless of whether or not another top layer element,
+            // such as a <dialog> is nested inside.
+            // See https://github.com/whatwg/html/issues/9998.
+            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
+            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            let node = button;
+            let fixed = false;
+            while (node) {
+                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                if (node && node.popover === 'auto') {
+                    node.classList.add('dialog-inside-popover-fix');
+                    node.popover = 'manual';
+                    node.showPopover();
+                    fixed = true;
+                }
+            }
+            if (fixed) {
+                // We need to re-open the dialog as modal, and also ensure no close event listeners
+                // are trying to act on the close
+                /* eslint-disable-next-line no-restricted-syntax */
+                dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+                dialog.close();
+                dialog.showModal();
+                dialog.addEventListener('close', () => {
+                    for (const el of dialog.ownerDocument.querySelectorAll('.dialog-inside-popover-fix')) {
+                        if (el.contains(dialog)) {
+                            el.classList.remove('dialog-inside-popover-fix');
+                            el.popover = 'auto';
+                            el.showPopover();
+                        }
+                    }
+                }, { once: true });
+            }
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -52,34 +87,18 @@ export class DialogHelperElement extends HTMLElement {
             for (const record of records) {
                 if (record.target === this.dialog) {
                     this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
-                    // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-                    // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-                    // any popover that is currently open, regardless of whether or not another top layer element,
-                    // such as a <dialog> is nested inside.
-                    // See https://github.com/whatwg/html/issues/9998.
-                    // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
-                    // we must undo the work they did to hide ancestral popovers of the dialog:
-                    if (this.dialog.hasAttribute('open')) {
-                        let node = this.dialog;
-                        while (node) {
-                            node = node.closest('[popover]:not(:popover-open)');
-                            if (node)
-                                node.showPopover();
-                        }
-                    }
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")?.abort();
     }
     handleEvent(event) {
         const target = event.target;
         const dialog = this.dialog;
         // The click target _must_ be the dialog element itself, and not elements underneath or inside.
-        if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
+        if (target !== dialog || !dialog?.open)
             return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&

data/app/components/primer/dialog_helper.ts

@@ -14,6 +14,46 @@ function dialogInvokerButtonHandler(event: Event) {
       // If the behaviour is allowed through the dialog will be shown but then
       // quickly hidden- as if it were never shown. This prevents that.
       event.preventDefault()
+
+      // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+      // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+      // any popover that is currently open, regardless of whether or not another top layer element,
+      // such as a <dialog> is nested inside.
+      // See https://github.com/whatwg/html/issues/9998.
+      // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
+      // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+      let node: HTMLElement | null | undefined = button
+      let fixed = false
+      while (node) {
+        node = node.parentElement?.closest('[popover]:not(:popover-open)')
+        if (node && node.popover === 'auto') {
+          node.classList.add('dialog-inside-popover-fix')
+          node.popover = 'manual'
+          node.showPopover()
+          fixed = true
+        }
+      }
+      if (fixed) {
+        // We need to re-open the dialog as modal, and also ensure no close event listeners
+        // are trying to act on the close
+        /* eslint-disable-next-line no-restricted-syntax */
+        dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
+        dialog.close()
+        dialog.showModal()
+        dialog.addEventListener(
+          'close',
+          () => {
+            for (const el of dialog.ownerDocument.querySelectorAll<HTMLElement>('.dialog-inside-popover-fix')) {
+              if (el.contains(dialog)) {
+                el.classList.remove('dialog-inside-popover-fix')
+                el.popover = 'auto'
+                el.showPopover()
+              }
+            }
+          },
+          {once: true},
+        )
+      }
     }
   }
 
@@ -44,20 +84,6 @@ export class DialogHelperElement extends HTMLElement {
       for (const record of records) {
         if (record.target === this.dialog) {
           this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'))
-          // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-          // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-          // any popover that is currently open, regardless of whether or not another top layer element,
-          // such as a <dialog> is nested inside.
-          // See https://github.com/whatwg/html/issues/9998.
-          // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
-          // we must undo the work they did to hide ancestral popovers of the dialog:
-          if (this.dialog.hasAttribute('open')) {
-            let node: HTMLElement | null = this.dialog
-            while (node) {
-              node = node.closest('[popover]:not(:popover-open)')
-              if (node) node.showPopover()
-            }
-          }
         }
       }
     }).observe(this, {subtree: true, attributeFilter: ['open']})

data/app/components/primer/focus_group.js

@@ -13,7 +13,7 @@ var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupEl
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
-const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
 const printable = /^\S$/;
 class FocusGroupElement extends HTMLElement {
     constructor() {
@@ -54,26 +54,23 @@ class FocusGroupElement extends HTMLElement {
         this.addEventListener('focusin', this, { signal });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")?.abort();
     }
     handleEvent(event) {
-        var _a;
         const { direction, nowrap } = this;
         if (event.type === 'focusin') {
             if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
-                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
                 const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
                 for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
                     item.setAttribute('tabindex', item === event.target ? '0' : '-1');
                     const popover = event.target.closest('[popover]');
-                    if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
+                    if (item === event.target && popover?.popover === 'auto' && popover.closest('focus-group') === this) {
                         popover.addEventListener('toggle', (toggleEvent) => {
-                            var _a, _b;
                             if (!(toggleEvent.target instanceof Element))
                                 return;
                             if (toggleEvent.newState === 'closed') {
-                                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
                                 item.setAttribute('tabindex', '-1');
                                 if (popover.id) {
                                     const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
@@ -81,7 +78,7 @@ class FocusGroupElement extends HTMLElement {
                                         invoker.setAttribute('tabindex', '0');
                                     }
                                     else {
-                                        (_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+                                        __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]?.setAttribute('tabindex', '0');
                                     }
                                 }
                             }
@@ -146,13 +143,13 @@ class FocusGroupElement extends HTMLElement {
                 let el = focusEl;
                 do {
                     el = el.closest(`[popover]:not(:popover-open)`);
-                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+                    if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
                         el.showPopover();
                     }
-                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                    el = el?.parentElement || null;
                 } while (el);
             }
-            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+            focusEl?.focus();
         }
     }
 }

data/app/components/primer/focus_group.ts

@@ -85,7 +85,7 @@ export default class FocusGroupElement extends HTMLElement {
                   }
                 }
               },
-              {signal}
+              {signal},
             )
           }
         }

data/lib/primer/deprecations.yml

@@ -33,6 +33,11 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::AutoComplete::Item"
 
+  - component: "Primer::Beta::Flash"
+    autocorrect: false
+    replacement: "Primer::Alpha::Banner"
+    guide: "https://primer.style/components/banner/rails/alpha"
+
   - component: "Primer::BlankslateComponent"
     autocorrect: true
     replacement: "Primer::Beta::Blankslate"

data/lib/primer/forms/primer_multi_input.js

@@ -8,7 +8,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { controller, targets } from '@github/catalyst';
 let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
     activateField(name) {
-        var _a, _b;
         const fieldWithName = this.findField(name);
         if (!fieldWithName)
             return;
@@ -17,11 +16,11 @@ let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement
                 continue;
             field.setAttribute('disabled', 'disabled');
             field.setAttribute('hidden', 'hidden');
-            (_a = field.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'hidden');
+            field.parentElement?.setAttribute('hidden', 'hidden');
         }
         fieldWithName.removeAttribute('disabled');
         fieldWithName.removeAttribute('hidden');
-        (_b = fieldWithName.parentElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+        fieldWithName.parentElement?.removeAttribute('hidden');
     }
     findField(name) {
         for (const field of this.fields) {

data/lib/primer/forms/primer_text_field.js

@@ -27,8 +27,7 @@ class PrimerTextFieldElement extends HTMLElement {
         _PrimerTextFieldElement_abortController.set(this, void 0);
     }
     connectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
         this.inputElement.addEventListener('auto-check-success', async (event) => {
             const message = await event.detail.response.text();
@@ -45,8 +44,7 @@ class PrimerTextFieldElement extends HTMLElement {
         }, { signal });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
     }
     clearContents() {
         this.inputElement.value = '';

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 22
-      PATCH = 1
+      MINOR = 23
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb

@@ -1,9 +1,20 @@
-<%= render(Primer::Alpha::Overlay.new(title: "An overlay")) do |o| %>
+<%= render(Primer::Alpha::Overlay.new(title: "An overlay", id: "first-overlay")) do |o| %>
   <% o.with_show_button() { "Show overlay" } %>
   <% o.with_body() do %>
     <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
       <% d.with_show_button { button_text } %>
-      <% d.with_body { body_text} %>
+      <% d.with_body { body_text } %>
+      <% d.with_footer(show_divider: true) do %>
+        <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "dialog-one" })) { "Cancel" } %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>
+
+<script type="module">
+document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
+    setTimeout(() => {
+        document.getElementById('first-overlay').querySelector('button')?.click()
+    });
+  });
+</script>

data/previews/primer/alpha/dialog_preview.rb

@@ -259,6 +259,7 @@ module Primer
       # @param visually_hide_title [Boolean] toggle
       # @param button_text [String] text
       # @param body_text [String] text
+      # @snapshot interactive
       def dialog_inside_overlay(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
         render_with_template(locals: {
                                title: title,

data/previews/primer/beta/button_group_preview/with_menu_button.html.erb

@@ -0,0 +1,7 @@
+<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+  <% component.with_button { "Main menu" } %>
+  <% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do |menu, button| %>
+    <% menu.with_item(label: "Item 1", item_id: :item1) %>
+    <% menu.with_item(label: "Item 2", item_id: :item2) %>
+  <% end %>
+<% end %>