Merge branch 'latest' into docs/visual-view-builder

.github/styles/Vaadin/Abbr.yml

@@ -84,6 +84,7 @@ exceptions:
   - RAM
   - RFC
   - SAP
+  - SASS
   - SBOM
   - SDK
   - SPA

articles/_preview-banner.adoc

@@ -53,13 +53,32 @@ ifndef::preview-feature[]
 :preview-feature: This feature
 endif::[]
 
+:feature-flag-docs-link: <<{articles}/flow/configuration/feature-flags#,feature flag>>
+
+ifdef::feedback-url[]
+:feedback-link: {feedback-url}[provide feedback,window=_blank]
+endif::[]
+ifndef::feedback-url[]
+:feedback-link: provde feedback
+endif::[]
+
 ifndef::preview-banner-content[]
 :preview-banner-content: {preview-feature} is a preview feature. This means that it is not yet ready for production usage and may have limitations or bugs. We encourage you to try it out and provide feedback to help us improve it.
 endif::[]
 
-.Preview feature
+.Preview Feature
 [.preview.skip-search-index]
 [NOTE]
 ====
+
+// Normal Preview Feature admonition
+ifndef::feature-flag[]
 {preview-banner-content}
+endif::[]
+
+// Preview Feature behind a Feature Flag
+ifdef::feature-flag[]
+This is a preview version of {preview-feature}. It needs to be enabled with the {feature-flag-docs-link} `{feature-flag}`. Preview versions may lack some planned features, and breaking changes may be introduced in any Vaadin version. We encourage you to try it out and {feedback-link} to help us improve it.
+endif::[]
+
 ====

articles/_vaadin-version.adoc

@@ -1,4 +1,4 @@
-:vaadin-version: 24.5.5
-:vaadin-flow-version: 24.5.5
+:vaadin-version: 24.5.7
+:vaadin-flow-version: 24.5.7
 :vaadin-seven-version: 7.7.38
 :vaadin-eight-version: 8.20.0

articles/components/date-picker/date-formats.adoc

@@ -106,6 +106,21 @@ Custom date patterns take precedence over the configured locale. When using both
 endif::[]
 
 
+== Server-Side Parsing in Flow
+
+The Flow version of Date Picker also allows you to provide a server-side parser that may be used as a fallback when user input can't be parsed using the methods described previously. The parser is a function that receives the user entered string and returns either a parsed date or an error message. Successfully parsed dates are displayed in the field using the same pattern as other dates.
+
+The server-side parser can be used to support shortcuts for quickly entering dates (e.g., `+1` or `tomorrow`). In the following example, try entering `+1`, `-2`, and `foobar` to see the server-side parser in action:
+
+[.example]
+--
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/datepicker/DatePickerFallbackParser.java[render,tags=snippet,indent=0]
+----
+--
+
+
 == Using Custom Functions in React & Lit
 
 When using the web component stand-alone, custom functions can be configured to display and parse the date. The default format is US English.

articles/components/dialog/index.adoc

@@ -50,13 +50,15 @@ endif::[]
 </style>
 ++++
 
+
 == Structure
 
-The Dialog component has static header and footer areas, and a scrolling content area between them.
-The header and footer are optional, and automatically hidden if empty and not explicitly enabled.
+The Dialog component has static header and footer areas, and a scrolling content area between them. The header and footer are optional, and are hidden if empty and not explicitly enabled.
+
 
 [role="since:com.vaadin:[email protected]"]
 === Header
+
 The header contains an optional title element, and a slot next to it for custom header content, such as a close button.
 
 [.example]
