fix(core/workflow-steps): onStepSelected event

BREAKING_CHANGES.md

@@ -2,6 +2,32 @@
 
 ## v2.0.0
 
+### `ix-workflow-steps`
+
+### Remove `linear` prop
+
+Progression of the workflow steps have to be handled by the business logic. We decided this 
+on the base of different user feedbacks.
+
+You can now control the "navigation" of the steps by preventing the `stepSelected` event e.g:
+
+```tsx
+<ix-workflow-steps
+  clickable
+  onStepSelected={(event) => {
+    event.preventDefault(); // This prevents the `ix-workflow-steps` to select the clicked step
+  }}
+>
+  <ix-workflow-step>Test 1</ix-workflow-step>
+  <ix-workflow-step>Test 2</ix-workflow-step>
+  <ix-workflow-step>Test 3</ix-workflow-step>
+</ix-workflow-steps>
+```
+
+### Change `position` prop to `@internal`
+
+`position` was a internal property
+
 ### `ix-counter-pill` removed
 
 Replaced with `ix-pill`

packages/angular/src/components.ts

@@ -2130,14 +2130,14 @@ export declare interface IxValidationTooltip extends Components.IxValidationTool
 
 
 @ProxyCmp({
-  inputs: ['clickable', 'disabled', 'position', 'selected', 'status', 'vertical']
+  inputs: ['clickable', 'disabled', 'selected', 'status', 'vertical']
 })
 @Component({
   selector: 'ix-workflow-step',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['clickable', 'disabled', 'position', 'selected', 'status', 'vertical'],
+  inputs: ['clickable', 'disabled', 'selected', 'status', 'vertical'],
 })
 export class IxWorkflowStep {
   protected el: HTMLElement;
@@ -2152,14 +2152,14 @@ export declare interface IxWorkflowStep extends Components.IxWorkflowStep {}
 
 
 @ProxyCmp({
-  inputs: ['clickable', 'linear', 'selectedIndex', 'vertical']
+  inputs: ['clickable', 'selectedIndex', 'vertical']
 })
 @Component({
   selector: 'ix-workflow-steps',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['clickable', 'linear', 'selectedIndex', 'vertical'],
+  inputs: ['clickable', 'selectedIndex', 'vertical'],
 })
 export class IxWorkflowSteps {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -10960,46 +10960,10 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "position",
-          "type": "\"first\" | \"last\" | \"single\" | \"undefined\"",
-          "mutable": false,
-          "attr": "position",
-          "reflectToAttr": false,
-          "docs": "Activate navigation click",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Will be changed to '@internal' in 2.0.0"
-            }
-          ],
-          "default": "'undefined'",
-          "deprecation": "Will be changed to '@internal' in 2.0.0",
-          "values": [
-            {
-              "value": "first",
-              "type": "string"
-            },
-            {
-              "value": "last",
-              "type": "string"
-            },
-            {
-              "value": "single",
-              "type": "string"
-            },
-            {
-              "value": "undefined",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "selected",
           "type": "boolean",
-          "mutable": true,
+          "mutable": false,
           "attr": "selected",
           "reflectToAttr": false,
           "docs": "Set selected",
@@ -11105,29 +11069,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "linear",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "linear",
-          "reflectToAttr": false,
-          "docs": "Select linear mode",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Has no effect on component. Will get removed in 2.0.0"
-            }
-          ],
-          "default": "false",
-          "deprecation": "Has no effect on component. Will get removed in 2.0.0",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "selectedIndex",
           "type": "number",

packages/core/src/components.d.ts

@@ -1912,7 +1912,6 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Activate navigation click
-          * @deprecated Will be changed to '@internal' in 2.0.0
          */
         "position": 'first' | 'last' | 'single' | 'undefined';
         /**
@@ -1933,11 +1932,6 @@ export namespace Components {
           * Activate navigation click
          */
         "clickable": boolean;
-        /**
-          * Select linear mode
-          * @deprecated Has no effect on component. Will get removed in 2.0.0
-         */
-        "linear": boolean;
         /**
           * Activate navigation click
          */
@@ -4877,7 +4871,6 @@ declare namespace LocalJSX {
         "onSelectedChanged"?: (event: IxWorkflowStepCustomEvent<HTMLIxWorkflowStepElement>) => void;
         /**
           * Activate navigation click
-          * @deprecated Will be changed to '@internal' in 2.0.0
          */
         "position"?: 'first' | 'last' | 'single' | 'undefined';
         /**
@@ -4898,11 +4891,6 @@ declare namespace LocalJSX {
           * Activate navigation click
          */
         "clickable"?: boolean;
-        /**
-          * Select linear mode
-          * @deprecated Has no effect on component. Will get removed in 2.0.0
-         */
-        "linear"?: boolean;
         /**
           * On step selected event
          */

packages/core/src/components/workflow-step/workflow-step.scss

@@ -133,12 +133,14 @@
       }
     }
 
