Merge pull request #154 from appwrite/new-filtering

Input tag multiselect variance for new filtering
appwrite · Mar 6, 2024 · 9318a9d · 9318a9d
2 parents 32d9f64 + 851af02
commit 9318a9d
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/.changeset/eleven-taxis-suffer.md b/.changeset/eleven-taxis-suffer.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": minor
+"@appwrite.io/pink": minor
+---
+
+Add multiple tag input for new filters
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui/src/6-elements/form/_form.scss b/packages/ui/src/6-elements/form/_form.scss
@@ -24,7 +24,7 @@
     &.is-multiple { grid-template-columns: repeat(auto-fit, minmax(pxToRem(180), 1fr)); }
   }
   &-item {
-    &.is-multiple { display:flex; align-items:center; gap:pxToRem(16); }
+    &.is-multiple { display:flex; align-items:center; gap:pxToRem(8); }
     &.is-span-2 { grid-column:span 2;}
     &-part {  }
   }

diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -295,10 +295,11 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
 /* tags input partial */
 .tags-input {
   @extend .input-text;
-  min-block-size:pxToRem(40); padding-block:pxToRem(5); padding-inline:pxToRem(15);
+  min-block-size:pxToRem(40); padding-block:pxToRem(5); padding-inline:pxToRem(15); block-size:auto;
   display:flex; gap:10px; align-items:center; flex-wrap:wrap;
   &-text { all:unset; flex:1; font-size:pxToRem(14); }
   &.is-focus {box-shadow: var(--focus-box-shadow); }
+  .tags-input-text:not(input)::before { content: attr(placeholder); opacity:0.5; }
 
   /* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
   &.is-read-only {

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
@@ -253,6 +253,7 @@
 
 .u-padding-inline-end-0   { padding-inline-end:0!important; }
 .u-padding-inline-end-12  { padding-inline-end:pxToRem(12)!important; }
+.u-padding-inline-end-40  { padding-inline-end:pxToRem(40)!important; }
 .u-padding-inline-end-56  { padding-inline-end:pxToRem(56)!important; }
 .u-padding-inline-end-120 { padding-inline-end:pxToRem(120)!important; }