primer_view_components 0.18.2 → 0.19.0

data/app/components/primer/dialog_helper.js

@@ -11,13 +11,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
-    var _a;
     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) {
@@ -36,7 +35,7 @@ function dialogInvokerButtonHandler(event) {
             let node = button;
             let fixed = false;
             while (node) {
-                node = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]:not(:popover-open)');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
@@ -93,14 +92,13 @@ export class DialogHelperElement extends HTMLElement {
         }).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/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/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 = 18
-      PATCH = 2
+      MINOR = 19
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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 %>

data/previews/primer/beta/button_group_preview.rb

@@ -39,6 +39,12 @@ module Primer
         end
       end
 
+      # @label With menu button
+      #
+      # @snapshot
+      def with_menu_button
+      end
+
       # @label Icon buttons
       #
       # @param size [Symbol] select [medium, small]

data/static/arguments.json

@@ -3436,6 +3436,28 @@
       }
     ]
   },
+  {
+    "component": "ButtonGroup::MenuButton",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ButtonGroupMenuButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group/menu_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/menu_button/default/",
+    "parameters": [
+      {
+        "name": "menu_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [ActionMenu](/components/alpha/actionmenu)."
+      },
+      {
+        "name": "button_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [Button](/components/beta/button) or [IconButton](/components/beta/iconbutton), depending on the value of the `icon:` argument."
+      }
+    ]
+  },
   {
     "component": "ClipboardCopy",
     "status": "beta",
@@ -3648,7 +3670,7 @@
   },
   {
     "component": "Flash",
-    "status": "beta",
+    "status": "deprecated",
     "a11y_reviewed": false,
     "short_name": "Flash",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",

data/static/audited_at.json

@@ -75,6 +75,7 @@
   "Primer::Beta::Breadcrumbs::Item": "",
   "Primer::Beta::Button": "",
   "Primer::Beta::ButtonGroup": "",
+  "Primer::Beta::ButtonGroup::MenuButton": "",
   "Primer::Beta::ClipboardCopy": "",
   "Primer::Beta::ClipboardCopyBaseButton": "",
   "Primer::Beta::ClipboardCopyButton": "",

data/static/constants.json

@@ -848,6 +848,9 @@
     ]
   },
   "Primer::Beta::ButtonGroup": {
+    "MenuButton": "Primer::Beta::ButtonGroup::MenuButton"
+  },
+  "Primer::Beta::ButtonGroup::MenuButton": {
   },
   "Primer::Beta::ClipboardCopy": {
   },

data/static/info_arch.json

@@ -2232,7 +2232,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Banner",
     "description": "Use `Banner` to highlight important information.",
-    "accessibility_docs": "Depending on the scenario, some Banners may need to receive focus when they appear. This helps to maximize discoverability of the message, especially in critical scenarios. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires focusing the banner.\n\nTo properly focus a banner, add a `tabindex=\"-1\"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).\n\nFor more information about the focus management technique, visit the [Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.",
+    "accessibility_docs": "Given that Banner is made visually prominent to sighted users through the use of icons and color, consider providing a heading and designating the Banner as a region landmark to improve navigability and discoverability of the Banner of assistive technology users. At this time, the PVC Banner does not render a heading nor render as a region landmark by default. This may be introduced in the future [as a breaking API change](https://github.com/primer/view_components/issues/2619). For now, consider providing an appropriate heading inside of the Banner and rendering the Banner as a `<section>` tag with `aria-labelledby=\"switch-this-with-banner-heading-id\"` to implicitly designate the Banner as a region landmark.\n\nA Banner can be used in one of two ways – to highlight information on a page, or to communicate an urgent message/feedback for a user action. For the latter scenario, it may be necessary to use a live region or focus management technique to ensure that the Banner is discoverable and accessible for all users. Otherwise, the Banner can easily be missed, including by those using magnification software or screen reader users who may not realize that a Banner has appeared. The appropriate technique to use is highly context-dependent. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires either techniques.\n\n### Announcing a Banner\n  When a Banner is used to communicate non-critical feedback, or is used in critical scenarios where moving focus is considered too disruptive, use a live region announcement to announce the content of the Banner to screen reader users.\n\n  Live regions can be finicky and don't work well when injected dynamically. Setting a live region attribute on the Banner itself is discouraged as it will not announce as expected for most screen readers.\n\n  To ensure a Banner is announced reliably, make sure that there's a live region container that is already on the page. When the Banner is shown, populate the live region container with the content of the Banner. This can be done in one of two ways. The first is to rely on a global live region container that is guaranteed to be on the page. When the Banner appears, populate this global live region container with the Banner content. The second technique is to hide or show the Banner within a live region wrapper that is guaranteed to always be on the page.\n\n  For more information about either technique, visit [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region). This guidance is subject to change.\n\n### Focusing a Banner\n  Focusing a Banner when it appears helps to maximize discoverability of the message, especially in critical scenarios.\n\n  To properly focus a banner, add a `tabindex=\"-1\"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).\n\n  For more information about the focus management technique, visit the [Staff only: Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -11038,7 +11038,7 @@
     "slots": [
       {
         "name": "buttons",
-        "description": "List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).",
+        "description": "List of buttons to be rendered. Add buttons via the `#with_button`, `#with_menu_button`, and `#with_clipboard_copy_button` methods (see below).",
         "parameters": [
 
         ]
@@ -11063,6 +11063,18 @@
           }
         ]
       },
