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

packages/beeq/src/components/divider/readme.md

@@ -34,14 +34,12 @@
 ### Used by
 
  - [bq-drawer](../drawer)
- - [bq-page-title](../page-title)
  - [bq-steps](../steps)
 
 ### Graph
 ```mermaid
 graph TD;
   bq-drawer --> bq-divider
-  bq-page-title --> bq-divider
   bq-steps --> bq-divider
   style bq-divider fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts

@@ -40,24 +40,4 @@ describe('bq-page-title', () => {
     const suffixSlot = await page.find('bq-page-title >>> slot[name="suffix"]');
     expect(suffixSlot).not.toBeNull();
   });
-
-  it('should render title + sub-title + divider', async () => {
-    const page = await newE2EPage({
-      html: `
-        <bq-page-title>
-          Title
-          <div slot="sub-title">
-            Sub-title
-          </div>
-          <div slot="divider">
-            <bq-divider />
-          </div>
-        </bq-page-title>`,
-    });
-    const subTitleSlot = await page.find('bq-page-title >>> slot[name="sub-title"]');
-    expect(subTitleSlot).not.toBeNull();
-
-    const dividerSlot = await page.find('bq-page-title >>> slot[name="divider"]');
-    expect(dividerSlot).not.toBeNull();
-  });
 });

packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx

@@ -26,16 +26,6 @@ export default meta;
 type Story = StoryObj;
 
 const Template = (args: Args) => {
-  const customDivider = args.customDivider
-    ? html`<bq-divider
-        slot="divider"
-        class="mb-m block"
-        stroke-color="stroke--secondary"
-        stroke-thickness="1"
-        dashed
-      />`
-    : nothing;
-
   const actionsSlotClass = args['custom-style'] ? 'flex flex-grow justify-end' : 'flex';
 
   return html`
@@ -55,7 +45,6 @@ const Template = (args: Args) => {
         : nothing}
       ${args.title} ${args['sub-title'] ? html`<div slot="sub-title">${args['sub-title']}</div>` : nothing}
       ${args.actions ? html`<div class="${actionsSlotClass}" slot="suffix">${args.actions}</div>` : nothing}
