Merge pull request #125 from appwrite/tags-input-fix-style

Tags Input missing border bug

packages/ui/src/6-elements/form/_index.scss

@@ -3,7 +3,6 @@
 @forward "helper";
 @forward "placeholder";
 @forward "text-inputs";
-@forward "tags-input";
 @forward "password-meter";
 @forward "radio-and-checkbox";
 @forward "switch";

packages/ui/src/6-elements/form/_text-inputs.scss

@@ -288,4 +288,46 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
     flex:1;
     &:empty::before { content: attr(data-placeholder); }
   }
+}
+
+/* tags input partial */
+.tags-input {
+  @extend .input-text;
+  min-block-size:pxToRem(40); padding-block:pxToRem(5); padding-inline:pxToRem(15);
+  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); }
+
+  /* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
+  &.is-read-only {
+    #{$theme-dark} &{
+      --p-bg-color: var(--color-neutral-80);
+      --p-border-color: var(--color-neutral-60);
+      .tag {
+        --tag-bg-color: var(--color-neutral-60);
+        --tag-text-color: var(--color-neutral-15);
+      }
+    }
+  }
+
+}
+.tags {
+  display:contents;
+  &-list { display:contents; gap:10px; flex-wrap:wrap; }
+}
+.input-tag {
+  --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
+  --p-text-color: var(--tag-text-color, var(--color-neutral-60));
+  display:flex; height:pxToRem(28); gap:6px; align-items:center;
+  background-color:hsl(var(--p-bg-color)); padding-inline:pxToRem(8); padding-block:pxToRem(6); border-radius:var(--border-radius-xsmall);
+  color:hsl(var(--p-text-color));
+  &-delete-button {
+    aspect-ratio:1 / 1; line-height:1; border-radius:var(--border-radius-xsmall); text-align:center;
+    [class*="icon"]::before { vertical-align:middle; }
+  }
+  &.is-disabled {  --p-text-color:var(--color-neutral-20); }
+  #{$theme-dark} &{
+    --tag-bg-color: var(--color-neutral-80);
+    --tag-text-color: var(--color-neutral-20);
+  }
 }

packages/ui/src/7-components/_drop.scss

@@ -7,7 +7,7 @@
 
   --p-drop-border-radius:       var(--drop-border-radius, var(--border-radius-small));
 
-  position:absolute; inset-inline-start:pxToRem(-10); inset-block-end:calc(100% + #{pxToRem(10)});
+  position:absolute; inset-inline-start:0; inset-block-end:calc(100% + #{pxToRem(10)});
   background-color:hsl(var(--p-drop-bg-color)); color:hsl(var(--p-drop-text-color)); padding:0;
   border:solid pxToRem(1) hsl(var(--p-drop-border-color)); border-radius:var(--p-drop-border-radius); box-shadow:var(--shadow-small);
   min-inline-size: pxToRem(208);