Fix active state of buttons in button group (#4580)

toptal · Sep 30, 2024 · aa78d0d · aa78d0d
1 parent 70efbd0
commit aa78d0d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/wicked-yaks-cover.md b/.changeset/wicked-yaks-cover.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-button': patch
+'@toptal/picasso': patch
+---
+
+### Button
+
+- fix active state of buttons in button group
diff --git a/packages/base/Button/src/Button/styles.ts b/packages/base/Button/src/Button/styles.ts
@@ -190,6 +190,7 @@ export const createCoreClassNames = ({
 
     if (active) {
       classNames.push('shadow-none')
+      classNames.push('z-[1]')
     }
   }
 

diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -79,7 +79,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="true"
         aria-disabled="false"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] shadow-none border border-solid hover:border-black visited:text-black h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite text-white disabled:text-gray [&+&]:!ml-2"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] shadow-none z-[1] border border-solid hover:border-black visited:text-black h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite text-white disabled:text-gray [&+&]:!ml-2"
         data-component-type="button"
         role="button"
         tabindex="0"