From a5d61c8f5295a669e480a5baadced66cfe80b711 Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Tue, 20 Aug 2024 15:36:54 +0200
Subject: [PATCH] [FX-5808] Fix badge placement in tabs and checkbox spacing
 (#4489)

---
 .changeset/twelve-steaks-melt.md                 |  9 +++++++++
 packages/base/Badge/src/Badge/Badge.tsx          |  3 +--
 .../Badge/src/Badge/__snapshots__/test.tsx.snap  |  4 ++--
 packages/base/Checkbox/src/Checkbox/Checkbox.tsx |  1 +
 .../src/Checkbox/__snapshots__/test.tsx.snap     | 16 ++++++++--------
 ...{Icon.example.tsx => IconOrBadge.example.tsx} | 13 ++-----------
 packages/base/Tabs/src/Tab/story/index.jsx       |  6 +++++-
 .../src/Checkbox/__snapshots__/test.tsx.snap     |  8 ++++----
 8 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/twelve-steaks-melt.md
 rename packages/base/Tabs/src/Tab/story/{Icon.example.tsx => IconOrBadge.example.tsx} (76%)

diff --git a/.changeset/twelve-steaks-melt.md b/.changeset/twelve-steaks-melt.md
new file mode 100644
index 0000000000..709a8aae93
--- /dev/null
+++ b/.changeset/twelve-steaks-melt.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-badge': patch
+'@toptal/picasso-tabs': patch
+'@toptal/picasso-checkbox': patch
+---
+
+- fix styles in Badge component
+- add "badge in tab" case to Tabs storybook stories
+- fix font size for Checkbox root
diff --git a/packages/base/Badge/src/Badge/Badge.tsx b/packages/base/Badge/src/Badge/Badge.tsx
index 9710227743..4d6ab1745b 100644
--- a/packages/base/Badge/src/Badge/Badge.tsx
+++ b/packages/base/Badge/src/Badge/Badge.tsx
@@ -58,8 +58,7 @@ export const Badge = forwardRef<HTMLDivElement, Props>(function Badge(
         root: {
           className: twMerge(
             `inline-flex flex-shrink-0 content-middle flex-nowrap justify-normal 
-            text-[10px] font-semibold leading-3 align-middle text-graphite-700 
-            top-0 right-0`,
+            text-[10px] font-semibold leading-3 align-middle text-graphite-700`,
             hasChildren ? 'relative' : 'static',
             className
           ),
diff --git a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
index 892b51c2ae..c7a4434872 100644
--- a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
+++ b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Badge renders 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite top-0 right-0 static"
+      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
       <span
         class="base-Badge border-solid items-center content-center inline-flex flex-nowrap justify-center z-[1] border rounded-full bg-white text-graphite border-gray static px-[3px] h-[1.25rem] min-w"
@@ -24,7 +24,7 @@ exports[`Badge renders in red variant 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite top-0 right-0 static"
+      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
       <span
         class="base-Badge border-solid items-center content-center inline-flex flex-nowrap justify-center z-[1] border rounded-full text-white bg-red border-red static px-[3px] h-[1.25rem] min-w"
diff --git a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
index 8b584e4a79..d67bcd7b91 100644
--- a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
+++ b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
@@ -112,6 +112,7 @@ export const Checkbox = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
         style={labelStyle}
         ref={ref as React.ForwardedRef<HTMLLabelElement>}
         classes={{
+          root: 'text-[1rem]',
           label: twJoin(
             'max-w-[calc(100%_-_1.5em_+_1px)]',
             'ml-[0.5em]',
diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index e86cffcd8c..56e72d09d5 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -54,7 +54,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -93,7 +93,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -132,7 +132,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -171,7 +171,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -210,7 +210,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -257,7 +257,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
     class="Picasso-root"
   >
     <label
-      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -458,7 +458,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
     class="Picasso-root"
   >
     <label
-      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+      class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
     >
       <span
         class="inline-flex PicassoCheckbox-checkboxWrapper"
diff --git a/packages/base/Tabs/src/Tab/story/Icon.example.tsx b/packages/base/Tabs/src/Tab/story/IconOrBadge.example.tsx
similarity index 76%
rename from packages/base/Tabs/src/Tab/story/Icon.example.tsx
rename to packages/base/Tabs/src/Tab/story/IconOrBadge.example.tsx
index 40709cd436..2367e14558 100644
--- a/packages/base/Tabs/src/Tab/story/Icon.example.tsx
+++ b/packages/base/Tabs/src/Tab/story/IconOrBadge.example.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Tabs, Tooltip } from '@toptal/picasso'
+import { Container, Tabs, Tooltip, Badge } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
@@ -24,16 +24,7 @@ const Example = () => {
           }
         />
         <Tabs.Tab label='Label' />
-        <Tabs.Tab
-          label='Label'
-          icon={
-            <Tooltip content='Some content...' placement='top'>
-              <span>
-                <Exclamation16 color='red' />
-              </span>
-            </Tooltip>
-          }
-        />
+        <Tabs.Tab label='Label' icon={<Badge content={10} variant='white' />} />
       </Tabs>
 
       {value === 0 && (
diff --git a/packages/base/Tabs/src/Tab/story/index.jsx b/packages/base/Tabs/src/Tab/story/index.jsx
index 6d679329e4..cff11913b7 100644
--- a/packages/base/Tabs/src/Tab/story/index.jsx
+++ b/packages/base/Tabs/src/Tab/story/index.jsx
@@ -20,7 +20,11 @@ const chapter = PicassoBook.connectToPage(page => {
       'Using custom value',
       'base/Tabs'
     )
-    .addExample('Tab/story/Icon.example.tsx', 'With Icon', 'base/Tabs')
+    .addExample(
+      'Tab/story/IconOrBadge.example.tsx',
+      'With Icon or Badge',
+      'base/Tabs'
+    )
 })
 
 export default {
diff --git a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index d9ee7a54c3..9779476948 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                 class="box-border m-0 leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
               >
                 <label
-                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
                 >
                   <span
                     class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -77,7 +77,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                 class="box-border m-0 leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
               >
                 <label
-                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+                  class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
                 >
                   <span
                     class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -139,7 +139,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
           data-testid="single-checkbox"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -199,7 +199,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
           data-testid="single-checkbox"
         >
           <label
-            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
+            class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
           >
             <span
               class="inline-flex PicassoCheckbox-checkboxWrapper"