openproject-primer_view_components 0.17.1 → 0.19.0

data/app/components/primer/beta/button.pcss

@@ -47,13 +47,9 @@
     transition: none;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
+  &:disabled,
   &[aria-disabled='true'] {
-    cursor: default;
+    cursor: not-allowed;
     box-shadow: none;
   }
 }
@@ -170,7 +166,7 @@ summary.Button {
   border-color: var(--button-primary-borderColor-rest);
   box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-primary-bgColor-hover);
     border-color: var(--button-primary-borderColor-hover);
   }
@@ -219,7 +215,7 @@ summary.Button {
   border-color: var(--button-default-borderColor-rest);
   box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-default-bgColor-hover);
     border-color: var(--button-default-borderColor-hover);
   }
@@ -250,7 +246,7 @@ summary.Button {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-invisible-bgColor-hover);
 
     & .Button-visual {
@@ -294,7 +290,7 @@ summary.Button {
   height: unset;
   padding: 0;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     text-decoration: underline;
   }
 
@@ -320,7 +316,7 @@ summary.Button {
   border-color: var(--button-danger-borderColor-rest);
   box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     color: var(--button-danger-fgColor-hover);
     fill: var(--button-danger-fgColor-hover);
     background-color: var(--button-danger-bgColor-hover);
@@ -375,3 +371,11 @@ summary.Button {
     width: var(--control-large-size);
   }
 }
+
+/* `disabled` takes precedence over `inactive` */
+.Button--inactive:not([aria-disabled='true'], :disabled) {
+  background-color: var(--button-inactive-bgColor);
+  border: 0;
+  color: var(--button-inactive-fgColor);
+  cursor: default;
+}

data/app/components/primer/beta/nav_list/group.html.erb

@@ -1,7 +1,9 @@
-<% with_post_list_content do %>
-  <% if show_more_item? %>
-    <%= show_more_item %>
+<nav-list-group>
+  <% with_post_list_content do %>
+    <% if show_more_item? %>
+      <%= show_more_item %>
+    <% end %>
   <% end %>
-<% end %>
 
-<% render_parent %>
+  <% render_parent %>
+</nav-list-group>

data/app/components/primer/beta/nav_list/group.rb

@@ -25,8 +25,8 @@ module Primer
           system_arguments[:hidden] = true
           system_arguments[:href] = "#"
           system_arguments[:data] ||= {}
-          system_arguments[:data][:target] = "nav-list.showMoreItem"
-          system_arguments[:data][:action] = "click:nav-list#showMore"
+          system_arguments[:data][:target] = "nav-list-group.showMoreItem"
+          system_arguments[:data][:action] = "click:nav-list-group#showMore"
           system_arguments[:data][:current_page] = "1"
           system_arguments[:data][:total_pages] = pages.to_s
           system_arguments[:label_arguments] = {

data/app/components/primer/beta/nav_list.d.ts

@@ -1,15 +1,6 @@
 export declare class NavListElement extends HTMLElement {
     #private;
     items: HTMLElement[];
-    showMoreItem: HTMLElement;
-    focusMarkers: HTMLElement[];
-    connectedCallback(): void;
-    get showMoreDisabled(): boolean;
-    set showMoreDisabled(value: boolean);
-    set currentPage(value: number);
-    get currentPage(): number;
-    get totalPages(): number;
-    get paginationSrc(): string;
     selectItemById(itemId: string | null): boolean;
     selectItemByHref(href: string | null): boolean;
     selectItemByCurrentLocation(): boolean;
@@ -18,8 +9,6 @@ export declare class NavListElement extends HTMLElement {
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     handleItemWithSubItemKeydown(e: KeyboardEvent): void;
-    private showMore;
-    private setShowMoreItemState;
 }
 declare global {
     interface Window {

data/app/components/primer/beta/nav_list.js

@@ -9,41 +9,14 @@ 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 _NavListElement_instances, _NavListElement_parseHTML, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
+var _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
-import { controller, target, targets } from '@github/catalyst';
+import { controller, targets } from '@github/catalyst';
 let NavListElement = class NavListElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListElement_instances.add(this);
     }
-    connectedCallback() {
-        this.setShowMoreItemState();
-    }
-    get showMoreDisabled() {
-        return this.showMoreItem.hasAttribute('aria-disabled');
-    }
-    set showMoreDisabled(value) {
-        if (value) {
-            this.showMoreItem.setAttribute('aria-disabled', 'true');
-        }
-        else {
-            this.showMoreItem.removeAttribute('aria-disabled');
-        }
-        this.showMoreItem.classList.toggle('disabled', value);
-    }
-    set currentPage(value) {
-        this.showMoreItem.setAttribute('data-current-page', value.toString());
-    }
-    get currentPage() {
-        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
-    }
-    get totalPages() {
-        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
-    }
-    get paginationSrc() {
-        return this.showMoreItem.getAttribute('src') || '';
-    }
     selectItemById(itemId) {
         if (!itemId)
             return false;
@@ -126,58 +99,8 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
         e.stopPropagation();
     }
-    async showMore(e) {
-        var _a, _b;
-        e.preventDefault();
-        if (this.showMoreDisabled)
-            return;
-        this.showMoreDisabled = true;
-        let html;
-        try {
-            const paginationURL = new URL(this.paginationSrc, window.location.origin);
-            this.currentPage++;
-            paginationURL.searchParams.append('page', this.currentPage.toString());
-            const response = await fetch(paginationURL);
-            if (!response.ok)
-                return;
-            html = await response.text();
-            if (this.currentPage === this.totalPages) {
-                this.showMoreItem.hidden = true;
-            }
-        }
-        catch (err) {
-            // Ignore network errors
-            this.showMoreDisabled = false;
-            this.currentPage--;
-            return;
-        }
-        const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
-        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
-        const listId = e.target.closest('button').getAttribute('data-list-id');
-        const list = document.getElementById(listId);
-        list.append(fragment);
-        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
-        this.showMoreDisabled = false;
-    }
-    setShowMoreItemState() {
-        if (!this.showMoreItem) {
-            return;
-        }
-        if (this.currentPage < this.totalPages) {
-            this.showMoreItem.hidden = false;
-        }
-        else {
-            this.showMoreItem.hidden = true;
-        }
-    }
 };
 _NavListElement_instances = new WeakSet();
-_NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
-    const template = document.createElement('template');
-    // eslint-disable-next-line github/no-inner-html
-    template.innerHTML = html;
-    return document.importNode(template.content, true);
-};
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
@@ -243,12 +166,6 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
 __decorate([
     targets
 ], NavListElement.prototype, "items", void 0);
-__decorate([
-    target
-], NavListElement.prototype, "showMoreItem", void 0);
-__decorate([
-    targets
-], NavListElement.prototype, "focusMarkers", void 0);
 NavListElement = __decorate([
     controller
 ], NavListElement);

data/app/components/primer/beta/nav_list.ts

@@ -1,44 +1,9 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, target, targets} from '@github/catalyst'
+import {controller, targets} from '@github/catalyst'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
-  @target showMoreItem: HTMLElement
-  @targets focusMarkers: HTMLElement[]
-
-  connectedCallback(): void {
-    this.setShowMoreItemState()
-  }
-
-  get showMoreDisabled(): boolean {
-    return this.showMoreItem.hasAttribute('aria-disabled')
-  }
-
-  set showMoreDisabled(value: boolean) {
-    if (value) {
-      this.showMoreItem.setAttribute('aria-disabled', 'true')
-    } else {
-      this.showMoreItem.removeAttribute('aria-disabled')
-    }
-    this.showMoreItem.classList.toggle('disabled', value)
-  }
-
-  set currentPage(value: number) {
-    this.showMoreItem.setAttribute('data-current-page', value.toString())
-  }
-
-  get currentPage(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
-  }
-
-  get totalPages(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
-  }
-
-  get paginationSrc(): string {
-    return this.showMoreItem.getAttribute('src') || ''
-  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false
@@ -134,55 +99,6 @@ export class NavListElement extends HTMLElement {
     e.stopPropagation()
   }
 
-  private async showMore(e: Event) {
-    e.preventDefault()
-    if (this.showMoreDisabled) return
-    this.showMoreDisabled = true
-    let html
-    try {
-      const paginationURL = new URL(this.paginationSrc, window.location.origin)
-      this.currentPage++
-      paginationURL.searchParams.append('page', this.currentPage.toString())
-      const response = await fetch(paginationURL)
-      if (!response.ok) return
-      html = await response.text()
-      if (this.currentPage === this.totalPages) {
-        this.showMoreItem.hidden = true
-      }
-    } catch (err) {
-      // Ignore network errors
-      this.showMoreDisabled = false
-      this.currentPage--
-      return
-    }
-    const fragment = this.#parseHTML(document, html)
-    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
-    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
-    const list = document.getElementById(listId)!
-    list.append(fragment)
-    this.focusMarkers.pop()?.focus()
-    this.showMoreDisabled = false
-  }
-
-  private setShowMoreItemState() {
-    if (!this.showMoreItem) {
-      return
-    }
-
-    if (this.currentPage < this.totalPages) {
-      this.showMoreItem.hidden = false
-    } else {
-      this.showMoreItem.hidden = true
-    }
-  }
-
-  #parseHTML(document: Document, html: string): DocumentFragment {
-    const template = document.createElement('template')
-    // eslint-disable-next-line github/no-inner-html
-    template.innerHTML = html
-    return document.importNode(template.content, true)
-  }
-
   #findSelectedNavItemById(itemId: string): HTMLElement | null {
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {

data/app/components/primer/beta/nav_list_group_element.d.ts

@@ -0,0 +1,19 @@
+export declare class NavListGroupElement extends HTMLElement {
+    #private;
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListGroupElement: typeof NavListGroupElement;
+    }
+}

data/app/components/primer/beta/nav_list_group_element.js

@@ -0,0 +1,108 @@
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+import { controller, target, targets } from '@github/catalyst';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_instances.add(this);
+    }
+    connectedCallback() {
+        this.setShowMoreItemState();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    get paginationSrc() {
+        return this.showMoreItem.getAttribute('src') || '';
+    }
+    async showMore(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
+        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list-group.focusMarkers');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_NavListGroupElement_instances = new WeakSet();
+_NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+};
+__decorate([
+    target
+], NavListGroupElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListGroupElement.prototype, "focusMarkers", void 0);
+NavListGroupElement = __decorate([
+    controller
+], NavListGroupElement);
+export { NavListGroupElement };
+window.NavListGroupElement = NavListGroupElement;

data/app/components/primer/beta/nav_list_group_element.ts

@@ -0,0 +1,97 @@
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+export class NavListGroupElement extends HTMLElement {
+  @target showMoreItem: HTMLElement
+  @targets focusMarkers: HTMLElement[]
+
+  connectedCallback(): void {
+    this.setShowMoreItemState()
+  }
+
+  get showMoreDisabled(): boolean {
+    return this.showMoreItem.hasAttribute('aria-disabled')
+  }
+
+  set showMoreDisabled(value: boolean) {
+    if (value) {
+      this.showMoreItem.setAttribute('aria-disabled', 'true')
+    } else {
+      this.showMoreItem.removeAttribute('aria-disabled')
+    }
+    this.showMoreItem.classList.toggle('disabled', value)
+  }
+
+  set currentPage(value: number) {
+    this.showMoreItem.setAttribute('data-current-page', value.toString())
+  }
+
+  get currentPage(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
+  }
+
+  get totalPages(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
+  }
+
+  get paginationSrc(): string {
+    return this.showMoreItem.getAttribute('src') || ''
+  }
+
+  private async showMore(e: Event) {
+    e.preventDefault()
+    if (this.showMoreDisabled) return
+    this.showMoreDisabled = true
+    let html
+    try {
+      const paginationURL = new URL(this.paginationSrc, window.location.origin)
+      this.currentPage++
+      paginationURL.searchParams.append('page', this.currentPage.toString())
+      const response = await fetch(paginationURL)
+      if (!response.ok) return
+      html = await response.text()
+      if (this.currentPage === this.totalPages) {
+        this.showMoreItem.hidden = true
+      }
+    } catch (err) {
+      // Ignore network errors
+      this.showMoreDisabled = false
+      this.currentPage--
+      return
+    }
+    const fragment = this.#parseHTML(document, html)
+    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers')
+    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
+    const list = document.getElementById(listId)!
+    list.append(fragment)
+    this.focusMarkers.pop()?.focus()
+    this.showMoreDisabled = false
+  }
+
+  private setShowMoreItemState() {
+    if (!this.showMoreItem) {
+      return
+    }
+
+    if (this.currentPage < this.totalPages) {
+      this.showMoreItem.hidden = false
+    } else {
+      this.showMoreItem.hidden = true
+    }
+  }
+
+  #parseHTML(document: Document, html: string): DocumentFragment {
+    const template = document.createElement('template')
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html
+    return document.importNode(template.content, true)
+  }
+}
+
+declare global {
+  interface Window {
+    NavListGroupElement: typeof NavListGroupElement
+  }
+}
+
+window.NavListGroupElement = NavListGroupElement

