openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,430 @@
+import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import '@oddbird/popover-polyfill'
+import {getAnchoredPosition} from '@primer/behaviors'
+
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
+const TOOLTIP_OFFSET = 10
+
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
+
+const DIRECTION_CLASSES = [
+  'tooltip-n',
+  'tooltip-s',
+  'tooltip-e',
+  'tooltip-w',
+  'tooltip-ne',
+  'tooltip-se',
+  'tooltip-nw',
+  'tooltip-sw'
+]
+
+function closeOpenTooltips(except?: Element) {
+  for (const tooltip of openTooltips) {
+    if (tooltip === except) continue
+    if (tooltip.matches(':popover-open')) {
+      tooltip.hidePopover()
+    } else {
+      openTooltips.delete(tooltip)
+    }
+  }
+}
+
+function focusOutListener() {
+  closeOpenTooltips()
+}
+
+const tooltips = new Set<ToolTipElement>()
+const openTooltips = new Set<ToolTipElement>()
+class ToolTipElement extends HTMLElement {
+  styles() {
+    return `
+      :host {
+        padding: .5em .75em !important;
+        font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        -webkit-font-smoothing: subpixel-antialiased;
+        color: var(--color-fg-on-emphasis) !important;
+        text-align: center;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: break-word;
+        white-space: pre;
+        background: var(--color-neutral-emphasis-plus) !important;
+        border-radius: 6px;
+        border: 0 !important;
+        opacity: 0;
+        max-width: 250px;
+        word-wrap: break-word;
+        white-space: normal;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
+      }
+
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--color-neutral-emphasis-plus);
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0
+      }
+
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0;
+        }
+        to {
+          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;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :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(--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(--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(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--color-neutral-emphasis-plus)
+      }
+    `
+  }
+
+  #abortController: AbortController | undefined
+  #align: AnchorAlignment = 'center'
+  #side: AnchorSide = 'outside-bottom'
+  #allowUpdatePosition = false
+
+  get htmlFor(): string {
+    return this.getAttribute('for') || ''
+  }
+
+  set htmlFor(value: string) {
+    this.setAttribute('for', value)
+  }
+
+  get type(): 'description' | 'label' {
+    const type = this.getAttribute('data-type')
+    return type === 'label' ? 'label' : 'description'
+  }
+
+  set type(value: 'description' | 'label') {
+    this.setAttribute('data-type', value)
+  }
+
+  get direction(): Direction {
+    return (this.getAttribute('data-direction') || 's') as Direction
+  }
+
+  set direction(value: Direction) {
+    this.setAttribute('data-direction', value)
+  }
+
+  get control(): HTMLElement | null {
+    return this.ownerDocument.getElementById(this.htmlFor)
+  }
+
+  /* @deprecated */
+  set hiddenFromView(value: true | false) {
+    if (value && this.matches(':popover-open')) {
+      this.hidePopover()
+    } else if (!value && this.matches(':not(:popover-open)')) {
+      this.showPopover()
+    }
+  }
+
+  /* @deprecated */
+  get hiddenFromView() {
+    return !this.matches(':popover-open')
+  }
+
+  connectedCallback() {
+    tooltips.add(this)
+    this.#updateControlReference()
+    this.#updateDirection()
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({mode: 'open'})
+      const style = shadow.appendChild(document.createElement('style'))
+      style.textContent = this.styles()
+      shadow.appendChild(document.createElement('slot'))
+    }
+    this.#update(false)
+    this.#allowUpdatePosition = true
+
+    if (!this.control) return
+
+    this.setAttribute('role', 'tooltip')
+
+    this.#abortController?.abort()
+    this.#abortController = new AbortController()
+    const {signal} = this.#abortController
+
+    this.addEventListener('mouseleave', this, {signal})
+    this.addEventListener('toggle', this, {signal})
+    this.control.addEventListener('mouseenter', this, {signal})
+    this.control.addEventListener('mouseleave', this, {signal})
+    this.control.addEventListener('focus', this, {signal})
+    this.control.addEventListener('mousedown', this, {signal})
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore popoverTargetElement is not in the type definition
+    this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
+      signal
+    })
+    this.ownerDocument.addEventListener('focusout', focusOutListener)
+    this.ownerDocument.addEventListener('keydown', this, {signal})
+  }
+
+  disconnectedCallback() {
+    tooltips.delete(this)
+    openTooltips.delete(this)
+    this.#abortController?.abort()
+  }
+
+  async handleEvent(event: Event) {
+    if (!this.control) return
+    const showing = this.matches(':popover-open')
+
+    // Ensures that tooltip stays open when hovering between tooltip and element
+    // WCAG Success Criterion 1.4.13 Hoverable
+    const shouldShow = event.type === 'mouseenter' || event.type === 'focus'
+    const isMouseLeaveFromButton =
+      event.type === 'mouseleave' &&
+      (event as MouseEvent).relatedTarget !== this.control &&
+      (event as MouseEvent).relatedTarget !== this
+    const isEscapeKeydown = event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape'
+    const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control
+    const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this
+    const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
+
+    await Promise.resolve()
+    if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
+      this.showPopover()
+    } else if (showing && shouldHide && this.matches(':popover-open')) {
+      this.hidePopover()
+    }
+
+    if (event.type === 'toggle') {
+      this.#update((event as ToggleEvent).newState === 'open')
+    }
+  }
+
+  static observedAttributes = ['data-type', 'data-direction', 'id']
+
+  #update(isOpen: boolean) {
+    if (isOpen) {
+      openTooltips.add(this)
+      this.classList.remove(TOOLTIP_SR_ONLY_CLASS)
+      closeOpenTooltips(this)
+      this.#updatePosition()
+    } else {
+      openTooltips.delete(this)
+      this.classList.remove(...DIRECTION_CLASSES)
+      this.classList.add(TOOLTIP_SR_ONLY_CLASS)
+    }
+  }
+
+  attributeChangedCallback(name: string) {
+    if (!this.isConnected) return
+
+    if (name === 'id' || name === 'data-type') {
+      this.#updateControlReference()
+    } else if (name === 'data-direction') {
+      this.#updateDirection()
+    }
+  }
+
+  #updateControlReference() {
+    if (!this.id || !this.control) return
+    if (this.type === 'label') {
+      let labelledBy = this.control.getAttribute('aria-labelledby')
+      if (labelledBy) {
+        if (!labelledBy.split(' ').includes(this.id)) {
+          labelledBy = `${labelledBy} ${this.id}`
+        } else {
+          labelledBy = `${labelledBy}`
+        }
+      } else {
+        labelledBy = this.id
+      }
+      this.control.setAttribute('aria-labelledby', labelledBy)
+
+      // Prevent duplicate accessible name announcements.
+      this.setAttribute('aria-hidden', 'true')
+    } else {
+      let describedBy = this.control.getAttribute('aria-describedby')
+      if (describedBy) {
+        if (!describedBy.split(' ').includes(this.id)) {
+          describedBy = `${describedBy} ${this.id}`
+        } else {
+          describedBy = `${describedBy}`
+        }
+      } else {
+        describedBy = this.id
+      }
+      this.control.setAttribute('aria-describedby', describedBy)
+    }
+  }
+
+  #updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES)
+    const direction = this.direction
+    if (direction === 'n') {
+      this.#align = 'center'
+      this.#side = 'outside-top'
+    } else if (direction === 'ne') {
+      this.#align = 'start'
+      this.#side = 'outside-top'
+    } else if (direction === 'e') {
+      this.#align = 'center'
+      this.#side = 'outside-right'
+    } else if (direction === 'se') {
+      this.#align = 'start'
+      this.#side = 'outside-bottom'
+    } else if (direction === 's') {
+      this.#align = 'center'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'sw') {
+      this.#align = 'end'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'w') {
+      this.#align = 'center'
+      this.#side = 'outside-left'
+    } else if (direction === 'nw') {
+      this.#align = 'end'
+      this.#side = 'outside-top'
+    }
+  }
+
+  #updatePosition() {
+    if (!this.control) return
+    if (!this.#allowUpdatePosition || !this.matches(':popover-open')) return
+
+    const position = getAnchoredPosition(this, this.control, {
+      side: this.#side,
+      align: this.#align,
+      anchorOffset: TOOLTIP_OFFSET
+    })
+    const anchorSide = position.anchorSide
+    const align = position.anchorAlign
+
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`)
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`)
+
+    let direction: Direction = 's'
+
+    if (anchorSide === 'outside-left') {
+      direction = 'w'
+    } else if (anchorSide === 'outside-right') {
+      direction = 'e'
+    } else if (anchorSide === 'outside-top') {
+      if (align === 'center') {
+        direction = 'n'
+      } else if (align === 'start') {
+        direction = 'ne'
+      } else {
+        direction = 'nw'
+      }
+    } else {
+      if (align === 'center') {
+        direction = 's'
+      } else if (align === 'start') {
+        direction = 'se'
+      } else {
+        direction = 'sw'
+      }
+    }
+
+    this.classList.add(`tooltip-${direction}`)
+  }
+}
+
+if (!window.customElements.get('tool-tip')) {
+  window.ToolTipElement = ToolTipElement
+  window.customElements.define('tool-tip', ToolTipElement)
+}
+
+declare global {
+  interface Window {
+    ToolTipElement: typeof ToolTipElement
+  }
+}

