feat: add dialog title, header and footer renderers #3623

DiegoCardoso · 2022-03-30T08:29:41Z

Description

Adds new features to dialog:

New header and footer parts
Title property (headerTitle)
Two new renderers (headerRenderer and footerRenderer)

Fixes #1513

Type of change

Bugfix
Feature

Additional for `Feature` type of change

Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.

packages/dialog/src/vaadin-dialog-footer.js

packages/dialog/src/vaadin-dialog-header.js

packages/dialog/src/vaadin-dialog.js

packages/dialog/src/vaadin-dialog-footer.js

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

DiegoCardoso · 2022-03-31T15:17:37Z

The PR is almost ready.

Missing:

Visual tests
JSdoc
Type definition

packages/dialog/src/vaadin-dialog.js

packages/dialog/test/header-footer.test.js

packages/dialog/theme/material/vaadin-dialog-styles.js

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

DiegoCardoso

FIxed review suggestions. I will check again if there's any left.

packages/dialog/src/vaadin-dialog.js

packages/dialog/test/header-footer.test.js

packages/dialog/src/vaadin-dialog.js

sonarcloud · 2022-04-01T13:34:58Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
0.0% Duplication

DiegoCardoso · 2022-04-04T06:20:36Z

packages/dialog/src/vaadin-dialog.js

+  _headerTitleRenderer() {
+    if (this.headerTitle) {
+      if (!this.headerTitleElement) {
+        this.headerTitleElement = document.createElement('span');


I was checking some component libraries and the ones I found use <h2> for the dialog title. Should we use it here, as well? @jouni @web-padawan

Examples:

https://www.material.io/components/dialogs

https://www.radix-ui.com/docs/primitives/components/dialog

We have a similar issue for vaadin-confirm-dialog header level (currently hardcoded to <h3>) and here is a comment that suggests not to hardcode it but let the developer choose: #467 (comment).

Let's create a follow-up issue and discuss this separately to not block this PR.

vaadin-bot · 2022-04-14T07:24:22Z

This ticket/PR has been released with Vaadin 23.1.0.alpha1 and is also targeting the upcoming stable 23.1.0 version.

DiegoCardoso added 4 commits March 29, 2022 17:12

feat: add headerTitle and headerRenderer

75e292e

feat: add footerRenderer

f1d6732

feat: add Lumo and Material styles for header and footer

e71d2fd

feat: make headerTitle draggable

a1713b9

jouni reviewed Mar 30, 2022

View reviewed changes

web-padawan reviewed Mar 30, 2022

View reviewed changes

packages/dialog/src/vaadin-dialog.js Outdated Show resolved Hide resolved

packages/dialog/src/vaadin-dialog.js Outdated Show resolved Hide resolved

packages/dialog/src/vaadin-dialog.js Outdated Show resolved Hide resolved

tomivirkki reviewed Mar 30, 2022

View reviewed changes

packages/dialog/src/vaadin-dialog-footer.js Outdated Show resolved Hide resolved

DiegoCardoso and others added 9 commits March 30, 2022 18:25

refactor: remove header/footer root when not used

4ff9ccf

fix: reattach root when renderer changes

3f75b9b

fix: make padding smaller on top/bottom for header/footer

9fec705

fix: only apply content styles when header/footer exist

7e1980c

refactor: remove header/footer custom elements

c770bff

Apply suggestions from code review

f61f1bc

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

fix: avoid conflicts with confirm-dialog

b66a2b2

fix: set display:none to empty parts

f2ba7c0

test: add tests for header and footer feature

ddcbb96

web-padawan reviewed Apr 1, 2022

View reviewed changes

web-padawan and others added 9 commits April 1, 2022 12:15

feat: add TS definitions for new properties

c6a8bc1

docs: add jsdoc to the new properties

3c663fa

fix: apply suggestions from code review

07258f0

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

fix: add material color import

64e21fe

refactor: use helper function to create renderers

08d20fe

chore: fix lint, align JSDoc annotations

c6daddb

test: remove template, use not animated styles

bd3483f

test: add visual tests for new dialog API

1f80c92

refactor: simplify CSS selectors

279cd98

web-padawan changed the title ~~feat: Dialog header and footer~~ feat: add dialog title, header and footer renderers Apr 1, 2022

fix: set unique id for title. remove arial attr

2e7e14c

DiegoCardoso commented Apr 1, 2022

View reviewed changes

DiegoCardoso marked this pull request as ready for review April 1, 2022 11:15

web-padawan and others added 6 commits April 1, 2022 14:40

docs: document new parts and attributes

37c5c6b

chore: update JSDoc for requestContentUpdate

0fecafd

refactor: simplify dialog overlay logic

188a741

docs: mark private methods

2d9f101

refactor: remove duplication on container creation

16a1353

refactor: rename method and make it private

ba983de

DiegoCardoso commented Apr 4, 2022

View reviewed changes

web-padawan approved these changes Apr 4, 2022

View reviewed changes

web-padawan merged commit 8478452 into master Apr 4, 2022

web-padawan deleted the feat/dialog-header-footer branch April 4, 2022 07:18

web-padawan mentioned this pull request Apr 4, 2022

[dialog] Add web component logic for supporting header and footer #3561

Closed

DiegoCardoso mentioned this pull request Apr 4, 2022

[dialog] Consider using h* tag for the title element #3629

Closed

vaadin-bot added Released with Vaadin 23.1.0.alpha1 prerelease version for Vaadin 23.1.0 labels Apr 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add dialog title, header and footer renderers #3623

feat: add dialog title, header and footer renderers #3623

DiegoCardoso commented Mar 30, 2022 •

edited

Loading

DiegoCardoso commented Mar 31, 2022 •

edited

Loading

DiegoCardoso left a comment

sonarcloud bot commented Apr 1, 2022

DiegoCardoso Apr 4, 2022 •

edited

Loading

web-padawan Apr 4, 2022

web-padawan Apr 4, 2022

vaadin-bot commented Apr 14, 2022

feat: add dialog title, header and footer renderers #3623

feat: add dialog title, header and footer renderers #3623

Conversation

DiegoCardoso commented Mar 30, 2022 • edited Loading

Description

Type of change

Additional for Feature type of change

DiegoCardoso commented Mar 31, 2022 • edited Loading

DiegoCardoso left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Apr 1, 2022

DiegoCardoso Apr 4, 2022 • edited Loading

Choose a reason for hiding this comment

web-padawan Apr 4, 2022

Choose a reason for hiding this comment

web-padawan Apr 4, 2022

Choose a reason for hiding this comment

vaadin-bot commented Apr 14, 2022

DiegoCardoso commented Mar 30, 2022 •

edited

Loading

Additional for `Feature` type of change

DiegoCardoso commented Mar 31, 2022 •

edited

Loading

DiegoCardoso Apr 4, 2022 •

edited

Loading