diff --git a/packages/beeq/src/components/divider/readme.md b/packages/beeq/src/components/divider/readme.md index fb2d6d962..7b26b0873 100644 --- 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/__tests__/bq-page-title.e2e.ts b/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts index 2fe9856dc..fa95ec70e 100644 --- a/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts +++ b/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: ` - - Title -
- Sub-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(); - }); }); 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 index f76447696..cd8359ab6 100644 --- 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`` - : 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`
${args['sub-title']}
` : nothing} ${args.actions ? html`
${args.actions}
` : nothing} - ${customDivider} `; }; @@ -94,8 +83,8 @@ export const TitleBackActions: Story = { title: 'Title', 'sub-title': 'Sub-title', actions: html` - - + + `, 'custom-style': true, }, @@ -109,8 +98,8 @@ export const TitleBackActionsCustomDefault: Story = { title: 'Title', 'sub-title': 'Sub-title', actions: html` - - + + `, }, }; @@ -124,8 +113,8 @@ export const TitleBackActionsCustom: Story = { title: 'Title', 'sub-title': 'Sub-title', actions: html` - - + + `, '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 index 4c5c244a4..4904ae99e 100644 --- a/packages/beeq/src/components/page-title/bq-page-title.tsx +++ b/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 `
` of the element inside the shadow DOM. * @part base - The inner container `
`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 `
` of element that acts as divider slot container. * @part back - The container `
` page title element that acts as back slot container. * @part title - The `

` element serves as a container for the page title content, to improve accessibility. * @part suffix - The `
` page title element that acts as suffix slot container. @@ -80,53 +78,45 @@ export class BqPageTitle { render() { return ( -
-
- {/* Back navigation button */} -
(this.backNavigationElem = divElem)} - part="back" - > - -
-
-
- {/* Title */} -

- -

- {/* Suffix */} -
(this.suffixElem = divElem)} - part="suffix" - > - -
-
- {/* Sub-title */} +
+ {/* Back navigation button */} +
(this.backNavigationElem = divElem)} + part="back" + > + +
+
+
+ {/* Title */} +

+ +

+ {/* Suffix */}
(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" > - +
-
- {/* Divider */} -
- - - + {/* Sub-title */} +
(this.subTitleElem = divElem)} + part="sub-title" + > + +
); diff --git a/packages/beeq/src/components/page-title/readme.md b/packages/beeq/src/components/page-title/readme.md index 9b5022473..5ec0e68db 100644 --- a/packages/beeq/src/components/page-title/readme.md +++ b/packages/beeq/src/components/page-title/readme.md @@ -12,27 +12,12 @@ | `"back"` | The container `
` page title element that acts as back slot container. | | `"base"` | The inner container `
`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 `
` of element that acts as divider slot container. | | `"sub-title"` | The `
` page title element that acts as sub-title slot container. | | `"suffix"` | The `
` page title element that acts as suffix slot container. | | `"title"` | The `

` 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 `
` 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.variables.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss index 2a993d4c3..98b31d02e 100644 --- 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 @@ -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); }