fix(web-components/file-input): add min-width to the input (#384)

* fix(web-components/file-input): add min-width to the input

* update test command

* update test scripts

Author: mimshins

.github/workflows/development.yml

@@ -56,7 +56,7 @@ jobs:
         run: pnpm install
 
       - name: "🎭 install playwright"
-        run: pnpx playwright install --with-deps --only-shell
+        run: pnpm playwright install --with-deps --only-shell
 
       - name: "🔍 run tests"
         run: pnpm test

package.json

@@ -29,7 +29,8 @@
     "playground:dev": "pnpm --filter @tapsioss/playground run start:dev",
     "playground:test": "pnpm --filter @tapsioss/playground run start:test",
     "dev": "run-p packages:dev playground:dev",
-    "test": "pnpm run packages:build && pnpm run packages:test",
+    "build": "pnpm run packages:build",
+    "test": "pnpm run packages:test",
     "lint:ts": "tsc --project tsconfig.json",
     "lint:ecma": "eslint --fix",
     "lint": "run-p lint:*",

packages/web-components/package.json

@@ -18,6 +18,7 @@
     "build": "run-p gen:metadata bulld:compile",
     "bulld:compile": "tsc --project ./tsconfig.build.json",
     "predev": "pnpm run clear",
+    "pretest": "pnpm --filter @tapsioss/theme run build && pnpm run build",
     "test": "playwright test",
     "dev": "tsc --watch --project ./tsconfig.dev.json",
     "release": "pnpm publish . --tag latest --access public",

packages/web-components/src/file-input/file-input.style.ts

@@ -31,6 +31,8 @@ export default css`
     flex-direction: column;
 
     gap: var(--tapsi-spacing-4);
+
+    width: 100%;
   }
 
   .root.disabled {
@@ -68,7 +70,7 @@ export default css`
     justify-content: center;
 
     height: 8.25rem;
-    width: 100%;
+    min-width: 8.25rem;
   }
 
   .label {
@@ -102,7 +104,7 @@ export default css`
   }
 
   .file-input {
-    height: 8.25rem;
+    height: 100%;
     width: 100%;
 
     position: relative;

packages/web-components/src/file-input/file-input.ts

@@ -28,7 +28,12 @@ import {
 import { ErrorMessages, scope, Slots } from "./constants.ts";
 import { RetryEvent } from "./events.ts";
 import { clear, error, image } from "./icons.ts";
-import { getProgressUiParams, isFileImage, isStringNumber } from "./utils.ts";
+import {
+  getProgressUiParams,
+  isFileImage,
+  isStringNumber,
+  loadingConverter,
+} from "./utils.ts";
 import FileInputValidator from "./Validator.ts";
 
 const BaseClass = withOnReportValidity(
@@ -53,25 +58,7 @@ export class FileInput extends BaseClass {
    * - If `true`, a spinner will appear indicating the component is loading.
    * - If a number between 0 and 100, it shows the percentage of the loading state.
    */
-  @property({
-    converter: {
-      fromAttribute(value: string | null): boolean | number {
-        if (value === null) return false;
-        if (value === "") return true;
-
-        const numericValue = Number(value);
-
-        if (Number.isNaN(numericValue)) return true;
-
-        return numericValue;
-      },
-      toAttribute(value: boolean | number): string | null {
-        if (typeof value === "boolean") return value ? "true" : null;
-
-        return `${value}`;
-      },
-    },
-  })
+  @property({ converter: loadingConverter })
   public loading: boolean | number = false;
 
   /**
@@ -646,8 +633,6 @@ export class FileInput extends BaseClass {
   }
 
   protected override render() {
-    console.log(this.loading);
-
     const rootClasses = classMap({
       root: true,
       disabled: this.disabled,

packages/web-components/src/file-input/utils.ts

@@ -1,3 +1,5 @@
+import type { PropertyDeclaration } from "lit";
+
 export const isStringNumber = (inputString: string): boolean =>
   /^\d+(\.\d+)?$/.test(inputString);
 
@@ -33,3 +35,21 @@ export const isFileImage = (fileName: string) => {
     fileName.toLowerCase().endsWith(imageExtension),
   );
 };
+
+export const loadingConverter: PropertyDeclaration["converter"] = {
+  fromAttribute(value: string | null): boolean | number {
+    if (value === null) return false;
+    if (value === "") return true;
+
+    const numericValue = Number(value);
+
+    if (Number.isNaN(numericValue)) return true;
+
+    return numericValue;
+  },
+  toAttribute(value: boolean | number): string | null {
+    if (typeof value === "boolean") return value ? "true" : null;
+
+    return `${value}`;
+  },
+};