diff --git a/README.md b/README.md index e5d9e8b..ba1cb31 100644 --- a/README.md +++ b/README.md @@ -19,10 +19,11 @@ Responsive badge list component. ## Supported versions Supported versions: Vaadin 24-25 (add-on version 1.x) +Supported versions: Vaadin 25.1+ (add-on version 2.x) ## Online demo -[Online demo here](http://addonsv24.flowingcode.com/badge-list) +[Online demo here](http://addonsv25.flowingcode.com/badge-list) ## Download release diff --git a/pom.xml b/pom.xml index 71cdbc7..04909dc 100644 --- a/pom.xml +++ b/pom.xml @@ -4,21 +4,21 @@ com.flowingcode.vaadin.addons badge-list-addon - 1.2.1-SNAPSHOT + 2.0.0-SNAPSHOT Badge List Add-on Badge List Add-on for Vaadin Flow https://www.flowingcode.com/en/open-source/ - 24.1.6 + 25.1.1 4.10.0 - 17 - 17 + 21 + 21 UTF-8 UTF-8 ${project.basedir}/drivers 11.0.26 - 5.1.0 + 5.2.0 true @@ -113,6 +113,11 @@ vaadin-core true + + com.vaadin + vaadin-dev + true + org.slf4j slf4j-simple @@ -135,10 +140,9 @@ test - javax.servlet - javax.servlet-api - 3.1.0 - jar + jakarta.servlet + jakarta.servlet-api + 6.1.0 test @@ -494,29 +498,6 @@ - - v25 - - 21 - 21 - 25.0.2 - 11.0.26 - - - - com.vaadin - vaadin-dev - true - - - jakarta.servlet - jakarta.servlet-api - 6.1.0 - test - - - - diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java deleted file mode 100644 index a9fea38..0000000 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/Badge.java +++ /dev/null @@ -1,71 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2024 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ -package com.flowingcode.vaadin.addons.badgelist; - -import com.vaadin.flow.component.Component; -import com.vaadin.flow.component.html.Span; - -/** Component representing a badge object. */ -public class Badge extends Span { - - /** Creates a new empty badge. */ - public Badge() { - super(); - this.addThemeName("badge"); - } - - /** - * Creates a new badge with the given text. - * - * @param text the badge's text - */ - public Badge(String text) { - this(); - setText(text); - } - - /** - * Creates a new badge with the given child components. - * - * @param components the badge's components - */ - public Badge(Component... components) { - this(); - add(components); - } - - /** - * Adds a theme name to this component. - * - * @param themeName the theme name to add - */ - public void addThemeName(String themeName) { - this.getElement().getThemeList().add(themeName); - } - - /** - * Removes a theme name from this component. - * - * @param themeName the theme name to remove - */ - public void removeThemeName(String themeName) { - this.getElement().getThemeList().remove(themeName); - } -} diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java index 3b4ee3d..4714b4f 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java +++ b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -24,7 +24,7 @@ import com.vaadin.flow.component.HasSize; import com.vaadin.flow.component.HasTheme; import com.vaadin.flow.component.Tag; -import com.vaadin.flow.component.dependency.CssImport; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.dependency.JsModule; import java.util.ArrayList; import java.util.List; @@ -36,7 +36,6 @@ */ @SuppressWarnings("serial") @JsModule("./src/fc-badge-list.ts") -@CssImport("./styles/badge.css") @Tag("fc-badge-list") public class BadgeList extends Component implements HasTheme, HasSize, HasLabel { diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts index 424cefa..93ded4d 100644 --- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts +++ b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,13 +20,15 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js'; import '@vaadin/context-menu'; import type { ContextMenuItem } from '@vaadin/context-menu'; -import badgeStylesContent from '../styles/badge.css?inline'; +import '@vaadin/badge'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -import { css, html, LitElement, unsafeCSS } from 'lit'; +import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js'; +import { css, html, LitElement } from 'lit'; import { customElement, property, query, queryAssignedNodes, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; @customElement('fc-badge-list') -export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { +export class BadgeList extends ResizeMixin(ThemableMixin(ThemeDetectionMixin(LitElement))) { @query('[part~="overflow-badge"]') _overflowBadge!: HTMLDivElement @@ -50,13 +52,19 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { private overflowItems: ContextMenuItem[] = []; static styles = [ - unsafeCSS(badgeStylesContent), - css` - + css` + :host { + --badge-list-badges-margin: 0 0.25rem; + --badge-list-label-color: currentColor; + --badge-list-label-font-weight: 500; + --badge-list-label-font-size: 0.875rem; + --badge-list-label-margin-left: 0; + } + + :host([data-application-theme="lumo"]) { --badge-list-badges-margin: 0 calc(var(--lumo-space-s) / 2); --badge-list-label-color: var(--lumo-secondary-text-color); - --badge-list-label-font-weight: 500; --badge-list-label-font-size: var(--lumo-font-size-s); --badge-list-label-margin-left: calc(var(--lumo-border-radius-m) / 4); } @@ -64,12 +72,12 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { vaadin-context-menu { line-height: 0; } - - [part="container"] ::slotted(span[theme~="badge"]) { + + [part="container"] ::slotted(vaadin-badge) { margin: var(--badge-list-badges-margin); } - [part="container"] ::slotted(span[theme~="badge"]:first-child) { + [part="container"] ::slotted(vaadin-badge:first-child) { margin-left: 0; } @@ -89,6 +97,29 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { margin: var(--badge-list-badges-margin); } + :host([data-application-theme="aura"]) [part="overflow-badge"] { + color: var(--vaadin-badge-text-color, var(--aura-accent-text-color)); + background: var(--vaadin-badge-background, var(--aura-accent-surface) padding-box); + border-color: var(--vaadin-badge-border-color, var(--aura-accent-border-color)); + font-size: var(--vaadin-badge-font-size, var(--aura-font-size-s)); + --aura-surface-level: 1; + } + + :host([data-application-theme="aura"]) [part="overflow-badge"]:is([theme~='filled'], [theme~='dot']) { + background: var(--aura-accent-color); + color: var(--aura-accent-contrast-color); + } + + [part="overflow-badge"] vaadin-icon { + width: 0.75em; + height: 0.75em; + } + + :host([data-application-theme="lumo"]) [part="overflow-badge"] vaadin-icon { + width: 1em; + height: 1em; + } + :host(:not([has-label])) [part='label']{ display:none; } @@ -129,6 +160,10 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { this.theme = theme; } + private get _isAura(): boolean { + return this.getAttribute('data-application-theme') === 'aura'; + } + /** * Override getter from `ResizeMixin` to observe parent. * @@ -216,6 +251,15 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { copy.removeAttribute("slot"); copy.removeAttribute("hidden"); copy.style.margin = '5px'; + // Copy computed host styles so clones render correctly inside the overlay. + if (this._isAura) { + const computed = getComputedStyle(hiddenBadge); + copy.style.color = computed.color; + copy.style.backgroundColor = computed.backgroundColor; + copy.style.backgroundClip = computed.backgroundClip; + copy.style.borderColor = computed.borderTopColor; + copy.style.fontSize = computed.fontSize; + } const item = document.createElement('div'); item.appendChild(copy); this.overflowItems.push({ component: item }); @@ -223,6 +267,7 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) { } render() { + const icon = this._isAura ? 'vaadin:plus' : 'lumo:plus'; return html`
@@ -230,11 +275,11 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
- - + +
`; } diff --git a/src/main/resources/META-INF/resources/frontend/styles/badge.css b/src/main/resources/META-INF/resources/frontend/styles/badge.css deleted file mode 100644 index a0f9839..0000000 --- a/src/main/resources/META-INF/resources/frontend/styles/badge.css +++ /dev/null @@ -1,187 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2026 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ - -/** - * @license - * Copyright (c) 2017 - 2026 Vaadin Ltd. - * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ - */ -[theme~='badge'] { - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4); - color: var(--lumo-primary-text-color); - background-color: var(--lumo-primary-color-10pct); - border-radius: var(--lumo-border-radius-s); - font-family: var(--lumo-font-family); - font-size: var(--lumo-font-size-s); - line-height: 1; - font-weight: 500; - text-transform: initial; - letter-spacing: initial; - min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em); - flex-shrink: 0; -} - -/* Ensure proper vertical alignment */ -[theme~='badge']::before { - display: inline-block; - content: '\2003'; - width: 0; -} - -[theme~='badge'][theme~='small'] { - font-size: var(--lumo-font-size-xxs); - line-height: 1; -} - -/* Colors */ - -[theme~='badge'][theme~='success'] { - color: var(--lumo-success-text-color); - background-color: var(--lumo-success-color-10pct); -} - -[theme~='badge'][theme~='error'] { - color: var(--lumo-error-text-color); - background-color: var(--lumo-error-color-10pct); -} - -[theme~='badge'][theme~='warning'] { - color: var(--lumo-warning-text-color); - background-color: var(--lumo-warning-color-10pct); -} - -[theme~='badge'][theme~='contrast'] { - color: var(--lumo-contrast-80pct); - background-color: var(--lumo-contrast-5pct); -} - -/* Primary */ - -[theme~='badge'][theme~='primary'] { - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-primary-color); -} - -[theme~='badge'][theme~='success'][theme~='primary'] { - color: var(--lumo-success-contrast-color); - background-color: var(--lumo-success-color); -} - -[theme~='badge'][theme~='error'][theme~='primary'] { - color: var(--lumo-error-contrast-color); - background-color: var(--lumo-error-color); -} - -[theme~='badge'][theme~='warning'][theme~='primary'] { - color: var(--lumo-warning-contrast-color); - background-color: var(--lumo-warning-color); -} - -[theme~='badge'][theme~='contrast'][theme~='primary'] { - color: var(--lumo-base-color); - background-color: var(--lumo-contrast); -} - -/* Links */ - -[theme~='badge'][href]:hover { - text-decoration: none; -} - -/* Icon */ - -[theme~='badge']>vaadin-icon { - margin: -0.25em 0; -} - -[theme~='badge']>vaadin-icon:first-child { - margin-left: -0.375em; -} - -[theme~='badge']>vaadin-icon:last-child { - margin-right: -0.375em; -} - -vaadin-icon[theme~='badge'][icon] { - min-width: 0; - padding: 0; - font-size: 1rem; - width: var(--lumo-icon-size-m); - height: var(--lumo-icon-size-m); -} - -vaadin-icon[theme~='badge'][icon][theme~='small'] { - width: var(--lumo-icon-size-s); - height: var(--lumo-icon-size-s); -} - -/* Empty */ - -[theme~='badge']:not([icon]):empty { - min-width: 0; - width: 1em; - height: 1em; - padding: 0; - border-radius: 50%; - background-color: var(--lumo-primary-color); -} - -[theme~='badge'][theme~='small']:not([icon]):empty { - width: 0.75em; - height: 0.75em; -} - -[theme~='badge'][theme~='contrast']:not([icon]):empty { - background-color: var(--lumo-contrast); -} - -[theme~='badge'][theme~='success']:not([icon]):empty { - background-color: var(--lumo-success-color); -} - -[theme~='badge'][theme~='error']:not([icon]):empty { - background-color: var(--lumo-error-color); -} - -[theme~='badge'][theme~='warning']:not([icon]):empty { - background-color: var(--lumo-warning-color); -} - -/* Pill */ - -[theme~='badge'][theme~='pill'] { - --lumo-border-radius-s: 1em; -} - -/* RTL specific styles */ - -[dir='rtl'][theme~='badge'] vaadin-icon:first-child { - margin-right: -0.375em; - margin-left: 0; -} - -[dir='rtl'][theme~='badge'] vaadin-icon:last-child { - margin-left: -0.375em; - margin-right: 0; -} \ No newline at end of file diff --git a/src/main/resources/vaadin-featureflags.properties b/src/main/resources/vaadin-featureflags.properties new file mode 100644 index 0000000..9e57137 --- /dev/null +++ b/src/main/resources/vaadin-featureflags.properties @@ -0,0 +1 @@ +com.vaadin.experimental.badgeComponent=true diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java index d6dc5f0..e9d468b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -19,10 +19,17 @@ */ package com.flowingcode.vaadin.addons; +import com.flowingcode.vaadin.addons.demo.DynamicTheme; import com.vaadin.flow.component.page.AppShellConfigurator; -import com.vaadin.flow.theme.Theme; +import com.vaadin.flow.server.AppShellSettings; -@Theme public class AppShellConfiguratorImpl implements AppShellConfigurator { + @Override + public void configurePage(AppShellSettings settings) { + if (DynamicTheme.isFeatureSupported()) { + DynamicTheme.LUMO.initialize(settings); + } + } + } diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java index a778c72..7ddf7ab 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,6 +20,7 @@ package com.flowingcode.vaadin.addons.badgelist; import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.grid.Grid; import com.vaadin.flow.router.PageTitle; import com.vaadin.flow.router.Route; diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java index 1560058..9682761 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BadgeListDemoView.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java index 941f975..a568e43 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/BaseBadgeListDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java index c1b812d..217d523 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/DemoView.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java index f4ca609..38f388e 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/Person.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java index 13ff8ca..31ff4ad 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/ReadOnlyBinderDemo.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,10 +20,10 @@ package com.flowingcode.vaadin.addons.badgelist; import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.badge.Badge; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.combobox.MultiSelectComboBox; import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java index 0d33104..c9f7b5f 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java @@ -21,9 +21,10 @@ import com.flowingcode.vaadin.addons.demo.DemoSource; import com.flowingcode.vaadin.addons.demo.SourceCodeViewer; +import com.vaadin.flow.component.badge.Badge; +import com.vaadin.flow.component.badge.BadgeVariant; import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.icon.Icon; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.router.PageTitle; @@ -32,31 +33,23 @@ import java.util.List; @DemoSource -//#if vaadin eq 0 @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css", - caption = "styled-badges-demo.css", condition = "vaadin eq 24") -@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css", - caption = "styled-badges-demo.css", condition = "vaadin ge 25") + caption = "styled-badges-demo.css") @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/fc-badge-list.css", - caption = "fc-badge-list.css", condition = "vaadin ge 25") -//#endif + caption = "fc-badge-list.css") @PageTitle("Styled Badges Demo") @SuppressWarnings("serial") -//#if vaadin eq 24 -@CssImport("./styles/styled-badges-demo.css") -//#else @CssImport(value = "./styles/fc-badge-list.css", themeFor = "fc-badge-list") -@CssImport("./styles/styled-badges-demo-v25.css") -//#endif +@CssImport("./styles/styled-badges-demo.css") @Route(value = "badge-list/styled", layout = BadgeListDemoView.class) public class StyledBadgesDemo extends BaseBadgeListDemo { public StyledBadgesDemo() { - // begin-block example1 + // begin-block example1 List badges1 = new ArrayList<>(); for (int i = 0; i < 8; i++) { Badge badge = new Badge("BADGE" + (i + 1)); - badge.addThemeName("error primary"); + badge.addThemeVariants(BadgeVariant.ERROR); badges1.add(badge); } BadgeList badgeList1 = new BadgeList(badges1); @@ -94,8 +87,9 @@ public StyledBadgesDemo() { // begin-block example3 List badges3 = new ArrayList<>(); for (int i = 0; i < 12; i++) { - Badge badge = new Badge(createIcon(VaadinIcon.CHECK), new Span("BADGE" + (i + 1))); - badge.addThemeName("success"); + Badge badge = new Badge("BADGE" + (i + 1)); + badge.setIcon(createIcon(VaadinIcon.CHECK)); + badge.addThemeVariants(BadgeVariant.SUCCESS); badges3.add(badge); } BadgeList badgeList3 = new BadgeList(badges3); @@ -113,9 +107,7 @@ public StyledBadgesDemo() { // #if vaadin eq 0 private Icon createIcon(VaadinIcon vaadinIcon) { - Icon icon = vaadinIcon.create(); - icon.getStyle().set("padding", "var(--lumo-space-xs"); - return icon; + return vaadinIcon.create(); } // #endif } diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java index dd90c93..63590dc 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/TestData.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java index ec65558..7d9e058 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/AbstractViewTest.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java index 40b525b..c278273 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/badgelist/it/ViewIT.java @@ -2,7 +2,7 @@ * #%L * Badge List Add-on * %% - * Copyright (C) 2023 - 2024 Flowing Code + * Copyright (C) 2023 - 2026 Flowing Code * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css index 4cca076..0d2c3f6 100644 --- a/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css +++ b/src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css @@ -24,7 +24,7 @@ } .badge-list-container .title-span { - font-size: var(--lumo-font-size-l); + font-size: var(--lumo-font-size-l, 1.125rem); font-weight: 600; display: block; padding: 5px 0 10px 0; diff --git a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css index 098194b..6422c87 100644 --- a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css +++ b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css @@ -1,4 +1,23 @@ -/* FOR VAADIN 25 */ +/*- + * #%L + * Badge List Add-on + * %% + * Copyright (C) 2023 - 2026 Flowing Code + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * #L% + */ + /* for hidden badges in the overflow badge */ .custom-styled-badge { background-color: lightgreen; diff --git a/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css deleted file mode 100644 index c211522..0000000 --- a/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css +++ /dev/null @@ -1,28 +0,0 @@ -/*- - * #%L - * Badge List Add-on - * %% - * Copyright (C) 2023 - 2026 Flowing Code - * %% - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * #L% - */ - -fc-badge-list.styled-badges-second-example::part(overflow-badge), fc-badge-list .custom-styled-badge { - background-color: lightgreen; - color: green; - border: 1px green dashed; - border-radius: 0; -} - - \ No newline at end of file diff --git a/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css index 0fd8fd5..c211522 100644 --- a/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css +++ b/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css @@ -18,10 +18,11 @@ * #L% */ -fc-badge-list.styled-badges-second-example::part(overflow-badge), .custom-styled-badge { - background-color: lightgreen; +fc-badge-list.styled-badges-second-example::part(overflow-badge), fc-badge-list .custom-styled-badge { + background-color: lightgreen; color: green; border: 1px green dashed; border-radius: 0; } + \ No newline at end of file