@@ -84,12 +86,11 @@ include::{root}/frontend/demo/component/dialog/react/dialog-header.tsx[render,ta
 endif::[]
 --
 
+
 [role="since:com.vaadin:[email protected]"]
 === Footer
-Buttons for closure actions, such as _Save_, _Cancel_, _Delete_, and so on, should be placed in the footer.
-See the <<../button#buttons-in-dialogs,Button>> component for guidelines for the placement of buttons in dialogs.
-Footer content is right-aligned by default.
-Components can be left-aligned by applying a margin:
+
+Buttons for closure actions (e.g., _Save_, _Cancel_, _Delete_) should be placed in the footer. See the <<../button#buttons-in-dialogs,Button>> component for guidelines for the placement of buttons in Dialogs. Footer content is right-aligned by default. Components can be left-aligned by applying a margin like so:
 
 [.example]
 --
@@ -116,6 +117,7 @@ include::{root}/frontend/demo/component/dialog/react/dialog-footer.tsx[render,ta
 endif::[]
 --
 
+
 === Padding
 
 The content area's built-in padding can be removed by applying the `no-padding` theme variant.
@@ -145,29 +147,25 @@ include::{root}/frontend/demo/component/dialog/react/dialog-no-padding.tsx[rende
 endif::[]
 --
 
+
 == Modality
-A modal dialog blocks the user from interacting with the rest of the user interface while the dialog is open.
-A non-modal dialog, however, doesn't block interaction.
 
-Dialogs are modal by default.
+A modal dialog blocks the user from interacting with the rest of the user interface while the dialog is open. A non-modal dialog, however, doesn't block interaction. Dialogs are modal by default.
 
 Use modal dialogs for:
 
-* displaying important information, like system errors
-* requesting user input as part of a workflow, for example an edit dialog
-* confirmation of irreversible actions, such as deleting data (Confirm Dialog is a convenient alternative for these use cases)
-* breaking out sub-tasks into a separate user interface
+- Displaying important information, like system errors;
+- Requesting user input as part of a workflow, for example an edit dialog;
+- Confirmation of irreversible actions, such as deleting data -- Confirm Dialog is a convenient alternative for these use cases; and 
+- Breaking out sub-tasks into a separate user interface.
 
 ifdef::flow[]
-.Modal parent dialogs in Flow
+.Modal Parent Dialogs in Flow
 [IMPORTANT]
 See the <<Technical>> section for details on the behavior of modal dialogs in Vaadin Flow.
 endif::flow[]
 
-Use non-modal dialogs:
-
-* when the user needs access to the content below the dialog
-* for less critical, optional, and/or support tasks
+Use non-modal dialogs when the user needs access to the content below the dialog, and for less critical, optional, or support tasks.
 
 [.example]
 --
@@ -199,19 +197,51 @@ endif::[]
 
 Usually, non-modal dialogs should be draggable, so that the user can move them to access the user interface beneath.
 
-== Draggable
+
+== Position
+
+By default, dialogs open in the center of the viewport. [since:com.vaadin:[email protected]]##A different positioning can be set programmatically##. Dialogs can also be made draggable, allowing the end user to move them around.
+
+The position of the dialog can be set using the `top` and `left` properties:
+
+[.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.
 
 By default, the outer edges of a dialog, as well as the space between its components, can be used to move the dialog around.
 
-The default areas from which a dialog can be dragged depend on whether the built-in header is used:
+The default areas from which a dialog can be dragged depend on whether the built-in header is used if the built-in header or footer is used: they function as the default drag handles of the dialog. Without the built-in header, any empty space within the dialog functions can be used as a drag handle.
 
-- If the built-in header or footer is used, they function as the default drag handles of the dialog
-- Without the built-in header, any empty space within the dialog functions as a drag handle
-
-Any component contained within a dialog can be marked and used as a drag handle by applying the `draggable` class name to it.
-You can choose whether to make the component's content draggable as well, or only the component itself.
+Any component contained within a dialog can be marked and used as a drag handle by applying the `draggable` class name to it. You can choose whether to make the component's content draggable as well, or only the component itself.
 
 [.example]
 --
@@ -242,20 +272,53 @@ include::{root}/frontend/demo/component/dialog/react/dialog-draggable.tsx[render
 endif::[]
 --
 
-It's recommended to make non-modal dialogs draggable, so that the user can interact with content that might otherwise be obscured by the Dialog.
-For example, a Dialog for taking notes or for adding widgets to a dashboard by dragging can offer a better experience by allowing the user to move the Dialog around.
+Make non-modal dialogs draggable so the user can interact with content that might otherwise be obscured by the Dialog. For example, a Dialog for taking notes or for adding widgets to a dashboard by dragging can offer a better experience by allowing the user to move the Dialog around.
 
 Modal dialogs don't benefit from being draggable, as their modality curtain (the dark overlay behind the dialog) obscures the underlying user interface.
 
-== 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.
+== Size
 
-Dialogs containing dynamic content and/or a lot of information, such as complex forms or Grids, may benefit from being resizable, as this offers the user some flexibility with how much data is visible at once.
-It also gives the user control over which part of the underlying user interface is obscured.
+The Dialog size can be set with the width and height on the Dialog itself (__since V24.6 for React and Lit__). You can also set the size of the content of Dialog, whereby the Dialog scales to accommodate it. In both cases, the Dialog can also be made resizable.
 
-Dialogs that contain very little, or compact, information don't need to be resizable.
+[.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::[]
+--
+
+
+=== Resizable
+
+The Dialog can be configured to allow the end user to resize it by dragging from its edges.
+
+Dialogs containing dynamic content or plenty of information, such as complex forms or Grids, may benefit from being resizable. This offers the user some flexibility with how much data is visible at once. It also gives the user control over which part of the underlying user interface is obscured.
+
+Dialogs that contain very little or compact information don't need to be resizable.
 
 [.example]
 --
@@ -282,13 +345,10 @@ include::{root}/frontend/demo/component/dialog/react/dialog-resizable.tsx[render
 endif::[]
 --
 
-== Closing
 
-Modal dialogs are closable in three ways:
+== Closing
 
-. Pressing the kbd:[Esc] key
-. Clicking outside the Dialog
-. Programmatically, for example through the click of a Button
+Modal dialogs are closable in three ways: by pressing the kbd:[Esc] key; clicking outside the Dialog; or programmatically, for example through the click of a Button.
 
 Providing an explicit button for closing a Dialog is recommended.
 
@@ -317,18 +377,19 @@ include::{root}/frontend/demo/component/dialog/react/dialog-closing.tsx[render,t
 endif::[]
 --
 
+
 == Best Practices
 
 === Use Sparingly
 
-Dialogs are disruptive by nature and should be used sparingly.
-Don't use them to communicate non-essential information, such as success messages like “Logged in”, “Copied”, and so on.
-Instead, use <<../notification#,Notifications>> when appropriate.
+Dialogs are disruptive by nature and should be used sparingly. Don't use them to communicate non-essential information, such as success messages like "Logged in", "Copied", and so on. Instead, use <<../notification#,Notifications>> when appropriate.
+
 
 === Button Placement
 
 See <<../button#buttons-in-dialogs, Buttons in Dialogs>>.
 
+
 == Related Components
 
 |===
@@ -341,6 +402,7 @@ See <<../button#buttons-in-dialogs, Buttons in Dialogs>>.
 
 |===
 
+
 ifdef::flow[]
 == Technical
 

articles/components/index.adoc

@@ -505,6 +505,17 @@ include::notification/index.adoc[tag=description]
 <<{components-path-prefix}notification#,See Notification>>
 
 
+[.component-card]
+=== Popover
+
+image::{components-path-prefix}popover/popover.png["", opts=inline, role="banner"]
+
+include::popover/index.adoc[tag=description]
+
+[.sr-only]
+<<{components-path-prefix}popover#,See Popover>>
+
+
 [.component-card]
 === Progress Bar
 

articles/components/popover/index.adoc

@@ -3,14 +3,17 @@ tab-title: Usage
 layout: tabbed-page
 title: Popover
 description: Popover is a generic overlay whose position is anchored to an element in the UI.
+version: since:com.vaadin:[email protected]
 page-links:
   - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/popover}/#/elements/vaadin-popover[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/popover/Popover.html[Java]'
   - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/popover}/packages/popover[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-popover-flow-parent[Java]'
 ---
 
-= [since:com.vaadin:[email protected]]#Popover#
+= Popover
 
-[since:com.vaadin:[email protected]]#A generic overlay whose position is anchored to an element in the UI#.
+// tag::description[]
+A generic overlay whose position is anchored to an element in the UI.
+// end::description[]
 
 [.example]
 --

articles/components/text-area/index.adoc

@@ -100,6 +100,39 @@ include::{root}/frontend/demo/component/textarea/react/text-area-height.tsx[rend
 endif::[]
 --
 
+[role="since:com.vaadin:[email protected]"]
+=== Minimum & Maximum Rows
+
+Alternatively, the minimum and maximum height can be constrained to a specific number of text rows like so:
+
+[.example]
+--
+ifdef::lit[]
+[source,html]
+----
+<source-info group="Lit"></source-info>
+<vaadin-text-area min-rows="4" max-rows="8"></vaadin-text-area>
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+<source-info group="Flow"></source-info>
+TextArea textArea = new TextArea();
+textArea.setMinRows(4);
+textArea.setMaxRows(8);
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+<source-info group="React"></source-info>
+<TextArea minRows={4} maxRows={8} />
+----
+endif::[]
+--
 
 // Basic Features