openproject-primer_view_components 0.33.2 → 0.35.0

data/lib/primer/forms/dsl/text_field_input.rb

@@ -7,17 +7,20 @@ module Primer
       class TextFieldInput < Input
         attr_reader(
           *%i[
-            name label show_clear_button leading_visual clear_button_id
+            name label show_clear_button leading_visual leading_spinner clear_button_id
             visually_hide_label inset monospace field_wrap_classes auto_check_src
           ]
         )
 
+        alias leading_spinner? leading_spinner
+
         def initialize(name:, label:, **system_arguments)
           @name = name
           @label = label
 
           @show_clear_button = system_arguments.delete(:show_clear_button)
           @leading_visual = system_arguments.delete(:leading_visual)
+          @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id)
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
@@ -30,6 +33,10 @@ module Primer
             )
           end
 
+          if @leading_spinner && !@leading_visual
+            raise ArgumentError, "text fields that request a leading spinner must also specify a leading visual"
+          end
+
           super(**system_arguments)
 
           add_input_data(:target, "primer-text-field.inputElement #{system_arguments.dig(:data, :target) || ''}")

data/lib/primer/forms/primer_text_field.d.ts

@@ -1 +1,28 @@
 import '@github/auto-check-element';
+import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
+declare global {
+    interface HTMLElementEventMap {
+        'auto-check-success': AutoCheckSuccessEvent;
+        'auto-check-error': AutoCheckErrorEvent;
+    }
+}
+export declare class PrimerTextFieldElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    validationSuccessIcon: HTMLElement;
+    validationErrorIcon: HTMLElement;
+    leadingVisual: HTMLElement;
+    leadingSpinner: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clearContents(): void;
+    clearError(): void;
+    setValidationMessage(message: string): void;
+    toggleValidationStyling(isError: boolean): void;
+    setSuccess(message: string): void;
+    setError(message: string): void;
+    showLeadingSpinner(): void;
+    hideLeadingSpinner(): void;
+}

data/lib/primer/forms/primer_text_field.js

