From 4f52b0aff478173643a017097a6f56e6516b34f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= Date: Tue, 23 Jul 2024 15:37:49 +0300 Subject: [PATCH 1/4] perf(Divider): improve code readability and performance --- .../src/components/divider/bq-divider.tsx | 57 ++++++++----------- 1 file changed, 23 insertions(+), 34 deletions(-) diff --git a/packages/beeq/src/components/divider/bq-divider.tsx b/packages/beeq/src/components/divider/bq-divider.tsx index 515471424..aa43ed098 100644 --- a/packages/beeq/src/components/divider/bq-divider.tsx +++ b/packages/beeq/src/components/divider/bq-divider.tsx @@ -11,15 +11,6 @@ import { } from './bq-divider.types'; import { getColorCSSVariable, getTextContent, hasSlotContent, validatePropValue } from '../../shared/utils'; -const strokeDrawPositions = { - HORIZONTAL: (drawOffset: number) => { - return { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset }; - }, - VERTICAL: (drawOffset: number) => { - return { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' }; - }, -}; - /** * @part base - The component's internal wrapper. * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke @@ -99,7 +90,7 @@ export class BqDivider { // Ordered by their natural call order // ===================================== - componentWillLoad() { + connectedCallback() { this.checkPropValues(); } @@ -122,33 +113,33 @@ export class BqDivider { // These methods cannot be called from the host element. // ======================================================= - private getStrokeDrawPositions = () => { - switch (this.orientation) { - case DIVIDER_ORIENTATION_ENUM.HORIZONTAL: - return strokeDrawPositions.HORIZONTAL(this.strokeThickness / 2); - case DIVIDER_ORIENTATION_ENUM.VERTICAL: - return strokeDrawPositions.VERTICAL(this.strokeThickness / 2); - default: - break; - } - }; - - private getStrokeDasharray = () => { - return `${this.strokeDashWidth}, ${this.strokeDashGap}`; + private handleSlotChange = () => { + this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot')); }; - private getStrokeAttributes = () => { + private get strokeAttributes() { return { - ...this.getStrokeDrawPositions(), - ...(this.dashed && { 'stroke-dasharray': this.getStrokeDasharray() }), + ...this.strokeDrawPositions, + ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }), 'stroke-linecap': this.strokeLinecap, 'stroke-width': this.strokeThickness, }; - }; + } - private handleSlotChange = () => { - this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot')); - }; + private get strokeDrawPositions() { + const drawOffset = this.strokeThickness / 2; + const strokeDrawPositions = { + [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset }, + [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' }, + }; + const orientationMap = new Map(Object.entries(strokeDrawPositions)); + + return orientationMap.get(this.orientation); + } + + private get strokeDasharray() { + return `${this.strokeDashWidth}, ${this.strokeDashGap}`; + } // render() function // Always the last one in the class. @@ -161,8 +152,6 @@ export class BqDivider { ...(this.strokeBasis && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }), }; - const strokeAttributes = this.getStrokeAttributes(); - return (
- + - +
From 63f4227843a607fa2802b20dbe119bf93f4a9a56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= Date: Tue, 23 Jul 2024 15:38:52 +0300 Subject: [PATCH 2/4] refactor(Divider): use CSS logical properties instead --- packages/beeq/src/components/divider/scss/bq-divider.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/beeq/src/components/divider/scss/bq-divider.scss b/packages/beeq/src/components/divider/scss/bq-divider.scss index e3f0d8f15..ff0b5067f 100644 --- a/packages/beeq/src/components/divider/scss/bq-divider.scss +++ b/packages/beeq/src/components/divider/scss/bq-divider.scss @@ -9,7 +9,7 @@ } .bq-divider--stroke { - @apply h-[var(--bq-divider--stroke-thickness)] w-full flex-grow stroke-[color:var(--bq-divider--stroke-color)]; + @apply flex-grow stroke-[color:var(--bq-divider--stroke-color)] bs-[var(--bq-divider--stroke-thickness)] is-full; &.end { @apply rotate-180; @@ -22,9 +22,9 @@ } .bq-divider--vertical { - @apply h-full flex-col items-center gap-[var(--bq-divider--title-marginX)]; + @apply flex-col items-center gap-[var(--bq-divider--title-marginX)] is-full; .bq-divider--stroke { - @apply h-full w-[var(--bq-divider--stroke-thickness)]; + @apply bs-full is-[var(--bq-divider--stroke-thickness)]; } } From db4f0120d5d130d0ebd8113fcee2c60b07b0bf74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= Date: Tue, 23 Jul 2024 15:39:25 +0300 Subject: [PATCH 3/4] docs(Divider): update storybook example --- .../divider/_storybook/bq-divider.stories.tsx | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx index bdc9a877c..e200bfb9b 100644 --- a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx +++ b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx @@ -1,5 +1,6 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components'; -import { html } from 'lit-html'; +import { html, nothing } from 'lit-html'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; import mdx from './bq-divider.mdx'; import { DIVIDER_ORIENTATION, DIVIDER_STROKE_LINECAP, DIVIDER_TITLE_ALIGNMENT } from '../bq-divider.types'; @@ -43,25 +44,19 @@ export default meta; type Story = StoryObj; const Template = (args: Args) => html` - -
+
- ${args['title-text'] ? html`

${args['title-text']}

` : null} + ${args['title-text'] ? html`

${args['title-text']}

` : nothing}
`; From 08a8cdb9a132a981fdff79fb0ddaf38713f52e33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= Date: Tue, 23 Jul 2024 16:31:24 +0300 Subject: [PATCH 4/4] fix(Divider): make host to take full space available --- .../components/divider/_storybook/bq-divider.stories.tsx | 8 +++++++- packages/beeq/src/components/divider/scss/bq-divider.scss | 8 ++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx index e200bfb9b..188eb8774 100644 --- a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx +++ b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx @@ -1,4 +1,5 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components'; +import { classMap } from 'lit/directives/class-map.js'; import { html, nothing } from 'lit-html'; import { ifDefined } from 'lit-html/directives/if-defined.js'; @@ -44,7 +45,12 @@ export default meta; type Story = StoryObj; const Template = (args: Args) => html` -
+