Merge pull request #63 from CSCfi/dropdown-fixes

Dropdown fixes
CSCfi · Nov 20, 2023 · 468fdcc · 468fdcc
2 parents 654b25c + 1b8f930
commit 468fdcc
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 20 deletions.
diff --git a/packages/csc-ui-documentation/layouts/Default.vue b/packages/csc-ui-documentation/layouts/Default.vue
@@ -175,7 +175,10 @@ const components = computed(() =>
   parsedData.value
     .filter((component) => {
       if (query.value) {
-        return component.docsTags.length && component.tag.includes(query.value);
+        return (
+          component.docsTags.length &&
+          component.tag.includes(query.value.toLowerCase())
+        );
       }
 
       return component.docsTags.length;

diff --git a/packages/csc-ui/src/components/c-dropdown/c-dropdown.tsx b/packages/csc-ui/src/components/c-dropdown/c-dropdown.tsx
@@ -346,12 +346,18 @@ export class CDropdown {
     });
   }
 
-  private _emptyItem = (
-    <li>
-      <c-icon path={mdiAlert} size={18} color="var(--c-warning-600)"></c-icon>
-      No suggestions found
-    </li>
-  );
+  private _emptyItem() {
+    const { query, loading } = this.parent as HTMLCAutocompleteElement;
+
+    if (!query || loading) return;
+
+    return (
+      <li>
+        <c-icon path={mdiAlert} size={18} color="var(--c-warning-600)"></c-icon>
+        No suggestions found
+      </li>
+    );
+  }
 
   private _renderList() {
     return this.itemType === 'option'
@@ -360,7 +366,7 @@ export class CDropdown {
   }
 
   private _renderOptionsList() {
-    if (!this.items.length) return this._emptyItem;
+    if (!this.items.length) return this._emptyItem();
 
     const options = Array.from(this.items) as HTMLCOptionElement[];
 
@@ -402,7 +408,7 @@ export class CDropdown {
   }
 
   private _renderItemsList() {
-    if (!this.items.length) return this._emptyItem;
+    if (!this.items.length) return this._emptyItem();
 
     this._listItems.length = 0;
 

diff --git a/packages/csc-ui/src/components/c-input/c-input.scss b/packages/csc-ui/src/components/c-input/c-input.scss
@@ -179,7 +179,7 @@
       transform-origin: top left;
       transform: translateX(var(--_c-input-label-position)) translateY(0)
         scale(1);
-      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) 0.08s;
       white-space: nowrap;
 
       &.active {

diff --git a/packages/csc-ui/src/components/c-tabs/c-tabs.tsx b/packages/csc-ui/src/components/c-tabs/c-tabs.tsx
@@ -328,7 +328,7 @@ export class CTabs {
             ) as HTMLCTabItemElement[]
           ).find((child) => child.value === tab.value);
 
-          item.setAttribute('disabled', tab.disabled.toString());
+          item.setAttribute('disabled', (!!tab.disabled).toString());
 
           item.setAttribute('id', tabItemId);
           item.setAttribute('aria-labelledby', tabId);

diff --git a/packages/csc-ui/tokens/theme/base.json b/packages/csc-ui/tokens/theme/base.json
@@ -34,31 +34,31 @@
     },
     "error": {
       "100": {
-        "value": "#f8e6e9ff"
+        "value": "#fce7e7ff"
       },
       "200": {
-        "value": "#f1cdd4ff"
+        "value": "#f8ceceff"
       },
       "300": {
-        "value": "#e39ca9ff"
+        "value": "#f19e9eff"
       },
       "400": {
-        "value": "#d56a7fff"
+        "value": "#eb6d6dff"
       },
       "500": {
-        "value": "#c73954ff"
+        "value": "#e43d3dff"
       },
       "600": {
-        "value": "#b90729ff"
+        "value": "#dd0c0cff"
       },
       "700": {
-        "value": "#940621ff"
+        "value": "#ae0909ff"
       },
       "800": {
-        "value": "#6f0419ff"
+        "value": "#7e0707ff"
       },
       "900": {
-        "value": "#4a0310ff"
+        "value": "#4d0404ff"
       }
     },
     "info": {