@axinom/mosaic-ui 0.72.5 → 0.72.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.72.5",
+  "version": "0.72.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c979cfcc87f8c0d686f9965a0cfb63f54083cb76"
+  "gitHead": "efcad0d91a11ba7fbdd2efd9568a75e61f796a44"
 }

package/src/components/Filters/Filters.module.scss

@@ -3,44 +3,47 @@
 .container {
   @include boxSizing;
 
+  display: flex;
+  flex-direction: column;
+
   height: 100%;
   width: $filter-width;
 
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: min-content;
-  overflow-x: hidden;
-  overflow-y: auto;
-  gap: 5px;
-  padding: 5px;
-
-  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
-
   background-color: var(
     --filter-controller-background-color,
     $filter-controller-background-color
   );
+
+  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
 
-  background-color: color-mix(
-    in srgb,
-    var(--filter-background-color, white) 50%,
-    transparent
+  background-color: var(
+    --filter-controller-background-color,
+    $filter-controller-background-color
   );
+  border-bottom: 1px solid
+    var(--filter-header-border-color, $filter-header-border-color);
 
   .headerButton {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
 
     svg {
-      height: 100%;
+      height: 80%;
       * {
-        stroke: var(--mosaic-secondary);
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
       }
     }
   }
@@ -49,12 +52,28 @@
     text-align: left;
     font-weight: bold;
     white-space: nowrap;
-    color: var(--mosaic-neutral-1);
+    color: var(--filter-header-color, $filter-header-color);
     padding-left: 5px;
   }
 }
 
 .collapsed {
-  width: 50px; // 40px button + container padding (5px each side, border-box)
+  width: 44px; // matches the 44px header toggle button
   overflow-y: hidden;
 }
+
+.filters {
+  // Fill the remaining column height; `min-height: 0` overrides the default
+  // `auto` so the child can shrink below its content size and scroll instead
+  // of overflowing the container.
+  flex: 1;
+  min-height: 0;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  overflow-x: hidden;
+  overflow-y: auto;
+  gap: 5px;
+  padding: 5px;
+}

package/src/components/Filters/Filters.tsx

@@ -223,6 +223,7 @@ const FiltersComponent = <T extends Data>(
             buttonContext={ButtonContext.Icon}
             onButtonClicked={toggleExpanded}
             dataTestId="filters-toggle"
+            title={isExpanded ? 'Collapse filters' : 'Expand filters'}
           />
         </Badge>
         {isExpanded && (
@@ -234,18 +235,24 @@ const FiltersComponent = <T extends Data>(
               <Button
                 icon={IconName.RemoveAllFilters}
                 className={classes.headerButton}
-                buttonContext={ButtonContext.None}
+                buttonContext={ButtonContext.Icon}
                 onButtonClicked={clearAllFilters}
                 dataTestId="filters-clear-all"
+                title="Remove all filters"
               />
             )}
           </>
         )}
       </div>
-      {isExpanded &&
-        options?.map((filter: FilterType<T>, index: number) =>
-          renderFilter(filter, index),
-        )}
+      <div
+        className={clsx(classes.filters, 'filters')}
+        data-test-id="filters-list"
+      >
+        {isExpanded &&
+          options?.map((filter: FilterType<T>, index: number) =>
+            renderFilter(filter, index),
+          )}
+      </div>
     </div>
   );
 };

package/src/styles/variables.scss

@@ -82,6 +82,8 @@ $filter-controller-background-color: var(--mosaic-neutral-3);
 $filter-border-color: var(--mosaic-secondary);
 $multi-option-checkbox-border: var(--mosaic-secondary);
 $multi-option-label-color: var(--mosaic-neutral-1);
+$filter-header-border-color: var(--mosaic-neutral-2);
+$filter-header-color: var(--mosaic-neutral-1);
 
 /* Details vars */
 $details-background-color: #ffffff;