@@ -1,3 +1,4 @@
+/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -18,10 +19,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/expose-class-on-global
-let PrimerTextFieldElement = 
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-class PrimerTextFieldElement extends HTMLElement {
+let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
@@ -83,6 +81,14 @@ class PrimerTextFieldElement extends HTMLElement {
         this.setValidationMessage(message);
         this.validationElement.hidden = false;
     }
+    showLeadingSpinner() {
+        this.leadingSpinner?.removeAttribute('hidden');
+        this.leadingVisual?.setAttribute('hidden', '');
+    }
+    hideLeadingSpinner() {
+        this.leadingSpinner?.setAttribute('hidden', '');
+        this.leadingVisual?.removeAttribute('hidden');
+    }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
 __decorate([
@@ -100,7 +106,13 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
 PrimerTextFieldElement = __decorate([
     controller
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);
+export { PrimerTextFieldElement };

data/lib/primer/forms/primer_text_field.ts

@@ -1,15 +1,24 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+
 import '@github/auto-check-element'
+import type {AutoCheckErrorEvent, AutoCheckSuccessEvent} from '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
 
-// eslint-disable-next-line custom-elements/expose-class-on-global
+declare global {
+  interface HTMLElementEventMap {
+    'auto-check-success': AutoCheckSuccessEvent
+    'auto-check-error': AutoCheckErrorEvent
+  }
+}
 @controller
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-class PrimerTextFieldElement extends HTMLElement {
+export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement
   @target validationSuccessIcon: HTMLElement
   @target validationErrorIcon: HTMLElement
+  @target leadingVisual: HTMLElement
+  @target leadingSpinner: HTMLElement
 
   #abortController: AbortController | null
 
@@ -19,7 +28,7 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.addEventListener(
       'auto-check-success',
-      async (event: any) => {
+      async (event: AutoCheckSuccessEvent) => {
         const message = await event.detail.response.text()
         if (message && message.length > 0) {
           this.setSuccess(message)
@@ -32,7 +41,7 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.addEventListener(
       'auto-check-error',
-      async (event: any) => {
+      async (event: AutoCheckErrorEvent) => {
         const errorMessage = await event.detail.response.text()
         this.setError(errorMessage)
       },
@@ -85,4 +94,14 @@ class PrimerTextFieldElement extends HTMLElement {
     this.setValidationMessage(message)
     this.validationElement.hidden = false
   }
+
+  showLeadingSpinner(): void {
+    this.leadingSpinner?.removeAttribute('hidden')
+    this.leadingVisual?.setAttribute('hidden', '')
+  }
+
+  hideLeadingSpinner(): void {
+    this.leadingSpinner?.setAttribute('hidden', '')
+    this.leadingVisual?.removeAttribute('hidden')
+  }
 }

data/lib/primer/forms/text_field.html.erb

@@ -1,8 +1,12 @@
 <%= render(FormControl.new(input: @input, tag: :"primer-text-field")) do %>
   <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <% if @input.leading_visual %>
+    <%# leading spinner implies a leading visual %>
+    <% if @input.leading_visual || @input.leading_spinner? %>
       <span class="FormControl-input-leadingVisualWrap">
-        <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
+        <%= render(Primer::Beta::Octicon.new(**@input.leading_visual, data: { target: "primer-text-field.leadingVisual" })) %>
+        <% if @input.leading_spinner? %>
+          <%= render(Primer::Beta::Spinner.new(size: :small, hidden: true, data: { target: "primer-text-field.leadingSpinner" })) %>
+        <% end %>
       </span>
     <% end %>
     <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/text_field_preview.rb

@@ -23,6 +23,7 @@ module Primer
       # @param inset toggle
       # @param monospace toggle
       # @param leading_visual_icon octicon
+      # @param leading_spinner toggle
       # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-field",
@@ -42,6 +43,7 @@ module Primer
         inset: false,
         monospace: false,
         leading_visual_icon: nil,
+        leading_spinner: false,
         input_width: nil
       )
         system_arguments = {
@@ -61,6 +63,7 @@ module Primer
           placeholder: placeholder,
           inset: inset,
           monospace: monospace,
+          leading_spinner: leading_spinner,
           input_width: input_width
         }
 
@@ -71,6 +74,14 @@ module Primer
           }
         end
 
+        # You're required to specify a leading visual if a leading spinner is requested
+        if leading_spinner && !leading_visual_icon
+          system_arguments[:leading_visual] = {
+            icon: :search,
+            size: :small
+          }
+        end
+
         render(Primer::Alpha::TextField.new(**system_arguments))
       end
 

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -38,6 +38,15 @@ module Primer
       def with_deprecated_truncate
         render_with_template
       end
+
+      # @label With a specific link target
+      def with_link_target(number_of_links: 2)
+        render(Primer::Beta::Breadcrumbs.new) do |component|
+          Array.new(number_of_links&.to_i || 3) do |i|
+            component.with_item(href: "##{i}", target: "_blank") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/beta/icon_button_preview/summary_as_button.html.erb

@@ -0,0 +1,12 @@
+<details>
+  <%= render(Primer::Beta::IconButton.new(
+      size: :medium,
+      id: "button-preview",
+      tag: tag,
+      disabled: false,
+      icon: :star,
+      "aria-label": "Link"
+  )) do %>
+  <% end %>
+  <p>A wrapping `details` tag is required when using the IconButton with the `:summary` tag</p>
+</details>

data/previews/primer/beta/icon_button_preview.rb

@@ -10,7 +10,7 @@ module Primer
       # @param aria_label text
       # @param disabled toggle
       # @param inactive toggle
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @param icon [Symbol] octicon
       # @param show_tooltip toggle
       def playground(
@@ -22,8 +22,13 @@ module Primer
         inactive: false,
         icon: :plus,
         aria_label: "Button",
-        show_tooltip: true
+        show_tooltip: true,
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::IconButton.new(
                  scheme: scheme,
                  size: size,
@@ -33,7 +38,8 @@ module Primer
                  inactive: inactive,
                  icon: icon,
                  "aria-label": aria_label,
-                 show_tooltip: show_tooltip
+                 show_tooltip: show_tooltip,
+                 href: href
                ))
       end
 
@@ -41,7 +47,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @snapshot
       def default(
         size: :medium,
@@ -49,8 +55,13 @@ module Primer
         tag: :button,
         disabled: false,
         icon: :star,
-        aria_label: "Button"
+        aria_label: "Button",
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::IconButton.new(
                  scheme: :default,
                  size: size,
@@ -58,7 +69,8 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  icon: icon,
-                 "aria-label": aria_label
+                 "aria-label": aria_label,
+                 href: href
                ))
       end
 
@@ -66,7 +78,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @snapshot
       def invisible(
         size: :medium,
@@ -74,8 +86,13 @@ module Primer
         tag: :button,
         disabled: false,
         icon: :x,
-        aria_label: "Button"
+        aria_label: "Button",
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::IconButton.new(
                  scheme: :invisible,
                  size: size,
@@ -83,7 +100,8 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  icon: icon,
-                 "aria-label": aria_label
+                 "aria-label": aria_label,
+                 href: href
                ))
       end
 
@@ -91,7 +109,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @snapshot
       def primary(
         size: :medium,
@@ -99,8 +117,13 @@ module Primer
         tag: :button,
         disabled: false,
         icon: :x,
-        aria_label: "Button"
+        aria_label: "Button",
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::IconButton.new(
                  scheme: :primary,
                  size: size,
@@ -108,7 +131,8 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  icon: icon,
-                 "aria-label": aria_label
+                 "aria-label": aria_label,
+                 href: href
                ))
       end
 
@@ -116,7 +140,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @snapshot
       def danger(
         size: :medium,
@@ -124,8 +148,13 @@ module Primer
         tag: :button,
         disabled: false,
         icon: :trash,
-        aria_label: "Button"
+        aria_label: "Button",
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::IconButton.new(
                  scheme: :danger,
                  size: size,
@@ -133,9 +162,61 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  icon: icon,
+                 "aria-label": aria_label,
+                 href: href
+               ))
+      end
+
+      # @label Link as button
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param href text
+      # @snapshot
+      def link_as_button(
+        size: :medium,
+        id: "button-preview",
+        tag: :a,
+        href: "#",
+        disabled: false,
+        icon: :star,
+        aria_label: "Link"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :default,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 href: href,
+                 disabled: disabled,
+                 icon: icon,
                  "aria-label": aria_label
                ))
       end
+
+      # @label Summary as button
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @snapshot
+      def summary_as_button(
+        size: :medium,
+        id: "button-preview",
+        tag: :summary,
+        disabled: false,
+        icon: :star,
+        aria_label: "Button"
+      )
+        render_with_template(locals: {
+                              scheme: :default,
+                              size: size,
+                              id: id,
+                              tag: tag,
+                              disabled: disabled,
+                              icon: icon,
+                              "aria-label": aria_label
+                             })
+      end
     end
   end
 end

data/previews/primer/beta/relative_time_preview/link_with_tooltip.html.erb

@@ -0,0 +1,13 @@
+<% time = Time.utc(2020, 1, 1, 0, 0, 0) %>
+
+<%= render(Primer::Beta::Link.new(href: "#", id: "link")) do |link| %>
+  <% link.with_tooltip(id: "tool-tip", text: time.to_s) %>
+  <%= render(Primer::Beta::RelativeTime.new(id: "relative-time", datetime: time, no_title: true)) %>
+<% end %>
+
+<script>
+  // When `<relative-time>`’s `title` changes, update `<tool-tip>` text.
+  document.getElementById("relative-time").addEventListener("relative-time-updated", ({newTitle}) => {
+    document.getElementById("tool-tip").textContent = newTitle
+  })
+</script>

data/previews/primer/beta/relative_time_preview.rb

@@ -281,6 +281,18 @@ module Primer
                  title: title
                ))
       end
+
+      # @label No Title Attribute
+      # @snapshot
+      def no_title_attribute
+        render(Primer::Beta::RelativeTime.new(datetime: Time.utc(2020, 1, 1, 0, 0, 0), no_title: true))
+      end
+
+      # @label Link With Tooltip
+      # @snapshot
+      def link_with_tooltip
+        render_with_template
+      end
     end
   end
 end

data/previews/primer/beta/spinner_preview.rb

@@ -7,8 +7,8 @@ module Primer
       # @label Playground
       #
       # @param size [Symbol] select [small, medium, large]
-      def playground(size: :medium)
-        render(Primer::Beta::Spinner.new(size: size))
+      def playground(size: :medium, sr_text: "Loading content...")
+        render(Primer::Beta::Spinner.new(size: size, sr_text: sr_text))
       end
 
       # @label Default Options

data/previews/primer/open_project/page_header_preview.rb

@@ -40,7 +40,7 @@ module Primer
                                        with_leading_action: with_leading_action,
                                        with_actions: with_actions,
                                        breadcrumb_items: breadcrumb_items,
-                                       with_tab_nav: with_tab_nav})
+                                       with_tab_nav: with_tab_nav })
       end
 
       # @label Large title
@@ -71,8 +71,8 @@ module Primer
           component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
 
           component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
-             button.with_leading_visual_icon(icon: "star")
-             "Star"
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
           end
           component.with_action_menu(menu_arguments: { anchor_align: :end },
                                      button_arguments: { button_block: callback }) do |menu|
@@ -123,7 +123,6 @@ module Primer
         end
       end
 
-
       # @label With a single action
       # The single action will not be transformed into a menu on mobile, but remains in a smaller variant
       def single_action
@@ -180,13 +179,62 @@ module Primer
           header.with_description { "Last updated 5 minutes ago by XYZ." }
           header.with_tab_nav(label: "label") do |nav|
             Array.new(3) do |i|
-              nav.with_tab(selected: i.zero? , href: "#") do |tab|
+              nav.with_tab(selected: i.zero?, href: "#") do |tab|
                 tab.with_text { "Tab #{i + 1}" }
               end
             end
           end
         end
       end
+
+      # @label With a SegmentedControl
+      def segmented_control
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Here's a segmented control" }
+          component.with_breadcrumbs(["Baz"])
+
+          component.with_action_segmented_control("aria-label": "Segmented control") do |control|
+            control.with_item(label: "Preview", icon: :eye, selected: true)
+            control.with_item(label: "Raw", icon: :"file-code")
+          end
+
+          component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
+          end
+
+          callback = lambda do |button|
+            button.with_leading_visual_icon(icon: :gear)
+            "Settings"
+          end
+
+          component.with_action_menu(menu_arguments: { anchor_align: :end },
+                                     button_arguments: { button_block: callback }) do |menu|
+            menu.with_item(label: "Subitem 1") do |item|
+              item.with_leading_visual_icon(icon: :paste)
+            end
+            menu.with_item(label: "Subitem 2") do |item|
+              item.with_leading_visual_icon(icon: :log)
+            end
+          end
+        end
+      end
+
+      # @label With mobile icons-only SegmentedControl
+      def segmented_control_mobile_icons
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Here's a segmented control" }
+          component.with_breadcrumbs(["Baz"])
+
+          component.with_action_segmented_control(
+            "aria-label": "Segmented control",
+            mobile_system_arguments: { hide_labels: true }
+          ) do |control|
+            control.with_item(label: "Preview", icon: :eye, selected: true)
+            control.with_item(label: "Raw", icon: :"file-code")
+          end
+        end
+      end
     end
   end
 end

data/static/arguments.json

@@ -2462,18 +2462,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -2764,6 +2752,12 @@
         "default": "N/A",
         "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon](/components/beta/octicon) component."
       },
+      {
+        "name": "leading_spinner",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
+      },
       {
         "name": "show_clear_button",
         "type": "Boolean",
@@ -4254,6 +4248,12 @@
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },
+      {
+        "name": "no_title",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Removes the `title` attribute provided on the element by default."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/constants.json

@@ -1220,6 +1220,7 @@
   },
   "Primer::Beta::Spinner": {
     "DEFAULT_SIZE": "medium",
+    "DEFAULT_SR_TEXT": "Loading",
     "DEFAULT_STYLE": "box-sizing: content-box; color: var(--color-icon-primary);",
     "SIZE_MAPPINGS": {
       "small": 16,