arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 12:17:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): implement --ui-radius CSS variable (#2341)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-09 14:28:29 +02:00
committed by GitHub
parent 68ee3f11ca
commit 057e86cfda
60 changed files with 2406 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
test/components/__snapshots__/Checkbox.spec.ts.snap
View File

@@ -2,7 +2,7 @@
exports[`Checkbox > renders with class correctly 1`] = `
"<div class="relative items-start inline-flex">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -13,7 +13,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
exports[`Checkbox > renders with color neutral correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted] size-4 ring-2 ring-[--ui-border-inverted] bg-[--ui-bg-inverted]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted] size-4 ring-2 ring-[--ui-border-inverted] bg-[--ui-bg-inverted]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<!---->
</div>
<!--v-if-->
@@ -22,7 +22,7 @@ exports[`Checkbox > renders with color neutral correctly 1`] = `
exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<!---->
</div>
<!--v-if-->
@@ -31,7 +31,7 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
exports[`Checkbox > renders with description correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -44,7 +44,7 @@ exports[`Checkbox > renders with description correctly 1`] = `
exports[`Checkbox > renders with description slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -57,7 +57,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
exports[`Checkbox > renders with disabled correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<!---->
</button>
<!---->
@@ -68,7 +68,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
exports[`Checkbox > renders with icon correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -79,7 +79,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
exports[`Checkbox > renders with id correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -90,7 +90,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<!---->
</div>
<!--v-if-->
@@ -99,7 +99,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4 ring-2 ring-[--ui-primary] bg-[--ui-primary]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-heroicons:minus-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span></button>
<!---->
</div>
<!--v-if-->
@@ -108,7 +108,7 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
exports[`Checkbox > renders with label correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -121,7 +121,7 @@ exports[`Checkbox > renders with label correctly 1`] = `
exports[`Checkbox > renders with label slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -134,7 +134,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
exports[`Checkbox > renders with name correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -145,7 +145,7 @@ exports[`Checkbox > renders with name correctly 1`] = `
exports[`Checkbox > renders with required correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -158,7 +158,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
exports[`Checkbox > renders with size lg correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -169,7 +169,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
exports[`Checkbox > renders with size md correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -180,7 +180,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
exports[`Checkbox > renders with size sm correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -191,7 +191,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
exports[`Checkbox > renders with size xl correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -202,7 +202,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
exports[`Checkbox > renders with size xs correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -213,7 +213,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
exports[`Checkbox > renders with ui correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -224,7 +224,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
exports[`Checkbox > renders with value correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->