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(ui5-wizard): replace resize observer with container query #7996

Merged
merged 2 commits into from
Jan 21, 2025
Merged

fix(ui5-wizard): replace resize observer with container query #7996

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
44b137d
fix(ui5-wizard): replace resize observer with container query
MapTo0 Dec 12, 2023
13c0fb5
Merge remote-tracking branch 'origin/main' into wizard-container-queries
MapTo0 Jan 15, 2025
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
22 changes: 0 additions & 22 deletions packages/fiori/src/Wizard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,12 @@ const STEP_SWITCH_THRESHOLDS = {
MAX: 1,
};

type ResponsiveBreakpoints = {
[key: string]: string,
}

type WizardStepChangeEventDetail = {
step: WizardStep,
previousStep: WizardStep,
withScroll: boolean,
}

const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
"0": "S",
"599": "M",
"1023": "L",
"1439": "XL",
};

type AccessibilityInformation = {
ariaSetsize: number,
ariaPosinset: number,
Expand Down Expand Up @@ -257,9 +246,6 @@ class Wizard extends UI5Element {
@property({ type: Array })
_groupedTabs: Array<WizardTab> = [];

@property()
_breakpoint?: string

/**
* Defines the steps.
*
Expand Down Expand Up @@ -486,8 +472,6 @@ class Wizard extends UI5Element {

this._prevWidth = this.width;
this._prevContentHeight = this.contentHeight;

this._calcCurrentBreakpoint();
}

attachStepsResizeObserver() {
Expand All @@ -503,12 +487,6 @@ class Wizard extends UI5Element {
});
}

_calcCurrentBreakpoint() {
const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
const breakpoint = breakpointDimensions.find((size: string) => Number(size) < this.width!);
this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["0"];
}

/**
* Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
* @private
Expand Down
61 changes: 37 additions & 24 deletions packages/fiori/src/themes/Wizard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,43 @@
height: 100%;
width: 100%;
overflow: auto;
}

:host([_breakpoint="S"])::part(navigator),
:host([_breakpoint="S"])::part(step-content) {
padding-left: 1rem;
padding-right: 1rem;
}

:host([_breakpoint="M"])::part(navigator),
:host([_breakpoint="M"])::part(step-content) {
padding-left: 2rem;
padding-right: 2rem;
}

:host([_breakpoint="L"])::part(navigator),
:host([_breakpoint="L"])::part(step-content) {
padding-left: 2rem;
padding-right: 2rem;
}

:host([_breakpoint="XL"])::part(navigator),
:host([_breakpoint="XL"])::part(step-content) {
padding-left: 3rem;
padding-right: 3rem;
container-type: inline-size;
}

/* S Size */
@container (max-width: 599px) {
:host::part(navigator),
:host::part(step-content) {
padding-left: 1rem;
padding-right: 1rem;
}
}

/* M Size */
@container (min-width: 600px) and (max-width: 1023px) {
:host::part(navigator),
:host::part(step-content) {
padding-left: 2rem;
padding-right: 2rem;
}
}

/* L Size */
@container (min-width: 1024px) and (max-width: 1439px) {
:host::part(navigator),
:host::part(step-content) {
padding-left: 2rem;
padding-right: 2rem;
}
}

/* XL Size */
@container (min-width: 1440px) {
:host::part(navigator),
:host::part(step-content) {
padding-left: 3rem;
padding-right: 3rem;
}
}

.ui5-wiz-root {
Expand Down
21 changes: 0 additions & 21 deletions packages/fiori/test/specs/Wizard.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,27 +404,6 @@ describe("Wizard general interaction", () => {
assert.ok(await disabledPopover.isDisplayedInViewport(), "Popover is opened.");
});

it("tests responsive paddings", async () => {
await browser.url(`test/pages/Wizard.html`);
const wizard = $("#wiz");

// resize window S
await browser.setWindowSize(500, 1000);
assert.strictEqual(await wizard.getProperty("_breakpoint"), "S", "Small breakpoint is enabled");

// resize window M
await browser.setWindowSize(1000, 1000);
assert.strictEqual(await wizard.getProperty("_breakpoint"), "M", "Medium breakpoint is enabled");

// resize window L
await browser.setWindowSize(1200, 1000);
assert.strictEqual(await wizard.getProperty("_breakpoint"), "L", "Large breakpoint is enabled");

// resize window XL
await browser.setWindowSize(1600, 1000);
assert.strictEqual(await wizard.getProperty("_breakpoint"), "XL", "Extra Large breakpoint is enabled");
});

it("WizardPageMode: move to next step", async () => {
await browser.url(`test/pages/WizardPageMode_test.html`);

Expand Down
Loading