[FX-5808] Fix badge placement in tabs and checkbox spacing (#4489)

.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

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
           ),

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"

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]',

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"

packages/base/Tabs/src/Tab/story/Icon.example.tsx → 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 && (

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 {

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"