data/app/components/primer/alpha/tooltip.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
+    # Use tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).
+    #
+    # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
+    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::Beta::Link)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
+    # - Tooltip text must be brief and concise even when used to display a description.
+    # - Tooltips can only hold string content.
+    # - Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled="true"` instead and programmatically disable the element.
+    # - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only
+    # and screen reader users. Use of tooltips through <%= link_to_component(Primer::Beta::Button) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::Beta::IconButton) %> will guarantee this.
+    # - If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.
+    #   content.
+    #
+    # Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
+    # `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+    # - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
+    # The majority of tooltips will fall under this category.
+    # - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
+    # `label` type is usually only appropriate for an icon-only control.
+    class Tooltip < Primer::Component
+      DIRECTION_DEFAULT = :s
+      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
+
+      TYPE_FALLBACK = :description
+      TYPE_OPTIONS = [:label, :description].freeze
+      # @example As a supplementary description for a button
+      #   @description
+      #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
+      #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
+      #   @code
+      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |component| %>
+      #       <% component.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
+      #       Save
+      #     <% end %>
+      # @example As a label for an `IconButton`
+      #   @description
+      #     An `IconButton` of `tag: :button` and `tag: :a` will render a tooltip using the `aria-label` content by default. While tooltips should generally be avoided, a tooltip on an `IconButton`
+      #     has usability benefits because it provides a textual label for sighted users.
+      #     A screen reader user who encounters the following button will hear the accessible name, "Bold".
+      #   @code
+      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
+      # @example As a supplementary description for an `IconButton`
+      #   @description
+      #     If you want to provide a description for the `IconButton`, set both `aria-label` and `aria-description` text. The tooltip will use the `aria-description` text.
+      #     A screen reader user who encounters the following button will hear the accessible name "Search", followed by the accessible description "Use keywords like 'repo:' and 'org:' in your query".
+      #   @code
+      #     <%= render(Primer::IconButton.new(id: "search-button", icon: :search, "aria-label": "Search", "aria-description": "Use keywords like 'repo:' and 'org:' in your query")) %>
+      #
+      # @example With direction
+      #   @description
+      #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
+      #   @code
+      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
+      #       North
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
+      #       South
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
+      #       East
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
+      #       West
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
+      #       Northwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
+      #       Southwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
+      #       Northeast
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |component| %>
+      #       <% component.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
+      #       Southeast
+      #     <% end %>
+      # @example Directly using `Tooltip`
+      #   @description
+      #     When you have a valid tooltip usecase for an interactive element that is not one of the supported components, you may need to use the `Tooltip` component directly.
+      #     The tooltip should be placed directly adjacent after the element you are associating it with.
+      #     The tooltip is absolutely positioned so ensure there is a wrapper with `position: relative` to avoid positioning issues.
+      #   @code
+      #     <div style="position: relative;">
+      #       <button type="button" id="test-button">Test</button>
+      #       <%= render(Primer::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
+      #     </div>
+      # @param for_id [String] The ID of the element that the tooltip should be attached to.
+      # @param type [Symbol] <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param direction [Symbol] <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+      # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(type:, for_id:, text:, direction: DIRECTION_DEFAULT, **system_arguments)
+        raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
+
+        @text = text
+        @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
+        @system_arguments[:tag] = :"tool-tip"
+        @system_arguments[:for] = for_id
+        @system_arguments[:popover] = "manual"
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "sr-only"
+        )
+        @system_arguments[:position] = :absolute
+        @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
+        @system_arguments[:"data-type"] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { @text }
+      end
+    end
+  end
+end

