@mixtint/primer-view-components 0.88.0 → 0.89.0

package/app/components/primer/alpha/tree_view.css

@@ -304,28 +304,31 @@
 
     /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
     across more lines. */
+    align-self: baseline;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;
   }
 
 .TreeViewRootUlStyles .TreeViewItemLeadingAction {
-    display: flex;
-    color: var(--fgColor-muted);
     grid-area: leadingAction;
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
-      flex-shrink: 1;
-    }
-
 .TreeViewRootUlStyles .TreeViewItemTrailingAction {
+    grid-area: trailingAction;
+  }
+
+.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction {
     display: flex;
     color: var(--fgColor-muted);
-    grid-area: trailingAction;
+    /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
+:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
       flex-shrink: 1;
     }
 

package/app/components/primer/alpha/tree_view.css.json

@@ -37,9 +37,8 @@
     ".TreeViewRootUlStyles:where([data-truncate-text='false']) .TreeViewItemContentText",
     ".TreeViewRootUlStyles .TreeViewItemVisual",
     ".TreeViewRootUlStyles .TreeViewItemLeadingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemTrailingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button",
+    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",

package/app/components/primer/open_project/filterable_tree_view.css

@@ -32,7 +32,7 @@ filterable-tree-view {
 /* Highlight style for CSS Custom Highlight API */
 
 ::highlight(primer-filterable-tree-view-search-results) {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
 }
 
 /* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
@@ -40,7 +40,7 @@ filterable-tree-view {
 /* stylelint-disable-next-line selector-max-type */
 
 filterable-tree-view mark {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
   color: inherit;
 }
 

package/app/components/primer/open_project/filterable_tree_view.js

@@ -15,7 +15,7 @@ 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 _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
+var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_clientHighlightsEnabled_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
 import { TreeViewElement } from '../alpha/tree_view/tree_view';
 import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
@@ -190,6 +190,9 @@ _FilterableTreeViewElement_src_get = function _FilterableTreeViewElement_src_get
 _FilterableTreeViewElement_isAsyncMode_get = function _FilterableTreeViewElement_isAsyncMode_get() {
     return !!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_src_get);
 };
+_FilterableTreeViewElement_clientHighlightsEnabled_get = function _FilterableTreeViewElement_clientHighlightsEnabled_get() {
+    return this.getAttribute('data-show-search-highlighting') !== 'false';
+};
 _FilterableTreeViewElement_handleTreeViewEvent = function _FilterableTreeViewElement_handleTreeViewEvent(origEvent) {
     const event = origEvent;
     // NOTE: This event only fires if someone actually activates the check mark, i.e. does not fire
@@ -433,13 +436,15 @@ _FilterableTreeViewElement_fetchAndReplaceTree = async function _FilterableTreeV
         }
         if (requestWasFiltered) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_expandAllSubTrees).call(this);
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
             const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]');
             this.noResultsMessage.toggleAttribute('hidden', hasResults);
             this.treeViewList?.toggleAttribute('hidden', !hasResults);
         }
         else {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreExpansionState).call(this);
             this.noResultsMessage.setAttribute('hidden', 'hidden');
             this.treeViewList?.removeAttribute('hidden');
@@ -625,7 +630,8 @@ _FilterableTreeViewElement_applyFilterOptions = function _FilterableTreeViewElem
     else {
         this.treeViewList.removeAttribute('hidden');
         this.noResultsMessage.setAttribute('hidden', 'hidden');
-        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
     }
 };
 _FilterableTreeViewElement_applyHighlights = function _FilterableTreeViewElement_applyHighlights(ranges) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "publishConfig": {
     "access": "public"
   },
@@ -49,11 +49,11 @@
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
     "@github/catalyst": "^1.8.1",
-    "@github/clipboard-copy-element": "^1.3.0",
+    "@github/clipboard-copy-element": "^1.3.2",
     "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.4.1",
-    "@github/relative-time-element": "^5.0.0",
+    "@github/relative-time-element": "^5.2.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
@@ -68,15 +68,15 @@
     "@changesets/cli": "^2.31.0",
     "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.8.1",
+    "@github/markdownlint-github": "^0.8.2",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.1",
     "@primer/css": "22.1.1",
     "@primer/primitives": "^11.9.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^8.5.0",
-    "axe-core": "^4.12.0",
+    "axe-core": "^4.12.1",
     "chokidar-cli": "^3.0.0",
     "css-what": "^7.0.0",
     "cssnano": "^7.1.9",
@@ -85,19 +85,19 @@
     "glob": "^11.1.0",
     "markdownlint-cli2": "^0.22.1",
     "mocha": "^11.7.6",
-    "playwright": "^1.60.0",
-    "postcss": "^8.5.15",
+    "playwright": "^1.61.1",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^11.3.0",
-    "prettier": "^3.8.3",
+    "postcss-preset-env": "^11.3.2",
+    "prettier": "^3.9.4",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.16",
+    "vite": "^8.1.1",
     "vite-plugin-ruby": "^5.2.2"
   },
   "prettier": "@github/prettier-config",