fix(Divider): default values to be in sync with Figma design (#1160)

Endava · Jul 24, 2024 · 380963d · 380963d
1 parent 5ab2149
commit 380963d
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 38 deletions.
diff --git a/packages/beeq/src/components/divider/__tests__/bq-divider.e2e.ts b/packages/beeq/src/components/divider/__tests__/bq-divider.e2e.ts
@@ -80,6 +80,6 @@ describe('bq-divider', () => {
 
     const style = await computedStyle(page, 'bq-divider >>> [part="base"]', ['height']);
 
-    expect(style).toEqual({ height: '2px' });
+    expect(style).toEqual({ height: '1px' });
   });
 });
diff --git a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx
@@ -31,12 +31,12 @@ const meta: Meta = {
   args: {
     orientation: 'horizontal',
     dashed: false,
-    'stroke-color': 'stroke--secondary',
+    'stroke-color': 'stroke--primary',
     'title-alignment': 'middle',
     'stroke-dash-width': 12,
     'stroke-dash-gap': 7,
-    'stroke-thickness': 2,
-    'stroke-basis': 20,
+    'stroke-thickness': 1,
+    'stroke-basis': 0,
     'stroke-linecap': 'butt',
   },
 };
@@ -101,18 +101,48 @@ export const NoTitle: Story = {
 };
 
 export const TextStart: Story = {
-  render: Template,
+  render: (args) => html`
+    <div
+      class="flex-col"
+      class=${classMap({
+        'flex gap-xxl': true,
+        'flex-col': args.orientation === 'horizontal',
+        'flex-row': args.orientation === 'vertical',
+      })}
+    >
+      <!-- Default -->
+      ${Template(args)}
+      <!-- with 'stoke-basis'  -->
+      ${Template({ ...args, 'title-text': 'Text start with stroke basis', 'stroke-basis': 100 })}
+      ${Template({ ...args, 'title-text': 'Text start with stroke basis', 'stroke-basis': 300 })}
+    </div>
+  `,
   args: {
     'title-alignment': 'start',
-    'title-text': 'Text Start',
+    'title-text': 'Text start',
   },
 };
 
 export const TextEnd: Story = {
-  render: Template,
+  render: (args) => html`
+    <div
+      class="flex-col"
+      class=${classMap({
+        'flex gap-xxl': true,
+        'flex-col': args.orientation === 'horizontal',
+        'flex-row': args.orientation === 'vertical',
+      })}
+    >
+      <!-- Default -->
+      ${Template(args)}
+      <!-- with 'stoke-basis'  -->
+      ${Template({ ...args, 'title-text': 'Text end with stroke basis', 'stroke-basis': 100 })}
+      ${Template({ ...args, 'title-text': 'Text end with stroke basis', 'stroke-basis': 300 })}
+    </div>
+  `,
   args: {
     'title-alignment': 'end',
-    'title-text': 'Text End',
+    'title-text': 'Text end',
   },
 };
 

diff --git a/packages/beeq/src/components/divider/bq-divider.tsx b/packages/beeq/src/components/divider/bq-divider.tsx
@@ -9,7 +9,7 @@ import {
   TDividerStrokeLinecap,
   TDividerTitleAlignment,
 } from './bq-divider.types';
