chore(tailwind): support for negative values for logical properties i…

…nset/margin (#1180)
Endava · Aug 1, 2024 · 098d8ff · 098d8ff
1 parent 40d5acf
commit 098d8ff
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 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/dropdown/_storybook/bq-dropdown.stories.tsx b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
@@ -201,7 +201,7 @@ export const CustomTrigger: Story = {
 
 export const KeepOpen: Story = {
   render: (args: Args) => html`
-    <div class="rounded-m border-s border-solid border-stroke-success bg-ui-success-alt m-be-l p-b-m p-i-m">
+    <div class="rounded-m border-s border-solid border-stroke-success bg-ui-success-alt p-b-m p-i-m m-be-l">
       <p class="text-m font-bold m-be-xs">💡 NOTE:</p>
       If <code class="text-text-danger">keepOpenOnSelect</code> is set, the dropdown will remain open after a selection
       is made.

diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx
@@ -149,7 +149,7 @@ export const ExploreIcons: Story = {
           (icon) => html`
             <div class="group flex flex-col items-stretch text-center outline-0" role="button" tabindex="0">
               <div
-                class="border flex w-full justify-center rounded-m border-s border-solid border-stroke-primary transition-[shadow,transform] m-be-s p-b-m p-i-0 group-hover:scale-125 group-hover:shadow-l"
+                class="border flex w-full justify-center rounded-m border-s border-solid border-stroke-primary transition-[shadow,transform] p-b-m p-i-0 m-be-s group-hover:scale-125 group-hover:shadow-l"
               >
                 ${Template({ ...args, name: icon })}
               </div>

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 />

diff --git a/packages/beeq/src/components/steps/bq-steps.tsx b/packages/beeq/src/components/steps/bq-steps.tsx
@@ -114,7 +114,7 @@ export class BqSteps {
       >
         <slot />
         <bq-divider
-          class={`absolute -z-10 inset-ie-0 inset-is-0 p-i-s ${dividerPaddingTop}`}
+          class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}
           strokeColor={this.dividerColor}
           strokeThickness={2}
           exportparts="base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end"