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

Jump to bottom

feat(ui5-panel): panel sticky header implementation #7313

Merged
merged 12 commits into from
Jul 25, 2023
Merged

feat(ui5-panel): panel sticky header implementation #7313

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6d437d4
feat(ui5-panel): panel sticky header implementation
Okiana Jul 11, 2023
9b10e72
feat(ui5-panel): update comments
Okiana Jul 12, 2023
8706711
feat(ui5-panel): panel sticky header implementation
Okiana Jul 18, 2023
0bb400a
feat(ui5-panel): add forgotten comma
Okiana Jul 18, 2023
9b4f2d5
feat(ui5-panel): update comments - restore empty lines
Okiana Jul 18, 2023
e4cdcad
feat(ui5-panel): update comments - restore empty lines
Okiana Jul 18, 2023
ae05f95
feat(ui5-panel): update test and fix wrong theme
Okiana Jul 19, 2023
0d52ce3
feat(ui5-panel): update property description
Okiana Jul 19, 2023
4c541a8
feat(ui5-panel): update parameters - use the one which
Okiana Jul 20, 2023
b026001
Merge branch 'main' of github.com:SAP/ui5-webcomponents into panelSti…
Okiana Jul 24, 2023
441a9cf
feat(ui5-panel): use max-height + add story
Okiana Jul 25, 2023
832029d
feat(ui5-panel): comment update
Okiana Jul 25, 2023
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
13 changes: 13 additions & 0 deletions packages/main/src/themes/Panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,13 @@
width: 100%;
}

.ui5-panel-heading-wrapper {
position: sticky;
top: 0px;
Okiana marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--_ui5_panel_header_background_color);
Okiana marked this conversation as resolved.
Show resolved Hide resolved
z-index: 100;
}

.ui5-panel-header-title {
width: calc(100% - var(--_ui5_panel_button_root_width));
overflow: hidden;
Expand Down Expand Up @@ -136,4 +143,10 @@
.ui5-panel-header-icon-wrapper,
[ui5-button].ui5-panel-header-button-with-icon [ui5-icon] {
pointer-events: none;
}

.ui5-panel-root {
height: 100%;
display: flex;
flex-direction: column;
}
1 change: 1 addition & 0 deletions packages/main/src/themes/sap_belize/Panel-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
:root {
--_ui5_panel_header_padding_right: 1rem;
--_ui5_panel_header_height: 3rem;
--_ui5_panel_header_background_color: var(--sapList_HeaderBackground);
Okiana marked this conversation as resolved.
Show resolved Hide resolved
}

[data-ui5-compact-size],
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/themes/sap_fiori_3/Panel-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@

:root {
--_ui5_panel_button_root_width: 2.75rem;
--_ui5_panel_header_background_color: var(--sapBackgroundColor);
}
1 change: 1 addition & 0 deletions packages/main/src/themes/sap_horizon/Panel-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@
--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);
--_ui5_panel_focus_offset: -1px;
--_ui5_panel_content_padding: 0.625rem 1rem;
--_ui5_panel_header_background_color: var(--sapToolbar_Background);
Okiana marked this conversation as resolved.
Show resolved Hide resolved
}
4 changes: 4 additions & 0 deletions packages/main/test/pages/styles/Panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
.panel1auto {
background-color: var(--sapBackgroundColor);
}

ui5-panel::part(content) {
height: 70px;
}
14 changes: 12 additions & 2 deletions packages/main/test/specs/Panel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,18 @@ describe("Panel general interaction", () => {
assert.notOk(await panelWithoutAnimationIcon.hasClass("ui5-panel-header-button-animated"), "Animation is turn off");
});

it("Test that the header is sticky", async () => {
Okiana marked this conversation as resolved.
Show resolved Hide resolved
const panel = await browser.$("#panel-fixed");
const title = await panel.shadow$(".ui5-panel-header-title");
const sExpected = "New text";

const panelHeader = panel.shadow$(".ui5-panel-heading-wrapper");
const isSticky = await browser.execute("return window.getComputedStyle(document.querySelector('#panel-fixed').shadowRoot.querySelector('.ui5-panel-heading-wrapper')).position");

assert.strictEqual(await title.getText(), sExpected, "Initially the text is the expected one");
assert.strictEqual(isSticky, "sticky", "Assert that the header has a sticky position");
});

describe("Accessibility", async () => {

it("tests whether aria attributes are set correctly with native header", async () => {
Expand All @@ -138,7 +150,6 @@ describe("Panel general interaction", () => {
done(panel.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.PANEL_ICON));
});


Okiana marked this conversation as resolved.
Show resolved Hide resolved
assert.strictEqual(await panelRoot.getAttribute("role"), "form", "The correct accessible role is applied");

assert.strictEqual(await button.getTagName(), "ui5-icon", "ui5-icon should be rendered");
Expand All @@ -161,7 +172,6 @@ describe("Panel general interaction", () => {
const fixedPanelHeader = await fixedPanel.shadow$(".ui5-panel-header");
const fixedPanelHeaderTitle = await fixedPanel.shadow$(".ui5-panel-header-title");
const fixedPanelHeaderTitleId = await fixedPanelHeaderTitle.getProperty("id");

Okiana marked this conversation as resolved.
Show resolved Hide resolved

assert.strictEqual(await nativeHeader.getAttribute("aria-labelledby"),
`${panelWithNativeHeaderId}-header-title`, "aria-labelledby is correct");
Expand Down
Loading