feat(core): controlled behavior #1676
Conversation
🦋 Changeset detectedLatest commit: 1792cad The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
nuke-ellington
changed the title
.changeset/eighty-doors-wait.md
Outdated
| '@siemens/ix-vue': minor | ||
| --- | ||
|
|
||
| Expsose index of **ix-flip-tile** and add toggle event. |
There was a problem hiding this comment.
Do we already have a changeset for the prevent default?
| if (this.isFlipAnimationActive) { | ||
| return; | ||
| } | ||
|
|
||
| this.isFlipAnimationActive = true; | ||
|
|
||
| setTimeout(() => { |
There was a problem hiding this comment.
Should we clear the timeout if the animation is still active when disconnecting? Probably not necessary.
| test('should not open about', async ({ mount, page }) => { | ||
| await mount(` | ||
| <ix-menu> | ||
| <ix-menu-about> | ||
| </ix-menu-about> | ||
| </ix-menu> | ||
| `); | ||
| const element = page.locator('ix-menu'); | ||
|
|
||
| await element.evaluate((e) => { | ||
| e.addEventListener('openAbout', (event) => event.preventDefault()); | ||
| }); | ||
|
|
||
| const aboutButton = element.locator('ix-menu-item#aboutAndLegal'); | ||
| await aboutButton.click(); | ||
|
|
||
| let about = page.locator('ix-menu-about'); | ||
| await expect(about).not.toBeVisible(); | ||
| }); |
There was a problem hiding this comment.
Maybe add the settings test (should not open settings) to the menu.ct.ts
| const { defaultPrevented } = this.pageSelected.emit(this.selectedPage); | ||
|
|
||
| if (defaultPrevented) { | ||
| this.selectedPage = oldIndex; | ||
| } |
There was a problem hiding this comment.
Could we pull this part up so we don't have to reset the value later on?
| const { defaultPrevented } = this.emitInputEvent(); | ||
|
|
||
| if (defaultPrevented) { | ||
| this.rangeInput = oldValue; | ||
| this.slider.value = oldValue.toString(); | ||
| } |
There was a problem hiding this comment.
Could we pull this part up so we don't have to reset the value later on?
| const { defaultPrevented } = this.checkedChange.emit(this.checked); | ||
|
|
||
| if (defaultPrevented) { | ||
| this.indeterminate = wasIndeterminate; | ||
| this.checked = oldChecked; | ||
| } |
There was a problem hiding this comment.
Could we pull this part up so we don't have to reset the value later on?
| test('toggle - prevent default', async ({ mount, page }) => { | ||
| await mount(` | ||
| <ix-flip-tile> | ||
| <ix-flip-tile-content>Page 1</ix-flip-tile-content> | ||
| <ix-flip-tile-content>Page 2</ix-flip-tile-content> | ||
| </ix-flip-tile`); | ||
| const flipTile = page.locator('ix-flip-tile'); | ||
| await expect(flipTile).toHaveClass(/hydrated/); | ||
| await flipTile.evaluate((d: HTMLIxFlipTileElement) => | ||
| d.addEventListener('toggle', (event) => { | ||
| event.preventDefault(); | ||
| }) | ||
| ); | ||
| await flipTile.locator('ix-icon-button').click(); | ||
| await flipTile.evaluate((d: HTMLIxFlipTileElement) => (d.index = 1)); | ||
| const pageOne = flipTile.locator('ix-flip-tile-content').nth(0); | ||
| const pageTwo = flipTile.locator('ix-flip-tile-content').nth(1); | ||
| await expect(pageOne).toBeVisible(); | ||
| await expect(pageTwo).not.toBeVisible(); | ||
| }); |
There was a problem hiding this comment.
You test index prop in line 77. We could also add a additional test to test if the index really change the flip content
|
💡 What is the current behavior?
Checklist of components with internal state:
GitHub Issue Number: IX-1920
🆕 What is the new behavior?
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm run docs)pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support