-import { getColorCSSVariable, getTextContent, hasSlotContent, validatePropValue } from '../../shared/utils';
+import { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';
 
 /**
  * @part base - The component's internal wrapper.
@@ -50,7 +50,7 @@ export class BqDivider {
   @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';
 
   /** Set the stroke color of the divider. The value should be a valid value of the palette color */
-  @Prop({ reflect: true }) strokeColor?: string = 'stroke--secondary';
+  @Prop({ reflect: true }) strokeColor?: string = 'stroke--primary';
 
   /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */
   @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';
@@ -62,10 +62,10 @@ export class BqDivider {
   @Prop({ reflect: true }) strokeDashGap?: number = 7;
 
   /** Set the thickness of the divider's stroke. Value expressed in px*/
-  @Prop({ reflect: true }) strokeThickness?: number = 2;
+  @Prop({ reflect: true }) strokeThickness?: number = 1;
 
   /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */
-  @Prop({ reflect: true }) strokeBasis?: number = 20;
+  @Prop({ reflect: true }) strokeBasis?: number = 0;
 
   /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */
   @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';
@@ -149,7 +149,7 @@ export class BqDivider {
     const styles = {
       ...(this.strokeColor && { '--bq-divider--stroke-color': getColorCSSVariable(this.strokeColor) }),
       ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),
-      ...(this.strokeBasis && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),
+      ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),
     };
 
     return (
@@ -166,11 +166,23 @@ export class BqDivider {
           role="separator"
           aria-orientation={this.orientation}
         >
-          <svg class="bq-divider--stroke start" part="dash-start">
+          <svg
+            class={{
+              'bq-divider--stroke start': true,
+              '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',
+            }}
+            part="dash-start"
+          >
             <line {...this.strokeAttributes} part="dash-start-line" />
           </svg>
           <slot onSlotchange={this.handleSlotChange} />
-          <svg class={{ 'bq-divider--stroke end': true, '!hidden': !this.hasTitle }} part="dash-end">
+          <svg
+            class={{
+              'bq-divider--stroke end': true,
+              '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),
+            }}
+            part="dash-end"
+          >
             <line {...this.strokeAttributes} part="dash-end-line" />
           </svg>
         </div>

diff --git a/packages/beeq/src/components/divider/readme.md b/packages/beeq/src/components/divider/readme.md
@@ -5,17 +5,17 @@
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                                      | Type                            | Default               |
-| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- | --------------------- |
-| `dashed`          | `dashed`            | If true, the divider has a dashed pattern                                                        | `boolean`                       | `false`               |
-| `orientation`     | `orientation`       | The default orientation of the divider                                                           | `"horizontal" \| "vertical"`    | `'horizontal'`        |
-| `strokeBasis`     | `stroke-basis`      | Set the min width of the divider's stroke when text is not centered. Value expressed in px       | `number`                        | `20`                  |
-| `strokeColor`     | `stroke-color`      | Set the stroke color of the divider. The value should be a valid value of the palette color      | `string`                        | `'stroke--secondary'` |
-| `strokeDashGap`   | `stroke-dash-gap`   | Set the gap of the divider's stroke. This is applicable when the stroke is dashed                | `number`                        | `7`                   |
-| `strokeDashWidth` | `stroke-dash-width` | Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed | `number`                        | `12`                  |
-| `strokeLinecap`   | `stroke-linecap`    | Set the line of the divider's stroke. This is applicable when the stroke is dashed               | `"butt" \| "round" \| "square"` | `'butt'`              |
-| `strokeThickness` | `stroke-thickness`  | Set the thickness of the divider's stroke. Value expressed in px                                 | `number`                        | `2`                   |
-| `titleAlignment`  | `title-alignment`   | Set the alignment of the title on the main axis of the divider (horizontal / vertical)           | `"end" \| "middle" \| "start"`  | `'middle'`            |
+| Property          | Attribute           | Description                                                                                      | Type                            | Default             |
+| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- | ------------------- |
+| `dashed`          | `dashed`            | If true, the divider has a dashed pattern                                                        | `boolean`                       | `false`             |
+| `orientation`     | `orientation`       | The default orientation of the divider                                                           | `"horizontal" \| "vertical"`    | `'horizontal'`      |
+| `strokeBasis`     | `stroke-basis`      | Set the min width of the divider's stroke when text is not centered. Value expressed in px       | `number`                        | `0`                 |
+| `strokeColor`     | `stroke-color`      | Set the stroke color of the divider. The value should be a valid value of the palette color      | `string`                        | `'stroke--primary'` |
+| `strokeDashGap`   | `stroke-dash-gap`   | Set the gap of the divider's stroke. This is applicable when the stroke is dashed                | `number`                        | `7`                 |
+| `strokeDashWidth` | `stroke-dash-width` | Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed | `number`                        | `12`                |
+| `strokeLinecap`   | `stroke-linecap`    | Set the line of the divider's stroke. This is applicable when the stroke is dashed               | `"butt" \| "round" \| "square"` | `'butt'`            |
+| `strokeThickness` | `stroke-thickness`  | Set the thickness of the divider's stroke. Value expressed in px                                 | `number`                        | `1`                 |
+| `titleAlignment`  | `title-alignment`   | Set the alignment of the title on the main axis of the divider (horizontal / vertical)           | `"end" \| "middle" \| "start"`  | `'middle'`          |
 
 
 ## Shadow Parts

diff --git a/packages/beeq/src/components/divider/scss/bq-divider.scss b/packages/beeq/src/components/divider/scss/bq-divider.scss
@@ -5,11 +5,11 @@
 @import './bq-divider.variables';
 
 :host {
-  @apply flex is-full;
+  @apply block is-full;
 }
 
 :host([orientation='vertical']) {
-  @apply bs-full;
+  @apply flex bs-full;
 }
 
 .bq-divider {

diff --git a/packages/beeq/src/components/divider/scss/bq-divider.variables.scss b/packages/beeq/src/components/divider/scss/bq-divider.variables.scss
@@ -7,6 +7,6 @@
    * @prop --bq-divider--color: Divider color
    * @prop --bq-divider--title-marginX: Divider space between title and delimiters
    */
-  --bq-divider--color: theme(colors.stroke.secondary);
+  --bq-divider--color: theme(colors.stroke.primary);
   --bq-divider--title-marginX: theme(spacing.m);
 }
diff --git a/packages/beeq/src/components/drawer/bq-drawer.tsx b/packages/beeq/src/components/drawer/bq-drawer.tsx
@@ -296,7 +296,7 @@ export class BqDrawer {
             part="footer"
           >
             <slot name="footer-divider">
-              <bq-divider class="mb-m block" stroke-color="ui--secondary" dashed />
+              <bq-divider class="mb-m block" dashed />
             </slot>
             <slot name="footer" onSlotchange={this.handleFooterSlotChange} />
           </footer>

diff --git a/packages/beeq/src/components/steps/_storybook/bq-steps.stories.tsx b/packages/beeq/src/components/steps/_storybook/bq-steps.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta = {
     children: { control: 'text', table: { disable: true } },
   },
   args: {
-    'divider-color': 'ui--secondary',
+    'divider-color': 'stroke--primary',
     size: 'medium',
   },
 };

diff --git a/packages/beeq/src/components/steps/bq-steps.tsx b/packages/beeq/src/components/steps/bq-steps.tsx
@@ -33,7 +33,7 @@ export class BqSteps {
   // ========================
 
   /** The color of the line that connects the steps. It should be a valid declarative color token. */
-  @Prop({ reflect: true }) dividerColor: string = 'ui--secondary';
+  @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';
 
   /** The size of the steps */
   @Prop({ reflect: true }) size: TStepsSize = 'medium';
@@ -115,7 +115,8 @@ export class BqSteps {
         <slot />
         <bq-divider
           class={`absolute -z-10 inset-ie-0 inset-is-0 p-i-s ${dividerPaddingTop}`}
-          stroke-color={this.dividerColor}
+          strokeColor={this.dividerColor}
+          strokeThickness={2}
           exportparts="base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end"
         />
       </div>

diff --git a/packages/beeq/src/components/steps/readme.md b/packages/beeq/src/components/steps/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                  | Type                           | Default           |
-| -------------- | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------ | ----------------- |
-| `dividerColor` | `divider-color` | The color of the line that connects the steps. It should be a valid declarative color token. | `string`                       | `'ui--secondary'` |
-| `size`         | `size`          | The size of the steps                                                                        | `"medium" \| "small"`          | `'medium'`        |
-| `type`         | `type`          | The type of prefix element to use on the step items                                          | `"dot" \| "icon" \| "numeric"` | `undefined`       |
+| Property       | Attribute       | Description                                                                                  | Type                           | Default             |
+| -------------- | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- |
+| `dividerColor` | `divider-color` | The color of the line that connects the steps. It should be a valid declarative color token. | `string`                       | `'stroke--primary'` |
+| `size`         | `size`          | The size of the steps                                                                        | `"medium" \| "small"`          | `'medium'`          |
+| `type`         | `type`          | The type of prefix element to use on the step items                                          | `"dot" \| "icon" \| "numeric"` | `undefined`         |
 
 
 ## Shadow Parts