@kubex/zinc 1.1.185 → 2.0.0

package/src/components/data-table-filter/data-table-filter.scss

@@ -1,175 +1,203 @@
 @use "../../wc";
 
-// Fields inside a panel that already draws its own edge
-@mixin flush-input {
-  --zn-input-background-color: transparent;
-  --zn-input-background-color-hover: transparent;
-  --zn-input-background-color-focus: transparent;
-  --zn-input-border-color: transparent;
-  --zn-input-border-color-hover: transparent;
-  --zn-input-border-color-focus: transparent;
-  --zn-input-focus-ring-color: transparent;
-}
-
 :host {
-  display: block;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
 }
 
-.filter-bar {
+.filter__chips {
   display: flex;
-  flex-direction: row;
-  align-items: center;
   flex-wrap: wrap;
+  align-items: center;
   gap: var(--zn-spacing-x-small);
+}
 
-  &__clear::part(base) {
-    height: 32px;
-    min-height: 32px;
-    padding: 0 var(--zn-spacing-x-small);
-    font-weight: var(--zn-font-weight-normal);
-    text-transform: none;
-    white-space: nowrap;
-  }
+:host([data-chips]) {
+  display: block;
+}
 
-  &__clear::part(base) {
-    color: rgb(var(--zn-primary));
-  }
+:host([data-chips]) .filter__chips {
+  padding: var(--zn-table-edge-padding, var(--zn-spacing-medium));
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
 
-  // The chip draws the outline so its trigger and remove button read as one control
-  &__chip {
-    display: inline-flex;
-    align-items: center;
-    height: 32px;
-    padding-right: var(--zn-spacing-x-small);
-    border: 1px solid rgb(var(--zn-border-color));
-    border-radius: var(--zn-border-radius-pill);
-    background-color: rgb(var(--zn-panel));
-
-    &:hover {
-      background-color: rgba(var(--zn-color-tab), 0.5);
-    }
-  }
+.filter__chips__label {
+  margin-right: 4px;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 65%, transparent);
+}
 
-  // The X's own box carries the trailing gap, so the trigger adds none
-  &__pill::part(base),
-  &__pill::part(base):hover {
-    border-color: transparent;
-    background: transparent;
-    padding-right: 0;
-  }
+// Native buttons: reset what the shared button mixin applies
+.filter__chips__clear,
+.filter__chip__text,
+.filter__chip__remove,
+.filter__suggestion {
+  margin: 0;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  font: inherit;
+  text-transform: none;
+  letter-spacing: normal;
+  color: inherit;
+  cursor: pointer;
+}
 
-  // Same box as the trigger, so the X centres on the chip's axis rather than
-  // inside a smaller box centred within it. The hover tint is clipped to the
-  // padded content box so it reads as a disc on the icon, not a full-height bar
-  &__remove::part(base) {
-    width: 24px;
-    min-width: 24px;
-    height: 32px;
-    min-height: 32px;
-    max-height: 32px;
-    padding: 4px 0;
-    background: transparent;
-    background-clip: content-box;
-    border-radius: var(--zn-border-radius-circle);
-    color: var(--zn-text-color);
-  }
+.filter__chips__clear {
+  height: 28px;
+  padding: 0 var(--zn-spacing-x-small);
+  border-radius: var(--zn-border-radius);
+  font-weight: var(--zn-font-weight-medium);
+  color: color-mix(in srgb, rgb(var(--zn-text)) 80%, transparent);
 
-  &__remove::part(base):hover {
-    background: rgb(var(--zn-color-border));
-    background-clip: content-box;
+  &:hover:not([disabled]) {
+    background: color-mix(in srgb, rgb(var(--zn-text)) 6%, transparent);
+    color: rgb(var(--zn-text));
   }
+}
 
-  // Value editors get their own panel: a calendar has no business inside a menu's
-  // scroll container. The panel draws the only edge, so the editor inside it runs
-  // flush to it
-  &__editor {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    overflow: hidden;
-    border: 1px solid rgb(var(--zn-border-color));
-    border-radius: var(--zn-border-radius);
-    background-color: rgb(var(--zn-panel));
-    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
-
-    zn-datepicker {
-      --zn-datepicker-inline-border-color: transparent;
-    }
-
-    zn-input {
-      @include flush-input;
-      min-width: 200px;
-    }
-  }
+.filter__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  height: 28px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--zn-color-primary-400, color-mix(in srgb, rgb(var(--zn-primary)) 40%, rgb(var(--zn-panel))));
+  border-radius: 999px;
+  background: var(--zn-color-info-bg, color-mix(in srgb, rgb(var(--zn-primary)) 10%, rgb(var(--zn-panel))));
+  color: var(--zn-color-info-fg, rgb(var(--zn-primary)));
+  font-size: 12px;
+  font-weight: var(--zn-font-weight-medium);
+  white-space: nowrap;
+}
 
-  // A long option list has to scroll rather than run off the screen, and its search
-  // field stays put while it does
-  zn-menu {
-    --zn-menu-max-height: 320px;
-  }
+.filter__chip__text:hover:not([disabled]) {
+  background: none;
+  color: inherit;
+}
 
