@mixtint/primer-view-components 0.84.5 → 0.86.2

package/app/assets/styles/primer_view_components.css

@@ -1661,9 +1661,7 @@ dialog.Overlay:not([open]) {
   left: 0;
   z-index: 100;
   width: 160px;
-  /* stylelint-disable-next-line primer/spacing */
   padding-top: var(--control-small-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-bottom: var(--control-small-paddingBlock);
   margin-top: var(--base-size-2);
   list-style: none;
@@ -1671,7 +1669,7 @@ dialog.Overlay:not([open]) {
   background-clip: padding-box;
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
+  box-shadow: var(--shadow-floating-small);
 }
 
 .dropdown-menu::before,.dropdown-menu::after {
@@ -1708,7 +1706,6 @@ dialog.Overlay:not([open]) {
 }
 
 .dropdown-menu-no-overflow .dropdown-item {
-    /* stylelint-disable-next-line primer/spacing */
     padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
     overflow: visible;
     text-overflow: inherit;
@@ -1718,7 +1715,6 @@ dialog.Overlay:not([open]) {
 
 .dropdown-item {
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   overflow: hidden;
   color: var(--fgColor-default);
@@ -1762,13 +1758,11 @@ dialog.Overlay:not([open]) {
 .dropdown-divider {
   display: block;
   height: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin: var(--stack-gap-condensed) 0;
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .dropdown-header {
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-small);
   color: var(--fgColor-muted);
@@ -1803,7 +1797,8 @@ dialog.Overlay:not([open]) {
   }
 
 .dropdown-menu-w::after {
-    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
+    top: calc(var(--base-size-12) - var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/spacing */
     right: -14px;
     left: auto;
@@ -1830,7 +1825,8 @@ dialog.Overlay:not([open]) {
   }
 
 .dropdown-menu-e::after {
-    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
+    top: calc(var(--base-size-12) - var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/spacing */
     left: -14px;
     border-color: transparent;
@@ -1867,7 +1863,7 @@ dialog.Overlay:not([open]) {
     /* stylelint-disable-next-line primer/spacing */
     bottom: -7px;
     /* stylelint-disable-next-line primer/spacing */
-    left: 10px;
+    left: calc(var(--base-size-8) + var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/borders, primer/colors */
     border-top: 7px solid var(--overlay-bgColor);
     /* stylelint-disable-next-line primer/borders */
@@ -1913,7 +1909,7 @@ dialog.Overlay:not([open]) {
     /* stylelint-disable-next-line primer/spacing */
     top: -14px;
     /* stylelint-disable-next-line primer/spacing */
-    right: 10px;
+    right: calc(var(--base-size-8) + var(--borderWidth-thin));
     left: auto;
   }
 
@@ -1927,7 +1923,7 @@ dialog.Overlay:not([open]) {
     /* stylelint-disable-next-line primer/spacing */
     top: -14px;
     /* stylelint-disable-next-line primer/spacing */
-    left: 10px;
+    left: calc(var(--base-size-8) + var(--borderWidth-thin));
   }
 
 /* Layout */
@@ -4522,10 +4518,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 +4529,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 +4656,7 @@ a.tabnav-extra:hover {
 
 .TreeViewRootUlStyles .TreeViewItemContent {
     display: flex;
+    align-items: center;
     height: 100%;
     padding: 0 var(--base-size-8);
     outline: none;
@@ -4798,6 +4800,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 +7425,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 +7439,7 @@ select-panel dialog::backdrop {
 .SubHeader-middlePane {
     grid-area: middle;
     text-align: center;
+    white-space: nowrap;
 }
 
 .SubHeader-bottomPane {
@@ -7441,6 +7450,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 +7474,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 +7504,7 @@ select-panel dialog::backdrop {
     }
 
     .SubHeader-middlePane:has(> *) {
-        margin-top: var(--stack-gap-normal);
+        margin-top: var(--base-size-16);
     }
 }
 
@@ -7694,3 +7713,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;
+}