From 77fe06d4465c3d7a25b9140c876d6e8e79937faf Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Fri, 22 Mar 2024 12:47:26 +0100 Subject: [PATCH] chore(Accordion): improve styles --- playground/pages/accordion.vue | 4 +- src/theme/accordion.ts | 6 +- .../__snapshots__/Accordion.spec.ts.snap | 480 +++++++++--------- 3 files changed, 246 insertions(+), 244 deletions(-) diff --git a/playground/pages/accordion.vue b/playground/pages/accordion.vue index 71b4a2bb..baf3973b 100644 --- a/playground/pages/accordion.vue +++ b/playground/pages/accordion.vue @@ -29,5 +29,7 @@ const items = [{ diff --git a/src/theme/accordion.ts b/src/theme/accordion.ts index cef90bc3..31891924 100644 --- a/src/theme/accordion.ts +++ b/src/theme/accordion.ts @@ -1,10 +1,10 @@ export default { slots: { root: 'w-full', - item: 'border-b border-gray-200 dark:border-gray-800', + item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0', header: 'flex', - trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline', - content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', + trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0', + content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none', leadingIcon: 'shrink-0 w-5 h-5', trailingIcon: 'ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200', label: 'truncate' diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap index 575ed157..d5bfbcd2 100644 --- a/test/components/__snapshots__/Accordion.spec.ts.snap +++ b/test/components/__snapshots__/Accordion.spec.ts.snap @@ -2,61 +2,61 @@ exports[`Accordion > renders basic case correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -65,61 +65,61 @@ exports[`Accordion > renders basic case correctly 1`] = ` exports[`Accordion > renders with as correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -128,61 +128,61 @@ exports[`Accordion > renders with as correctly 1`] = ` exports[`Accordion > renders with class correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -191,61 +191,61 @@ exports[`Accordion > renders with class correctly 1`] = ` exports[`Accordion > renders with collapsible correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -254,61 +254,61 @@ exports[`Accordion > renders with collapsible correctly 1`] = ` exports[`Accordion > renders with content slot correctly 1`] = ` "
-
-

-
Content slot
+
Content slot
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -317,61 +317,61 @@ exports[`Accordion > renders with content slot correctly 1`] = ` exports[`Accordion > renders with default slot correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -380,61 +380,61 @@ exports[`Accordion > renders with default slot correctly 1`] = ` exports[`Accordion > renders with defaultValue correctly 1`] = ` "
-
-

- -
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- @@ -443,61 +443,61 @@ exports[`Accordion > renders with defaultValue correctly 1`] = ` exports[`Accordion > renders with disabled correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

- @@ -506,61 +506,61 @@ exports[`Accordion > renders with disabled correctly 1`] = ` exports[`Accordion > renders with modelValue correctly 1`] = ` "
-
-

- -
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- @@ -569,61 +569,61 @@ exports[`Accordion > renders with modelValue correctly 1`] = ` exports[`Accordion > renders with type correctly 1`] = ` "
-
-

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
-
-

- -
-

- -
-

- -
-

- -
-

-