What will this enable for the user?
As a user of the application, I want to ___ (so that __)

Recipe tags (optional):

Related tags (optional):

...as in "make distclean".

While this may be achieved using git clean -fd (given a perfect .gitignore),
it is better to configure the Maven clean plugin correctly -- which is not done in our starters.

Already done in BAS but requires bit of tinkering to do.
BAS implementation: https://github.com/vaadin/business-app-starter-flow/blob/2729128816c4f060a37f370f47dc343a5aee7f8c/src/main/java/com/vaadin/starter/business/ui/views/Statistics.java#L136

Alternatively could be implemented as pure CSS without Vaadin Charts.

Component for placing helper text in relation to forms or other view content are often needed.

One use case is to display validation errors which are related to the whole form instead of individual fields.

Similar component in Atlaskit DS:
https://atlaskit.atlassian.com/packages/design-system/section-message

What will this enable for the user?
As a user of the application, I want to select a node and its children.

Here is a example of the behavior:
https://github.com/vaadin/vaadin-grid/issues/1704

It's also related to this ticket:
vaadin-component-factory/explorer-tree-grid-flow#1

I'm not sure if it's possible to implement it as a recipe or if it requires an add-on.

How do I highlight children of the selected parent node in TreeGrid

Take https://cookbook.vaadin.com/grid-csv-export

It uses

import org.vaadin.artur.exampledata.DataType;
import org.vaadin.artur.exampledata.ExampleDataGenerator;

which you do not know how to include in your project

It has

import com.vaadin.recipes.recipe.Metadata;
@Metadata(howdoI = "Export grid data as CSV")

which is only relevant for the cookbook app itself

It has

