docs: replace Lumo utility in remaining examples (#4831)

web-padawan · sissbruecker · web-flow · commit bb780a07a29c · 2025-11-27T07:35:26.000+01:00
* docs: replace Lumo utility in remaining examples

* refactor: apply code review suggestions

---------

Co-authored-by: Sascha Ißbrücker &lt;sissbruecker@vaadin.com&gt;
diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc
@@ -221,11 +221,12 @@ ifdef::react[]
 include::{root}/frontend/demo/component/contextmenu/react/context-menu-classname.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
---
 
-.Theme Names, Not Class Names
-[NOTE]
-In versions prior to 24.3, theme names must be used instead (i.e., `theme` property / `addThemeNames` Java method). The CSS syntax for targeting a theme name is `[theme~="custom-theme"]`
+[source,css]
+----
+include::{root}/frontend/themes/docs/context-menu-class-name.css[]
+----
+--
 
 
 == Disabled Menu Items
diff --git a/articles/components/dashboard/index.adoc b/articles/components/dashboard/index.adoc
@@ -428,6 +428,11 @@ include::{root}/frontend/demo/component/dashboard/dashboard-announcements.ts[ren
 include::{root}/src/main/java/com/vaadin/demo/component/dashboard/WidgetConfig.java[tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/screen-reader-only.css[]
+----
 --
 
 
diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc
@@ -152,11 +152,12 @@ ifdef::react[]
 include::{root}/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
---
 
-.Use Theme Names, Not Class Names pre-V24.3
-[NOTE]
-In versions prior to 24.3, theme names must be used instead  of class names (`theme` property / `addThemeNames` Java method). The CSS syntax for targeting a theme name is `[theme~="custom-theme"]`
+[source,css]
+----
+include::{root}/frontend/themes/docs/menu-bar-class-name.css[]
+----
+--
 
 
 [role="since:com.vaadin:vaadin@V24.5"]
diff --git a/articles/components/message-list/index.adoc b/articles/components/message-list/index.adoc
@@ -157,6 +157,11 @@ include::{root}/frontend/demo/component/messages/react/message-list-ai-chat.tsx[
 include::{root}/src/main/java/com/vaadin/demo/component/messages/LLMChatService.java[tags=snippet,indent=0,group=React]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/screen-reader-only.css[]
+----
 --
 
 == Related Components
diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx
@@ -14,13 +14,13 @@ function GroupingLayoutRenderer({ children }: AutoFormLayoutRendererProps<Employ
   return (
     <VerticalLayout>
       <h4>Personal Information:</h4>
-      <HorizontalLayout theme="spacing" className="pb-l">
+      <HorizontalLayout theme="spacing" style={{ paddingBottom: '1.5rem' }}>
         {fieldsMapping.get('firstName')}
         {fieldsMapping.get('lastName')}
         {fieldsMapping.get('gender')}
       </HorizontalLayout>
       <h4>Employment Information:</h4>
-      <HorizontalLayout theme="spacing" className="pb-l items-baseline">
+      <HorizontalLayout theme="spacing" style={{ paddingBottom: '1.5rem', alignItems: 'baseline' }}>
         {fieldsMapping.get('startDate')}
         {fieldsMapping.get('shiftStartsAt')}
         {fieldsMapping.get('active')}
diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx
@@ -20,7 +20,7 @@ function GroupingLayoutRenderer({ form }: AutoFormLayoutRendererProps<EmployeeMo
   return (
     <VerticalLayout>
       <h4>Personal Information:</h4>
-      <HorizontalLayout theme="spacing" className="pb-l">
+      <HorizontalLayout theme="spacing" style={{ paddingBottom: '1.5rem' }}>
         <TextField label="First Name" {...field(model.firstName)} />
         <TextField label="Last Name" {...field(model.lastName)} />
         <Select
@@ -35,7 +35,7 @@ function GroupingLayoutRenderer({ form }: AutoFormLayoutRendererProps<EmployeeMo
         />
       </HorizontalLayout>
       <h4>Employment Information:</h4>
-      <HorizontalLayout theme="spacing" className="pb-l items-baseline">
+      <HorizontalLayout theme="spacing" style={{ paddingBottom: '1.5rem', alignItems: 'baseline' }}>
         <DatePicker label="Start Date" {...field(model.startDate)} />
         <TimePicker label="Shift Starts At" {...field(model.shiftStartsAt)} />
         <Checkbox label="Active" {...field(model.active)} />
diff --git a/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx b/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx
@@ -47,8 +47,8 @@ function Example() {
   });
 
   return (
-    <div className="flex flex-col items-start gap-m">
-      <div className="flex items-baseline gap-m">
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'start', gap: '1rem' }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: '1rem' }}>
         <Select
           label="Filter by category"
           items={categories}
diff --git a/frontend/demo/component/contextmenu/context-menu-classname.ts b/frontend/demo/component/contextmenu/context-menu-classname.ts
@@ -19,7 +19,7 @@ export class Example extends LitElement {
   private items: ContextMenuItem[] = [
     { text: 'Share' },
     { text: 'Duplicate' },
-    { text: 'Delete', className: 'text-error' },
+    { text: 'Delete', className: 'custom' },
   ];
   // end::snippet[]
 
diff --git a/frontend/demo/component/contextmenu/react/context-menu-classname.tsx b/frontend/demo/component/contextmenu/react/context-menu-classname.tsx
@@ -11,7 +11,7 @@ function Example() {
   const items = useSignal<ContextMenuItem[]>([
     { text: 'Share' },
     { text: 'Duplicate' },
-    { text: 'Delete', className: 'text-error' },
+    { text: 'Delete', className: 'custom' },
   ]);
   // end::snippet[]
 
diff --git a/frontend/demo/component/dashboard/dashboard-announcements.ts b/frontend/demo/component/dashboard/dashboard-announcements.ts
@@ -121,9 +121,9 @@ export class Example extends LitElement {
       <!--
       Live region for screen reader announcements. Changing its text content will result
       in a new announcement. This element is only visible for demonstration purposes. In
-      your application you should visually hide it using CSS, for example by using the
-      sr-only Lumo utility class:
-      <div className="sr-only" aria-live="polite">{announcement}</div>
+      your application you should visually hide it using CSS by applying a corresponding
+      class name, like "screen-reader-only", as shown in the attached CSS example file:
+      <div className="screen-reader-only" aria-live="polite">{announcement}</div>
       -->
       <div aria-live="polite">${this.announcement}</div>
       <vaadin-dashboard
diff --git a/frontend/demo/component/dashboard/react/dashboard-announcements.tsx b/frontend/demo/component/dashboard/react/dashboard-announcements.tsx
@@ -116,9 +116,9 @@ function Example() {
       <p>Live announcement:</p>
       {/* Live region for screen reader announcements. Changing its text content will result */}
       {/* in a new announcement. This element is only visible for demonstration purposes. In */}
-      {/* your application you should visually hide it using CSS, for example by using the   */}
-      {/* sr-only Lumo utility class: */}
-      {/* <div className="sr-only" aria-live="polite">{announcement}</div> */}
+      {/* your application you should visually hide it using CSS by applying a corresponding */}
+      {/* class name, like "screen-reader-only", as shown in the attached CSS example file: */}
+      {/* <div className="screen-reader-only" aria-live="polite">{announcement}</div> */}
       <div aria-live="polite">{announcement}</div>
       <Dashboard
         style={{
diff --git a/frontend/demo/component/menubar/menu-bar-custom-styling.ts b/frontend/demo/component/menubar/menu-bar-custom-styling.ts
@@ -15,12 +15,12 @@ export class Example extends LitElement {
   // tag::snippet[]
   @state()
   private items = [
-    { text: 'View', className: 'bg-primary text-primary-contrast' },
+    { text: 'View', className: 'custom' },
     { text: 'Edit' },
     {
       text: 'Share',
       children: [
-        { text: 'By email', className: 'bg-primary text-primary-contrast' },
+        { text: 'By email', className: 'custom' },
         { text: 'Get link' },
       ],
     },
diff --git a/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx b/frontend/demo/component/menubar/react/menu-bar-custom-styling.tsx
@@ -5,12 +5,12 @@ import { MenuBar, type MenuBarItem } from '@vaadin/react-components/MenuBar.js';
 function Example() {
   // tag::snippet[]
   const items: MenuBarItem[] = [
-    { text: 'View', className: 'bg-primary text-primary-contrast' },
+    { text: 'View', className: 'custom' },
     { text: 'Edit' },
     {
       text: 'Share',
       children: [
-        { text: 'By email', className: 'bg-primary text-primary-contrast' },
+        { text: 'By email', className: 'custom' },
         { text: 'Get link' },
       ],
     },
diff --git a/frontend/demo/component/messages/message-list-ai-chat.ts b/frontend/demo/component/messages/message-list-ai-chat.ts
@@ -40,7 +40,7 @@ export class Example extends LitElement {
   protected override render() {
     return html`
       <!-- Live region for screen reader announcements -->
-      <div aria-live="polite" class="sr-only">${this.announcement}</div>
+      <div aria-live="polite" class="screen-reader-only">${this.announcement}</div>
 
       <!-- tag::snippet[] -->
       <vaadin-message-list .items="${this.messageListItems}" markdown></vaadin-message-list>
diff --git a/frontend/demo/component/messages/react/message-list-ai-chat.tsx b/frontend/demo/component/messages/react/message-list-ai-chat.tsx
@@ -57,7 +57,7 @@ function Example() {
   return (
     <div>
       {/* Live region for screen reader announcements */}
-      <div aria-live="polite" className="sr-only">
+      <div aria-live="polite" className="screen-reader-only">
         {announcement.value}
       </div>
 
diff --git a/frontend/demo/component/progressbar/progress-bar-label.ts b/frontend/demo/component/progressbar/progress-bar-label.ts
@@ -18,8 +18,8 @@ export class Example extends LitElement {
       <div>
         <!-- tag::snippet[] -->
         <vaadin-horizontal-layout style="justify-content: space-between;">
-          <label class="text-secondary" id="pblabel">Processing Financials.xlsx</label>
-          <span class="text-secondary">50%</span>
+          <label id="pblabel">Processing Financials.xlsx</label>
+          <span>50%</span>
         </vaadin-horizontal-layout>
 
         <vaadin-progress-bar aria-labelledby="pblabel" value="0.5"></vaadin-progress-bar>
diff --git a/frontend/demo/component/progressbar/react/progress-bar-label.tsx b/frontend/demo/component/progressbar/react/progress-bar-label.tsx
@@ -8,11 +8,11 @@ function Example() {
     <div>
       {/* tag::snippet[] */}
       <HorizontalLayout style={{ justifyContent: 'space-between' }}>
-        <label className="text-secondary" id="pblabel">
+        <label id="pblabel">
           Processing Financials.xlsx
         </label>
 
-        <span className="text-secondary">50%</span>
+        <span>50%</span>
       </HorizontalLayout>
 
       <ProgressBar aria-labelledby="pblabel" value={0.5} />
diff --git a/frontend/demo/component/scroller/react/scroller-overflow-indicators.tsx b/frontend/demo/component/scroller/react/scroller-overflow-indicators.tsx
@@ -16,15 +16,15 @@ function Example() {
       {/* tag::snippet[] */}
       <Scroller scrollDirection="vertical" theme="overflow-indicators">
         <div style={{ display: 'flex', flexDirection: 'column', padding: '0 1rem 1rem' }}>
-          <TextField className="w-full" label="First name"></TextField>
-          <TextField className="w-full" label="Last name"></TextField>
-          <TextField className="w-full" label="Email"></TextField>
-          <TextField className="w-full" label="Phone number"></TextField>
-          <TextField className="w-full" label="Address"></TextField>
-          <TextField className="w-full" label="City"></TextField>
-          <TextField className="w-full" label="State"></TextField>
-          <TextField className="w-full" label="Zip code"></TextField>
-          <TextField className="w-full" label="Country"></TextField>
+          <TextField style={{ width: '100%' }} label="First name"></TextField>
+          <TextField style={{ width: '100%' }} label="Last name"></TextField>
+          <TextField style={{ width: '100%' }} label="Email"></TextField>
+          <TextField style={{ width: '100%' }} label="Phone number"></TextField>
+          <TextField style={{ width: '100%' }} label="Address"></TextField>
+          <TextField style={{ width: '100%' }} label="City"></TextField>
+          <TextField style={{ width: '100%' }} label="State"></TextField>
+          <TextField style={{ width: '100%' }} label="Zip code"></TextField>
+          <TextField style={{ width: '100%' }} label="Country"></TextField>
           <Checkbox label="Agree to terms and conditions" />
         </div>
       </Scroller>
diff --git a/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx b/frontend/demo/component/tree-grid/react/tree-grid-scroll-to-index.tsx
@@ -104,7 +104,7 @@ function Example() {
         <GridColumn<Person> path="email" />
       </Grid>
 
-      <HorizontalLayout theme="spacing" className="items-end">
+      <HorizontalLayout theme="spacing" style={{ alignItems: 'flex-end'}}>
         <IntegerField
           label="Parent index"
           stepButtonsVisible
diff --git a/frontend/demo/component/tree-grid/tree-grid-scroll-to-index.ts b/frontend/demo/component/tree-grid/tree-grid-scroll-to-index.ts
@@ -114,7 +114,7 @@ export class Example extends LitElement {
         <vaadin-grid-column path="email"></vaadin-grid-column>
       </vaadin-grid>
 
-      <vaadin-horizontal-layout theme="spacing" class="items-end">
+      <vaadin-horizontal-layout theme="spacing" style="align-items: flex-end">
         <vaadin-integer-field
           label="Parent index"
           step-buttons-visible
diff --git a/frontend/themes/docs/context-menu-class-name.css b/frontend/themes/docs/context-menu-class-name.css
@@ -0,0 +1,3 @@
+vaadin-context-menu-item.custom {
+   color: var(--lumo-error-text-color);
+}
diff --git a/frontend/themes/docs/menu-bar-class-name.css b/frontend/themes/docs/menu-bar-class-name.css
@@ -0,0 +1,6 @@
+/* Use vaadin-menu-bar-button to style root menu items */
+/* Use vaadin-menu-bar-item to style sub-menu items */
+vaadin-menu-bar-button.custom,
+vaadin-menu-bar-item.custom {
+   color: var(--lumo-success-text-color);
+}
diff --git a/frontend/themes/docs/menu-bar-theming.css b/frontend/themes/docs/menu-bar-theming.css
diff --git a/frontend/themes/docs/screen-reader-only.css b/frontend/themes/docs/screen-reader-only.css
@@ -0,0 +1,11 @@
+.screen-reader-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
diff --git a/frontend/themes/docs/styles.css b/frontend/themes/docs/styles.css
@@ -5,6 +5,7 @@
 /* Import custom styles used in examples */
 @import './app-layout.css';
 @import './basic-layouts.css';
+@import './context-menu-class-name.css';
 @import './combo-box-item-class-name.css';
 @import './dashboard.css';
 @import './login-rich-content.css';
@@ -13,10 +14,12 @@
 @import './message-list-theming.css';
 @import './grid-styling.css';
 @import './grid-header-footer-styling.css';
+@import './menu-bar-class-name.css';
 @import './multi-select-combo-box-chip-class-name.css';
 @import './multi-select-combo-box-item-class-name.css';
 @import './nav-item-styling.css';
 @import './icon-fonts.css';
 @import './popover-notification-panel.css';
 @import './popover-user-menu.css';
+@import './screen-reader-only.css';
 @import './text-area.css';
diff --git a/src/main/java/com/vaadin/demo/component/applayout/AppLayoutSecondaryNavigation.java b/src/main/java/com/vaadin/demo/component/applayout/AppLayoutSecondaryNavigation.java
@@ -14,7 +14,6 @@
 import com.vaadin.flow.component.sidenav.SideNavItem;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.router.RouterLink;
-import com.vaadin.flow.theme.lumo.LumoUtility;
 
 @Route("app-layout-secondary-navigation")
 // tag::snippet[]
diff --git a/src/main/java/com/vaadin/demo/component/contextmenu/ContextMenuClassname.java b/src/main/java/com/vaadin/demo/component/contextmenu/ContextMenuClassname.java
@@ -21,7 +21,7 @@ public ContextMenuClassname() {
         menu.addItem("Duplicate");
         // tag::snippet[]
         MenuItem item = menu.addItem("Delete");
-        item.setClassName("text-error");
+        item.setClassName("custom");
         // end::snippet[]
 
         add(button);
diff --git a/src/main/java/com/vaadin/demo/component/dashboard/DashboardAnnouncements.java b/src/main/java/com/vaadin/demo/component/dashboard/DashboardAnnouncements.java
@@ -54,9 +54,9 @@ public DashboardAnnouncements() {
         // Live region for screen reader announcements. Changing its text
         // content will result in a new announcement. This element is only
         // visible for demonstration purposes. In your application you should
-        // visually hide it using CSS, for example by using the sr-only Lumo
-        // utility class:
-        // liveRegion.addClassName(LumoUtility.Accessibility.SCREEN_READER_ONLY)
+        // visually hide it using CSS by applying a corresponding class name,
+        // like "screen-reader-only", as shown in the attached CSS example file:
+        // liveRegion.addClassName("screen-reader-only");
         Div liveRegion = new Div();
         liveRegion.getElement().setAttribute("aria-live", "polite");
         add(liveRegion);
diff --git a/src/main/java/com/vaadin/demo/component/menubar/MenuBarCustomStyling.java b/src/main/java/com/vaadin/demo/component/menubar/MenuBarCustomStyling.java
@@ -16,18 +16,14 @@ public MenuBarCustomStyling() {
 
         // tag::snippet[]
         MenuItem view = menuBar.addItem("View");
-        view.addClassNames(LumoUtility.Background.PRIMARY,
-                LumoUtility.TextColor.PRIMARY_CONTRAST);
-        ;
+        view.addClassNames("custom");
 
         MenuItem edit = menuBar.addItem("Edit");
 
         MenuItem share = menuBar.addItem("Share");
         SubMenu shareSubMenu = share.getSubMenu();
 
-        shareSubMenu.addItem("By email").addClassNames(
-                LumoUtility.Background.PRIMARY,
-                LumoUtility.TextColor.PRIMARY_CONTRAST);
+        shareSubMenu.addItem("By email").addClassNames("custom");
         shareSubMenu.addItem("Get Link");
         // end::snippet[]
 
diff --git a/src/main/java/com/vaadin/demo/component/messages/MessageListAiChat.java b/src/main/java/com/vaadin/demo/component/messages/MessageListAiChat.java
@@ -9,7 +9,6 @@
 import com.vaadin.flow.component.messages.MessageList;
 import com.vaadin.flow.component.messages.MessageListItem;
 import com.vaadin.flow.router.Route;
-import com.vaadin.flow.theme.lumo.LumoUtility;
 
 @Route("message-list-ai-chat")
 public class MessageListAiChat extends Div {
@@ -32,7 +31,7 @@ public MessageListAiChat() {
         // Live region for screen reader announcements
         Div liveRegion = new Div();
         liveRegion.getElement().setAttribute("aria-live", "polite");
-        liveRegion.addClassName(LumoUtility.Accessibility.SCREEN_READER_ONLY);
+        liveRegion.addClassName("screen-reader-only");
         add(liveRegion);
 
         List<Message> history = LLMClient.getHistory(chatId);
diff --git a/src/main/java/com/vaadin/demo/component/progressbar/ProgressBarLabel.java b/src/main/java/com/vaadin/demo/component/progressbar/ProgressBarLabel.java
@@ -13,8 +13,6 @@
 public class ProgressBarLabel extends Div {
 
     public ProgressBarLabel() {
-        getStyle().set("color", "var(--lumo-secondary-text-color)");
-
         // tag::snippet[]
         ProgressBar progressBar = new ProgressBar();
         progressBar.setValue(0.5);
