chore: add support for logical properties negative values

Endava · Jul 4, 2024 · 60d7bae · 60d7bae
1 parent 673c609
commit 60d7bae
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/beeq-tailwindcss/src/plugins/logical-properties.ts b/packages/beeq-tailwindcss/src/plugins/logical-properties.ts
@@ -51,6 +51,18 @@ export const LogicalProperties: Partial<Config> = plugin(function ({ matchUtilit
       'border-i': (value) => ({ 'border-inline': value }),
       'border-is': (value) => ({ 'border-inline-start': value }),
       'border-ie': (value) => ({ 'border-inline-end': value }),
+      // Logical Padding properties (only those not covered by Tailwind CSS)
+      'p-b': (value) => ({ 'padding-block': value }),
+      'p-bs': (value) => ({ 'padding-block-start': value }),
+      'p-be': (value) => ({ 'padding-block-end': value }),
+      'p-i': (value) => ({ 'padding-inline': value }),
+    },
+    {
+      values: theme('spacing'),
+    },
+  );
+  matchUtilities(
+    {
       // Logical Top, Right, Bottom, and Left properties
       'inset-b': (value) => ({ 'inset-block': value }),
       'inset-bs': (value) => ({ 'inset-block-start': value }),
@@ -63,14 +75,10 @@ export const LogicalProperties: Partial<Config> = plugin(function ({ matchUtilit
       'm-bs': (value) => ({ 'margin-block-start': value }),
       'm-be': (value) => ({ 'margin-block-end': value }),
       'm-i': (value) => ({ 'margin-inline': value }),
-      // Logical Padding properties (only those not covered by Tailwind CSS)
-      'p-b': (value) => ({ 'padding-block': value }),
-      'p-bs': (value) => ({ 'padding-block-start': value }),
-      'p-be': (value) => ({ 'padding-block-end': value }),
-      'p-i': (value) => ({ 'padding-inline': value }),
     },
     {
       values: theme('spacing'),
+      supportsNegativeValues: true,
     },
   );
 });
diff --git a/packages/beeq/src/components/checkbox/bq-checkbox.tsx b/packages/beeq/src/components/checkbox/bq-checkbox.tsx
@@ -183,7 +183,7 @@ export class BqCheckbox {
         >
           <input
             type="checkbox"
-            class="bq-checkbox__input pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0"
+            class="bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0"
             name={!isNil(this.name) ? this.name : undefined}
             checked={this.checked}
             disabled={this.disabled}

diff --git a/packages/beeq/src/components/status/bq-status.tsx b/packages/beeq/src/components/status/bq-status.tsx
@@ -71,7 +71,7 @@ export class BqStatus {
       <div class="bq-status inline-flex items-center gap-xs" part="base" role="status">
         <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size="medium" part="circle" role="img" />
         <div
-          class="bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] m-b-0 m-i-0 p-b-0 p-i-0"
+          class="bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0"
           part="text"
         >
           <slot />