refactor(Page Title): use CSS logical properties instead of physical …

…values
Endava · Jul 1, 2024 · 9346d25 · 9346d25
1 parent e31a68a
commit 9346d25
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx b/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
@@ -29,7 +29,7 @@ const Template = (args: Args) => {
   const customDivider = args.customDivider
     ? html`<bq-divider
         slot="divider"
-        class="mb-m block"
+        class="block m-be-m"
         stroke-color="stroke--secondary"
         stroke-thickness="1"
         dashed
@@ -94,8 +94,8 @@ export const TitleBackActions: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
     'custom-style': true,
   },
@@ -109,8 +109,8 @@ export const TitleBackActionsCustomDefault: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
   },
 };
@@ -124,8 +124,8 @@ export const TitleBackActionsCustom: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
     'custom-style': true,
   },

diff --git a/packages/beeq/src/components/page-title/bq-page-title.tsx b/packages/beeq/src/components/page-title/bq-page-title.tsx
@@ -81,7 +81,7 @@ export class BqPageTitle {
   render() {
     return (
       <div class="flex flex-col" part="wrapper">
-        <div class="flex gap-xs [padding-block:--paddingY]" part="base">
+        <div class="flex gap-xs p-b-[--paddingY]" part="base">
           {/* Back navigation button */}
           <div
             class={{ flex: true, '!hidden': !this.haveBackNavigation }}
@@ -101,7 +101,7 @@ export class BqPageTitle {
               </h1>
               {/* Suffix */}
               <div
-                class={{ 'flex flex-grow gap-xs p-xs2': true, '!hidden': !this.hasSuffix }}
+                class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}
                 ref={(divElem) => (this.suffixElem = divElem)}
                 part="suffix"
               >
@@ -125,7 +125,7 @@ export class BqPageTitle {
         {/* Divider */}
         <div part="divider">
           <slot name="divider">
-            <bq-divider class="mb-m block" stroke-color="ui--secondary" stroke-thickness="1" />
+            <bq-divider class="block m-be-m" stroke-color="ui--secondary" stroke-thickness="1" />
           </slot>
         </div>
       </div>