[peholmst]

Review risk: two-way door. Docs and examples only: one new page, two rewritten or extended pages, five removed pages with redirects, and link and guideline updates. Reverting brings the old pages back.

Summary

Moves React i18n, the connection indicator and React styling from the Hilla section to the Flow Reference and the Styling section. This is the eighth step of dissolving the Hilla section, after #6611, #6616, #6618, #6620, #6621, #6622 and #6624.

Every statement is checked against main of vaadin/hilla and vaadin/flow, and the behavior is checked in a scratch application on 25.4.0-alpha5 with Flow 25.4.0-alpha6, the first Flow release with vaadin/flow#26714. This pull request targets main only, so it gets no target/v25.3 label.

What changed

• New page flow/i18n/react-views.adoc, Localization in React Views, rewritten from the Hilla i18n guide with compiled examples:
  • loading translations with i18n.configure(), and how the initial language is chosen;
  • translate() and the key tag, the missing-translation marker, and ICU parameters compared with Flow's MessageFormat;
  • translating view titles and menu items with translateDynamic(), including the @Menu titles of Flow views;
  • changing the language, the file fallback, and that the React language is separate from the Flow UI locale;
  • development and production loading, and what a custom I18NProvider must implement.
• Loading and Connection Indicator (flow/advanced/loading-indicator.adoc) now also covers what the Hilla connection indicator page covered:
  • it covers Flow and React views, the loading bar stages, and the connection status messages;
  • configuration from Java, including ReconnectDialogConfiguration, which no page documented, with a compiled example;
  • configuration from TypeScript, with the jar-resources import that replaces @vaadin/common-frontend after refactor: move connection state and indicator into flow-client flow#26714;
  • styling, with the element structure and states.
• Stylesheets: a new Stylesheets in React Views section: global @StyleSheet styles, importing CSS files and CSS modules from a view, and the type declarations these imports need.
• Localization and Custom I18N Provider link to the new page.
• Removed pages, with redirects:
  • hilla/guides/i18n → flow/i18n/react-views
  • hilla/reference/connection-indicator → flow/advanced/loading-indicator (the Lit redirect points there too)
  • hilla/guides/styling → styling/stylesheets#react-views
  • hilla/reference, now empty → flow/react-views (the Lit redirect points there too). This was planned for the last step.
  • The last partial in articles/hilla/_shared is removed.
• Links: the Routing page links to the new i18n page.
• Guidelines: the Hilla paragraph no longer mentions the _shared partials, and the feature flag guideline no longer names the Hilla Feature Flags section that docs: move full-stack signals to UI State #6624 removed.
• Corrections compared with the old pages, each checked in the scratch application:
  • A missing translation shows as !de: key, not as the key.
  • The old guide wrapped i18n.configure() in an effect. It returns a Promise, and the page awaits it once in the layout.
  • The default first delay of the loading bar is 450 ms, not 300 ms.
  • The old CSS examples didn't show anything with the default theme turned off: the indicator's functional style, which is always present, comes after the application's stylesheets and sets opacity: 0 and pointer-events: none. The examples now use vaadin-connection-indicator .v-loading-indicator and set opacity.
  • The @vaadin/common-frontend import no longer works after refactor: move connection state and indicator into flow-client flow#26714.

Test summary

• npm run check-redirects passes.
• mvn spotless:apply and mvn compile pass. npx eslint frontend/demo/fusion/i18n passes.
• The two TypeScript examples type-check and run in the scratch application, in English and German.
• Checked with the browser:
  • translations, the ICU plural form, {0} placeholders, the missing-key marker, on-demand keys and their warning;
  • the cookie, the fallback from de-DE to de and the root file, and the separate Flow locale;
  • a custom provider without getAllTranslations() in development mode (no translations; initialized stays false);
  • the loading bar stages during a slow service call, the offline message after a failed call and after the browser's offline event, and the online message afterwards;
  • the reconnecting message of a Flow view with the server stopped;
  • the TypeScript configuration, the Java configuration overriding only the properties it sets, and the corrected curtain CSS;
  • global styles, a plain CSS import that stays loaded after navigating away, and a CSS module.
• Every cross reference in the new and changed lines resolves.
• Vale: no errors or warnings on the added and changed lines with the pull request configuration.
• Asciidoctor renders the changed pages, with all includes and tags resolved.
• I didn't run a full dspublisher build locally.

The TypeScript configuration snippet for the indicator is inline: the docs build is on 25.4.0-alpha5, whose Flow.js still uses @vaadin/common-frontend, so a compiled example importing the new module wouldn't build yet.

Product bugs found during testing, reported separately:

• CSS imports in React views fail the TypeScript check, because types.d.ts doesn't declare them flow#26970: types.d.ts doesn't declare CSS imports, so with TypeScript 6 the imports in React views fail the type check. The Stylesheets section documents the declarations to add.
• translateDynamic(): a key loaded on demand stays empty after setLanguage() hilla#7050: after setLanguage(), a key that translateDynamic() loaded on demand stays empty. The page doesn't describe this behavior.

🤖 Generated with Claude Code

[vaadin-review-bot]

Reviewed the changes — left 1 comment and collected 1 finding below that could not be attached to the diff.

	Finding
⚠️	The Runtime Model page still says the loading indicator appears after 300 ms, but the updated page now says 450 ms.
💬	"A failed call" suggests that a service exception shows "Connection lost", but only network failures do.

⚠️ The Runtime Model page still says the loading indicator appears after 300 ms, but the updated page now says 450 ms.
This PR corrects the default first delay to 450 ms on the Loading and Connection Indicator page. The source agrees: FIRST_DELAY_DEFAULT = 450 in LoadingIndicatorConfigurationMap.java:32, and firstDelay = 450 in ConnectionIndicator.ts. The Runtime Model page links to that page but still says:

If a response takes longer than 300 milliseconds, Vaadin shows a loading indicator.

Suggested fix: "If a response takes longer than 450 milliseconds, Vaadin shows a loading indicator."
_{runtime-model.adoc:54 · accuracy}

[github-actions]

Preview Deployment

This PR has been deployed for preview.

URL: https://docs-preview-pr-6626.fly.dev

Changed pages

Added content is highlighted in green; removed content is marked in red on each page.

• building-apps/architecture/runtime-model — modified, +1/-1 lines, 1 removal marker(s)
• flow/advanced/loading-indicator — modified, +153/-94 lines, 32 removal marker(s)
• flow/i18n — modified, +2/-0 lines
• flow/i18n/custom-i18n-provider — modified, +2/-0 lines
• flow/i18n/react-views — added, +130/-0 lines
• flow/react-views/routing — modified, +1/-1 lines, 1 removal marker(s)
• styling/stylesheets — modified, +42/-0 lines

Other changed files

• articles/hilla/guides/i18n.adoc (deleted)
• articles/hilla/guides/styling.adoc (deleted)
• articles/hilla/reference/connection-indicator.adoc (deleted)
• articles/hilla/reference/index.adoc (deleted)
• articles/hilla/_shared/guides/_styling.adoc (deleted)

Built from bdcb13e