import com.vaadin.recipes.recipe.Recipe;
public class GridCsvExport extends Recipe {

which is only relevant for the cookbook app itself

It should be possible to grab
https://start.vaadin.com?dl

and paste the code as a new file and then get it to work by not reading anything else than the code

What will this enable for the user?
As a user of the application, I want to select grid rows using the up/down arrow keys

Recipe tags: Grid

What will this enable for the user?
As a user of the application, I want to accept a dialog with ENTER and cancel the dialog with ESC.

Recipe tags (optional):
keyboard shortcut
Related tags (optional):

What will this enable for the user?
As a user of the application, I want to get the coordinates (on the server) of a (movable) dialog so that I can open it again in the same position later

See https://vaadin.slack.com/archives/C6X43FE8M/p1597220960170000

What will this enable for the user?
As a user of the application, I want to see color coded text elements (so that I can identify their value quickly without even reading the text, especially when there are several simultaneous instances of the element, such as in a grid)

Recipe tags (optional):
styling, colors

Related tags (optional):

What will this enable for the user?
As a user of the application, I want to dynamically set the background color of items in the dropdown list of a ComboBox component.

What will this enable for the user?
As a user of the application, I want to specify the subset of components that would be printed

Recipe tags: Flow

What will this enable for the user?
As a user of the application, I do not want to loose form content even if the network dies, so that I can save my changes once the network is back again.

Recipe tags (optional):
network, offline, localstorage, form

Related tags (optional):
cookies

Opening the cookbook example, all looks good (the headings are readable):

Clicking on the first cookbook entry, the entry looks like this (hard to read):

Going back with the browser back bar or the "Back to Cookbook" action (a lot of headings hard to read):

Browser: Firefox 96.0b3

It would be great to to be able to link to search results in Cookbook.

For example, https://cookbook.vaadin.com?search=grid

We could embed such links in our documentation, to promote recipes for certain topics.

Rename the Java tag Flowand TypeScript to Fusion where it makes sense. This way they will use the same terminology as our website, docs, forum, and discord.

What will this enable for the user?
As a user of the application, I want to ___ (so that __)

Recipe tags (optional):

Related tags (optional):

What will this enable for the user?
As a user of the application, I want selecting a Tab to change the content underneath

Recipe tags (optional):
Spicy, Lactose-Free

Related tags (optional):

What will this enable for the user?
As a user of the application, I want to click a "copy to clipboard" -button, so that I can paste the relevant content into another application.

Recipe tags (optional):
copy, paste, clipboard

Related tags (optional):

With the new website design an updated HaaS needs to be integrated.

What will this enable for the user?
As a user of the application, I want to be able to edit some labels by double-clicking them.

Recipe tags (optional):
Java

Related tags (optional):
Label, TextField

What will this enable for the user?
As a user of the application, I want the Label component to always be in an editable mode.

Recipe tags (optional):
Label

Hi,

we have problems with your sample.

Steps to reproduce:

1. Click on the first "click me" after start
2. "click me" Button will be disabled
3. Scroll down and you well see more disabled "click me" Buttons you never clicked

Is there any workaround for this because we must use this technique in our application but are showstopped because of this

Stefan

What will this enable for the user?
As a user of the application, I want to browse a file system (so that I can view or download files from there)

This is a placeholder to remind me I should incorporate Amahdy's old blog post solution here.

Recipe tags (optional):
TreeGrid

Related tags (optional):
Tree

Could be based on App Layout but there is often need to have hierarchy within navigation items.

Business App Starter does have implementation of this.

What will this enable for the user?
As a user of the application, I want to easily copy&paste the content of a Grid/Table to the clipboard, so that I can paste into another application.

Recipe tags (optional):
copy, paste, clipboard, grid, table

Related tags (optional):
csv

What will this enable for the user?
As a user of the application, I want to reduce the spacing between ComboBox items

Recipe tags (optional):
Styling, ComboBox

Recipes that import multiple CSS files only show one of them. For example, https://cookbook.vaadin.com/dynamic-combobox-item-background-color.

What will this enable for the user?
As a user of the application, I want to see the view transitions animated so that it's easier to understand relations between views.

Example: https://miro.medium.com/max/320/1*YHgeqAVAyoAbKu9-kGOwQA.gif

Recipe tags (optional):
animation

Related tags (optional):

https://cookbook.vaadin.com/grid-row-height includes a CSS import, but that is not displayed in the recipe.

What will this enable for the user?
As a user of the application, I want to add a placeholder for a component that requires a long backend task. A chart that requires a long SQL query ...

Recipe tags (optional):

Related tags (optional):

The code for https://cookbook.vaadin.com/os-light-dark-theme is effective for all recipes.

That can be surprising for developers, who might expect to get the same result when they copy another recipe, but don’t realize the dark theme is coming from another recipe.

What will this enable for the user?
As a user of the application, I want to use a MenuBar in a HorizontalLayout so that when I resize the browser width the buttons that do not fit hide inside the overflow button.

Recipe tags (optional):
layout

What will this enable for the user?
As a user of the application, I want to see different types of notifications which's behaviour is based on severity.

Common use case is to have four notification types: Generic, Success, Warning and Error.
Each type should have set of rules based that define the behaviour.

Parameters pre-defined by each type are

• Position
• Theme variant (visual style)
• Closing behaviour
  • Timeout (success and non-critical notifications)
  • Close button (warnings and errors that require user acknowledge)
  • Action buttons (warnings and errors that require user's decision)
  • Non-closable (i.e. background process)

Screenshot from customer case:

Recipe tags (optional):
Notifications

Related tags (optional):

• View has static section which contains Save/Cancel actions.
• View content is divided into tabs.
• The entries on one tab may have effect on other tabs.
• User needs to be able to tell if there are validation errors on a tab.
• Validation is run across all tabs then any entries are done.

What will this enable for the user?
As a user of the application, I want to ___ (so that __)

Recipe tags (optional):

Related tags (optional):

What will this enable for the user?
As a user of the application, I want to see a progress indicator when I start a long-running task so that I know that the task is being executed.

Recipe tags (optional):

Related tags (optional):

There are DOM changes in Vaadin 22 that need to be taken into account

https://cookbook.vaadin.com/scroll-to-item-in-tree-grid

Clicking the "Expand and scroll to last" expands the TreeGrid, but doesn't scroll to the last item. Clicking the button a second time (after the TreeGrid is expanded) does scroll down to the last item.

Browser: Chrome
OS: Windows 10

Inspiration: https://stackoverflow.com/questions/51216311/replacement-for-absolutelayout-from-vaadin-8-framework-in-vaadin-10-flow

Took me a few hours to understand what was happening.
Spinner layout spins forever and cannot reveal the correctly loaded component.
Please document @Push needs to be enabled on topmost Router Layout.

Suggest also a few cleanups, as e.g. the whole of the overlay can simply be removed, and no public methods need to exist like 'isLoading' or that method with a boolean parameter that's always 'true' (setLoaded). Most stuff can be private to LazyContainer and still be accessed by its inner classes (no getComponent() method needed for example, just access the private final field).

Cheers,
Enver

The recipes include few pieces of code that are specific to the cookbook app:

• package name (e.g. package com.vaadin.recipes.recipe.camera;)
• com.vaadin.recipes.recipe.Metadata
• com.vaadin.recipes.recipe.Recipe

For better UX, remove those from the preview of the recipe.

https://cookbook.vaadin.com/grid-csv-export on an iPhone contains a grid that cannot be scrolled

What will this enable for the user?
As a user of the application, I want to be able to print a Grid, or generate a printable PDF document out of the Grid, that has more than 1 viewport's height worth of content (but still a reasonable size, less than 20 pages for the sake of the example). One possible way this can be implemented by having a custom "print" URL/route which shows a paged version of the Grid and the requested page can be added as an additional route parameter. In other words, /print/0 has the first page, /print/1 has the second page, and so on. These routes can then be accessed sequentially with a headless browser to generate pages of the full document.

Recipe tags (optional):
printing, grid

What will this enable for the user?
As a user of the application, I want some items in a ComboBox to be non-selectable.

What will this enable for the user?
As a user of the application, I want to show Vaadin icons using CSS so that the designer can easily set icons

(This is arguably not really really about the end user, but probably still close enough)

https://vaadin.slack.com/archives/C3TGRP4HY/p1596024252240500