primer_view_components 0.13.0 → 0.13.1

data/app/components/primer/alpha/action_bar_element.js

@@ -101,6 +101,8 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
 };
 _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function')
         return element.checkVisibility();
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);

data/app/components/primer/alpha/action_bar_element.ts

@@ -93,6 +93,8 @@ class ActionBarElement extends HTMLElement {
 
   #isVisible(element: HTMLElement): boolean {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function') return element.checkVisibility()
 
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -109,7 +109,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a;
+        var _a, _b;
         const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
         if (targetIsInvoker && event.type === 'mousedown') {
@@ -151,6 +151,14 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
+            // Pressing the space key on a button will cause the page to scroll unless preventDefault()
+            // is called. Unfortunately, calling preventDefault() will also skip form submission. The
+            // code below therefore only calls preventDefault() if the button submits a form and the
+            // button is being activated by the space key.
+            if (item.getAttribute('type') === 'submit' && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
+                event.preventDefault();
+                (_b = item.closest('form')) === null || _b === void 0 ? void 0 : _b.submit();
+            }
             return;
         }
         if (event.type === 'include-fragment-replaced') {
@@ -176,10 +184,17 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
         event.stopImmediatePropagation();
     }
 }, _ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
+    return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaEnter).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event);
+}, _ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        (event.key === 'Enter' || event.key === ' '));
+        event.key === ' ');
 }, _ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
     return event instanceof MouseEvent && event.type === 'click';
 }, _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -134,11 +134,24 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #isKeyboardActivation(event: Event): boolean {
+    return this.#isKeyboardActivationViaEnter(event) || this.#isKeyboardActivationViaSpace(event)
+  }
+
+  #isKeyboardActivationViaEnter(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  #isKeyboardActivationViaSpace(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&
       event.type === 'keydown' &&
       !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
+      event.key === ' '
     )
   }
 
@@ -202,6 +215,16 @@ export class ActionMenuElement extends HTMLElement {
 
       this.#activateItem(event, item)
       this.#handleItemActivated(event, item)
+
+      // Pressing the space key on a button will cause the page to scroll unless preventDefault()
+      // is called. Unfortunately, calling preventDefault() will also skip form submission. The
+      // code below therefore only calls preventDefault() if the button submits a form and the
+      // button is being activated by the space key.
+      if (item.getAttribute('type') === 'submit' && this.#isKeyboardActivationViaSpace(event)) {
+        event.preventDefault()
+        item.closest('form')?.submit()
+      }
+
       return
     }
 

data/app/components/primer/alpha/tool_tip.js

@@ -32,8 +32,9 @@ const isPopoverOpen = (() => {
     }
     return (el) => (selector ? el.matches(selector) : setSelector(el));
 })();
+const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
-const TOOLTIP_OFFSET = 4;
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -106,15 +107,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -123,11 +142,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `;
     }

data/app/components/primer/alpha/tool_tip.ts

@@ -21,8 +21,9 @@ const isPopoverOpen = (() => {
   return (el: Element) => (selector ? el.matches(selector) : setSelector(el))
 })()
 
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
-const TOOLTIP_OFFSET = 4
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -91,15 +92,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -108,11 +127,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `
   }

data/lib/primer/accessibility.rb

@@ -8,9 +8,7 @@ module Primer
     # Do not add to this list for any other reason!
     IGNORED_PREVIEWS = [
       Primer::Beta::MarkdownPreview,
-      Primer::Beta::AutoCompleteItemPreview,
-      Primer::Alpha::RadioButtonPreview,
-      Primer::Alpha::CheckBoxPreview
+      Primer::Beta::AutoCompleteItemPreview
     ].freeze
 
     # Skip `:region` which relates to preview page structure rather than individual component.

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 13
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/check_box_preview.rb

@@ -7,7 +7,6 @@ module Primer
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
@@ -15,7 +14,6 @@ module Primer
       # @param disabled toggle
       def playground(
         name: "my-check-box",
-        id: nil,
         value: "picard",
         label: "Jean-Luc Picard",
         caption: "Make it so",
@@ -24,7 +22,6 @@ module Primer
       )
         system_arguments = {
           name: name,
-          id: id,
           value: value,
           label: label,
           caption: caption,

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

@@ -4,7 +4,8 @@
     <p>Dialog One!</p>
 
     <form>
-      <input type="text" value="Some text goes in here">
+      <label for="dialog-text-input-example">Example input</label>
+      <input id="dialog-text-input-example" type="text" value="Some text goes in here">
     </form>
   <% end %>
 <% end %>

data/previews/primer/alpha/radio_button_preview.rb

@@ -7,7 +7,6 @@ module Primer
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
@@ -15,7 +14,6 @@ module Primer
       # @param disabled toggle
       def playground(
         name: "my-radio-button",
-        id: nil,
         value: "bsg",
         label: "Battlestar Galactica",
         caption: "A pretty good show",
@@ -24,7 +22,6 @@ module Primer
       )
         system_arguments = {
           name: name,
-          id: id,
           value: value,
           label: label,
           caption: caption,

data/static/info_arch.json

@@ -2589,7 +2589,84 @@
 
     ],
     "previews": [
-
+      {
+        "preview_path": "primer/alpha/check_box/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/check_box/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/check_box/with_caption",
+        "name": "with_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/check_box/checked",
+        "name": "checked",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/check_box/visually_hide_label",
+        "name": "visually_hide_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/check_box/disabled",
+        "name": "disabled",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
     ],
     "subcomponents": [
 
@@ -5937,7 +6014,84 @@
 
     ],
     "previews": [
-
+      {
+        "preview_path": "primer/alpha/radio_button/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/radio_button/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/radio_button/with_caption",
+        "name": "with_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/radio_button/checked",
+        "name": "checked",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/radio_button/visually_hide_label",
+        "name": "visually_hide_label",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/radio_button/disabled",
+        "name": "disabled",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
     ],
     "subcomponents": [