diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 2087315487e..b256d769947 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -9576,18 +9576,13 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [ - "my-component" - ], + "dependents": [], "dependencies": [ "ix-icon" ], "dependencyGraph": { "ix-workflow-step": [ "ix-icon" - ], - "my-component": [ - "ix-workflow-step" ] }, "props": [ @@ -9627,13 +9622,19 @@ }, { "name": "position", - "type": "\"first\" | \"last\" | \"undefined\"", + "type": "\"first\" | \"last\" | \"single\" | \"undefined\"", "mutable": false, "attr": "position", "reflectToAttr": false, "docs": "Activate navigation click", - "docsTags": [], + "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", @@ -9643,6 +9644,10 @@ "value": "last", "type": "string" }, + { + "value": "single", + "type": "string" + }, { "value": "undefined", "type": "string" @@ -9725,7 +9730,13 @@ "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "click", + "capture": false, + "passive": true + } + ] }, { "dirPath": "./src/components/workflow-steps", @@ -9739,15 +9750,9 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [ - "my-component" - ], + "dependents": [], "dependencies": [], - "dependencyGraph": { - "my-component": [ - "ix-workflow-steps" - ] - }, + "dependencyGraph": {}, "props": [ { "name": "clickable", @@ -9773,8 +9778,14 @@ "attr": "linear", "reflectToAttr": false, "docs": "Select linear mode", - "docsTags": [], + "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" @@ -9848,19 +9859,8 @@ "docsTags": [], "encapsulation": "scoped", "dependents": [], - "dependencies": [ - "ix-workflow-steps", - "ix-workflow-step" - ], - "dependencyGraph": { - "my-component": [ - "ix-workflow-steps", - "ix-workflow-step" - ], - "ix-workflow-step": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [], "methods": [], "events": [], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 0b44fd42863..f803a7b8d49 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1640,8 +1640,9 @@ export namespace Components { "disabled": boolean; /** * Activate navigation click + * @deprecated Will be changed to '@internal' in 2.0.0 */ - "position": 'first' | 'last' | 'undefined'; + "position": 'first' | 'last' | 'single' | 'undefined'; /** * Set selected */ @@ -1662,6 +1663,7 @@ export namespace Components { "clickable": boolean; /** * Select linear mode + * @deprecated Has no effect on component. Will get removed in 2.0.0 */ "linear": boolean; /** @@ -1820,6 +1822,10 @@ export interface IxUploadCustomEvent extends CustomEvent { detail: T; target: HTMLIxUploadElement; } +export interface IxWorkflowStepCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxWorkflowStepElement; +} export interface IxWorkflowStepsCustomEvent extends CustomEvent { detail: T; target: HTMLIxWorkflowStepsElement; @@ -4113,10 +4119,12 @@ declare namespace LocalJSX { * Set disabled */ "disabled"?: boolean; + "onSelectedChanged"?: (event: IxWorkflowStepCustomEvent) => void; /** * Activate navigation click + * @deprecated Will be changed to '@internal' in 2.0.0 */ - "position"?: 'first' | 'last' | 'undefined'; + "position"?: 'first' | 'last' | 'single' | 'undefined'; /** * Set selected */ @@ -4137,6 +4145,7 @@ declare namespace LocalJSX { "clickable"?: boolean; /** * Select linear mode + * @deprecated Has no effect on component. Will get removed in 2.0.0 */ "linear"?: boolean; /** diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx index 0cd6f92fc63..1d000b75d17 100644 --- a/packages/core/src/components/my-component/my-component.tsx +++ b/packages/core/src/components/my-component/my-component.tsx @@ -15,12 +15,6 @@ import { Component, h, Host } from '@stencil/core'; }) export class MyComponent { render() { - return ( - - - - - - ); + return ; } } diff --git a/packages/core/src/components/workflow-step/workflow-step.scss b/packages/core/src/components/workflow-step/workflow-step.scss index e094c4a86de..813a142662f 100644 --- a/packages/core/src/components/workflow-step/workflow-step.scss +++ b/packages/core/src/components/workflow-step/workflow-step.scss @@ -7,10 +7,6 @@ * LICENSE file in the root directory of this source tree. */ -/* - * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED. - */ - @import 'common-variables'; :host { @@ -47,15 +43,23 @@ margin: 0 auto 0 0; } + &.single { + width: 0; + } + &.selected { - background-color: var(--theme-workflow-step-icon-default--color--selected); + background-color: var( + --theme-workflow-step-icon-default--color--selected + ); } &.done { background-color: var(--theme-workflow-step-icon-done--color); &.selected { - background-color: var(--theme-workflow-step-icon-done--color--selected); + background-color: var( + --theme-workflow-step-icon-done--color--selected + ); } } @@ -112,6 +116,10 @@ &.last { margin: 0 0 auto 0; } + + &.single { + width: 0; + } } } @@ -143,7 +151,9 @@ background-color: var(--theme-workflow-step--background--disabled); .line { - background-color: var(--theme-workflow-step-icon-default--color--disabled) !important; + background-color: var( + --theme-workflow-step-icon-default--color--disabled + ) !important; } .text { @@ -151,4 +161,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx index 3b252b19663..7b6f828dc4f 100644 --- a/packages/core/src/components/workflow-step/workflow-step.tsx +++ b/packages/core/src/components/workflow-step/workflow-step.tsx @@ -7,16 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -/* - * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED. - */ - import { Component, Element, + Event, + EventEmitter, Fragment, h, Host, + Listen, Prop, State, Watch, @@ -57,13 +56,20 @@ export class WorkflowStep { /** * Activate navigation click + * + * @deprecated Will be changed to '@internal' in 2.0.0 */ - @Prop() position: 'first' | 'last' | 'undefined' = 'undefined'; + @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined'; @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' = 'circle'; @State() iconColor: string = 'workflow-step-icon-default--color'; + /** + * @internal + */ + @Event() selectedChanged: EventEmitter; + private customIconSlot: boolean; private select() { @@ -131,6 +137,13 @@ export class WorkflowStep { ); } + @Listen('click', { passive: true }) + clickFunction() { + if (!this.disabled && this.clickable) { + this.selectedChanged.emit(this.hostElement); + } + } + render() { const icons = !this.customIconSlot ? ( diff --git a/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts b/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts index 6342d5a4a40..6931ac60cf6 100644 --- a/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts +++ b/packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts @@ -40,10 +40,9 @@ describe('workflow-steps', () => { observerCallback([{ type: 'childList' }]); await page.waitForChanges(); - expect(step).toEqualAttributes({ - position: 'last', - selected: true, - }); + + expect(step.position).toEqual('single'); + expect(step.selected).toEqual(true); }); it('should re-render workflow steps', async () => { @@ -62,33 +61,23 @@ describe('workflow-steps', () => { observerCallback([{ type: 'childList' }]); await page.waitForChanges(); - expect(step).toEqualAttributes({ - position: 'first', - selected: true, - }); + expect(step.position).toEqual('first'); + expect(step.selected).toEqual(true); - expect(step1).toEqualAttributes({ - position: 'last', - selected: false, - }); + expect(step1.position).toEqual('last'); + expect(step1.selected).toEqual(false); page.root.querySelector('ix-workflow-steps').append(step2); observerCallback([{ type: 'childList' }]); await page.waitForChanges(); - expect(step).toEqualAttributes({ - position: 'first', - selected: true, - }); + expect(step.position).toEqual('first'); + expect(step.selected).toEqual(true); - expect(step1).toEqualAttributes({ - position: 'undefined', - selected: false, - }); + expect(step1.position).toEqual('undefined'); + expect(step1.selected).toEqual(false); - expect(step2).toEqualAttributes({ - position: 'last', - selected: false, - }); + expect(step2.position).toEqual('last'); + expect(step2.selected).toEqual(false); }); }); diff --git a/packages/core/src/components/workflow-steps/workflow-steps.scss b/packages/core/src/components/workflow-steps/workflow-steps.scss index 74a7ab1ca42..b8013c078c2 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.scss +++ b/packages/core/src/components/workflow-steps/workflow-steps.scss @@ -7,10 +7,6 @@ * LICENSE file in the root directory of this source tree. */ -/* - * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED. - */ - @import 'common-variables'; :host { diff --git a/packages/core/src/components/workflow-steps/workflow-steps.tsx b/packages/core/src/components/workflow-steps/workflow-steps.tsx index aead77adc90..9c62e4c9ba2 100644 --- a/packages/core/src/components/workflow-steps/workflow-steps.tsx +++ b/packages/core/src/components/workflow-steps/workflow-steps.tsx @@ -7,10 +7,6 @@ * LICENSE file in the root directory of this source tree. */ -/* - * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED. - */ - import { Component, Element, @@ -37,6 +33,7 @@ export class WorkflowSteps { /** * Select linear mode + * @deprecated Has no effect on component. Will get removed in 2.0.0 */ @Prop() linear: boolean = false; @@ -59,38 +56,53 @@ export class WorkflowSteps { return Array.from(this.hostElement.querySelectorAll('ix-workflow-step')); } - private deselectAll() { - const steps = this.getSteps(); - steps.forEach((element) => { - element.setAttribute('selected', 'false'); - }); + get stepsContent() { + return this.hostElement.querySelector('.steps'); } - styling() { + updateSteps() { let steps = this.getSteps(); steps.forEach((element, index) => { - element.setAttribute('vertical', this.vertical ? 'true' : 'false'); - element.setAttribute('clickable', this.clickable ? 'true' : 'false'); - element.setAttribute( - 'selected', - this.selectedIndex === index ? 'true' : 'false' - ); - if (index === 0) element.setAttribute('position', 'first'); - if (index === steps.length - 1) element.setAttribute('position', 'last'); - if (index > 0 && index < steps.length - 1) - element.setAttribute('position', 'undefined'); + element.vertical = this.vertical; + element.clickable = this.clickable; + element.selected = this.selectedIndex === index; + + if (steps.length === 1) { + element.position = 'single'; + return; + } + + if (index === 0) { + element.position = 'first'; + } else if (index === steps.length - 1) { + element.position = 'last'; + } else { + element.position = 'undefined'; + } }); } private observer: MutationObserver; componentDidLoad() { + this.stepsContent.addEventListener( + 'selectedChanged', + (event: CustomEvent) => { + const steps = this.getSteps(); + steps.forEach((element) => { + if (element !== event.target) { + element.selected = false; + } + }); + } + ); + const slotDiv = this.hostElement.querySelector('.steps'); this.observer = createMutationObserver((mutations) => { for (let mutation of mutations) { if (mutation.type === 'childList') { - this.styling(); + this.updateSteps(); } } }); @@ -105,27 +117,7 @@ export class WorkflowSteps { } componentDidRender() { - this.styling(); - } - - componentWillRender() { - const steps = this.getSteps(); - steps.forEach((element, index) => { - element.addEventListener('click', () => { - if (!this.clickable) return; - const previousElement = steps[index - 1]; - if ( - this.linear && - previousElement && - !['done', 'success'].includes(previousElement?.status) - ) { - return element.setAttribute('selected', 'false'); - } - this.deselectAll(); - element.setAttribute('selected', 'true'); - this.stepSelected.emit(index); - }); - }); + this.updateSteps(); } render() { diff --git a/packages/core/src/tests/workflow-steps/basic/index.html b/packages/core/src/tests/workflow-steps/basic/index.html index 23d5ef6ac0c..6ed215650fc 100644 --- a/packages/core/src/tests/workflow-steps/basic/index.html +++ b/packages/core/src/tests/workflow-steps/basic/index.html @@ -4,9 +4,6 @@ SPDX-License-Identifier: MIT --> - @@ -20,6 +17,9 @@ display: flex; margin-top: 2rem; } + ix-workflow-steps { + margin-inline-end: 2rem; + } @@ -33,6 +33,10 @@ Step 6 + + Single step + + Step 1 Step 2 @@ -41,6 +45,10 @@ Step 5 Step 6 + + + Single step + diff --git a/packages/core/src/tests/workflow-steps/overflow/index.html b/packages/core/src/tests/workflow-steps/overflow/index.html index c5070d30699..58ab71ec342 100644 --- a/packages/core/src/tests/workflow-steps/overflow/index.html +++ b/packages/core/src/tests/workflow-steps/overflow/index.html @@ -4,9 +4,6 @@ SPDX-License-Identifier: MIT --> - diff --git a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts index ba01074e76e..b04a1593b77 100644 --- a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts +++ b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts @@ -7,9 +7,6 @@ * LICENSE file in the root directory of this source tree. */ -/* - * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED. - */ import { expect } from '@playwright/test'; import { regressionTest } from '@utils/test'; diff --git a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-dark-linux.png index b27aa87b98b..0cdbdc2833d 100644 Binary files a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-light-linux.png index 8549e86bc4d..19eadad888f 100644 Binary files a/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/workflow-steps/workflow-steps.e2e.ts-snapshots/workflow-steps-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 8e9c2030f45..88dd6f6e68b 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -660,7 +660,8 @@ export const IxWorkflowStep = /*@__PURE__*/ defineContainer( 'status', 'clickable', 'selected', - 'position' + 'position', + 'selectedChanged' ]);