+      {
+        "name": "with_menu_button",
+        "description": "Adds a button that activates a menu when clicked.",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
+          }
+        ]
+      },
       {
         "name": "with_clipboard_copy_button",
         "description": "Adds a {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}.",
@@ -11116,6 +11128,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button_group/with_menu_button",
+        "name": "with_menu_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button_group/icon_buttons",
         "name": "icon_buttons",
@@ -11157,7 +11182,46 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Beta::ButtonGroup::MenuButton",
+        "description": "Renders a button in a {{#link_to_component}}Primer::Beta::ButtonGroup{{/link_to_component}} that displays an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} when clicked.\nThis component should not be used outside of a `ButtonGroup` context.\n\nThis component yields both the button and the list to the block when rendered.\n\n```erb\n<%= render(Primer::Beta::ButtonGroup.new) do |group| %>\n  <% group.with_menu_button do |menu, button| %>\n    <% menu.with_item(label: \"Item 1\") %>\n    <% button.with_trailing_visual_icon(icon: \"triangle-down\") %>\n  <% end %>\n<% end %>\n```",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": false,
+        "component": "ButtonGroup::MenuButton",
+        "status": "alpha",
+        "a11y_reviewed": false,
+        "short_name": "ButtonGroupMenuButton",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group/menu_button.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/menu_button/default/",
+        "parameters": [
+          {
+            "name": "menu_arguments",
+            "type": "Hash",
+            "default": "`{}`",
+            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}}."
+          },
+          {
+            "name": "button_arguments",
+            "type": "Hash",
+            "default": "`{}`",
+            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
+          }
+        ],
+        "slots": [
 
+        ],
+        "methods": [
+
+        ],
+        "previews": [
+
+        ],
+        "subcomponents": [
+
+        ]
+      }
     ]
   },
   {
@@ -11890,13 +11954,13 @@
   },
   {
     "fully_qualified_name": "Primer::Beta::Flash",
-    "description": "Use `Flash` to inform users of successful or pending actions.",
+    "description": "This component has been deprecated. Use [Banner]({{#link_to_component}}Primer::Alpha::Banner{{/link_to_component}}) instead.\n\nUse `Flash` to inform users of successful or pending actions.",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
     "component": "Flash",
-    "status": "beta",
+    "status": "deprecated",
     "a11y_reviewed": false,
     "short_name": "Flash",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",

data/static/previews.json

@@ -2236,6 +2236,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button_group/with_menu_button",
+        "name": "with_menu_button",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button_group/icon_buttons",
         "name": "icon_buttons",
@@ -3361,7 +3374,7 @@
   {
     "name": "flash",
     "component": "Flash",
-    "status": "beta",
+    "status": "deprecated",
     "lookup_path": "primer/beta/flash",
     "examples": [
       {

data/static/statuses.json

@@ -75,13 +75,14 @@
   "Primer::Beta::Breadcrumbs::Item": "alpha",
   "Primer::Beta::Button": "beta",
   "Primer::Beta::ButtonGroup": "beta",
+  "Primer::Beta::ButtonGroup::MenuButton": "alpha",
   "Primer::Beta::ClipboardCopy": "beta",
   "Primer::Beta::ClipboardCopyBaseButton": "beta",
   "Primer::Beta::ClipboardCopyButton": "beta",
   "Primer::Beta::CloseButton": "beta",
   "Primer::Beta::Counter": "beta",
   "Primer::Beta::Details": "beta",
-  "Primer::Beta::Flash": "beta",
+  "Primer::Beta::Flash": "deprecated",
   "Primer::Beta::Heading": "beta",
   "Primer::Beta::IconButton": "beta",
   "Primer::Beta::Label": "beta",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.18.2
+  version: 0.19.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-02-12 00:00:00.000000000 Z
+date: 2024-02-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -795,7 +795,7 @@ files:
 - previews/primer/beta/border_box_preview.rb
 - previews/primer/beta/breadcrumbs_preview.rb
 - previews/primer/beta/button_group_preview.rb
-- previews/primer/beta/button_group_preview/action_menus.html.erb
+- previews/primer/beta/button_group_preview/with_menu_button.html.erb
 - previews/primer/beta/button_preview.rb
 - previews/primer/beta/button_preview/all_schemes.html.erb
 - previews/primer/beta/button_preview/invisible_all_visuals.html.erb

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

@@ -1,8 +0,0 @@
-<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
-  <% component.with_button() { "Main menu" } %>
-  <% component.with_button(icon: "triangle-down", "aria-label": "secondary menu", data: { "menu-id": "my-id" }) %>
-<% end %>
-
-<%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end, menu_id: "my-id")) do |component| %>
-  <% component.with_item(label: "Item", tag: :button, value: "") %>
-<% end %>