data/app/components/primer/alpha/underline_nav.css

@@ -0,0 +1 @@
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-border-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

data/app/components/primer/alpha/underline_nav.css.json

@@ -0,0 +1,28 @@
+{
+  "name": "alpha/underline_nav",
+  "selectors": [
+    ".UnderlineNav",
+    ".UnderlineNav .Counter",
+    ".UnderlineNav .Counter--primary",
+    ".UnderlineNav-body",
+    ".UnderlineNav-item",
+    ".UnderlineNav-item:focus",
+    ".UnderlineNav-item:focus-visible",
+    ".UnderlineNav-item:hover",
+    ".UnderlineNav-item [data-content]:before",
+    ".UnderlineNav-item:before",
+    ".UnderlineNav-item.selected",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false])",
+    ".UnderlineNav-item[role=tab][aria-selected=true]",
+    ".UnderlineNav-item.selected:after",
+    ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
+    ".UnderlineNav-item[role=tab][aria-selected=true]:after",
+    ".UnderlineNav--right",
+    ".UnderlineNav--right .UnderlineNav-actions",
+    ".UnderlineNav-actions",
+    ".UnderlineNav--full",
+    ".UnderlineNav--full .UnderlineNav-body",
+    ".UnderlineNav-octicon",
+    ".UnderlineNav-container"
+  ]
+}

