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

docs: enhance dialog component documentation with positioning and sizing details #3946

Merged
merged 8 commits into from
Dec 2, 2024
Merged

docs: enhance dialog component documentation with positioning and sizing details #3946

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
698747f
docs: enhance dialog component documentation with positioning and siz…
DiegoCardoso Nov 25, 2024
32f4fea
docs: update dialog component documentation to include version-specif…
DiegoCardoso Nov 26, 2024
8b8901a
Update articles/components/dialog/index.adoc
DiegoCardoso Nov 27, 2024
6985f46
Apply suggestions from code review
DiegoCardoso Nov 29, 2024
1ab63cb
Merge branch 'latest' into docs/dialog/position-size
russelljtdyer Dec 2, 2024
58f33ec
Edited added text and format clean-up of whole document.
russelljtdyer Dec 2, 2024
df0ae42
Full edit of whole document.
russelljtdyer Dec 2, 2024
0964b23
Minor edit.
russelljtdyer Dec 2, 2024
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
81 changes: 79 additions & 2 deletions articles/components/dialog/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,45 @@

Usually, non-modal dialogs should be draggable, so that the user can move them to access the user interface beneath.

== Draggable
== Position

Dialogs can be positioned in two ways:

. [since:com.vaadin:[email protected]]##By setting fixed coordinates programmatically##
. By allowing the user to drag them (see <<Draggable>>)
DiegoCardoso marked this conversation as resolved.
Show resolved Hide resolved

The dialog's position can be set using the `top` and `left` properties:

Check failure on line 209 in articles/components/dialog/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'dialog's'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'dialog's'?", "location": {"path": "articles/components/dialog/index.adoc", "range": {"start": {"line": 209, "column": 5}}}, "severity": "ERROR"}

[.example]
--
ifdef::lit[]
[source,html]
----
<source-info group="Lit"></source-info>
<vaadin-dialog top="50px" left="50px">...</vaadin-dialog>
----
endif::[]

ifdef::flow[]
[source,java]
----
<source-info group="Flow"></source-info>
Dialog dialog = new Dialog();
dialog.setTop("50px");
dialog.setLeft("50px");
----
endif::[]

ifdef::react[]
[source,html]
----
<source-info group="React"></source-info>
<Dialog top="50px" left="50px">...</Dialog>
----
endif::[]
--

=== Draggable

Dialogs can be made draggable, enabling the user to move them around using a pointing device.

Expand Down Expand Up @@ -247,7 +285,46 @@

Modal dialogs don't benefit from being draggable, as their modality curtain (the dark overlay behind the dialog) obscures the underlying user interface.

== Resizable
== Size

The Dialog size can be controlled in two ways:

. By setting fixed dimensions using the width and height properties (__since V24.6 for React and Lit__)
. By making the dialog resizable (see <<Resizable>>)
DiegoCardoso marked this conversation as resolved.
Show resolved Hide resolved

[.example]
--

ifdef::lit[]
[source,html]
----
<source-info group="Lit"></source-info>
<vaadin-dialog width="400px" height="200px">...</vaadin-dialog>
----
endif::[]

ifdef::flow[]
[source,java]
----
<source-info group="Flow"></source-info>
Dialog dialog = new Dialog();
dialog.setWidth("400px");
dialog.setHeight("200px");
----
endif::[]

ifdef::react[]
[source,html]
----
<source-info group="React"></source-info>
<Dialog width="400px" height="200px">...</Dialog>
----
endif::[]
--

The dialog's default size adjusts automatically based on its content. Fixed dimensions could be used when you need precise control over the dialog's size, for example, when displaying a form or grid with specific space requirements.

Check failure on line 325 in articles/components/dialog/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'dialog's'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'dialog's'?", "location": {"path": "articles/components/dialog/index.adoc", "range": {"start": {"line": 325, "column": 5}}}, "severity": "ERROR"}

Check failure on line 325 in articles/components/dialog/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'dialog's'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'dialog's'?", "location": {"path": "articles/components/dialog/index.adoc", "range": {"start": {"line": 325, "column": 141}}}, "severity": "ERROR"}
Copy link
Contributor

Choose a reason for hiding this comment

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

Then we can remove this paragraph.

DiegoCardoso marked this conversation as resolved.
Show resolved Hide resolved

=== Resizable

A resizable dialog allows the user to resize the Dialog by dragging from the edges of the Dialog with a pointing device.
Dialogs aren't resizable by default.
DiegoCardoso marked this conversation as resolved.
Show resolved Hide resolved
Expand Down