data/app/components/primer/beta/relative_time.rb

@@ -52,7 +52,7 @@ module Primer
 
       MONTH_DEFAULT = nil
       MONTH_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        MONTH_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit",
         :short => "short",
@@ -63,7 +63,7 @@ module Primer
 
       YEAR_DEFAULT = nil
       YEAR_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        YEAR_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit"
       }.freeze
@@ -71,7 +71,7 @@ module Primer
 
       TIMEZONENAME_DEFAULT = nil
       TIMEZONE_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        TIMEZONENAME_DEFAULT => nil,
         :long => "long",
         :short => "short",
         :short_offset => "shortOffset",
@@ -131,7 +131,7 @@ module Primer
         @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
         @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
         @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
-        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
         @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
         @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
         @system_arguments[:threshold] = threshold if threshold.present?

data/app/components/primer/component.rb

@@ -16,6 +16,9 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include ExperimentalRenderHelpers
+    include ExperimentalSlotHelpers
+
     include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper

data/app/components/primer/open_project/input_group.css

@@ -0,0 +1 @@
+.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(640px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}

data/app/components/primer/open_project/input_group.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/input_group",
+  "selectors": [
+    ".InputGroup.InputGroup-input-width--auto",
+    ".InputGroup.InputGroup-input-width--small",
+    ".InputGroup.InputGroup-input-width--medium",
+    ".InputGroup.InputGroup-input-width--large",
+    ".InputGroup.InputGroup-input-width--xlarge",
+    ".InputGroup.InputGroup-input-width--xxlarge"
+  ]
+}

