refactor(Page Title): replace SVG divider with boder to properly supp…

…ort writing-mode
Endava · Jul 1, 2024 · 2733ee0 · 2733ee0
1 parent 9346d25
commit 2733ee0
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 35 deletions.
diff --git a/packages/beeq/src/components/divider/readme.md b/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
 ```

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
@@ -26,16 +26,6 @@ export default meta;
 type Story = StoryObj;
 
 const Template = (args: Args) => {
-  const customDivider = args.customDivider
-    ? html`<bq-divider
-        slot="divider"
-        class="block m-be-m"
-        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>
   `;
 };

diff --git a/packages/beeq/src/components/page-title/bq-page-title.tsx b/packages/beeq/src/components/page-title/bq-page-title.tsx
@@ -7,7 +7,6 @@ import { hasSlotContent } from '../../shared/utils';
  * @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.
@@ -81,7 +80,7 @@ export class BqPageTitle {
   render() {
     return (
       <div class="flex flex-col" part="wrapper">
-        <div class="flex gap-xs p-b-[--paddingY]" part="base">
+        <div class="bq-page-title-base" part="base">
           {/* Back navigation button */}
           <div
             class={{ flex: true, '!hidden': !this.haveBackNavigation }}
@@ -122,12 +121,6 @@ export class BqPageTitle {
             </div>
           </div>
         </div>
-        {/* Divider */}
-        <div part="divider">
-          <slot name="divider">
-            <bq-divider class="block m-be-m" stroke-color="ui--secondary" stroke-thickness="1" />
-          </slot>
-        </div>
       </div>
     );
   }

diff --git a/packages/beeq/src/components/page-title/readme.md b/packages/beeq/src/components/page-title/readme.md
@@ -12,27 +12,13 @@
 | `"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/)*
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.scss
@@ -7,3 +7,10 @@
 :host {
   @apply block;
 }
+
+.bq-page-title-base {
+  @apply flex gap-xs p-b-[--paddingY];
+
+  /* stylelint-disable-next-line custom-property-pattern */
+  border-block-end: 1px solid var(--subtitle-borderBlockEnd);
+}
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
@@ -12,6 +12,7 @@
    * @prop --title-fontWeight - Page title font weight for title
    * @prop --title-textColor - Page title color for title
    * @prop --title-textSize - Page title text size for title
+   * @prop --subtitle-borderBlockEnd - Page title border end color
    */
 
   /* stylelint-disable custom-property-pattern */
@@ -23,4 +24,5 @@
   --title-fontWeight: theme(fontWeight.bold);
   --title-textColor: theme(textColor.text.primary);
   --title-textSize: theme(fontSize.xxl);
+  --subtitle-borderBlockEnd: theme(colors.stroke.primary);
 }