@mixtint/primer-view-components 0.84.5 → 0.86.1

package/app/assets/styles/primer_view_components.css

@@ -4522,10 +4522,6 @@ a.tabnav-extra:hover {
     }
       }
 
-[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem) {
-      --has-leading-action: 1;
-    }
-
 .TreeViewRootUlStyles .TreeViewItemContainer {
     --level: 1;
     --toggle-width: 1rem;
@@ -4537,13 +4533,22 @@ a.tabnav-extra:hover {
     font-size: var(--text-body-size-medium);
     color: var(--fgColor-default);
     border-radius: var(--borderRadius-medium);
-    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;
-    grid-template-areas: 'spacer leadingAction toggle content';
+    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);
+    grid-template-areas: 'spacer leadingAction toggle content trailingAction';
 
     --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
+    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);
     --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
   }
 
+:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]) {
+      --has-leading-action: 1;
+    }
+
+:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]) {
+      --has-trailing-action: 1;
+    }
+
 :is(.TreeViewRootUlStyles .TreeViewItemContainer):hover {
       background-color: var(--control-transparent-bgColor-hover);
     }
@@ -4655,6 +4660,7 @@ a.tabnav-extra:hover {
 
 .TreeViewRootUlStyles .TreeViewItemContent {
     display: flex;
+    align-items: center;
     height: 100%;
     padding: 0 var(--base-size-8);
     outline: none;
@@ -4798,6 +4804,16 @@ a.tabnav-extra:hover {
       flex-shrink: 1;
     }
 
+.TreeViewRootUlStyles .TreeViewItemTrailingAction {
+    display: flex;
+    color: var(--fgColor-muted);
+    grid-area: trailingAction;
+  }
+
+:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
+      flex-shrink: 1;
+    }
+
 .TreeViewRootUlStyles .TreeViewItemLevelLine {
     width: 100%;
     height: 100%;
@@ -7413,14 +7429,10 @@ select-panel dialog::backdrop {
     display: grid;
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
-    align-items: center;
+    align-items: baseline;
     margin-bottom: var(--base-size-16);
 }
 
-.SubHeader--expandedSearch {
-    grid-template-areas: "left left left" "bottom bottom bottom";
-}
-
 .SubHeader-rightPane {
     grid-area: right;
     display: flex;
@@ -7431,6 +7443,7 @@ select-panel dialog::backdrop {
 .SubHeader-middlePane {
     grid-area: middle;
     text-align: center;
+    white-space: nowrap;
 }
 
 .SubHeader-bottomPane {
@@ -7441,6 +7454,8 @@ select-panel dialog::backdrop {
     grid-area: left;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--base-size-16);
     column-gap: 12px;
     width: 100%;
 
@@ -7463,12 +7478,20 @@ select-panel dialog::backdrop {
   display: none;
 }
 
-@media (max-width: 543.98px) {
+@media (max-width: 767.98px) {
     .SubHeader {
         grid-template-areas: "left right" "middle middle" "bottom bottom";
         grid-template-columns: 1fr auto;
     }
 
+    .SubHeader--expandedSearch {
+        grid-template-areas: "left left" "middle middle" "bottom bottom";
+    }
+
+    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {
+        display: none !important;
+    }
+
     .SubHeader--emptyLeftPane {
         grid-template-areas: "middle middle right" "bottom bottom bottom";
         grid-template-columns: auto 1fr auto;
@@ -7485,7 +7508,7 @@ select-panel dialog::backdrop {
     }
 
     .SubHeader-middlePane:has(> *) {
-        margin-top: var(--stack-gap-normal);
+        margin-top: var(--base-size-16);
     }
 }
 
@@ -7694,3 +7717,68 @@ select-panel dialog::backdrop {
     display: none;
   }
 }
+
+/* CSS for FilterableTreeView */
+
+/* Scroll layout
+ *
+ * The filterable-tree-view element itself acts as a flex column container.
+ * The toolbar (input, segmented control, checkbox) is fixed at the top.
+ * Only the tree area scrolls. The consumer is responsible for setting a
+ * height or max-height on the filterable-tree-view element (or its parent)
+ * to activate scrolling.
+ */
+
+/* stylelint-disable-next-line selector-max-type */
+
+filterable-tree-view {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: inherit;
+}
+
+.FilterableTreeViewLayout {
+  flex: 1;
+  min-height: 0;
+}
+
+.FilterableTreeViewTreeContainer {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Highlight style for CSS Custom Highlight API */
+
+::highlight(primer-filterable-tree-view-search-results) {
+  background-color: var(--bgColor-attention-muted);
+}
+
+/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
+
+/* stylelint-disable-next-line selector-max-type */
+
+filterable-tree-view mark {
+  background-color: var(--bgColor-attention-muted);
+  color: inherit;
+}
+
+/* Loading skeleton */
+
+.FilterableTreeViewLoadingSkeleton {
+  display: none;
+}
+
+/* stylelint-disable selector-no-qualifying-type */
+
+/* stylelint-disable selector-max-type */
+
+filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
+  display: block;
+}
+
+filterable-tree-view[data-loading] tree-view,
+filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"] {
+  display: none;
+}