Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(stepper): fix layout when switching modes dynamically to horizontal-single #8946

Merged
merged 2 commits into from
Mar 15, 2024
Merged

fix(stepper): fix layout when switching modes dynamically to horizontal-single #8946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22c6e58
fix(stepper): fix layout when switching modes
jcfranco Mar 15, 2024
cb0749f
add test
jcfranco Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/calcite-components/src/components/stepper/stepper.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -858,5 +858,34 @@ describe("calcite-stepper", () => {
await page.waitForChanges();
expect(eventSpy).toHaveReceivedEventTimes(2);
});

it(`switching to layout="horizontal-single" dynamically from another option should display a single item (#8931)`, async () => {
const page = await newE2EPage();
await page.setContent(
html`
<calcite-stepper layout="horizontal">
<calcite-stepper-item heading="Step 1" selected>
<div>Step 1 content</div>
</calcite-stepper-item>
<calcite-stepper-item heading="Step 2">
<div>Step 2 content</div>
</calcite-stepper-item>
<calcite-stepper-item heading="Step 3">
<div>Step 3 content</div>
</calcite-stepper-item>
<calcite-stepper-item heading="Review">
<div>Step 4 content</div>
</calcite-stepper-item>
</calcite-stepper>
</calcite-stepper>`,
);

const stepper = await page.find("calcite-stepper");
await stepper.setProperty("layout", "horizontal-single");
await page.waitForChanges();

const displayedItems = await page.findAll("calcite-stepper-item:not([hidden])");
expect(displayedItems.length).toBe(1);
});
});
});
35 changes: 10 additions & 25 deletions packages/calcite-components/src/components/stepper/stepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
@Watch("scale")
handleItemPropChange(): void {
this.updateItems();
this.determineActiveStepper();
}

/**
Expand Down Expand Up @@ -150,7 +151,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
}

componentDidLoad(): void {
this.resizeObserver?.observe(this.containerEl);
// if no stepper items are set as active, default to the first one
if (typeof this.currentActivePosition !== "number") {
const enabledStepIndex = this.getFirstEnabledStepperPosition();
Expand All @@ -166,7 +166,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
}

disconnectedCallback(): void {
this.resizeObserver?.disconnect();
disconnectMessages(this);
disconnectLocalized(this);
this.mutationObserver?.disconnect();
Expand Down Expand Up @@ -356,15 +355,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
});
}

@State() elWidth: number;

@Watch("elWidth")
handleElWidthChange(): void {
readTask((): void => {
this.determineActiveStepper();
});
}

private enabledItems: HTMLCalciteStepperItemElement[] = [];

private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
Expand All @@ -386,11 +376,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
//
//--------------------------------------------------------------------------

private resizeObserver = createObserver(
"resize",
(entries) => (this.elWidth = entries[0].contentRect.width),
);

private updateItems(): void {
this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
item.icon = this.icon;
Expand All @@ -401,18 +386,18 @@ export class Stepper implements LocalizedComponent, T9nComponent {
}

private determineActiveStepper(): void {
const totalItems = this.items.length;
if (!this.elWidth || !totalItems || this.layout !== "horizontal-single" || totalItems === 1) {
const { items } = this;

if (items.length < 2) {
return;
}
const activePosition = this.currentActivePosition || 0;

if (this.layout === "horizontal-single") {
this.multipleViewMode = false;
this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
item.hidden = index !== activePosition;
});
}
const { currentActivePosition, layout } = this;

this.multipleViewMode = layout !== "horizontal-single";
items.forEach((item, index) => {
item.hidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use an internal property instead of hidden? This would overwrite any user defined hidden attributes/properties. Feel free to defer to another issue :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I totally thought of #8623 when I updated this. 🧠 It covers stepper already, so will defer to that issue.

});
}

private getEnabledStepIndex(
Expand Down
Loading