From c4706e4fac31c6c1b08d0fe98bc4a401df6411ec Mon Sep 17 00:00:00 2001 From: goncalosard Date: Tue, 11 Jul 2023 17:44:47 +0100 Subject: [PATCH 1/4] fix: onstepselected event --- .../core/src/components/workflow-steps/workflow-steps.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/workflow-steps/workflow-steps.tsx b/packages/core/src/components/workflow-steps/workflow-steps.tsx index 91379cc55b6..048bb9070f3 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.tsx +++ b/packages/core/src/components/workflow-steps/workflow-steps.tsx @@ -84,10 +84,13 @@ export class WorkflowSteps { @Listen('selectedChanged') onStepSelectionChanged(event: CustomEvent) { const steps = this.getSteps(); - steps.forEach((element) => { + steps.forEach((element, index) => { if (element !== event.target) { element.selected = false; } + if (element.selected === true) { + this.stepSelected.emit(index); + } }); } From b782f3711c9a8b45640b12e27281d17c136a15f1 Mon Sep 17 00:00:00 2001 From: goncalosard Date: Mon, 31 Jul 2023 11:47:10 +0100 Subject: [PATCH 2/4] fix: clickable hover and active --- .../src/components/workflow-step/workflow-step.scss | 12 +++++++----- .../src/components/workflow-step/workflow-step.tsx | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/workflow-step/workflow-step.scss b/packages/core/src/components/workflow-step/workflow-step.scss index 4cfbd11add5..e1adf59ae47 100644 --- a/packages/core/src/components/workflow-step/workflow-step.scss +++ b/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 { diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx index 892f266c4d7..8050d3b5c67 100644 --- a/packages/core/src/components/workflow-step/workflow-step.tsx +++ b/packages/core/src/components/workflow-step/workflow-step.tsx @@ -174,6 +174,7 @@ export class WorkflowStep { selected: this.selected, vertical: this.vertical, disabled: this.disabled, + clickable: this.clickable && !this.disabled, }} >
From 9709a356ac04bf345501f204bc3f62778762f208 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Thu, 3 Aug 2023 09:16:20 +0200 Subject: [PATCH 3/4] fix: workflow steps --- BREAKING_CHANGES.md | 26 ++++++ packages/angular/src/components.ts | 8 +- packages/core/component-doc.json | 61 +------------- packages/core/src/components.d.ts | 12 --- .../workflow-step/workflow-step.tsx | 18 +--- .../workflow-steps/test/workflow-steps.ct.ts | 83 +++++++++++++++++++ .../workflow-steps/workflow-steps.tsx | 24 +++--- packages/vue/src/components.ts | 1 - 8 files changed, 129 insertions(+), 104 deletions(-) create mode 100644 packages/core/src/components/workflow-steps/test/workflow-steps.ct.ts diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index d7b02b38418..61200d63d95 100644 --- a/BREAKING_CHANGES.md +++ b/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 + { + event.preventDefault(); // This prevents the `ix-workflow-steps` to select the clicked step + }} +> + Test 1 + Test 2 + Test 3 + +``` + +### Change `position` prop to `@internal` + +`position` was a internal property + ### `ix-counter-pill` removed Replaced with `ix-pill` diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 90563aeb90d..bd03962c2f1 100644 --- a/packages/angular/src/components.ts +++ b/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: '', // 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: '', // 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; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 72cdeb27fc3..4e3fa36e319 100644 --- a/packages/core/component-doc.json +++ b/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", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 18923a65f18..36c8da2c429 100644 --- a/packages/core/src/components.d.ts +++ b/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) => 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 */ diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx index 8050d3b5c67..383144f3031 100644 --- a/packages/core/src/components/workflow-step/workflow-step.tsx +++ b/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,15 +153,12 @@ export class WorkflowStep { size="24" > - ) : ( - '' - ); + ) : null; return ( this.onStepClick()}>
this.select()} class={{ step: true, selected: this.selected, diff --git a/packages/core/src/components/workflow-steps/test/workflow-steps.ct.ts b/packages/core/src/components/workflow-steps/test/workflow-steps.ct.ts new file mode 100644 index 00000000000..f0860966ce4 --- /dev/null +++ b/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(` + + Test 1 + Test 2 + Test 3 + + `); + 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(` + + Test 1 + Test 2 + Test 3 + + `); + 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(` + + Test 1 + Test 2 + Test 3 + + `); + 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/); +}); diff --git a/packages/core/src/components/workflow-steps/workflow-steps.tsx b/packages/core/src/components/workflow-steps/workflow-steps.tsx index 048bb9070f3..0d660eb855f 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.tsx +++ b/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,14 +77,18 @@ export class WorkflowSteps { @Listen('selectedChanged') onStepSelectionChanged(event: CustomEvent) { + const eventTarget = event.detail; + const steps = this.getSteps(); - steps.forEach((element, index) => { - if (element !== event.target) { - element.selected = false; - } - if (element.selected === true) { - this.stepSelected.emit(index); - } + 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; }); } diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 58098a2ea3a..cdaed8c6a58 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -774,7 +774,6 @@ export const IxWorkflowStep = /*@__PURE__*/ defineContainer( export const IxWorkflowSteps = /*@__PURE__*/ defineContainer('ix-workflow-steps', undefined, [ 'vertical', - 'linear', 'clickable', 'selectedIndex', 'stepSelected' From 40550046b0d6bd43a14e74fa8f0f005a535da8b1 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Thu, 3 Aug 2023 16:20:59 +0200 Subject: [PATCH 4/4] docs: fix typo Co-authored-by: Lukas Maurer --- BREAKING_CHANGES.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 61200d63d95..0b448dc39ae 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -6,8 +6,7 @@ ### 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. +Progression of the workflow steps has to be handled by the business logic now. This change is due to various user feedback. You can now control the "navigation" of the steps by preventing the `stepSelected` event e.g: