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

fix(RadioGroup): style legend based on size

Browse Source
This commit is contained in:
Benjamin Canac
2024-08-01 17:18:21 +02:00
parent e598ca5b40
commit b1bcaabd19
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/theme/radio-group.ts
View File

@@ -36,6 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
size: { size: {
xs: { xs: {
fieldset: 'gap-0.5', fieldset: 'gap-0.5',
legend: 'text-xs',
base: 'size-3', base: 'size-3',
item: 'text-xs', item: 'text-xs',
container: 'h-4', container: 'h-4',
@@ -43,6 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
}, },
sm: { sm: {
fieldset: 'gap-0.5', fieldset: 'gap-0.5',
legend: 'text-xs',
base: 'size-3.5', base: 'size-3.5',
item: 'text-xs', item: 'text-xs',
container: 'h-4', container: 'h-4',
@@ -50,6 +52,7 @@ export default (options: Required<ModuleOptions>) => ({
}, },
md: { md: {
fieldset: 'gap-1', fieldset: 'gap-1',
legend: 'text-sm',
base: 'size-4', base: 'size-4',
item: 'text-sm', item: 'text-sm',
container: 'h-5', container: 'h-5',
@@ -57,6 +60,7 @@ export default (options: Required<ModuleOptions>) => ({
}, },
lg: { lg: {
fieldset: 'gap-1', fieldset: 'gap-1',
legend: 'text-sm',
base: 'size-4.5', base: 'size-4.5',
item: 'text-sm', item: 'text-sm',
container: 'h-5', container: 'h-5',
@@ -64,6 +68,7 @@ export default (options: Required<ModuleOptions>) => ({
}, },
xl: { xl: {
fieldset: 'gap-1.5', fieldset: 'gap-1.5',
legend: 'text-base',
base: 'size-5', base: 'size-5',
item: 'text-base', item: 'text-base',
container: 'h-6', container: 'h-6',

2
test/components/__snapshots__/RadioGroup.spec.ts.snap
View File

@@ -325,7 +325,7 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
exports[`RadioGroup > renders with required correctly 1`] = ` exports[`RadioGroup > renders with required correctly 1`] = `
"<div role="radiogroup" required="true" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative" tabindex="0"> "<div role="radiogroup" required="true" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1"> <fieldset class="flex flex-col gap-1">
<legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400">Legend</legend> <legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 text-sm after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400">Legend</legend>
<div class="flex items-start text-sm"> <div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1"> <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
<!----> <!---->