openproject-primer_view_components 0.45.0 → 0.46.0

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

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
+.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction{display:none}

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

@@ -7,6 +7,8 @@
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",
     ".SubHeader-leftPane",
-    ".SubHeader-filterContainer"
+    ":is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto)",
+    ".SubHeader-filterContainer",
+    ".SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,kBACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,kBACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAUJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ,CAEA,iFACE,YACF","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + button.FormControl-input-trailingAction {\n  display: none;\n}\n"]}

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

@@ -34,6 +34,14 @@
     align-items: center;
     width: 100%;
     gap: 12px;
+
+    /* Since the container is not full width (due to the grid around it)
+     we want it to grow, and then be limited by the max-width of the "FormControl-input-width--xy" class */
+    & [class*='FormControl-input-width--'] {
+        &:not(.FormControl-input-width--auto) {
+            width: 100vw;
+        }
+    }
 }
 
 .SubHeader-filterContainer {
@@ -41,3 +49,7 @@
     width: 100%;
     gap: 8px;
 }
+
+.SubHeader-filterInput_hiddenClearButton + button.FormControl-input-trailingAction {
+  display: none;
+}

data/app/components/primer/open_project/sub_header.rb

@@ -38,19 +38,36 @@ module Primer
       renders_one :filter_input, lambda { |name:, label:, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
-          "SubHeader-filterInput"
+          "SubHeader-filterInput",
+          "SubHeader-filterInput_hiddenClearButton"
         )
         system_arguments[:placeholder] ||= I18n.t("button_filter")
         system_arguments[:leading_visual] ||= { icon: :search }
         system_arguments[:visually_hide_label] ||= true
+        system_arguments[:input_width] ||= :medium
 
         system_arguments[:data] ||= {}
         system_arguments[:data][:target]= "sub-header.filterInput"
 
+        system_arguments[:show_clear_button] = true if system_arguments[:show_clear_button].nil?
+
+        if system_arguments[:show_clear_button]
+          system_arguments[:data] = merge_data(
+            system_arguments,
+            {
+              data: {
+                action: <<~JS
+                  input:sub-header#toggleFilterInputClearButton
+                  focus:sub-header#toggleFilterInputClearButton
+                JS
+              }
+            }
+          )
+        end
 
         @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
                                                               display: [:inline_flex, :none],
-                                                              aria: {label: label },
+                                                              aria: { label: label },
                                                               "data-action": "click:sub-header#expandFilterInput",
                                                               "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
 

data/app/components/primer/open_project/sub_header_element.d.ts

