Merge branch 'main' into action_menu_item_form_submit_fixes

.changeset/chilly-elephants-roll.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+fix SegmentedControl alignment issues
+
+<!-- Changed components: SegmentedControl -->

.changeset/eleven-steaks-press.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+Fixes issue where sometimes a dialog cannot be closed if another is open
+
+<!-- Changed components: Primer::Alpha::Dialog -->

.changeset/purple-fans-pump.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Bug fix: Respect autofocus attributes inside of a Dialog when opening a modal-dialog. When the dialog was opening before it was always focusing the first focusable element which was always the close button.

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## 0.12.0
+
+### Minor Changes
+
+- [#2283](https://github.com/primer/view_components/pull/2283) [`da3bdb26`](https://github.com/primer/view_components/commit/da3bdb267e5753942d24e578a8aa2c6d339e5c83) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page.
+
+  <!-- Changed components: Primer::Beta::Button, Primer::Beta::BaseButton, Primer::Beta::IconButton -->
+
+- [#2278](https://github.com/primer/view_components/pull/2278) [`83b70dd7`](https://github.com/primer/view_components/commit/83b70dd73ad970388a3fa6b107d4ca8e4c94a986) Thanks [@gwwar](https://github.com/gwwar)! - Add optional with_trailing_visual_label slot to Primer::Alpha::SegmentedControl::Item. Filling the slot will add a Primer::Beta::Label to the right of the item.
+  <!-- Changed components: Primer::Alpha::SegmentedControl -->
+
+### Patch Changes
+
+- [#2281](https://github.com/primer/view_components/pull/2281) [`46d5d9cb`](https://github.com/primer/view_components/commit/46d5d9cb5b624eee147f67cabcfa8034c7e1668c) Thanks [@keithamus](https://github.com/keithamus)! - Fix tooltips opening when focus is removed while displaying
+
 ## 0.11.0
 
 ### Minor Changes

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    primer_view_components (0.11.0)
+    primer_view_components (0.12.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)

app/components/primer/alpha/modal_dialog.ts

@@ -30,20 +30,17 @@ function clickHandler(event: Event) {
       return
     }
   }
-  // Find the top level dialog that is open.
-  const topLevelDialog = overlayStack[overlayStack.length - 1]
-  if (!topLevelDialog) return
 
-  dialogId = button.getAttribute('data-close-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close()
-  }
+  if (!overlayStack.length) return
 
-  dialogId = button.getAttribute('data-submit-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close(true)
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId)
+      overlayStack.splice(dialogIndex, 1)
+      dialog.close(button.hasAttribute('data-submit-dialog-id'))
+    }
   }
 }
 
@@ -107,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
       }
-      focusTrap(this, undefined, this.#focusAbortController.signal)
+      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
       overlayStack.push(this)
     } else {
       if (!this.open) return

app/components/primer/alpha/segmented_control.pcss

@@ -1,19 +1,87 @@
 /* SegmentedControl */
 
 .SegmentedControl {
+  --segmentedControl-item-padding: var(--control-small-paddingBlock);
+
   display: inline-flex;
   list-style: none;
   background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
   border-radius: var(--borderRadius-medium);
 }
 
+.SegmentedControl--iconOnly {
+  & .Button--iconOnly.Button--small,
+  & .Button--iconOnly.Button--medium,
+  & .Button--iconOnly.Button--large {
+    width: 100%;
+    padding-inline: 0 !important;
+  }
+}
+
+/* sizes */
+
+.SegmentedControl--small {
+  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
+
+  & .SegmentedControl-item {
+    height: var(--control-small-size);
+
+    & .Button {
+      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-small-size);
+    }
+  }
+}
+
+.SegmentedControl--medium {
+  & .SegmentedControl-item {
+    height: var(--control-medium-size);
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-medium-size);
+    }
+  }
+}
+
+.SegmentedControl--large {
+  & .SegmentedControl-item {
+    height: var(--control-large-size);
+
+    & .Button {
+      padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-large-size);
+    }
+  }
+}
+
+/* item */
+
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
+  justify-content: center;
   border: var(--borderWidth-thin) solid transparent;
   border-radius: var(--borderRadius-medium);
