Skip to content

feat(ui5-dialog): add fullscreen toggle button#13691

Open
kskondov wants to merge 24 commits into
mainfrom
ui5-dialog-fullscreen
Open

feat(ui5-dialog): add fullscreen toggle button#13691
kskondov wants to merge 24 commits into
mainfrom
ui5-dialog-fullscreen

Conversation

@kskondov

@kskondov kskondov commented Jun 12, 2026 •
edited by TeodorTaushanov
Loading

Copy link
Copy Markdown
Contributor

The dialog now supports a fullscreen toggle button in the header, controlled by the showFullscreenButton property. The button toggles the stretch property and is not available on phone devices.

  • Keyboard shortcut: Shift+Ctrl+F
  • Double-click on header toggles fullscreen
  • Button shows Maximize/Restore tooltip and aria-keyshortcuts
  • Resets drag/resize state when toggling

JIRA: BGSOFUIRODOPI-3680

@kskondov
feat(ui5-dialog): add fullscreen toggle button
15b2f74 
The dialog now supports a fullscreen toggle button in the header,
controlled by the `showFullscreenButton` property. The button toggles
the `stretch` property and is not available on phone devices.

- Keyboard shortcut: Shift+Ctrl+F
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling
@kskondov kskondov temporarily deployed to netlify-preview June 12, 2026 14:30 — with GitHub Actions Inactive
@kskondov kskondov requested a review from a team June 12, 2026 14:30
@sap-ui5-webcomponents-release

sap-ui5-webcomponents-release Bot commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown

🚀 Deployed on https://pr-13691--ui5-webcomponents-preview.netlify.app

@kskondov
feat(ui5-dialog): add fullscreen toggle button
3aab8a0 
Adds a padding-inline-end to prevents header content from overlapping with the button
@kskondov kskondov temporarily deployed to netlify-preview June 12, 2026 14:42 — with GitHub Actions Inactive
@kskondov kskondov temporarily deployed to netlify-preview June 12, 2026 15:13 — with GitHub Actions Inactive
@kskondov kskondov temporarily deployed to netlify-preview June 15, 2026 07:34 — with GitHub Actions Inactive
kskondov added 2 commits June 15, 2026 13:14
@kskondov
feat(ui5-dialog): add fullscreen toggle button
c7a9443 
Lint and bug fixes
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling
@kskondov
Merge branch 'ui5-dialog-fullscreen' of github.com:SAP/ui5-webcompone…
b75d57d 
…nts into ui5-dialog-fullscreen
TeodorTaushanov
TeodorTaushanov requested changes Jun 15, 2026
View reviewed changes

@TeodorTaushanov TeodorTaushanov left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We should wait for #13632 to be merged.

Comment thread packages/main/src/themes/Dialog.css Outdated
@kskondov kskondov temporarily deployed to netlify-preview June 15, 2026 11:30 — with GitHub Actions Inactive
@kskondov
feat(ui5-dialog): add fullscreen toggle button
d77f4e5 
Removes absolute positioning and and adds fullscreen spacing instead of offset
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling
@kskondov kskondov temporarily deployed to netlify-preview June 15, 2026 11:58 — with GitHub Actions Inactive
@kskondov kskondov requested a review from TeodorTaushanov June 15, 2026 11:58
@kskondov kskondov temporarily deployed to netlify-preview June 15, 2026 12:39 — with GitHub Actions Inactive
TeodorTaushanov
TeodorTaushanov requested changes Jun 17, 2026
View reviewed changes

@TeodorTaushanov TeodorTaushanov left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

the fullscreen button shouldn't be rendered, when a custom header is defined:

<ui5-dialog id="fullscreen-dialog" show-fullscreen-button draggable resizable>
		<div slot="header">Fullscreen Dialog</div>

@kskondov kskondov temporarily deployed to netlify-preview June 17, 2026 13:11 — with GitHub Actions Inactive
@kskondov
feat(ui5-dialog): add fullscreen toggle button
1b2bb06 
disable fullscreen button if custom header is provided
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling
@kskondov kskondov temporarily deployed to netlify-preview June 17, 2026 13:15 — with GitHub Actions Inactive
@kskondov kskondov requested a review from TeodorTaushanov June 17, 2026 13:22
@kskondov

kskondov commented Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

the fullscreen button shouldn't be rendered, when a custom header is defined:

<ui5-dialog id="fullscreen-dialog" show-fullscreen-button draggable resizable>
		<div slot="header">Fullscreen Dialog</div>

Done

@kskondov kskondov requested a review from a team June 18, 2026 15:05
dimovpetar
dimovpetar requested changes Jun 23, 2026
View reviewed changes
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/src/Dialog.ts Outdated
Comment thread packages/main/test/pages/Dialog.html Outdated
Comment thread packages/website/docs/_samples/main/Dialog/Fullscreen/main.js Outdated
Comment thread packages/main/cypress/specs/Dialog.cy.tsx Outdated
dimovpetar
dimovpetar requested changes Jun 23, 2026
View reviewed changes
Comment thread packages/main/src/Dialog.ts
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release next (scheduled 2026-07-09, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents

  • ➕ added property: showFullscreenButton
  • ➕ added attribute: show-fullscreen-button
  • 🔄 changed attribute state (type)

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@TeodorTaushanov TeodorTaushanov Awaiting requested review from TeodorTaushanov

@dimovpetar dimovpetar Awaiting requested review from dimovpetar

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@kskondov @TeodorTaushanov @dimovpetar