@@ -1,9 +1,13 @@
 declare class SubHeaderElement extends HTMLElement {
-    filterInput: HTMLElement;
+    filterInput: HTMLInputElement;
     hiddenItemsOnExpandedFilter: HTMLElement[];
     shownItemsOnExpandedFilter: HTMLElement[];
+    connectedCallback(): void;
+    setupFilterInputClearButton(): void;
+    toggleFilterInputClearButton(): void;
     expandFilterInput(): void;
     collapseFilterInput(): void;
+    private waitForCondition;
 }
 declare global {
     interface Window {

data/app/components/primer/open_project/sub_header_element.js

@@ -6,6 +6,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { controller, target, targets } from '@github/catalyst';
 let SubHeaderElement = class SubHeaderElement extends HTMLElement {
+    connectedCallback() {
+        this.setupFilterInputClearButton();
+    }
+    setupFilterInputClearButton() {
+        this.waitForCondition(() => Boolean(this.filterInput), () => {
+            this.toggleFilterInputClearButton();
+        });
+    }
+    toggleFilterInputClearButton() {
+        if (this.filterInput.value.length > 0) {
+            this.filterInput.classList.remove('SubHeader-filterInput_hiddenClearButton');
+        }
+        else {
+            this.filterInput.classList.add('SubHeader-filterInput_hiddenClearButton');
+        }
+    }
     expandFilterInput() {
         for (const item of this.hiddenItemsOnExpandedFilter) {
             item.classList.add('d-none');
@@ -25,6 +41,22 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         }
         this.classList.remove('SubHeader--expandedSearch');
     }
+    // Waits for condition to return true. If it returns false initially, this function creates a
+    // MutationObserver that calls body() whenever the contents of the component change.
+    waitForCondition(condition, body) {
+        if (condition()) {
+            body();
+        }
+        else {
+            const mutationObserver = new MutationObserver(() => {
+                if (condition()) {
+                    body();
+                    mutationObserver.disconnect();
+                }
+            });
+            mutationObserver.observe(this, { childList: true, subtree: true });
+        }
+    }
 };
 __decorate([
     target

data/app/components/primer/open_project/sub_header_element.ts

@@ -2,10 +2,31 @@ import {controller, target, targets} from '@github/catalyst'
 
 @controller
 class SubHeaderElement extends HTMLElement {
-  @target filterInput: HTMLElement
+  @target filterInput: HTMLInputElement
   @targets hiddenItemsOnExpandedFilter: HTMLElement[]
   @targets shownItemsOnExpandedFilter: HTMLElement[]
 
+  connectedCallback() {
+    this.setupFilterInputClearButton()
+  }
+
+  setupFilterInputClearButton() {
+    this.waitForCondition(
+      () => Boolean(this.filterInput),
+      () => {
+        this.toggleFilterInputClearButton()
+      },
+    )
+  }
+
+  toggleFilterInputClearButton() {
+    if (this.filterInput.value.length > 0) {
+      this.filterInput.classList.remove('SubHeader-filterInput_hiddenClearButton')
+    } else {
+      this.filterInput.classList.add('SubHeader-filterInput_hiddenClearButton')
+    }
+  }
+
   expandFilterInput() {
     for (const item of this.hiddenItemsOnExpandedFilter) {
       item.classList.add('d-none')
@@ -31,6 +52,23 @@ class SubHeaderElement extends HTMLElement {
 
     this.classList.remove('SubHeader--expandedSearch')
   }
+
+  // Waits for condition to return true. If it returns false initially, this function creates a
+  // MutationObserver that calls body() whenever the contents of the component change.
+  private waitForCondition(condition: () => boolean, body: () => void) {
+    if (condition()) {
+      body()
+    } else {
+      const mutationObserver = new MutationObserver(() => {
+        if (condition()) {
+          body()
+          mutationObserver.disconnect()
+        }
+      })
+
+      mutationObserver.observe(this, {childList: true, subtree: true})
+    }
+  }
 }
 
 declare global {

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/sub_header_preview.rb

@@ -11,10 +11,23 @@ module Primer
       # @param show_filter_input toggle
       # @param show_filter_button toggle
       # @param show_action_button toggle
+      # @param show_clear_button toggle
       # @param text text
-      def playground(show_filter_input: true, show_filter_button: true, show_action_button: true, text: nil)
+      # @param value text
+      def playground(
+        show_filter_input: true,
+        show_clear_button: true,
+        show_filter_button: true,
+        show_action_button: true,
+        text: nil,
+        value: nil
+      )
         render(Primer::OpenProject::SubHeader.new) do |component|
-          component.with_filter_input(name: "filter", label: "Filter") if show_filter_input
+          component.with_filter_input(
+            name: "filter",
+            label: "Filter",
+            show_clear_button: show_clear_button,
+            value: value) if show_filter_input
           component.with_filter_button do |button|
             button.with_trailing_visual_counter(count: "15")
             "Filter"

data/static/classes.json

@@ -591,6 +591,9 @@
   "SubHeader-filterContainer": [
     "Primer::OpenProject::SubHeader"
   ],
+  "SubHeader-filterInput_hiddenClearButton": [
+    "Primer::OpenProject::SubHeader"
+  ],
   "SubHeader-leftPane": [
     "Primer::OpenProject::SubHeader"
   ],

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.45.0
+  version: 0.46.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-09-09 00:00:00.000000000 Z
+date: 2024-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview