feat(ui5-dynamic-page): introduce new component #7899

dobrinyonkov · 2023-11-22T09:20:27Z

New `ui5-dynamic-page` component.

The component is a composition of the following subcomponents:

DynamicPageTitle - holds the most top area of DynamicPage (breadcrumbs, actions, etc.)
DynamicPageHeader - a container displayed between the title area and the content that allows generic contet.
DynamicPageHeaderActions (private) - abstraction of the expand and pin header buttons, allowing for better reusability when state is expanded or collpased.

)

…dynamic-page-petya

…#7845) * feat(ui5-dynamic-page): ensure visibility of title content that never overflows * feat(ui5-dynamic-page) actions style corrected Co-authored-by: Dobrin Dimchev <[email protected]> * feat(ui5-dynamic-page): sizing of toolbar wrappers corrected * feat(ui5-dynamic-page): apply review feedback --------- Co-authored-by: Dobrin Dimchev <[email protected]>

…dynamic-page-petya

* feat(ui5-dynamic-page): prevent unnecessary content overflow when footer hidden * feat(ui5-dynamic-page): move scroll listener to the new scroll container

* feat(ui5-dynamic-page): fit content that has 100% height * feat(ui5-dynamic-page): correct import * feat(ui5-dynamic-page): add tests

* feat(ui5-dynamic-page): keyboard handling * feat(ui5-dynamic-page): add focus span * fix: add expand and focus on title click --------- Co-authored-by: Dobrin Dimchev <[email protected]>

fix(ui5-dynamic-page): apply theme styles Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

* feat(ui5-dynamic-page): screen reader support * feat(ui5-dynamic-page): add tests

fix(ui5-dynamic-page): story and docs added Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

…page

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Different pinned state visual indicator added based on the theme Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

nnaydenow

Expand / collapse, pin buttons are visible even if header is not used
Title is missing visual separator (shadow) when header doesn't exist
If the header is snapped while the user is at the top of the page, it can't be expanded via scroll (deviation with openui5)
If the user starts to scroll from the position where header is snapped (basically around 0-5 top) and scroll a bit up the whole header appear.
Hovering expand / collapse button doesn't change ui5-dynamic-page-title background color
action button appear over content on mobile

packages/fiori/src/DynamicPage.ts

nnaydenow · 2024-05-02T10:56:31Z

packages/fiori/src/DynamicPageTitle.ts

+
+	prepareLayoutActions() {
+		// all navigation/layout actions should have the NeverOverflow behavior
+		const navigationActions = this.querySelector<Toolbar>("[ui5-toolbar][slot='navigationActions']");


why do we need to use querySelector here instead of this.navigationActions. In the documentation of the slot it's not described that we expect ui5-toolbar so if we do it we can describe the slot as:

@slot({ type: HTMLElement }) navigationActions!: Array<Toolbar>;

If you expect toolbar to be assigned to actions / navigationActions it would be good to rename them to navigationBar/actionsBar otherwise it will be confused because I would assume that i have to pass ui5-button instead of ui5-toolbar

nnaydenow · 2024-05-11T13:33:44Z

I was thinking if it’s a good idea to provide parts for the main areas since they have responsive paddings by default

ilhan007 · 2024-05-13T09:02:09Z

provide parts for the main areas

We had such requirements for the TabContainer in the past - it also implements responsive paddings, but still consumers wanted to clear them for some reason. So I think - it's ok to include them.

ilhan007 · 2024-05-15T08:30:19Z

packages/fiori/src/DynamicPageTitle.ts

+	 * @public
+	 */
+	@slot({ "default": true, type: HTMLElement })
+	content!: HTMLElement[];


How we use content, expandedContent and snappedContent, isn't only 2 states expended and snapped and two slots enough

ilhan007 · 2024-05-15T08:30:59Z

packages/fiori/src/DynamicPageTitle.ts

+	/**
+	 * Defines the content of the Heading of the Dynamic Page.
+	 *
+	 * @public


How we use heading, expendedHeading, snappedHeading, isn't only 2 states expended and snapped and two slots enough

nnaydenow · 2024-05-02T11:37:51Z

packages/website/docs/_components_pages/fiori/DynamicPage/DynamicPage.mdx

@@ -0,0 +1,8 @@
+import Basic from "../../../_samples/fiori/DynamicPage/Basic/Basic.md";
+


add slug in frontmatter format for all dynamic page components

nnaydenow · 2024-05-15T08:42:31Z

packages/fiori/src/DynamicPageTitle.ts

+
+	prepareLayoutActions() {
+		// all navigation/layout actions should have the NeverOverflow behavior
+		const navigationActions = this.querySelector<Toolbar>("[ui5-toolbar][slot='navigationActions']");


If you expect toolbar to be assigned to actions / navigationActions it would be good to rename them to navigationBar/actionsBar otherwise it will be confused because I would assume that i have to pass ui5-button instead of ui5-toolbar

* test: test solution * fix(dynamic-page): final review --------- Co-authored-by: Dobrin Dimchev <[email protected]> Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

nnaydenow · 2024-05-27T09:25:52Z

I found 2 more issues:

Wrong visual appearance of navigation bar when ui5-dynamic-page doesn't have breadcrumbs:

<ui5-dynamic-page show-footer>
    <ui5-dynamic-page-title slot="titleArea">
        <ui5-title slot="heading">...</ui5-title>
        <div slot="snappedHeading">...</div>
        <p slot="content">...</p>
        <p slot="snappedContent">...</p>
        <ui5-tag color-scheme="7">...</ui5-tag>
        <ui5-toolbar slot="actionsBar">...</ui5-toolbar>
        <ui5-toolbar slot="navigationBar">
            <ui5-toolbar-button design="Transparent" icon="share"></ui5-toolbar-button>
            <ui5-toolbar-button design="Transparent" icon="action-settings"></ui5-toolbar-button>
        </ui5-toolbar>
    </ui5-dynamic-page-title>
    <ui5-dynamic-page-header slot="headerArea">
        ...
    </ui5-dynamic-page-header>
    <ui5-list>
        ...
    </ui5-list>
    <ui5-bar slot="footerArea" design="FloatingFooter">
        ...
    </ui5-bar>
</ui5-dynamic-page>

ui5-dynamic-page-title is clickable/toggleable when ui5-dynamic-page-header doesn't exist in ui5-dynamic-page

<ui5-dynamic-page show-footer>
    <ui5-dynamic-page-title slot="titleArea">
        <ui5-title slot="heading">...</ui5-title>
        <div slot="snappedHeading">...</div>
        <p slot="content">...</p>
        <p slot="snappedContent">...</p>
        <ui5-tag color-scheme="7">...</ui5-tag>
        <ui5-toolbar slot="actionsBar">...</ui5-toolbar>
        <ui5-toolbar slot="navigationBar">
            <ui5-toolbar-button design="Transparent" icon="share"></ui5-toolbar-button>
            <ui5-toolbar-button design="Transparent" icon="action-settings"></ui5-toolbar-button>
        </ui5-toolbar>
    </ui5-dynamic-page-title>
    <ui5-list>
        ...
    </ui5-list>
    <ui5-bar slot="footerArea" design="FloatingFooter">
        ...
    </ui5-bar>
</ui5-dynamic-page>

* fix(dynamic-page): more semantic slot names --------- Co-authored-by: PetyaMarkovaBogdanova <[email protected]> Co-authored-by: Dobrin Dimchev <[email protected]>

dobrinyonkov · 2024-05-27T14:25:41Z

Thanks for pointing those out @nnaydenov, they are fixed now.

outdated

dobrinyonkov and others added 22 commits September 28, 2023 15:14

test: do not merge

048c87e

feat(ui5-dynamic-page): poc

8e4f638

feat(ui5-dynamic-page): snap on scroll pin expand collapse

0b42d7d

feat(ui5-dynamic-page): add floating footer styling and animation (#7857

c792b0f

)

feat(ui5-dynamic-page): snap on scroll pin expand collapse

20b3b21

feat(ui5-dynamic-page): add breadcrumbs responsiveness (#7844)

d488bd3

Merge branch 'dynamic-page' of github.com:SAP/ui5-webcomponents into …

13d66e1

…dynamic-page-petya

Merge github.com:SAP/ui5-webcomponents into dynamic-page-petya

e07c78c

Merge remote-tracking branch 'origin/main' into dynamic-page

2c16bae

Merge branch 'dynamic-page' of github.com:SAP/ui5-webcomponents into …

51947ad

…dynamic-page-petya

feat(ui5-dynamic-page): footer no longer takes space when hidden (#7904)

b7cd4ff

* feat(ui5-dynamic-page): prevent unnecessary content overflow when footer hidden * feat(ui5-dynamic-page): move scroll listener to the new scroll container

feat(ui5-dynamic-page): add header padding (#7921)

18cccb2

feat(ui5-dynamic-page): add responsive paddings (#7923)

9670fab

Merge remote-tracking branch 'origin/main' into dynamic-page

7d96f0f

build: align with new build process

e12bb91

feat(ui5-dynamic-page): fit content that has 100% height (#7928)

4b72ed9

* feat(ui5-dynamic-page): fit content that has 100% height * feat(ui5-dynamic-page): correct import * feat(ui5-dynamic-page): add tests

feat(ui5-dynamic-page): keyboard handling (#7990)

f379b8e

* feat(ui5-dynamic-page): keyboard handling * feat(ui5-dynamic-page): add focus span * fix: add expand and focus on title click --------- Co-authored-by: Dobrin Dimchev <[email protected]>

fix(ui5-dynamic-page): theme styling (#7966)

3e908d5

fix(ui5-dynamic-page): apply theme styles Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

feat(ui5-dynamic-page): screen reader support (#7997)

11033f5

* feat(ui5-dynamic-page): screen reader support * feat(ui5-dynamic-page): add tests

feat(ui5-dynamic-page): add general interaction tests (#8056)

076ba19

docs(ui5-dynamic-page): story and docs added (#8031)

3aeebde

fix(ui5-dynamic-page): story and docs added Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

PetyaMarkovaBogdanova force-pushed the dynamic-page branch from e38bacd to 3aeebde Compare January 17, 2024 12:56

kineticjs and others added 6 commits January 22, 2024 13:23

feat(ui5-dynamic-page): add general API tests (#8115)

3bba872

Merge branch 'main' of github.com:SAP/ui5-webcomponents into dynamic-…

810b08d

…page

feat(ui5-dynamic-page): proper docs added (#8130)

b47f38b

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Merge remote-tracking branch 'origin/main' into dynamic-page

c672749

chore: align docs to new build scripts

cfbd2c9

chore: use framework's debounce method

c70080e

dobrinyonkov force-pushed the dynamic-page branch from 66a3441 to c70080e Compare February 5, 2024 10:25

PetyaMarkovaBogdanova and others added 4 commits April 22, 2024 15:47

fix(dynamic-page): focus aligned to new standard (#8775)

d5d2732

Different pinned state visual indicator added based on the theme Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

fix(ui5-dynamic-page): header box-shadow fixed (#8820)

54ce820

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Merge remote-tracking branch 'origin/main' into dynamic-page

cdd9911

feat: rename events

5755541

ilhan007 added this to the 2.0.0 milestone Apr 30, 2024

nnaydenow reviewed Apr 30, 2024

View reviewed changes

packages/fiori/src/DynamicPage.ts Outdated Show resolved Hide resolved

nnaydenow reviewed May 2, 2024

View reviewed changes

ilhan007 reviewed May 15, 2024

View reviewed changes

nnaydenow previously requested changes May 15, 2024

View reviewed changes

PetyaMarkovaBogdanova and others added 3 commits May 15, 2024 19:47

fix(dynamic-page): final review visual issues (#8973)

e2cdb48

* test: test solution * fix(dynamic-page): final review --------- Co-authored-by: Dobrin Dimchev <[email protected]> Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Merge remote-tracking branch 'origin' into dynamic-page

2a9cebc

Merge remote-tracking branch 'origin/main' into dynamic-page

4f91a7e

PetyaMarkovaBogdanova and others added 6 commits May 27, 2024 14:02

fix(dynamic-page): more semantic slot names (#8993)

e3d4451

* fix(dynamic-page): more semantic slot names --------- Co-authored-by: PetyaMarkovaBogdanova <[email protected]> Co-authored-by: Dobrin Dimchev <[email protected]>

chore: restore header in sample

eb35474

chore: restore slot names in sample

a83fe7e

fix: possition nav actions on right

46fdf50

feat: add css parts

af797ee

chore: restore conten wrapper in hbs

974794f

dobrinyonkov added 2 commits May 28, 2024 15:54

chore: rename slot to subheading

3b247dc

docs: jsdocs

f2bc682

dobrinyonkov requested a review from nnaydenow May 28, 2024 13:24

ilhan007 approved these changes May 29, 2024

View reviewed changes

ilhan007 merged commit 3752ce7 into main May 29, 2024
10 checks passed

ilhan007 deleted the dynamic-page branch May 29, 2024 14:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui5-dynamic-page): introduce new component #7899

feat(ui5-dynamic-page): introduce new component #7899

dobrinyonkov commented Nov 22, 2023 •

edited

Loading

nnaydenow left a comment •

edited

Loading

nnaydenow May 2, 2024

nnaydenow May 15, 2024

nnaydenow commented May 11, 2024

ilhan007 commented May 13, 2024 •

edited

Loading

ilhan007 May 15, 2024

ilhan007 May 15, 2024

nnaydenow May 2, 2024

nnaydenow May 15, 2024

nnaydenow commented May 27, 2024 •

edited

Loading

dobrinyonkov commented May 27, 2024

		@@ -0,0 +1,8 @@
		import Basic from "../../../_samples/fiori/DynamicPage/Basic/Basic.md";

feat(ui5-dynamic-page): introduce new component #7899

feat(ui5-dynamic-page): introduce new component #7899

Conversation

dobrinyonkov commented Nov 22, 2023 • edited Loading

New ui5-dynamic-page component.

nnaydenow left a comment • edited Loading

Choose a reason for hiding this comment

nnaydenow May 2, 2024

Choose a reason for hiding this comment

nnaydenow May 15, 2024

Choose a reason for hiding this comment

nnaydenow commented May 11, 2024

ilhan007 commented May 13, 2024 • edited Loading

ilhan007 May 15, 2024

Choose a reason for hiding this comment

ilhan007 May 15, 2024

Choose a reason for hiding this comment

nnaydenow May 2, 2024

Choose a reason for hiding this comment

nnaydenow May 15, 2024

Choose a reason for hiding this comment

nnaydenow commented May 27, 2024 • edited Loading

dobrinyonkov commented May 27, 2024

dobrinyonkov commented Nov 22, 2023 •

edited

Loading

New `ui5-dynamic-page` component.

nnaydenow left a comment •

edited

Loading

ilhan007 commented May 13, 2024 •

edited

Loading

nnaydenow commented May 27, 2024 •

edited

Loading