arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 05:58:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Input): invalid xs size

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-22 17:18:48 +01:00
parent fbe3a40668
commit 4a281b3093
3 changed files with 10 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
playground/pages/input.vue
View File

@@ -20,6 +20,14 @@ const sizes = Object.keys(theme.variants.size)
<UInput loading trailing placeholder="Search..." />
<UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in sizes"
:key="size"
placeholder="Search..."
:size="(size as any)"
/>
</div>
<div class="flex items-center gap-4">
<UInput
v-for="size in sizes"

2
src/theme/input.ts
View File

@@ -18,7 +18,7 @@ export default (config: { colors: string[] }) => {
trailingIcon: 'size-4'
},
xs: {
base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
base: 'text-sm gap-x-1.5 px-2.5 py-1',
leading: 'px-2.5',
trailing: 'px-2.5',
leadingIcon: 'size-4',

44
test/components/__snapshots__/Input.spec.ts.snap
View File

@@ -79,48 +79,6 @@ exports[`Input > renders with size 2xs correctly 1`] = `
</div>"
`;
exports[`Input > renders with size correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size correctly 2`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size correctly 3`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size correctly 4`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size correctly 5`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size correctly 6`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-base gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size lg correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
@@ -150,7 +108,7 @@ exports[`Input > renders with size xl correctly 1`] = `
`;
exports[`Input > renders with size xs correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"