fix(design): change spacing variant to avoid conflict with existing classes (#1032)

Author: ChibiBlasphem

packages/app-builder/src/components/CaseManager/Drawer/Drawer.tsx

@@ -71,7 +71,7 @@ export function CaseManagerDrawerButtons({ expandable = false }: { expandable?:
 
   return (
     <div className="p-4">
-      <div className="border-grey-90 bg-grey-100 z-10 flex gap-sm p-sm rounded-md border">
+      <div className="border-grey-90 bg-grey-100 z-10 flex gap-v2-sm p-v2-sm rounded-md border">
         <button
           type="button"
           onClick={expandable ? () => context.setExpanded(false) : undefined}

packages/app-builder/src/components/CaseManager/PivotsPanel/PivotAnnotations.tsx

@@ -31,9 +31,9 @@ export function PivotAnnotations({
   const tagsAnnotations = annotations?.tags ?? [];
 
   return (
-    <div className="flex flex-col gap-md">
+    <div className="flex flex-col gap-v2-md">
       <div className="text-h2 font-semibold">{t('cases:case_detail.pivot_panel.annotations')}</div>
-      <div className="border-grey-90 flex flex-col gap-md border p-md bg-grey-background-light rounded-v2-lg">
+      <div className="border-grey-90 flex flex-col gap-v2-md border p-v2-md bg-grey-background-light rounded-v2-lg">
         <div className="grid grid-cols-[116px_1fr] gap-x-3 gap-y-2">
           <div>{t('cases:annotations.tags.title')}</div>
           <div className="flex items-start justify-between">

packages/app-builder/src/components/CaseManager/PivotsPanel/PivotsPanel.tsx

@@ -63,7 +63,7 @@ export function PivotsPanel(props: PivotsPanelProps) {
       {drawerContext.isExpanded ? (
         <DataModelExplorer caseId={props.case.id} dataModel={props.dataModel} />
       ) : (
-        <div className="w-[519px] p-l pt-0">
+        <div className="w-[519px] p-v2-lg pt-0">
           <PivotsPanelContent
             currentUser={props.currentUser}
             case={props.case}

packages/app-builder/src/components/CaseManager/PivotsPanel/PivotsPanelContent.tsx

@@ -100,13 +100,13 @@ export function PivotsPanelContent({
             {t('cases:ai_review.proof.title')}
           </button>
         ) : null}
-        <div className="border-grey-90 flex gap-2 self-start rounded-v2-lg border p-xs">
+        <div className="border-grey-90 flex gap-2 self-start rounded-v2-lg border p-v2-xs">
           {pivotObjects.map((pivotObject, idx) => {
             const uniqKey = pivotUniqKey(pivotObject);
             return (
               <button
                 key={uniqKey}
-                className="text-grey-50 aria-current:bg-purple-96 aria-current:text-purple-65 rounded-v2-md p-xs px-sm cursor-pointer"
+                className="text-grey-50 aria-current:bg-purple-96 aria-current:text-purple-65 rounded-v2-md p-v2-xs px-v2-sm cursor-pointer"
                 aria-current={uniqKey === pivotUniqKey(currentPivotObject)}
                 onClick={() => {
                   setCurrentPivotObjectUniqKey(pivotUniqKey(pivotObject));
@@ -122,11 +122,11 @@ export function PivotsPanelContent({
       {!isDisplayingProofs ? (
         <>
           {currentTable && currentPivotObject ? (
-            <div className="flex flex-col gap-md">
+            <div className="flex flex-col gap-v2-md">
               <div className="text-h2 font-semibold">
                 {t('cases:case_detail.pivot_panel.informations')}
               </div>
-              <div className="border-grey-90 flex flex-col gap-md border p-md bg-grey-background-light rounded-v2-lg">
+              <div className="border-grey-90 flex flex-col gap-v2-md border p-v2-md bg-grey-background-light rounded-v2-lg">
                 <div className="capitalize font-semibold">{currentTable.name}</div>
                 <PivotObjectDetails
                   tableModel={currentTable}
@@ -173,7 +173,7 @@ export function PivotsPanelContent({
                 <div className="bg-grey-100 px-4 py-2 rounded-t-xl border-b border-grey-90">
                   {t('cases:ai_review.proof.tab_title', { number: idx + 1 })}
                 </div>
-                <div className="p-4 flex flex-col gap-md">
+                <div className="p-4 flex flex-col gap-v2-md">
                   <ClientObjectDataList tableModel={tableModel} data={proof.object.data} />
                   {navigationOptions ? (
                     <>
@@ -273,7 +273,7 @@ function RelatedCases({
       }
 
       return (
-        <div className="flex flex-col gap-md">
+        <div className="flex flex-col gap-v2-md">
           <div className="text-h2 font-semibold">
             {t('cases:case_detail.pivot_panel.case_history')}
           </div>

packages/app-builder/src/components/Cases/CaseAlerts.tsx

@@ -40,10 +40,10 @@ export const CaseAlerts = ({
           decisions ? (
             <div className="text-small border-grey-90 bg-grey-100 rounded-lg border">
               <div className="text-default text-grey-50 grid grid-cols-[82px_2fr_1.3fr_1fr] font-normal">
-                <span className="p-sm">{t('cases:decisions.date')}</span>
-                <span className="p-sm">{t('cases:decisions.alert')}</span>
-                <span className="p-sm">{t('cases:decisions.trigger_object')}</span>
-                <span className="p-sm">{t('cases:decisions.rule_hits')}</span>
+                <span className="p-v2-sm">{t('cases:decisions.date')}</span>
+                <span className="p-v2-sm">{t('cases:decisions.alert')}</span>
+                <span className="p-v2-sm">{t('cases:decisions.trigger_object')}</span>
+                <span className="p-v2-sm">{t('cases:decisions.rule_hits')}</span>
               </div>
               {decisions.map((decision) => {
                 const triggerObjectOptions = dataModelWithTableOptions.find(

packages/app-builder/src/components/Cases/CaseDetails.tsx

@@ -79,15 +79,15 @@ export const CaseDetails = ({
   return (
     <div
       ref={containerRef}
-      className="relative flex w-full min-w-0 flex-col gap-l overflow-y-scroll bg-white pb-l"
+      className="relative flex w-full min-w-0 flex-col gap-v2-lg overflow-y-scroll bg-white pb-v2-lg"
     >
       <div ref={sentinelRef} className="absolute left-0 top-0" />
       <div
-        className={cn('bg-inherit sticky top-0 z-10 flex flex-col gap-4 px-l pt-l', {
+        className={cn('bg-inherit sticky top-0 z-10 flex flex-col gap-4 px-v2-lg pt-v2-lg', {
           'border-b-grey-90 border-b': !intersection?.isIntersecting,
         })}
       >
-        <div className="flex shrink-0 justify-between gap-xs">
+        <div className="flex shrink-0 justify-between gap-v2-xs">
           <EditCaseName name={detail.name} id={detail.id} />
           <div className="flex shrink-0 items-center gap-2">
             {detail.status !== 'closed' ? (
@@ -131,11 +131,11 @@ export const CaseDetails = ({
         ) : null}
       </div>
 
-      <div className="px-l flex flex-col gap-l">
+      <div className="px-v2-lg flex flex-col gap-v2-lg">
         {selectedTab === 'caseDetails' ? (
           <>
             {/* Case details */}
-            <div className="border-grey-90 text-small flex flex-col gap-2 border p-md bg-grey-background-light rounded-v2-lg">
+            <div className="border-grey-90 text-small flex flex-col gap-2 border p-v2-md bg-grey-background-light rounded-v2-lg">
               <div className="grid grid-cols-[170px_1fr] items-center">
                 <span className="text-grey-50 font-normal">{t('cases:case.status')}</span>
                 <CaseStatusBadge status={detail.status} outcome={detail.outcome} />
@@ -212,7 +212,7 @@ export const CaseDetails = ({
             </UploadFile> */}
                 </div>
 
-                <div className="border-grey-90 bg-grey-100 flex flex-wrap gap-sm rounded-v2-lg border p-md">
+                <div className="border-grey-90 bg-grey-100 flex flex-wrap gap-v2-sm rounded-v2-lg border p-v2-md">
                   {detail.files.map((file) => (
                     <CaseFile key={file.id} file={file} />
                   ))}

packages/app-builder/src/components/DataModelExplorer/DataModelExplorer.tsx

@@ -183,7 +183,7 @@ function DataModelExplorerTab(props: {
     <button
       aria-current={props.current}
       type="button"
-      className="group/tab text-default text-grey-50 aria-current:bg-purple-96 aria-current:text-purple-65 relative inline-flex items-center gap-2 rounded-v2-md px-sm py-xs"
+      className="group/tab text-default text-grey-50 aria-current:bg-purple-96 aria-current:text-purple-65 relative inline-flex items-center gap-2 rounded-v2-md px-v2-sm py-v2-xs"
       onClick={props.onClick}
     >
       {props.label}

packages/app-builder/src/components/DataModelExplorer/DataTableRender.tsx

@@ -72,15 +72,15 @@ export function DataTableRender({ caseId, dataModel, item, navigateTo }: DataTab
         {sourceTableModel ? (
           <div className="flex flex-col gap-2">
             <span className="text-s font-semibold">{item.sourceTableName}</span>
-            <div className="bg-grey-background-light border border-grey-border rounded-v2-md p-sm">
+            <div className="bg-grey-background-light border border-grey-border rounded-v2-md p-v2-sm">
               <ClientObjectDataList tableModel={sourceTableModel} data={item.sourceObject} />
             </div>
           </div>
         ) : null}
         {filterFieldValue !== item.pivotObject.pivotValue && pivotTableModel ? (
           <div className="col-start-2 flex flex-col gap-2">
             <span className="text-s font-semibold">{item.pivotObject.pivotObjectName}</span>
-            <div className="bg-grey-background-light border border-grey-border rounded-v2-md p-sm">
+            <div className="bg-grey-background-light border border-grey-border rounded-v2-md p-v2-sm">
               <ClientObjectDataList
                 tableModel={pivotTableModel}
                 data={item.sourceObject}

packages/app-builder/src/components/Page.tsx

@@ -32,7 +32,7 @@ function PageHeader({ className, children, ...props }: React.ComponentProps<'div
   return (
     <div
       className={cn(
-        'border-b-grey-90 bg-grey-100 text-l text-grey-00 relative flex shrink-0 flex-row items-center border-b font-bold px-md',
+        'border-b-grey-90 bg-grey-100 text-l text-grey-00 relative flex shrink-0 flex-row items-center border-b font-bold px-v2-md',
         headerHeight({ type: 'height' }),
         className,
       )}
@@ -88,7 +88,7 @@ function PageContent({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-const PageContentV2ClassName = cva('flex flex-1 flex-col p-l text-default', {
+const PageContentV2ClassName = cva('flex flex-1 flex-col p-v2-lg text-default', {
   variants: {
     centered: {
       true: 'mx-auto',

packages/app-builder/src/components/Scenario/TriggerObjectTag.tsx

@@ -9,7 +9,7 @@ interface TriggerObjectTagProps {
 export function TriggerObjectTag({ children }: TriggerObjectTagProps) {
   const { t } = useTranslation(['scenarios']);
   return (
-    <div className="text-s bg-purple-98 text-purple-65 flex items-center gap-2 rounded-v2-md py-xs px-sm font-normal">
+    <div className="text-s bg-purple-98 text-purple-65 flex items-center gap-2 rounded-v2-md py-v2-xs px-v2-sm font-normal">
       {children}
 
       <Ariakit.HovercardProvider showTimeout={0} hideTimeout={0} placement="bottom">