-  padding: var(--control-xsmall-paddingInline-condensed);
+  height: var(--control-medium-size);
+  padding: var(--segmentedControl-item-padding);
+
+  & .Button-withTooltip {
+    width: 100%;
+  }
 
+  /* button color overrides */
   & .Button--invisible {
     &:hover:not(:disabled) {
       background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
@@ -69,72 +137,19 @@
 
   /* Button ----------------------------------------- */
   & .Button {
+    height: 100%;
+    width: 100%;
     border: 0;
     font-weight: var(--base-text-weight-normal);
-    transition: none;
-    color: var(--button-default-fgColor-rest);
+    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
+    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
 
     &:focus-visible {
-      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
-      border-radius: calc(var(--borderRadius-medium) - 5px);
-    }
-  }
-
-  & .Button--small {
-    height: calc(
-      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
-      }
+      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
+      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
     }
   }
 
-  & .Button--medium {
-    height: calc(
-      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
-      }
-    }
-  }
-
-  & .Button--large {
-    height: calc(
-      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);
-      }
-    }
-  }
-
-  & .Button--iconOnly {
-    padding: initial;
-  }
-
   & .Button--invisible.Button--invisible-noVisuals .Button-label {
     color: var(--button-default-fgColor-rest);
   }
@@ -148,12 +163,4 @@
     flex: 1;
     justify-content: center;
   }
-
-  /* is .Button-withTooltip used anywhere? can't find use of it */
-  & .Button--iconOnly,
-  & .Button-withTooltip {
-    width: 100% !important;
-    display: flex;
-    justify-content: center;
-  }
 }

app/components/primer/alpha/segmented_control.rb

@@ -13,6 +13,15 @@ class SegmentedControl < Primer::Component
       FULL_WIDTH_DEFAULT = false
       HIDE_LABELS_DEFAULT = false
 
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "SegmentedControl--small",
+        :medium => "SegmentedControl--medium",
+        :large => "SegmentedControl--large",
+        DEFAULT_SIZE => "SegmentedControl--medium"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
       # Use to render an item in the segmented control
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -42,6 +51,7 @@ def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT,
         @system_arguments[:role] = "list"
         @system_arguments[:classes] = class_names(
           system_arguments[:classes],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
           "SegmentedControl",
           "SegmentedControl--iconOnly": hide_labels,
           "SegmentedControl--fullWidth": full_width

app/components/primer/alpha/tool_tip.ts

@@ -53,6 +53,16 @@ function focusOutListener() {
   closeOpenTooltips()
 }
 
+function focusInListener(event: Event) {
+  setTimeout(() => {
+    for (const tooltip of openTooltips) {
+      if (isPopoverOpen(tooltip) && tooltip.showReason === 'focus' && tooltip.control !== event.target) {
+        tooltip.hidePopover()
+      }
+    }
+  }, 0)
+}
+
 const tooltips = new Set<ToolTipElement>()
 const openTooltips = new Set<ToolTipElement>()
 class ToolTipElement extends HTMLElement {
@@ -193,6 +203,10 @@ class ToolTipElement extends HTMLElement {
   #align: AnchorAlignment = 'center'
   #side: AnchorSide = 'outside-bottom'
   #allowUpdatePosition = false
+  #showReason: 'focus' | 'mouse' = 'mouse'
+  get showReason() {
+    return this.#showReason
+  }
 
   get htmlFor(): string {
     return this.getAttribute('for') || ''
@@ -270,6 +284,7 @@ class ToolTipElement extends HTMLElement {
       signal
     })
     this.ownerDocument.addEventListener('focusout', focusOutListener)
+    this.ownerDocument.addEventListener('focusin', focusInListener)
     this.ownerDocument.addEventListener('keydown', this, {signal})
   }
 
@@ -297,6 +312,7 @@ class ToolTipElement extends HTMLElement {
 
     await Promise.resolve()
     if (!showing && shouldShow && !isPopoverOpen(this)) {
+      this.#showReason = event.type === 'mouseenter' ? 'mouse' : 'focus'
       this.showPopover()
     } else if (showing && shouldHide && isPopoverOpen(this)) {
       this.hidePopover()

demo/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    primer_view_components (0.11.0)
+    primer_view_components (0.12.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)

lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 11
+      MINOR = 12
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",