data/app/components/primer/open_project/input_group.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n    &.InputGroup-input-width--auto {\n        width: auto;\n    }\n\n    &.InputGroup-input-width--small {\n        max-width: min(256px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--medium {\n        max-width: min(320px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--large {\n        max-width: min(480px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xlarge {\n        max-width: min(640px, 100vw - 2rem);\n    }\n\n    &.InputGroup-input-width--xxlarge {\n        max-width: min(960px, 100vw - 2rem);\n    }\n}\n"]}

data/app/components/primer/open_project/input_group.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= text_input %>
+  <%= trailing_action %>
+<% end %>

data/app/components/primer/open_project/input_group.pcss

@@ -0,0 +1,25 @@
+.InputGroup {
+    &.InputGroup-input-width--auto {
+        width: auto;
+    }
+
+    &.InputGroup-input-width--small {
+        max-width: min(256px, 100vw - 2rem);
+    }
+
+    &.InputGroup-input-width--medium {
+        max-width: min(320px, 100vw - 2rem);
+    }
+
+    &.InputGroup-input-width--large {
+        max-width: min(480px, 100vw - 2rem);
+    }
+
+    &.InputGroup-input-width--xlarge {
+        max-width: min(640px, 100vw - 2rem);
+    }
+
+    &.InputGroup-input-width--xxlarge {
+        max-width: min(960px, 100vw - 2rem);
+    }
+}