-    &:hover {
-      background-color: var(--theme-workflow-step--background--hover);
-    }
+    &.clickable {
+      &:hover {
+        background-color: var(--theme-workflow-step--background--hover);
+      }
 
-    &:active {
-      background-color: var(--theme-workflow-step--background--active);
+      &:active {
+        background-color: var(--theme-workflow-step--background--active);
+      }
     }
 
     &:focus-visible {

packages/core/src/components/workflow-step/workflow-step.tsx

@@ -51,17 +51,18 @@ export class WorkflowStep {
   /**
    * Set selected
    */
-  @Prop({ mutable: true }) selected: boolean = false;
+  @Prop() selected: boolean = false;
 
   /**
    * Activate navigation click
    *
-   * @deprecated Will be changed to '@internal' in 2.0.0
+   * @internal
    */
   @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';
 
   @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =
     'circle';
+
   @State() iconColor: string = 'workflow-step-icon-default--color';
 
   /**
@@ -71,14 +72,6 @@ export class WorkflowStep {
 
   private customIconSlot: boolean;
 
-  private select() {
-    if (!this.clickable) return;
-    if (this.disabled) return;
-
-    this.selected = true;
-    this.selectedHandler();
-  }
-
   @Watch('selected')
   selectedHandler() {
     const selectedStyle = this.selected ? '--selected' : '';
@@ -160,20 +153,18 @@ export class WorkflowStep {
           size="24"
         ></ix-icon>
       </Fragment>
-    ) : (
-      ''
-    );
+    ) : null;
 
     return (
       <Host onClick={() => this.onStepClick()}>
         <div
           tabIndex={0}
-          onClick={() => this.select()}
           class={{
             step: true,
             selected: this.selected,
             vertical: this.vertical,
             disabled: this.disabled,
+            clickable: this.clickable && !this.disabled,
           }}
         >
           <div class="wrapper">

packages/core/src/components/workflow-steps/test/workflow-steps.ct.ts

@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+  workflowSteps.evaluate(
+    (step: HTMLIxWorkflowStepsElement) => (step.selectedIndex = 1)
+  );
+  const step = workflowSteps
+    .locator('ix-workflow-step')
+    .nth(1)
+    .locator('.step .selected');
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(step).toBeVisible();
+});
+
+test('should be clickable', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps clickable>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+  const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);
+  const selectedDiv = lastStep.locator('.step');
+  await lastStep.click();
+
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(selectedDiv).toHaveClass(/selected/);
+});
+
+test('should prevent click navigation', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps clickable>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+
+  await workflowSteps.evaluate((steps: HTMLIxWorkflowStepsElement) => {
+    steps.addEventListener('stepSelected', (event) => {
+      event.preventDefault();
+    });
+  });
+
+  const firstStep = workflowSteps.locator('ix-workflow-step').nth(0);
+  const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);
+  const firstStepDiv = firstStep.locator('.step');
+  const lastStepDiv = lastStep.locator('.step');
+
+  await lastStep.click();
+
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(firstStepDiv).toHaveClass(/selected/);
+  await expect(lastStepDiv).not.toHaveClass(/selected/);
+});

packages/core/src/components/workflow-steps/workflow-steps.tsx

@@ -32,12 +32,6 @@ export class WorkflowSteps {
    */
   @Prop() vertical: boolean = false;
 
-  /**
-   * Select linear mode
-   * @deprecated Has no effect on component. Will get removed in 2.0.0
-   */
-  @Prop() linear: boolean = false;
-
   /**
    * Activate navigation click
    */
@@ -83,11 +77,18 @@ export class WorkflowSteps {
 
   @Listen('selectedChanged')
   onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {
+    const eventTarget = event.detail;
+
     const steps = this.getSteps();
-    steps.forEach((element) => {
-      if (element !== event.target) {
-        element.selected = false;
-      }
+    const clickIndex = steps.findIndex((step) => step === eventTarget);
+    const clientEvent = this.stepSelected.emit(clickIndex);
+
+    if (clientEvent.defaultPrevented) {
+      return;
+    }
+
+    steps.forEach((step, index) => {
+      step.selected = index === clickIndex;
     });
   }
 

packages/vue/src/components.ts

@@ -774,7 +774,6 @@ export const IxWorkflowStep = /*@__PURE__*/ defineContainer<JSX.IxWorkflowStep>(
 
 export const IxWorkflowSteps = /*@__PURE__*/ defineContainer<JSX.IxWorkflowSteps>('ix-workflow-steps', undefined, [
   'vertical',
-  'linear',
   'clickable',
   'selectedIndex',
   'stepSelected'