-  // Full-bleed so the rows scrolling underneath never show around or above it
-  &__option-search {
-    @include flush-input;
-    position: sticky;
-    top: calc(-1 * var(--zn-spacing-2x-small));
-    z-index: 1;
-    margin: calc(-1 * var(--zn-spacing-2x-small)) calc(-1 * var(--zn-spacing-2x-small)) 0;
-    background-color: rgb(var(--zn-panel));
-    border-bottom: 1px solid rgb(var(--zn-border-color));
+.filter__chip__remove {
+  display: inline-grid;
+  place-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 0 -0.5rem 0 -0.1rem;
+  border-radius: 50%;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 55%, transparent);
+
+  &:hover:not([disabled]) {
+    background: color-mix(in srgb, rgb(var(--zn-text)) 8%, transparent);
+    color: rgb(var(--zn-text));
   }
+}
 
-  &__suggestions {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    max-height: 220px;
-    overflow-y: auto;
-    border-top: 1px solid rgb(var(--zn-border-color));
-    @include wc.scrollbars;
-  }
+// Fixed so a panel's overflow can't clip it
+.filter__pop {
+  position: fixed;
+  z-index: var(--zn-z-index-dropdown, 900);
+  width: min(704px, 94vw);
+  box-sizing: border-box;
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-large, 8px);
+  box-shadow: var(--zn-shadow-large, 0 12px 32px rgb(15 23 42 / 0.14));
+  color: rgb(var(--zn-text));
+  font-size: var(--zn-font-size-medium, 14px);
+  text-align: left;
+}
 
-  &__suggestion::part(base) {
-    justify-content: flex-start;
-    padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
-    font-weight: var(--zn-font-weight-normal);
-    text-transform: none;
-    color: rgb(var(--zn-text));
-    text-align: left;
-  }
+.filter__pop__head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 12px var(--zn-spacing-small);
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
 
-  // Segmented operator picker at the top of a value editor
-  &__operators {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--zn-spacing-2x-small);
-    padding: var(--zn-spacing-x-small);
-    border-bottom: 1px solid rgb(var(--zn-border-color));
-  }
+.filter__pop__meta {
+  color: color-mix(in srgb, rgb(var(--zn-text)) 65%, transparent);
+}
 
-  &__operator::part(base) {
-    height: 26px;
-    min-height: 26px;
-    min-width: 30px;
-    padding: 0 var(--zn-spacing-x-small);
-    font-size: var(--zn-font-size-small);
-    font-weight: var(--zn-font-weight-normal);
-    text-transform: none;
-    color: rgb(var(--zn-text));
-    background-color: transparent;
-    border-color: rgb(var(--zn-border-color));
-  }
+.filter__pop__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-small);
+  max-height: min(22rem, 55vh);
+  overflow: auto;
+}
 
-  &__operator--selected::part(base) {
-    color: rgb(var(--zn-primary));
-    border-color: rgb(var(--zn-primary));
-    background-color: rgba(var(--zn-primary), 0.05);
-  }
+.filter__rule {
+  display: grid;
+  grid-template-columns: minmax(176px, 240px) minmax(136px, 176px) minmax(0, 1fr) auto;
+  gap: var(--zn-spacing-x-small);
+  align-items: center;
+}
+
+.filter__suggestions {
+  grid-column: 3;
+  display: flex;
+  flex-direction: column;
+  max-height: 220px;
+  overflow-y: auto;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  @include wc.scrollbars;
+}
 
-  &__separator {
-    flex: none;
-    height: 1px;
-    margin: var(--zn-spacing-2x-small) 0;
-    background-color: rgb(var(--zn-border-color));
+.filter__suggestion {
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  text-align: left;
+
+  &:hover:not([disabled]) {
+    background: color-mix(in srgb, rgb(var(--zn-text)) 6%, transparent);
   }
 }
+
+.filter__pop__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: 12px var(--zn-spacing-small);
+  border-top: 1px solid rgb(var(--zn-border-color));
+}
+
+.filter__pop__spacer {
+  flex: 1 1 auto;
+}
+
+.filter__toggle--active {
+  --zn-button-border-color: var(--zn-color-primary-400, rgb(var(--zn-primary)));
+}
+
+.filter__toggle--active::part(base) {
+  background-color: var(--zn-color-info-bg, rgb(var(--zn-color-tab)));
+  color: var(--zn-color-info-fg, rgb(var(--zn-primary)));
+}
+
+// Reads as selected the way a focused zn-input does, both from the keyboard and while its popover is open
+.filter__toggle::part(base):focus-visible,
+.filter__toggle--open::part(base) {
+  outline: none;
+  // zn-button's icon border is !important, so it can only be recoloured through its token
+  --zn-button-border-color: var(--zn-input-border-color-focus);
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+}
+
+.filter__toggle::part(base)::after {
+  top: -6px;
+  inset-inline-end: -5px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  transform: none;
+  font-size: 11px;
+  font-weight: var(--zn-font-weight-semibold, 600);
+  line-height: 1;
+}