data/app/components/primer/alpha/underline_nav.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,4EAAmD,CAJnD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,wEAA0E,CAD1E,oDAA6B,CAD7B,2CAGF,CAEA,gCAEE,uEAAiD,CADjD,2DAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,oDAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,+EAAqD,CAFrD,oDAA6B,CAG7B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,kGAAoD,CAFpD,oDAA6B,CAC7B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,4FAA2D,CAD3D,oDAA6B,CAD7B,gDAiBF,CAZE,0JAQE,mFAAkD,CAClD,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,+CAA0B,CAD1B,gDAA2B,CAF3B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--borderColor-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n  }\n\n  & .Counter--primary {\n    color: var(--fgColor-onEmphasis);\n    background-color: var(--bgColor-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--fgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    border-bottom-color: var(--borderColor-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--fgColor-default);\n      text-decoration: none;\n      background: var(--control-transparent-bgColor-hover);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-default);\n    border-bottom-color: var(--underlineNav-borderColor-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--underlineNav-borderColor-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--fgColor-muted);\n  fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

data/app/components/primer/alpha/underline_nav.html.erb

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @align == :right %>
+    <%= actions %>
+  <% end %>
+
+  <%= render body do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+
+  <% if @align == :left %>
+    <%= actions %>
+  <% end %>
+<% end %>