-      ${customDivider}
     </bq-page-title>
   `;
 };
@@ -94,8 +83,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 +98,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 +113,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,
   },

packages/beeq/src/components/page-title/bq-page-title.tsx

@@ -3,11 +3,9 @@ import { Component, Element, h, State } from '@stencil/core';
 import { hasSlotContent } from '../../shared/utils';
 
 /**
- * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
  * @part base - The inner container `<div>`of element that contains the base page title component.
  * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.
  * @part title-suffix - Defines the container that holds the title and any suffix content.
- * @part divider - The inner container `<div>` of element that acts as divider slot container.
  * @part back - The container `<div>` page title element that acts as back slot container.
  * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.
  * @part suffix - The `<div>` page title element that acts as suffix slot container.
@@ -80,53 +78,45 @@ export class BqPageTitle {
 
   render() {
     return (
-      <div class="flex flex-col" part="wrapper">
-        <div class="flex gap-xs [padding-block:--paddingY]" part="base">
-          {/* Back navigation button */}
-          <div
-            class={{ flex: true, '!hidden': !this.haveBackNavigation }}
-            ref={(divElem) => (this.backNavigationElem = divElem)}
-            part="back"
-          >
-            <slot name="back" onSlotchange={this.handleSlotChange} />
-          </div>
-          <div class="flex flex-grow flex-col gap-xs" part="content">
-            <div class="flex items-center gap-xs" part="title-suffix">
-              {/* Title */}
-              <h1
-                class="title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]"
-                part="title"
-              >
-                <slot />
-              </h1>
-              {/* Suffix */}
-              <div
-                class={{ 'flex flex-grow gap-xs p-xs2': true, '!hidden': !this.hasSuffix }}
-                ref={(divElem) => (this.suffixElem = divElem)}
-                part="suffix"
-              >
-                <slot name="suffix" onSlotchange={this.handleSlotChange} />
-              </div>
-            </div>
-            {/* Sub-title */}
+      <div class="flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]" part="base">
+        {/* Back navigation button */}
+        <div
+          class={{ flex: true, '!hidden': !this.haveBackNavigation }}
+          ref={(divElem) => (this.backNavigationElem = divElem)}
+          part="back"
+        >
+          <slot name="back" onSlotchange={this.handleSlotChange} />
+        </div>
+        <div class="flex flex-grow flex-col gap-xs" part="content">
+          <div class="flex items-center gap-xs" part="title-suffix">
+            {/* Title */}
+            <h1
+              class="title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]"
+              part="title"
+            >
+              <slot />
+            </h1>
+            {/* Suffix */}
             <div
-              class={{
-                'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':
-                  true,
-                hidden: !this.hasSubTitle,
-              }}
-              ref={(divElem) => (this.subTitleElem = divElem)}
-              part="sub-title"
+              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}
+              ref={(divElem) => (this.suffixElem = divElem)}
+              part="suffix"
             >
-              <slot name="sub-title" onSlotchange={this.handleSlotChange} />
+              <slot name="suffix" onSlotchange={this.handleSlotChange} />
             </div>
           </div>
-        </div>
-        {/* Divider */}
-        <div part="divider">
-          <slot name="divider">
-            <bq-divider class="mb-m block" stroke-color="ui--secondary" stroke-thickness="1" />
-          </slot>
+          {/* Sub-title */}
+          <div
+            class={{
+              'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':
+                true,
+              hidden: !this.hasSubTitle,
+            }}
+            ref={(divElem) => (this.subTitleElem = divElem)}
+            part="sub-title"
+          >
+            <slot name="sub-title" onSlotchange={this.handleSlotChange} />
+          </div>
         </div>
       </div>
     );

packages/beeq/src/components/page-title/readme.md

@@ -12,27 +12,12 @@
 | `"back"`         | The container `<div>` page title element that acts as back slot container.                              |
 | `"base"`         | The inner container `<div>`of element that contains the base page title component.                      |
 | `"content"`      | Defines the main container of the page title component, which includes the title and subtitle elements. |
-| `"divider"`      | The inner container `<div>` of element that acts as divider slot container.                             |
 | `"sub-title"`    | The `<div>` page title element that acts as sub-title slot container.                                   |
 | `"suffix"`       | The `<div>` page title element that acts as suffix slot container.                                      |
 | `"title"`        | The `<h1>` element serves as a container for the page title content, to improve accessibility.          |
 | `"title-suffix"` | Defines the container that holds the title and any suffix content.                                      |
-| `"wrapper"`      | The wrapper container `<div>` of the element inside the shadow DOM.                                     |
 
 
-## Dependencies
-
-### Depends on
-
-- [bq-divider](../divider)
-
-### Graph
-```mermaid
-graph TD;
-  bq-page-title --> bq-divider
-  style bq-page-title fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss

@@ -5,22 +5,24 @@
 :host {
   /**
    * @prop --paddingY - Padding top and bottom of the page title wrapper
+   * @prop --subtitle-borderBlockEnd - Page title border end color
    * @prop --subtitle-fontWeight - Page title font weight for subtitle
    * @prop --subtitle-textColor - Page title color for sub-title
    * @prop --subtitle-textSize - Page title text size for subtitle
-   * @prop --title-lineHeight - Page title text line height
    * @prop --title-fontWeight - Page title font weight for title
+   * @prop --title-lineHeight - Page title text line height
    * @prop --title-textColor - Page title color for title
    * @prop --title-textSize - Page title text size for title
    */
 
   /* stylelint-disable custom-property-pattern */
   --paddingY: theme(spacing.xl);
+  --subtitle-borderBlockEnd: 1px solid theme(colors.stroke.primary);
   --subtitle-fontWeight: theme(fontWeight.medium);
   --subtitle-textColor: theme(textColor.text.secondary);
   --subtitle-textSize: theme(fontSize.l);
-  --title-lineHeight: theme(lineHeight.regular);
   --title-fontWeight: theme(fontWeight.bold);
+  --title-lineHeight: theme(lineHeight.regular);
   --title-textColor: theme(textColor.text.primary);
   --title-textSize: theme(fontSize.xxl);
 }