From b216368c84fc8518365182ac3935861ea49a1b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 20:45:39 -0300 Subject: [PATCH 01/60] build: update name capitalization and improve description in pom.xml --- pom.xml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/pom.xml b/pom.xml index ad70f45..140a299 100644 --- a/pom.xml +++ b/pom.xml @@ -5,11 +5,11 @@ 4.0.0 com.flowingcode.vaadin.addons - template-addon + fc-toggle-button-addon 1.0.0-SNAPSHOT - Template Add-on - Template Add-on for Vaadin Flow - https://www.flowingcode.com/en/open-source/ + FC Toggle Button Add-On + Toggle button built on Vaadin components with support for customizable labels and icons + https://github.com/FlowingCode/FCToggleButton 24.9.1 @@ -38,9 +38,9 @@ - https://github.com/FlowingCode/AddonStarter24 - scm:git:git://github.com/FlowingCode/AddonStarter24.git - scm:git:ssh://git@github.com:/FlowingCode/AddonStarter24.git + https://github.com/FlowingCode/FCToggleButton + scm:git:git://github.com/FlowingCode/FCToggleButton.git + scm:git:ssh://git@github.com:/FlowingCode/FCToggleButton.git master From f01af09426fc1bf693ec3744569d4ca83240ab0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 20:58:58 -0300 Subject: [PATCH 02/60] feat: add toggle button first implementation --- src/main/frontend/fc-toggle-button.js | 222 ++++++++++++++++++ .../addons/fctogglebutton/FCToggleButton.java | 91 +++++++ .../fctogglebutton/FCToggleButtonVariant.java | 25 ++ 3 files changed, 338 insertions(+) create mode 100644 src/main/frontend/fc-toggle-button.js create mode 100644 src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java create mode 100644 src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js new file mode 100644 index 0000000..fcb5119 --- /dev/null +++ b/src/main/frontend/fc-toggle-button.js @@ -0,0 +1,222 @@ +import { LitElement, html, css } from 'lit'; + +/** + * Custom Toggle Button component. + * Supports left and right labels, and is fully stylable. + */ +class FCToggleButton extends LitElement { + static properties = { + checked: { type: Boolean, reflect: true }, + leftLabel: { type: String }, + rightLabel: { type: String }, + disabled: { type: Boolean, reflect: true }, + readonly: { type: Boolean, reflect: true } + }; + + static styles = css` + :host { + display: inline-flex; + align-items: center; + gap: var(--lumo-space-s, 8px); + font-family: var(--lumo-font-family); + color: var(--lumo-body-text-color); + cursor: pointer; + user-select: none; + transition: opacity 0.2s; + } + + :host([disabled]) { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; + } + + :host([readonly]) { + cursor: default; + pointer-events: none; + } + + .container { + display: flex; + align-items: center; + gap: var(--lumo-space-s, 8px); + } + + .label { + font-size: var(--lumo-font-size-s, 14px); + font-weight: 500; + transition: color 0.3s; + } + + .label.active { + color: var(--lumo-primary-text-color); + } + + .label.inactive { + color: var(--lumo-secondary-text-color); + opacity: 0.7; + } + + .switch { + position: relative; + width: 44px; + height: 24px; + background-color: var(--lumo-contrast-20pct, #e0e0e0); + border-radius: 12px; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: inline-block; + } + + :host([checked]) .switch { + background-color: var(--lumo-primary-color, #007bff); + } + + /* Theme Variants */ + :host([theme~="success"][checked]) .switch { + background-color: var(--lumo-success-color, #28a745); + } + + :host([theme~="error"][checked]) .switch { + background-color: var(--lumo-error-color, #dc3545); + } + + :host([theme~="warning"][checked]) .switch { + background-color: #ffc107; /* Custom warning color if Lumo doesn't provide one */ + color: rgba(0, 0, 0, 0.85); + } + + :host([theme~="primary"][checked]) .switch { + background-color: var(--lumo-primary-color, #007bff); + } + + /* Slider colors for variants if needed */ + :host([theme~="warning"]) .slider { + background-color: #fff; + } + + .slider { + position: absolute; + top: 3px; + left: 3px; + width: 18px; + height: 18px; + background-color: var(--lumo-base-color, #fff); + border-radius: 50%; + box-shadow: var(--lumo-box-shadow-s, 0 2px 4px rgba(0,0,0,0.2)); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + :host([checked]) .slider { + transform: translateX(20px); + } + + /* Hover effects */ + :host(:hover:not([disabled])) .switch { + filter: brightness(0.95); + } + + :host([checked]:hover:not([disabled])) .switch { + filter: brightness(1.1); + } + + .switch:active .slider { + width: 22px; + } + + :host([checked]) .switch:active .slider { + transform: translateX(16px); + } + + /* Size Variants */ + :host([theme~="small"]) .switch { + width: 32px; + height: 18px; + } + + :host([theme~="small"]) .slider { + width: 14px; + height: 14px; + top: 2px; + left: 2px; + } + + :host([theme~="small"][checked]) .slider { + transform: translateX(14px); + } + + :host([theme~="small"]) .label { + font-size: var(--lumo-font-size-xs, 12px); + } + + :host([theme~="large"]) .switch { + width: 56px; + height: 32px; + } + + :host([theme~="large"]) .slider { + width: 24px; + height: 24px; + top: 4px; + left: 4px; + } + + :host([theme~="large"][checked]) .slider { + transform: translateX(24px); + } + + :host([theme~="large"]) .label { + font-size: var(--lumo-font-size-l, 18px); + } + + /* Readonly Styles: Unify the look for both checked/unchecked and variants */ + :host([readonly]) .switch { + background-color: var(--lumo-contrast-10pct, #f0f0f0) !important; + border: 3px dotted var(--lumo-contrast-30pct, #ccc) !important; + box-sizing: border-box; + } + + :host([readonly]) .slider { + top: 0 !important; + left: 0 !important; + box-shadow: none !important; + background-color: var(--lumo-contrast-40pct, #999) !important; + } + `; + + constructor() { + super(); + this.checked = false; + this.leftLabel = ''; + this.rightLabel = ''; + this.disabled = false; + this.readonly = false; + this.addEventListener('click', this._toggle); + } + + _toggle(e) { + if (this.disabled || this.readonly) return; + this.checked = !this.checked; + this.dispatchEvent(new CustomEvent('checked-changed', { + detail: { value: this.checked }, + bubbles: true, + composed: true + })); + } + + render() { + return html` +
+ + ${this.leftLabel ? html`${this.leftLabel}` : ''} +
+
+
+ ${this.rightLabel ? html`${this.rightLabel}` : ''} + +
+ `; + } +} + +customElements.define('fc-toggle-button', FCToggleButton); +export { FCToggleButton }; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java new file mode 100644 index 0000000..9802cc1 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -0,0 +1,91 @@ +package com.flowingcode.vaadin.addons.fctogglebutton; + +import com.vaadin.flow.component.AbstractSinglePropertyField; +import com.vaadin.flow.component.Component; +import com.vaadin.flow.component.HasAriaLabel; +import com.vaadin.flow.component.HasComponents; +import com.vaadin.flow.component.HasSize; +import com.vaadin.flow.component.ItemLabelGenerator; +import com.vaadin.flow.component.Tag; +import com.vaadin.flow.component.dependency.JsModule; +import com.vaadin.flow.component.dependency.NpmPackage; +import com.vaadin.flow.component.shared.HasThemeVariant; +import com.vaadin.flow.component.shared.HasTooltip; +import com.vaadin.flow.component.shared.Tooltip; + +/** Java bridge for the fc-toggle-button LitElement component. */ +@Tag("fc-toggle-button") +@JsModule("./fc-toggle-button.js") +@NpmPackage(value = "lit", version = "3.3.2") +public class FCToggleButton extends AbstractSinglePropertyField + implements HasSize, + HasComponents, + HasAriaLabel, + HasTooltip, + HasThemeVariant { + + private ItemLabelGenerator itemLabelGenerator = b -> ""; + + public FCToggleButton() { + this(false); + } + + public FCToggleButton(boolean initialValue) { + super("checked", initialValue, false); + if (initialValue) { + getElement().setAttribute("checked", ""); + } + setSynchronizedEvent("checked-changed"); + } + + @Override + public void setReadOnly(boolean readOnly) { + getElement().setProperty("readonly", readOnly); + } + + @Override + public boolean isReadOnly() { + return getElement().getProperty("readonly", false); + } + + @Override + public Tooltip setTooltipText(String text) { + Tooltip tooltip = Tooltip.forComponent(this); + tooltip.setText(text); + return tooltip; + } + + public void setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { + this.itemLabelGenerator = itemLabelGenerator; + updateLabels(); + } + + @Override + public void setValue(Boolean value) { + super.setValue(value); + updateLabels(); + } + + private void updateLabels() { + getElement().setProperty("leftLabel", itemLabelGenerator.apply(false)); + getElement().setProperty("rightLabel", itemLabelGenerator.apply(true)); + } + + public void setLeftLabel(String label) { + getElement().setProperty("leftLabel", label); + } + + public void setRightLabel(String label) { + getElement().setProperty("rightLabel", label); + } + + public void setLeftIcon(Component icon) { + icon.getElement().setAttribute("slot", "left"); + add(icon); + } + + public void setRightIcon(Component icon) { + icon.getElement().setAttribute("slot", "right"); + add(icon); + } +} diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java new file mode 100644 index 0000000..665a791 --- /dev/null +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -0,0 +1,25 @@ +package com.flowingcode.vaadin.addons.fctogglebutton; + +import com.vaadin.flow.component.shared.ThemeVariant; + +/** Enum for theme variants supported by the {@link FCToggleButton} component. */ +public enum FCToggleButtonVariant implements ThemeVariant { + SMALL("small"), + //TODO: añadir medium + LARGE("large"), + PRIMARY("primary"), + SUCCESS("success"), + WARNING("warning"), + ERROR("error"); + + private final String variant; + + FCToggleButtonVariant(String variant) { + this.variant = variant; + } + + @Override + public String getVariantName() { + return variant; + } +} From 950015ea1e92dce0bb3b29081a86d8da177245a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 20:59:36 -0300 Subject: [PATCH 03/60] refactor: remove TemplateAddon placeholder class --- .../vaadin/addons/template/TemplateAddon.java | 32 ------------------- 1 file changed, 32 deletions(-) delete mode 100644 src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java diff --git a/src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java b/src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java deleted file mode 100644 index a318158..0000000 --- a/src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java +++ /dev/null @@ -1,32 +0,0 @@ -/*- - * #%L - * Template Add-on - * %% - * Copyright (C) 2025 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.template; - -import com.vaadin.flow.component.Tag; -import com.vaadin.flow.component.dependency.JsModule; -import com.vaadin.flow.component.dependency.NpmPackage; -import com.vaadin.flow.component.html.Div; - -@SuppressWarnings("serial") -@NpmPackage(value = "@polymer/paper-input", version = "3.2.1") -@JsModule("@polymer/paper-input/paper-input.js") -@Tag("paper-input") -public class TemplateAddon extends Div {} From 40b94e271da6bdbd37ea426bc86f024806252ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:00:31 -0300 Subject: [PATCH 04/60] build: add license headers to FCToggleButton and FCToggleButtonVariant --- .../addons/fctogglebutton/FCToggleButton.java | 19 +++++++++++++++++ .../fctogglebutton/FCToggleButtonVariant.java | 19 +++++++++++++++++ .../META-INF/VAADIN/package.properties | 19 +++++++++++++++++ .../flowingcode/vaadin/addons/DemoLayout.java | 8 +++---- .../vaadin/addons/template/DemoView.java | 8 +++---- .../vaadin/addons/template/TemplateDemo.java | 4 ++-- .../addons/template/TemplateDemoView.java | 8 +++---- .../addons/template/it/AbstractViewTest.java | 8 +++---- .../vaadin/addons/template/it/ViewIT.java | 8 +++---- .../template/test/SerializationTest.java | 8 +++---- .../frontend/styles/shared-styles.css | 21 ++++++++++++++++++- 11 files changed, 103 insertions(+), 27 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index 9802cc1..a513c97 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -1,3 +1,22 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ package com.flowingcode.vaadin.addons.fctogglebutton; import com.vaadin.flow.component.AbstractSinglePropertyField; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 665a791..6ef91a9 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -1,3 +1,22 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ package com.flowingcode.vaadin.addons.fctogglebutton; import com.vaadin.flow.component.shared.ThemeVariant; diff --git a/src/main/resources/META-INF/VAADIN/package.properties b/src/main/resources/META-INF/VAADIN/package.properties index c66616f..785dce8 100644 --- a/src/main/resources/META-INF/VAADIN/package.properties +++ b/src/main/resources/META-INF/VAADIN/package.properties @@ -1 +1,20 @@ +### +# #%L +# FC Toggle Button Add-On +# %% +# Copyright (C) 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% +### vaadin.allowed-packages=com.flowingcode diff --git a/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java b/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java index 8996b87..8b8bdc8 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java +++ b/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java b/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java index 0561979..c62b6fe 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java b/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java index 294ae97..71e0399 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java @@ -1,8 +1,8 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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/template/TemplateDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java index a17133f..7f06e67 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java b/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java index a2579ad..e0a0523 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java index 628dc14..35ec0e9 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java b/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java index 1f8ceed..3466c3a 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java @@ -1,15 +1,15 @@ /*- * #%L - * Template Add-on + * FC Toggle Button Add-On * %% - * Copyright (C) 2025 Flowing Code + * Copyright (C) 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. diff --git a/src/test/resources/META-INF/frontend/styles/shared-styles.css b/src/test/resources/META-INF/frontend/styles/shared-styles.css index 6680e2d..3af2c70 100644 --- a/src/test/resources/META-INF/frontend/styles/shared-styles.css +++ b/src/test/resources/META-INF/frontend/styles/shared-styles.css @@ -1 +1,20 @@ -/*Demo styles*/ \ No newline at end of file +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ +/*Demo styles*/ From 0bbfb5276e66ce85d2293310d7d2de513cd088f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:02:43 -0300 Subject: [PATCH 05/60] docs: add Javadoc to FCToggleButton and FCToggleButtonVariant public API --- .../addons/fctogglebutton/FCToggleButton.java | 47 ++++++++++++++++++- .../fctogglebutton/FCToggleButtonVariant.java | 6 ++- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index a513c97..5a31de6 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -32,7 +32,14 @@ import com.vaadin.flow.component.shared.HasTooltip; import com.vaadin.flow.component.shared.Tooltip; -/** Java bridge for the fc-toggle-button LitElement component. */ +/** + * A toggle button component built on Vaadin with support for customizable labels and icons. + * + *

The component displays a switch with optional left and right labels or icons, and fires a + * value-change event when toggled. + * + * @since 1.0.0 + */ @Tag("fc-toggle-button") @JsModule("./fc-toggle-button.js") @NpmPackage(value = "lit", version = "3.3.2") @@ -45,10 +52,16 @@ public class FCToggleButton extends AbstractSinglePropertyField itemLabelGenerator = b -> ""; + /** Creates a new toggle button with an initial value of {@code false}. */ public FCToggleButton() { this(false); } + /** + * Creates a new toggle button with the given initial value. + * + * @param initialValue the initial checked state + */ public FCToggleButton(boolean initialValue) { super("checked", initialValue, false); if (initialValue) { @@ -74,6 +87,14 @@ public Tooltip setTooltipText(String text) { return tooltip; } + /** + * Sets a generator that provides labels for the checked ({@code true}) and unchecked + * ({@code false}) states. The generator is called with the state value and its result is used + * as the right label for {@code true} and the left label for {@code false}. + * + * @param itemLabelGenerator the label generator; must not be {@code null} + * @since 1.0.0 + */ public void setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { this.itemLabelGenerator = itemLabelGenerator; updateLabels(); @@ -90,19 +111,43 @@ private void updateLabels() { getElement().setProperty("rightLabel", itemLabelGenerator.apply(true)); } + /** + * Sets the label displayed on the left side of the toggle switch. + * + * @param label the left label text + * @since 1.0.0 + */ public void setLeftLabel(String label) { getElement().setProperty("leftLabel", label); } + /** + * Sets the label displayed on the right side of the toggle switch. + * + * @param label the right label text + * @since 1.0.0 + */ public void setRightLabel(String label) { getElement().setProperty("rightLabel", label); } + /** + * Sets the icon displayed on the left side of the toggle switch. + * + * @param icon the component to use as the left icon + * @since 1.0.0 + */ public void setLeftIcon(Component icon) { icon.getElement().setAttribute("slot", "left"); add(icon); } + /** + * Sets the icon displayed on the right side of the toggle switch. + * + * @param icon the component to use as the right icon + * @since 1.0.0 + */ public void setRightIcon(Component icon) { icon.getElement().setAttribute("slot", "right"); add(icon); diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 6ef91a9..795be36 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -21,7 +21,11 @@ import com.vaadin.flow.component.shared.ThemeVariant; -/** Enum for theme variants supported by the {@link FCToggleButton} component. */ +/** + * Theme variants for the {@link FCToggleButton} component. + * + * @since 1.0.0 + */ public enum FCToggleButtonVariant implements ThemeVariant { SMALL("small"), //TODO: añadir medium From 7d439acfab6955e56fc9377930b2a7283fb577ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:04:45 -0300 Subject: [PATCH 06/60] feat: make FCToggleButton API fluent --- .../addons/fctogglebutton/FCToggleButton.java | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index 5a31de6..bbb38de 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -93,11 +93,13 @@ public Tooltip setTooltipText(String text) { * as the right label for {@code true} and the left label for {@code false}. * * @param itemLabelGenerator the label generator; must not be {@code null} + * @return this instance for method chaining * @since 1.0.0 */ - public void setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { + public FCToggleButton setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { this.itemLabelGenerator = itemLabelGenerator; updateLabels(); + return this; } @Override @@ -115,41 +117,49 @@ private void updateLabels() { * Sets the label displayed on the left side of the toggle switch. * * @param label the left label text + * @return this instance for method chaining * @since 1.0.0 */ - public void setLeftLabel(String label) { + public FCToggleButton setLeftLabel(String label) { getElement().setProperty("leftLabel", label); + return this; } /** * Sets the label displayed on the right side of the toggle switch. * * @param label the right label text + * @return this instance for method chaining * @since 1.0.0 */ - public void setRightLabel(String label) { + public FCToggleButton setRightLabel(String label) { getElement().setProperty("rightLabel", label); + return this; } /** * Sets the icon displayed on the left side of the toggle switch. * * @param icon the component to use as the left icon + * @return this instance for method chaining * @since 1.0.0 */ - public void setLeftIcon(Component icon) { + public FCToggleButton setLeftIcon(Component icon) { icon.getElement().setAttribute("slot", "left"); add(icon); + return this; } /** * Sets the icon displayed on the right side of the toggle switch. * * @param icon the component to use as the right icon + * @return this instance for method chaining * @since 1.0.0 */ - public void setRightIcon(Component icon) { + public FCToggleButton setRightIcon(Component icon) { icon.getElement().setAttribute("slot", "right"); add(icon); + return this; } } From 298e266f0b46aa8d5656cf4076ae6815dc9c6c52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:10:10 -0300 Subject: [PATCH 07/60] test: migrate demo and test classes to fctogglebutton package MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename and move all classes from the template package to com.flowingcode.vaadin.addons.fctogglebutton: - SerializationTest now tests FCToggleButton - TemplateDemo → FCToggleButtonDemo (updated title and route) - TemplateDemoView → FCToggleButtonDemoView (route, GitHub link) - DemoView forwards to FCToggleButtonDemoView - AbstractViewTest and ViewIT moved to fctogglebutton.it package - ViewIT now queries fc-toggle-button instead of paper-input --- .../FCToggleButtonDemo.java} | 16 ++++----- .../FCToggleButtonDemoView.java} | 16 ++++----- .../it/AbstractViewTest.java | 9 +++-- .../it/ViewIT.java | 9 +++-- .../test/SerializationTest.java | 10 +++--- .../vaadin/addons/template/DemoView.java | 36 ------------------- 6 files changed, 29 insertions(+), 67 deletions(-) rename src/test/java/com/flowingcode/vaadin/addons/{template/TemplateDemo.java => fctogglebutton/FCToggleButtonDemo.java} (76%) rename src/test/java/com/flowingcode/vaadin/addons/{template/TemplateDemoView.java => fctogglebutton/FCToggleButtonDemoView.java} (77%) rename src/test/java/com/flowingcode/vaadin/addons/{template => fctogglebutton}/it/AbstractViewTest.java (95%) rename src/test/java/com/flowingcode/vaadin/addons/{template => fctogglebutton}/it/ViewIT.java (94%) rename src/test/java/com/flowingcode/vaadin/addons/{template => fctogglebutton}/test/SerializationTest.java (89%) delete mode 100644 src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java similarity index 76% rename from src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java rename to src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index 71e0399..d90432c 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -7,9 +7,9 @@ * 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. @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.template; +package com.flowingcode.vaadin.addons.fctogglebutton; import com.flowingcode.vaadin.addons.demo.DemoSource; import com.vaadin.flow.component.html.Div; @@ -25,12 +25,12 @@ import com.vaadin.flow.router.Route; @DemoSource -@PageTitle("Template Add-on Demo") +@PageTitle("FC Toggle Button Add-On Demo") @SuppressWarnings("serial") -@Route(value = "demo", layout = TemplateDemoView.class) -public class TemplateDemo extends Div { +@Route(value = "demo", layout = FCToggleButtonDemoView.class) +public class FCToggleButtonDemo extends Div { - public TemplateDemo() { - add(new TemplateAddon()); + public FCToggleButtonDemo() { + add(new FCToggleButton()); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java similarity index 77% rename from src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java rename to src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java index 7f06e67..c45af36 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/TemplateDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java @@ -7,9 +7,9 @@ * 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. @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.template; +package com.flowingcode.vaadin.addons.fctogglebutton; import com.flowingcode.vaadin.addons.DemoLayout; import com.flowingcode.vaadin.addons.GithubLink; @@ -27,12 +27,12 @@ @SuppressWarnings("serial") @ParentLayout(DemoLayout.class) -@Route("template") -@GithubLink("https://github.com/FlowingCode/AddonStarter24") -public class TemplateDemoView extends TabbedDemo { +@Route("fctogglebutton") +@GithubLink("https://github.com/FlowingCode/FCToggleButton") +public class FCToggleButtonDemoView extends TabbedDemo { - public TemplateDemoView() { - addDemo(TemplateDemo.class); + public FCToggleButtonDemoView() { + addDemo(FCToggleButtonDemo.class); setSizeFull(); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java similarity index 95% rename from src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java rename to src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java index e0a0523..486a83b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/it/AbstractViewTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java @@ -7,9 +7,9 @@ * 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. @@ -17,8 +17,7 @@ * limitations under the License. * #L% */ - -package com.flowingcode.vaadin.addons.template.it; +package com.flowingcode.vaadin.addons.fctogglebutton.it; import com.vaadin.testbench.ScreenshotOnFailureRule; import com.vaadin.testbench.TestBench; @@ -33,7 +32,7 @@ * Base class for ITs * *

The tests use Chrome driver (see pom.xml for integration-tests profile) to run integration - * tests on a headless Chrome. If a property {@code test.use .hub} is set to true, {@code + * tests on a headless Chrome. If a property {@code test.use.hub} is set to true, {@code * AbstractViewTest} will assume that the TestBench test is running in a CI environment. In order to * keep the this class light, it makes certain assumptions about the CI environment (such as * available environment variables). It is not advisable to use this class as a base class for you diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java similarity index 94% rename from src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java rename to src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java index 35ec0e9..54d3e99 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java @@ -7,9 +7,9 @@ * 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. @@ -17,8 +17,7 @@ * limitations under the License. * #L% */ - -package com.flowingcode.vaadin.addons.template.it; +package com.flowingcode.vaadin.addons.fctogglebutton.it; import static org.hamcrest.Matchers.is; import static org.hamcrest.Matchers.not; @@ -58,7 +57,7 @@ protected boolean matchesSafely(TestBenchElement item, Description mismatchDescr @Test public void componentWorks() { - TestBenchElement element = $("paper-input").first(); + TestBenchElement element = $("fc-toggle-button").first(); assertThat(element, hasBeenUpgradedToCustomElement); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java similarity index 89% rename from src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java rename to src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java index 3466c3a..9bab2cf 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/template/test/SerializationTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java @@ -7,9 +7,9 @@ * 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. @@ -17,9 +17,9 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.template.test; +package com.flowingcode.vaadin.addons.fctogglebutton.test; -import com.flowingcode.vaadin.addons.template.TemplateAddon; +import com.flowingcode.vaadin.addons.fctogglebutton.FCToggleButton; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOException; @@ -44,7 +44,7 @@ private void testSerializationOf(Object obj) throws IOException, ClassNotFoundEx @Test public void testSerialization() throws ClassNotFoundException, IOException { try { - testSerializationOf(new TemplateAddon()); + testSerializationOf(new FCToggleButton()); } catch (Exception e) { Assert.fail("Problem while testing serialization: " + e.getMessage()); } diff --git a/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java b/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java deleted file mode 100644 index c62b6fe..0000000 --- a/src/test/java/com/flowingcode/vaadin/addons/template/DemoView.java +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * #%L - * FC Toggle Button Add-On - * %% - * Copyright (C) 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% - */ - -package com.flowingcode.vaadin.addons.template; - -import com.vaadin.flow.component.orderedlayout.VerticalLayout; -import com.vaadin.flow.router.BeforeEnterEvent; -import com.vaadin.flow.router.BeforeEnterObserver; -import com.vaadin.flow.router.Route; - -@SuppressWarnings("serial") -@Route("") -public class DemoView extends VerticalLayout implements BeforeEnterObserver { - - @Override - public void beforeEnter(BeforeEnterEvent event) { - event.forwardTo(TemplateDemoView.class); - } -} From 0cc600e619c5ea8df618681d9641b27a75bcf69e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:15:56 -0300 Subject: [PATCH 08/60] docs(readme): update README for FC Toggle Button add-on Replace all template references with FC Toggle Button content: badges, description, features list, demo URL, getting started examples, and release notes link. --- README.md | 67 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index d4224a3..df01036 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,29 @@ -[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/template-add-on) -[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/template-add-on.svg)](https://vaadin.com/directory/component/template-add-on) -[![Build Status](https://jenkins.flowingcode.com/job/template-addon/badge/icon)](https://jenkins.flowingcode.com/job/template-addon) -[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/template-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/template-addon) -[![Javadoc](https://img.shields.io/badge/javadoc-00b4f0)](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/template-addon) +[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/fc-toggle-button-addon) +[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/fc-toggle-button-addon.svg)](https://vaadin.com/directory/component/fc-toggle-button-addon) +[![Build Status](https://jenkins.flowingcode.com/job/fc-toggle-button-addon/badge/icon)](https://jenkins.flowingcode.com/job/fc-toggle-button-addon) +[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/fc-toggle-button-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/fc-toggle-button-addon) +[![Javadoc](https://img.shields.io/badge/javadoc-00b4f0)](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/fc-toggle-button-addon) -# Template Add-On +# FC Toggle Button Add-On -This is a template project for building new Vaadin 24 add-ons +A toggle button component for Vaadin Flow that supports customizable labels and icons on both sides of the toggle. ## Features -* List the features of your add-on in here +* Toggle between two states with a single click +* Customizable left and right labels +* Support for icons on both sides via slots +* Theme variants: `SMALL`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR` +* Fluent API for easy configuration +* Full integration with Vaadin's `HasValue`, `HasSize`, `HasAriaLabel`, and `HasTooltip` ## Online demo -[Online demo here](http://addonsv24.flowingcode.com/template) +[Online demo here](http://addonsv24.flowingcode.com/fctogglebutton) ## Download release -[Available in Vaadin Directory](https://vaadin.com/directory/component/template-add-on) +[Available in Vaadin Directory](https://vaadin.com/directory/component/fc-toggle-button-addon) ### Maven install @@ -27,7 +32,7 @@ Add the following dependencies in your pom.xml file: ```xml com.flowingcode.vaadin.addons - template-addon + fc-toggle-button-addon X.Y.Z ``` @@ -44,11 +49,11 @@ To see the demo, navigate to http://localhost:8080/ ## Release notes -See [here](https://github.com/FlowingCode/TemplateAddon/releases) +See [here](https://github.com/FlowingCode/FCToggleButton/releases) ## Issue tracking -The issues for this add-on are tracked on its github.com page. All bug reports and feature requests are appreciated. +The issues for this add-on are tracked on its github.com page. All bug reports and feature requests are appreciated. ## Contributions @@ -62,9 +67,9 @@ Creating an issue is a highly valuable contribution. If you've found a bug or ha * If not, create a new issue, choosing the right option: "Bug Report" or "Feature Request". Try to keep the scope minimal but as detailed as possible. > **A Note on Bug Reports** -> +> > Please complete all the requested fields to the best of your ability. Each piece of information, like the environment versions and a clear description, helps us understand the context of the issue. -> +> > While all details are important, the **[minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)** is the most critical part of your report. It's essential because it removes ambiguity and allows our team to observe the problem firsthand, exactly as you are experiencing it. #### 2. Contributing Code via Pull Requests @@ -72,7 +77,7 @@ Creating an issue is a highly valuable contribution. If you've found a bug or ha As a first step, please refer to our [Development Conventions](https://github.com/FlowingCode/DevelopmentConventions) page to find information about Conventional Commits & Code Style requirements. Then, follow these steps for creating a contribution: - + - Fork this project. - Create an issue to this project about the contribution (bug or feature) if there is no such issue about it already. Try to keep the scope minimal. - Develop and test the fix or functionality carefully. Only include minimum amount of code needed to fix the issue. @@ -84,22 +89,44 @@ Then, follow these steps for creating a contribution: This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt. -Template Add-On is written by Flowing Code S.A. +FC Toggle Button Add-On is written by Flowing Code S.A. # Developer Guide ## Getting started -Add your code samples in this section +```java +// Basic toggle button +FCToggleButton toggle = new FCToggleButton(); + +// With labels +FCToggleButton toggle = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On"); + +// With icons +FCToggleButton toggle = new FCToggleButton() + .setLeftLabel("Dark") + .setRightLabel("Light") + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setRightIcon(new Icon(VaadinIcon.SUN_O)); + +// Listen to value changes +toggle.addValueChangeListener(e -> + Notification.show("Toggle is now: " + (e.getValue() ? "on" : "off"))); + +// Apply theme variants +toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); +``` ## Special configuration when using Spring -By default, Vaadin Flow only includes `com/vaadin/flow/component` to be always scanned for UI components and views. For this reason, the add-on might need to be allowed in order to display correctly. +By default, Vaadin Flow only includes `com/vaadin/flow/component` to be always scanned for UI components and views. For this reason, the add-on might need to be allowed in order to display correctly. To do so, just add `com.flowingcode` to the `vaadin.allowed-packages` property in `src/main/resources/application.properties`, like: ``` vaadin.allowed-packages = com.vaadin,org.vaadin,dev.hilla,com.flowingcode ``` - + More information on Spring scanning configuration [here](https://vaadin.com/docs/latest/integrations/spring/configuration/#configure-the-scanning-of-packages). From 822abbffbeb739ed3165eeba2f530ebb7e50487c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:18:05 -0300 Subject: [PATCH 09/60] feat: add CONTRAST theme variant Add FCToggleButtonVariant.CONTRAST, applying --lumo-contrast-color to the switch track when checked, consistent with Vaadin Button's contrast variant behavior. --- README.md | 3 ++- src/main/frontend/fc-toggle-button.js | 8 ++++++++ .../addons/fctogglebutton/FCToggleButtonVariant.java | 3 ++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index df01036..f45052f 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Toggle between two states with a single click * Customizable left and right labels * Support for icons on both sides via slots -* Theme variants: `SMALL`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR` +* Theme variants: `SMALL`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * Fluent API for easy configuration * Full integration with Vaadin's `HasValue`, `HasSize`, `HasAriaLabel`, and `HasTooltip` @@ -117,6 +117,7 @@ toggle.addValueChangeListener(e -> // Apply theme variants toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); +toggle.addThemeVariants(FCToggleButtonVariant.CONTRAST); ``` ## Special configuration when using Spring diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index fcb5119..99689e9 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -89,6 +89,14 @@ class FCToggleButton extends LitElement { background-color: var(--lumo-primary-color, #007bff); } + :host([theme~="contrast"][checked]) .switch { + background-color: var(--lumo-contrast-color, #000); + } + + :host([theme~="contrast"]) .slider { + background-color: var(--lumo-base-color, #fff); + } + /* Slider colors for variants if needed */ :host([theme~="warning"]) .slider { background-color: #fff; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 795be36..54b655f 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -33,7 +33,8 @@ public enum FCToggleButtonVariant implements ThemeVariant { PRIMARY("primary"), SUCCESS("success"), WARNING("warning"), - ERROR("error"); + ERROR("error"), + CONTRAST("contrast"); private final String variant; From 57c0730fdd18b5c296019a7809338432a2292aab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:19:29 -0300 Subject: [PATCH 10/60] feat: add MEDIUM size variant Add FCToggleButtonVariant.MEDIUM as an explicit variant matching the default size, allowing it to be set programmatically alongside other theme variants. --- README.md | 2 +- src/main/frontend/fc-toggle-button.js | 20 +++++++++++++++++++ .../fctogglebutton/FCToggleButtonVariant.java | 2 +- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f45052f..91eafa0 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Toggle between two states with a single click * Customizable left and right labels * Support for icons on both sides via slots -* Theme variants: `SMALL`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` +* Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * Fluent API for easy configuration * Full integration with Vaadin's `HasValue`, `HasSize`, `HasAriaLabel`, and `HasTooltip` diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 99689e9..1bb577e 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -136,6 +136,26 @@ class FCToggleButton extends LitElement { } /* Size Variants */ + :host([theme~="medium"]) .switch { + width: 44px; + height: 24px; + } + + :host([theme~="medium"]) .slider { + width: 18px; + height: 18px; + top: 3px; + left: 3px; + } + + :host([theme~="medium"][checked]) .slider { + transform: translateX(20px); + } + + :host([theme~="medium"]) .label { + font-size: var(--lumo-font-size-s, 14px); + } + :host([theme~="small"]) .switch { width: 32px; height: 18px; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 54b655f..03df5c8 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -28,7 +28,7 @@ */ public enum FCToggleButtonVariant implements ThemeVariant { SMALL("small"), - //TODO: añadir medium + MEDIUM("medium"), LARGE("large"), PRIMARY("primary"), SUCCESS("success"), From ab04f7dabdffb7674513c52874fcba27177c1bc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:21:33 -0300 Subject: [PATCH 11/60] chore: update issue templates for FC Toggle Button Add-On Replace TEMPLATE_ADDON placeholder with FC Toggle Button Add-On in bug-report.yml and feature-request.yml descriptions. --- .github/ISSUE_TEMPLATE/bug-report.yml | 2 +- .github/ISSUE_TEMPLATE/feature-request.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index f804cc1..6ac7bfb 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -1,5 +1,5 @@ name: Bug Report -description: Please report issues related to TEMPLATE_ADDON here. +description: Please report issues related to FC Toggle Button Add-On here. body: - type: textarea id: problem-description diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml index 4d37c3b..b54257d 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.yml +++ b/.github/ISSUE_TEMPLATE/feature-request.yml @@ -1,5 +1,5 @@ name: Feature Request -description: Please add feature suggestions related to TEMPLATE_ADDON here. +description: Please add feature suggestions related to FC Toggle Button Add-On here. body: - type: textarea id: feature-proposal From 4bdc4912f73775c738cb4575e46917e3e71dc7e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:33:41 -0300 Subject: [PATCH 12/60] test(demo): add tabbed demos for labels, variants, and events Split demo content into three focused tabs: - FCToggleButtonDemo: labels and icons combinations - FCToggleButtonVariantsDemo: all color, size, and state variants - FCToggleButtonEventsDemo: value change, aria-label, and tooltip --- .../fctogglebutton/FCToggleButtonDemo.java | 48 ++++++++++- .../FCToggleButtonDemoView.java | 2 + .../FCToggleButtonEventsDemo.java | 62 +++++++++++++++ .../FCToggleButtonVariantsDemo.java | 79 +++++++++++++++++++ 4 files changed, 188 insertions(+), 3 deletions(-) create mode 100644 src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java create mode 100644 src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index d90432c..fd665dc 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -21,16 +21,58 @@ import com.flowingcode.vaadin.addons.demo.DemoSource; import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.html.H3; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.router.PageTitle; import com.vaadin.flow.router.Route; @DemoSource -@PageTitle("FC Toggle Button Add-On Demo") +@PageTitle("Labels and Icons") @SuppressWarnings("serial") -@Route(value = "demo", layout = FCToggleButtonDemoView.class) +@Route(value = "labels", layout = FCToggleButtonDemoView.class) public class FCToggleButtonDemo extends Div { public FCToggleButtonDemo() { - add(new FCToggleButton()); + + FCToggleButton basic = new FCToggleButton(); + + FCToggleButton withLeftLabel = new FCToggleButton() + .setLeftLabel("Off"); + + FCToggleButton withRightLabel = new FCToggleButton() + .setRightLabel("On"); + + FCToggleButton withBothLabels = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On"); + + FCToggleButton withLeftIcon = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)); + + FCToggleButton withRightIcon = new FCToggleButton() + .setRightIcon(new Icon(VaadinIcon.SUN_O)); + + FCToggleButton withBothIcons = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setRightIcon(new Icon(VaadinIcon.SUN_O)); + + FCToggleButton withLabelsAndIcons = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setLeftLabel("Dark") + .setRightLabel("Light") + .setRightIcon(new Icon(VaadinIcon.SUN_O)); + + add(new VerticalLayout( + new H3("Basic"), + basic, + new H3("With labels"), + new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels), + new H3("With icons"), + new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons), + new H3("With labels and icons"), + withLabelsAndIcons)); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java index c45af36..83cc296 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java @@ -33,6 +33,8 @@ public class FCToggleButtonDemoView extends TabbedDemo { public FCToggleButtonDemoView() { addDemo(FCToggleButtonDemo.class); + addDemo(FCToggleButtonVariantsDemo.class); + addDemo(FCToggleButtonEventsDemo.class); setSizeFull(); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java new file mode 100644 index 0000000..2aa2661 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java @@ -0,0 +1,62 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ +package com.flowingcode.vaadin.addons.fctogglebutton; + +import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.html.H3; +import com.vaadin.flow.component.notification.Notification; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@DemoSource +@PageTitle("Events and Accessibility") +@SuppressWarnings("serial") +@Route(value = "events", layout = FCToggleButtonDemoView.class) +public class FCToggleButtonEventsDemo extends Div { + + public FCToggleButtonEventsDemo() { + + FCToggleButton withValueChange = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On"); + withValueChange.addValueChangeListener(e -> + Notification.show("Value changed to: " + e.getValue())); + + FCToggleButton withAriaLabel = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On"); + withAriaLabel.setAriaLabel("Enable notifications"); + + FCToggleButton withTooltip = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On"); + withTooltip.setTooltipText("Toggle to enable or disable this feature"); + + add(new VerticalLayout( + new H3("Value change event"), + withValueChange, + new H3("Aria label"), + withAriaLabel, + new H3("Tooltip"), + withTooltip)); + } +} diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java new file mode 100644 index 0000000..dfc1be4 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java @@ -0,0 +1,79 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ +package com.flowingcode.vaadin.addons.fctogglebutton; + +import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.html.H3; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@DemoSource +@PageTitle("Theme Variants") +@SuppressWarnings("serial") +@Route(value = "variants", layout = FCToggleButtonDemoView.class) +public class FCToggleButtonVariantsDemo extends Div { + + public FCToggleButtonVariantsDemo() { + + // Color variants + FCToggleButton primary = new FCToggleButton(true).setLeftLabel("Primary"); + primary.addThemeVariants(FCToggleButtonVariant.PRIMARY); + + FCToggleButton success = new FCToggleButton(true).setLeftLabel("Success"); + success.addThemeVariants(FCToggleButtonVariant.SUCCESS); + + FCToggleButton error = new FCToggleButton(true).setLeftLabel("Error"); + error.addThemeVariants(FCToggleButtonVariant.ERROR); + + FCToggleButton warning = new FCToggleButton(true).setLeftLabel("Warning"); + warning.addThemeVariants(FCToggleButtonVariant.WARNING); + + FCToggleButton contrast = new FCToggleButton(true).setLeftLabel("Contrast"); + contrast.addThemeVariants(FCToggleButtonVariant.CONTRAST); + + // Size variants + FCToggleButton small = new FCToggleButton().setRightLabel("Small"); + small.addThemeVariants(FCToggleButtonVariant.SMALL); + + FCToggleButton medium = new FCToggleButton().setRightLabel("Medium"); + medium.addThemeVariants(FCToggleButtonVariant.MEDIUM); + + FCToggleButton large = new FCToggleButton().setRightLabel("Large"); + large.addThemeVariants(FCToggleButtonVariant.LARGE); + + // States + FCToggleButton disabled = new FCToggleButton().setRightLabel("Disabled"); + disabled.setEnabled(false); + + FCToggleButton readOnly = new FCToggleButton(true).setRightLabel("Read-only"); + readOnly.setReadOnly(true); + + add(new VerticalLayout( + new H3("Color variants"), + new HorizontalLayout(primary, success, error, warning, contrast), + new H3("Size variants"), + new HorizontalLayout(small, medium, large), + new H3("States"), + new HorizontalLayout(disabled, readOnly))); + } +} From 060bdb47f5113fb07d45fd95b2876e798a32ea3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:48:46 -0300 Subject: [PATCH 13/60] fix: symmetric active-state animation for size variants Add width transition to slider so the squeeze animation is smooth. Add explicit active-state rules for medium, small, and large variants to override specificity from their resting-state rules, ensuring the expansion is symmetric (left-only when checked, right-only when unchecked) for all sizes. --- src/main/frontend/fc-toggle-button.js | 30 ++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 1bb577e..68276ea 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -111,7 +111,7 @@ class FCToggleButton extends LitElement { background-color: var(--lumo-base-color, #fff); border-radius: 50%; box-shadow: var(--lumo-box-shadow-s, 0 2px 4px rgba(0,0,0,0.2)); - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } :host([checked]) .slider { @@ -128,11 +128,35 @@ class FCToggleButton extends LitElement { } .switch:active .slider { - width: 22px; + width: 22px; } :host([checked]) .switch:active .slider { - transform: translateX(16px); + transform: translateX(16px); + } + + :host([theme~="medium"]) .switch:active .slider { + width: 22px; + } + + :host([theme~="medium"][checked]) .switch:active .slider { + transform: translateX(16px); + } + + :host([theme~="small"]) .switch:active .slider { + width: 17px; + } + + :host([theme~="small"][checked]) .switch:active .slider { + transform: translateX(11px); + } + + :host([theme~="large"]) .switch:active .slider { + width: 30px; + } + + :host([theme~="large"][checked]) .switch:active .slider { + transform: translateX(18px); } /* Size Variants */ From 195f535d1d7779c7f26d49fbf167677719502fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:51:41 -0300 Subject: [PATCH 14/60] feat: make label highlighting opt-in via withHighlightLabel() Label color change based on toggle state was always active. Add highlightLabel property (default false) to the web component and expose withHighlightLabel()/withoutHighlightLabel() fluent methods on FCToggleButton to control the behavior explicitly. --- src/main/frontend/fc-toggle-button.js | 8 ++++--- .../addons/fctogglebutton/FCToggleButton.java | 24 +++++++++++++++++++ 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 68276ea..9fef862 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -10,7 +10,8 @@ class FCToggleButton extends LitElement { leftLabel: { type: String }, rightLabel: { type: String }, disabled: { type: Boolean, reflect: true }, - readonly: { type: Boolean, reflect: true } + readonly: { type: Boolean, reflect: true }, + highlightLabel: { type: Boolean, reflect: true } }; static styles = css` @@ -242,6 +243,7 @@ class FCToggleButton extends LitElement { this.rightLabel = ''; this.disabled = false; this.readonly = false; + this.highlightLabel = false; this.addEventListener('click', this._toggle); } @@ -259,11 +261,11 @@ class FCToggleButton extends LitElement { return html`

- ${this.leftLabel ? html`${this.leftLabel}` : ''} + ${this.leftLabel ? html`${this.leftLabel}` : ''}
- ${this.rightLabel ? html`${this.rightLabel}` : ''} + ${this.rightLabel ? html`${this.rightLabel}` : ''}
`; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index bbb38de..5e69bee 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -113,6 +113,30 @@ private void updateLabels() { getElement().setProperty("rightLabel", itemLabelGenerator.apply(true)); } + /** + * Enables label highlighting: the label on the active side is shown with the primary text color + * and the other with a dimmed color. + * + * @return this instance for method chaining + * @since 1.0.0 + */ + public FCToggleButton withHighlightLabel() { + getElement().setProperty("highlightLabel", true); + return this; + } + + /** + * Disables label highlighting so both labels are rendered with the same color regardless of the + * toggle state. + * + * @return this instance for method chaining + * @since 1.0.0 + */ + public FCToggleButton withoutHighlightLabel() { + getElement().setProperty("highlightLabel", false); + return this; + } + /** * Sets the label displayed on the left side of the toggle switch. * From 820af4050e7d4c775844843e7e178142f68b617a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 20 Mar 2026 21:53:36 -0300 Subject: [PATCH 15/60] test(demo): add label highlighting examples to labels demo Add a "With label highlighting" section to FCToggleButtonDemo with two examples using withHighlightLabel(): one with labels only and one combining labels and icons. --- .../fctogglebutton/FCToggleButtonDemo.java | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index fd665dc..bb7a74d 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -65,6 +65,18 @@ public FCToggleButtonDemo() { .setRightLabel("Light") .setRightIcon(new Icon(VaadinIcon.SUN_O)); + FCToggleButton highlightLabels = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On") + .withHighlightLabel(); + + FCToggleButton highlightWithIcons = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setLeftLabel("Dark") + .setRightLabel("Light") + .setRightIcon(new Icon(VaadinIcon.SUN_O)) + .withHighlightLabel(); + add(new VerticalLayout( new H3("Basic"), basic, @@ -73,6 +85,8 @@ public FCToggleButtonDemo() { new H3("With icons"), new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons), new H3("With labels and icons"), - withLabelsAndIcons)); + withLabelsAndIcons, + new H3("With label highlighting"), + new HorizontalLayout(highlightLabels, highlightWithIcons))); } } From 8bc2ac2c095a27d8bfcfd236287949bc7c4bc899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 10:51:22 -0300 Subject: [PATCH 16/60] docs(readme): update README with highlight label feature and version --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 91eafa0..a693f84 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Toggle between two states with a single click * Customizable left and right labels * Support for icons on both sides via slots +* Optional label highlighting: active-side label uses the primary color, inactive side is dimmed * Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * Fluent API for easy configuration * Full integration with Vaadin's `HasValue`, `HasSize`, `HasAriaLabel`, and `HasTooltip` @@ -33,7 +34,7 @@ Add the following dependencies in your pom.xml file: com.flowingcode.vaadin.addons fc-toggle-button-addon - X.Y.Z + 1.0.0 ``` @@ -115,6 +116,12 @@ FCToggleButton toggle = new FCToggleButton() toggle.addValueChangeListener(e -> Notification.show("Toggle is now: " + (e.getValue() ? "on" : "off"))); +// Enable label highlighting (active side uses primary color, inactive side is dimmed) +FCToggleButton toggle = new FCToggleButton() + .setLeftLabel("Off") + .setRightLabel("On") + .withHighlightLabel(); + // Apply theme variants toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); toggle.addThemeVariants(FCToggleButtonVariant.CONTRAST); From c0b5dc5bd73b4c024d4bc9a938688573cc0e0ec2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 10:57:38 -0300 Subject: [PATCH 17/60] test: add integration tests for toggle behavior and theme variants --- .../fctogglebutton/it/FCToggleButtonIT.java | 124 ++++++++++++++++ .../it/FCToggleButtonVariantsIT.java | 136 ++++++++++++++++++ 2 files changed, 260 insertions(+) create mode 100644 src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java create mode 100644 src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java new file mode 100644 index 0000000..28da312 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java @@ -0,0 +1,124 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ +package com.flowingcode.vaadin.addons.fctogglebutton.it; + +import static org.junit.Assert.assertEquals; +import static org.junit.Assert.assertNotNull; +import static org.junit.Assert.assertNull; + +import com.vaadin.testbench.TestBenchElement; +import org.junit.Test; + +/** + * Integration tests for {@code FCToggleButton} label and value-change behavior. + * + *

Tests navigate to the "Labels and Icons" demo (route {@code labels}). + * Component index mapping: + *

    + *
  1. basic
    2. + *
  2. withLeftLabel ("Off")
    3. + *
  3. withRightLabel ("On")
    4. + *
  4. withBothLabels ("Off" / "On")
    5. + *
  5. withLeftIcon
    6. + *
  6. withRightIcon
    7. + *
  7. withBothIcons
    8. + *
  8. withLabelsAndIcons
    9. + *
  9. highlightLabels (withHighlightLabel)
    10. + *
  10. highlightWithIcons (withHighlightLabel)
    11. + *
+ */ +public class FCToggleButtonIT extends AbstractViewTest { + + public FCToggleButtonIT() { + super("labels"); + } + + private TestBenchElement getToggle(int index) { + return $("fc-toggle-button").get(index); + } + + @Test + public void initialValueIsFalse() { + assertNull(getToggle(0).getAttribute("checked")); + } + + @Test + public void clickTogglesChecked() { + TestBenchElement toggle = getToggle(0); + toggle.click(); + assertNotNull(toggle.getAttribute("checked")); + } + + @Test + public void clickAgainTogglesBack() { + TestBenchElement toggle = getToggle(0); + toggle.click(); + toggle.click(); + assertNull(toggle.getAttribute("checked")); + } + + @Test + public void leftLabelIsRendered() { + TestBenchElement toggle = getToggle(1); + String text = + (String) + toggle + .getCommandExecutor() + .executeScript( + "return arguments[0].shadowRoot.querySelector('.label').textContent", toggle); + assertEquals("Off", text); + } + + @Test + public void rightLabelIsRendered() { + TestBenchElement toggle = getToggle(2); + String text = + (String) + toggle + .getCommandExecutor() + .executeScript( + "return arguments[0].shadowRoot.querySelector('.label').textContent", toggle); + assertEquals("On", text); + } + + @Test + public void bothLabelsAreRendered() { + TestBenchElement toggle = getToggle(3); + String texts = + (String) + toggle + .getCommandExecutor() + .executeScript( + "return Array.from(arguments[0].shadowRoot.querySelectorAll('.label'))" + + ".map(l => l.textContent).join(',')", + toggle); + assertEquals("Off,On", texts); + } + + @Test + public void highlightLabelAttributeIsReflected() { + assertNotNull(getToggle(8).getAttribute("highlightlabel")); + } + + @Test + public void noHighlightLabelByDefault() { + assertNull(getToggle(0).getAttribute("highlightlabel")); + } +} diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java new file mode 100644 index 0000000..d0380a8 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java @@ -0,0 +1,136 @@ +/*- + * #%L + * FC Toggle Button Add-On + * %% + * Copyright (C) 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% + */ +package com.flowingcode.vaadin.addons.fctogglebutton.it; + +import static org.junit.Assert.assertNotNull; +import static org.junit.Assert.assertNull; +import static org.junit.Assert.assertTrue; + +import com.vaadin.testbench.TestBenchElement; +import org.junit.Test; + +/** + * Integration tests for {@code FCToggleButton} theme variants and component states. + * + *

Tests navigate to the "Theme Variants" demo (route {@code variants}). + * Component index mapping: + *

    + *
  1. primary (checked=true, theme=primary)
    2. + *
  2. success (checked=true, theme=success)
    3. + *
  3. error (checked=true, theme=error)
    4. + *
  4. warning (checked=true, theme=warning)
    5. + *
  5. contrast (checked=true, theme=contrast)
    6. + *
  6. small (checked=false, theme=small)
    7. + *
  7. medium (checked=false, theme=medium)
    8. + *
  8. large (checked=false, theme=large)
    9. + *
  9. disabled (checked=false, disabled)
    10. + *
  10. readOnly (checked=true, readonly)
    11. + *
+ */ +public class FCToggleButtonVariantsIT extends AbstractViewTest { + + public FCToggleButtonVariantsIT() { + super("variants"); + } + + private TestBenchElement getToggle(int index) { + return $("fc-toggle-button").get(index); + } + + // --- Color variants --- + + @Test + public void primaryVariantHasThemeAttribute() { + assertTrue(getToggle(0).getAttribute("theme").contains("primary")); + } + + @Test + public void successVariantHasThemeAttribute() { + assertTrue(getToggle(1).getAttribute("theme").contains("success")); + } + + @Test + public void errorVariantHasThemeAttribute() { + assertTrue(getToggle(2).getAttribute("theme").contains("error")); + } + + @Test + public void warningVariantHasThemeAttribute() { + assertTrue(getToggle(3).getAttribute("theme").contains("warning")); + } + + @Test + public void contrastVariantHasThemeAttribute() { + assertTrue(getToggle(4).getAttribute("theme").contains("contrast")); + } + + // --- Size variants --- + + @Test + public void smallVariantHasThemeAttribute() { + assertTrue(getToggle(5).getAttribute("theme").contains("small")); + } + + @Test + public void mediumVariantHasThemeAttribute() { + assertTrue(getToggle(6).getAttribute("theme").contains("medium")); + } + + @Test + public void largeVariantHasThemeAttribute() { + assertTrue(getToggle(7).getAttribute("theme").contains("large")); + } + + // --- Initial values --- + + @Test + public void colorVariantsInitializedChecked() { + // All color variants (indices 0-4) are created with initialValue=true + for (int i = 0; i < 5; i++) { + assertNotNull("Expected toggle " + i + " to be checked", getToggle(i).getAttribute("checked")); + } + } + + @Test + public void sizeVariantsInitializedUnchecked() { + // Size variants (indices 5-7) are created with default initialValue=false + for (int i = 5; i < 8; i++) { + assertNull("Expected toggle " + i + " to be unchecked", getToggle(i).getAttribute("checked")); + } + } + + // --- States --- + + @Test + public void disabledButtonCannotBeToggled() { + TestBenchElement disabled = getToggle(8); + assertNull(disabled.getAttribute("checked")); + disabled.click(); + assertNull(disabled.getAttribute("checked")); + } + + @Test + public void readonlyButtonCannotBeToggled() { + TestBenchElement readOnly = getToggle(9); + assertNotNull(readOnly.getAttribute("checked")); + readOnly.click(); + assertNotNull(readOnly.getAttribute("checked")); + } +} From 4ef8c06e3a2ce93559d0f225c18fccd85ea9bddd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 13:58:03 -0300 Subject: [PATCH 18/60] feat: add HasLabel support with label constructors --- src/main/frontend/fc-toggle-button.js | 15 +++++++++-- .../addons/fctogglebutton/FCToggleButton.java | 26 +++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 9fef862..620080e 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -7,6 +7,7 @@ import { LitElement, html, css } from 'lit'; class FCToggleButton extends LitElement { static properties = { checked: { type: Boolean, reflect: true }, + label: { type: String }, leftLabel: { type: String }, rightLabel: { type: String }, disabled: { type: Boolean, reflect: true }, @@ -17,8 +18,9 @@ class FCToggleButton extends LitElement { static styles = css` :host { display: inline-flex; - align-items: center; - gap: var(--lumo-space-s, 8px); + flex-direction: column; + align-items: flex-start; + gap: var(--lumo-space-xs, 4px); font-family: var(--lumo-font-family); color: var(--lumo-body-text-color); cursor: pointer; @@ -26,6 +28,13 @@ class FCToggleButton extends LitElement { transition: opacity 0.2s; } + .field-label { + font-size: var(--lumo-font-size-s, 14px); + font-weight: 500; + color: var(--lumo-secondary-text-color); + line-height: 1; + } + :host([disabled]) { opacity: 0.5; cursor: not-allowed; @@ -239,6 +248,7 @@ class FCToggleButton extends LitElement { constructor() { super(); this.checked = false; + this.label = ''; this.leftLabel = ''; this.rightLabel = ''; this.disabled = false; @@ -259,6 +269,7 @@ class FCToggleButton extends LitElement { render() { return html` + ${this.label ? html`${this.label}` : ''}
${this.leftLabel ? html`${this.leftLabel}` : ''} diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index 5e69bee..7b98526 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -23,6 +23,7 @@ import com.vaadin.flow.component.Component; import com.vaadin.flow.component.HasAriaLabel; import com.vaadin.flow.component.HasComponents; +import com.vaadin.flow.component.HasLabel; import com.vaadin.flow.component.HasSize; import com.vaadin.flow.component.ItemLabelGenerator; import com.vaadin.flow.component.Tag; @@ -46,6 +47,7 @@ public class FCToggleButton extends AbstractSinglePropertyField implements HasSize, HasComponents, + HasLabel, HasAriaLabel, HasTooltip, HasThemeVariant { @@ -61,6 +63,7 @@ public FCToggleButton() { * Creates a new toggle button with the given initial value. * * @param initialValue the initial checked state + * @since 1.0.0 */ public FCToggleButton(boolean initialValue) { super("checked", initialValue, false); @@ -70,6 +73,29 @@ public FCToggleButton(boolean initialValue) { setSynchronizedEvent("checked-changed"); } + /** + * Creates a new toggle button with the given label and an initial value of {@code false}. + * + * @param label the label text shown above the toggle + * @since 1.0.0 + */ + public FCToggleButton(String label) { + this(false); + setLabel(label); + } + + /** + * Creates a new toggle button with the given label and initial value. + * + * @param label the label text shown above the toggle + * @param initialValue the initial checked state + * @since 1.0.0 + */ + public FCToggleButton(String label, boolean initialValue) { + this(initialValue); + setLabel(label); + } + @Override public void setReadOnly(boolean readOnly) { getElement().setProperty("readonly", readOnly); From 371c7520fe23002c755211534feb3d7cd4670876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 13:58:11 -0300 Subject: [PATCH 19/60] feat(demo): add field label examples to labels and icons demo --- .../vaadin/addons/fctogglebutton/FCToggleButtonDemo.java | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index bb7a74d..9b7ce4b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -39,6 +39,12 @@ public FCToggleButtonDemo() { FCToggleButton basic = new FCToggleButton(); + FCToggleButton withLabel = new FCToggleButton("Notifications"); + + FCToggleButton withLabelAndInitialValue = new FCToggleButton("Dark mode", true) + .setLeftLabel("Off") + .setRightLabel("On"); + FCToggleButton withLeftLabel = new FCToggleButton() .setLeftLabel("Off"); @@ -80,6 +86,8 @@ public FCToggleButtonDemo() { add(new VerticalLayout( new H3("Basic"), basic, + new H3("With field label"), + new HorizontalLayout(withLabel, withLabelAndInitialValue), new H3("With labels"), new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels), new H3("With icons"), From 07cc262cd4220459a4b82c391b23acc42aa8d9ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 13:58:21 -0300 Subject: [PATCH 20/60] docs(readme): document HasLabel support and label constructors --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a693f84..4819fe9 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Optional label highlighting: active-side label uses the primary color, inactive side is dimmed * Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * Fluent API for easy configuration -* Full integration with Vaadin's `HasValue`, `HasSize`, `HasAriaLabel`, and `HasTooltip` +* Full integration with Vaadin's `HasValue`, `HasSize`, `HasLabel`, `HasAriaLabel`, and `HasTooltip` ## Online demo @@ -100,6 +100,12 @@ FC Toggle Button Add-On is written by Flowing Code S.A. // Basic toggle button FCToggleButton toggle = new FCToggleButton(); +// With a field label (shown above the toggle) +FCToggleButton toggle = new FCToggleButton("Notifications"); + +// With a field label and initial value +FCToggleButton toggle = new FCToggleButton("Dark mode", true); + // With labels FCToggleButton toggle = new FCToggleButton() .setLeftLabel("Off") From b7b687b5d39bfba1e3725c1e79a07228ba10bc0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:02:35 -0300 Subject: [PATCH 21/60] feat: add swipe gesture support for mobile toggle interaction --- src/main/frontend/fc-toggle-button.js | 97 +++++++++++++++++++++++++-- 1 file changed, 93 insertions(+), 4 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 620080e..16a949c 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -254,12 +254,17 @@ class FCToggleButton extends LitElement { this.disabled = false; this.readonly = false; this.highlightLabel = false; - this.addEventListener('click', this._toggle); + this._touchStartX = null; + this._touchStartY = null; + this._isSwiping = false; + this._swipeHandled = false; + this.addEventListener('click', this._onClick.bind(this)); + this.addEventListener('touchstart', this._onTouchStart.bind(this), { passive: true }); + this.addEventListener('touchmove', this._onTouchMove.bind(this), { passive: false }); + this.addEventListener('touchend', this._onTouchEnd.bind(this)); } - _toggle(e) { - if (this.disabled || this.readonly) return; - this.checked = !this.checked; + _fireChange() { this.dispatchEvent(new CustomEvent('checked-changed', { detail: { value: this.checked }, bubbles: true, @@ -267,6 +272,90 @@ class FCToggleButton extends LitElement { })); } + _onClick(e) { + if (this._swipeHandled) { + this._swipeHandled = false; + return; + } + if (this.disabled || this.readonly) return; + this.checked = !this.checked; + this._fireChange(); + } + + _onTouchStart(e) { + if (this.disabled || this.readonly) return; + const touch = e.touches[0]; + this._touchStartX = touch.clientX; + this._touchStartY = touch.clientY; + this._isSwiping = false; + this._swipeHandled = false; + + const slider = this.shadowRoot.querySelector('.slider'); + if (slider) { + slider.style.transition = 'none'; + } + } + + _onTouchMove(e) { + if (this._touchStartX === null || this.disabled || this.readonly) return; + const touch = e.touches[0]; + const dx = touch.clientX - this._touchStartX; + const dy = touch.clientY - this._touchStartY; + + // Only capture horizontal swipes + if (!this._isSwiping && Math.abs(dx) < Math.abs(dy)) return; + this._isSwiping = true; + e.preventDefault(); + + const switchEl = this.shadowRoot.querySelector('.switch'); + const slider = this.shadowRoot.querySelector('.slider'); + if (!switchEl || !slider) return; + + const switchWidth = switchEl.offsetWidth; + const sliderWidth = slider.offsetWidth; + const gap = parseInt(getComputedStyle(slider).left); + const maxTranslate = switchWidth - sliderWidth - gap * 2; + const baseTranslate = this.checked ? maxTranslate : 0; + const clamped = Math.max(0, Math.min(maxTranslate, baseTranslate + dx)); + slider.style.transform = `translateX(${clamped}px)`; + } + + _onTouchEnd(e) { + if (this._touchStartX === null || this.disabled || this.readonly) return; + const slider = this.shadowRoot.querySelector('.slider'); + const switchEl = this.shadowRoot.querySelector('.switch'); + + if (slider) { + slider.style.transition = ''; + } + + if (!this._isSwiping) { + this._touchStartX = null; + this._touchStartY = null; + return; + } + + const touch = e.changedTouches[0]; + const dx = touch.clientX - this._touchStartX; + const threshold = switchEl ? switchEl.offsetWidth * 0.3 : 15; + + if (Math.abs(dx) >= threshold) { + const newChecked = dx > 0; + if (newChecked !== this.checked) { + this.checked = newChecked; + this._fireChange(); + } + this._swipeHandled = true; + } else { + // Snap back — let CSS transition handle it by resetting inline transform + if (slider) slider.style.transform = ''; + } + + this._touchStartX = null; + this._touchStartY = null; + this._isSwiping = false; + } + render() { return html` ${this.label ? html`${this.label}` : ''} From c8c630b48602d62ac68e44075e262eb3c1155bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:12:24 -0300 Subject: [PATCH 22/60] feat: add LONGSWIPE theme variant --- src/main/frontend/fc-toggle-button.js | 110 +++++++++++++++--- .../fctogglebutton/FCToggleButtonVariant.java | 1 + 2 files changed, 96 insertions(+), 15 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 16a949c..84255b2 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -230,6 +230,82 @@ class FCToggleButton extends LitElement { font-size: var(--lumo-font-size-l, 18px); } + :host([theme~="longswipe"]) .switch { + width: 72px; + height: 24px; + } + + :host([theme~="longswipe"]) .slider { + width: 18px; + height: 18px; + top: 3px; + left: 3px; + } + + :host([theme~="longswipe"][checked]) .slider { + transform: translateX(48px); + } + + :host([theme~="longswipe"]) .switch:active .slider { + width: 22px; + } + + :host([theme~="longswipe"][checked]) .switch:active .slider { + transform: translateX(44px); + } + + :host([theme~="longswipe"]) .label { + font-size: var(--lumo-font-size-s, 14px); + } + + :host([theme~="longswipe"][theme~="small"]) .switch { + width: 60px; + height: 18px; + } + + :host([theme~="longswipe"][theme~="small"]) .slider { + width: 14px; + height: 14px; + top: 2px; + left: 2px; + } + + :host([theme~="longswipe"][theme~="small"][checked]) .slider { + transform: translateX(42px); + } + + :host([theme~="longswipe"][theme~="small"]) .switch:active .slider { + width: 17px; + } + + :host([theme~="longswipe"][theme~="small"][checked]) .switch:active .slider { + transform: translateX(39px); + } + + :host([theme~="longswipe"][theme~="large"]) .switch { + width: 84px; + height: 32px; + } + + :host([theme~="longswipe"][theme~="large"]) .slider { + width: 24px; + height: 24px; + top: 4px; + left: 4px; + } + + :host([theme~="longswipe"][theme~="large"][checked]) .slider { + transform: translateX(52px); + } + + :host([theme~="longswipe"][theme~="large"]) .switch:active .slider { + width: 30px; + } + + :host([theme~="longswipe"][theme~="large"][checked]) .switch:active .slider { + transform: translateX(46px); + } + /* Readonly Styles: Unify the look for both checked/unchecked and variants */ :host([readonly]) .switch { background-color: var(--lumo-contrast-10pct, #f0f0f0) !important; @@ -325,11 +401,8 @@ class FCToggleButton extends LitElement { const slider = this.shadowRoot.querySelector('.slider'); const switchEl = this.shadowRoot.querySelector('.switch'); - if (slider) { - slider.style.transition = ''; - } - if (!this._isSwiping) { + if (slider) slider.style.transition = ''; this._touchStartX = null; this._touchStartY = null; return; @@ -337,20 +410,27 @@ class FCToggleButton extends LitElement { const touch = e.changedTouches[0]; const dx = touch.clientX - this._touchStartX; - const threshold = switchEl ? switchEl.offsetWidth * 0.3 : 15; - - if (Math.abs(dx) >= threshold) { - const newChecked = dx > 0; - if (newChecked !== this.checked) { - this.checked = newChecked; - this._fireChange(); - } + + // Threshold: 50% of the slider's actual travel range + const sliderWidth = slider ? slider.offsetWidth : 18; + const gap = slider ? parseInt(getComputedStyle(slider).left) : 3; + const maxTranslate = switchEl ? switchEl.offsetWidth - sliderWidth - gap * 2 : 20; + const threshold = maxTranslate * 0.5; + + const newChecked = dx > 0 ? true : false; + if (Math.abs(dx) >= threshold && newChecked !== this.checked) { + this.checked = newChecked; + this._fireChange(); this._swipeHandled = true; - } else { - // Snap back — let CSS transition handle it by resetting inline transform - if (slider) slider.style.transform = ''; } + // Re-enable transition, then on the next frame clear the inline transform so + // the CSS-driven position animates smoothly from the current mid-swipe position. + if (slider) slider.style.transition = ''; + requestAnimationFrame(() => { + if (slider) slider.style.transform = ''; + }); + this._touchStartX = null; this._touchStartY = null; this._isSwiping = false; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 03df5c8..7cb2bb4 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -30,6 +30,7 @@ public enum FCToggleButtonVariant implements ThemeVariant { SMALL("small"), MEDIUM("medium"), LARGE("large"), + LONGSWIPE("longswipe"), PRIMARY("primary"), SUCCESS("success"), WARNING("warning"), From 8eaa1f89218c9b4cf5f5bce3b015a48620b76132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:12:42 -0300 Subject: [PATCH 23/60] feat(demo): add long swipe section with size variant examples --- .../fctogglebutton/FCToggleButtonVariantsDemo.java | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java index dfc1be4..4b16197 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java @@ -61,6 +61,16 @@ public FCToggleButtonVariantsDemo() { FCToggleButton large = new FCToggleButton().setRightLabel("Large"); large.addThemeVariants(FCToggleButtonVariant.LARGE); + // Long swipe variants + FCToggleButton longswipeSmall = new FCToggleButton().setRightLabel("Small"); + longswipeSmall.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.SMALL); + + FCToggleButton longswipeMedium = new FCToggleButton().setRightLabel("Medium"); + longswipeMedium.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.MEDIUM); + + FCToggleButton longswipeLarge = new FCToggleButton().setRightLabel("Large"); + longswipeLarge.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.LARGE); + // States FCToggleButton disabled = new FCToggleButton().setRightLabel("Disabled"); disabled.setEnabled(false); @@ -73,6 +83,8 @@ public FCToggleButtonVariantsDemo() { new HorizontalLayout(primary, success, error, warning, contrast), new H3("Size variants"), new HorizontalLayout(small, medium, large), + new H3("Long swipe"), + new HorizontalLayout(longswipeSmall, longswipeMedium, longswipeLarge), new H3("States"), new HorizontalLayout(disabled, readOnly))); } From 6af735289f4c955c936324659356c6709c70c7d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:14:48 -0300 Subject: [PATCH 24/60] fix: correct border-radius for large toggle to follow slider contour --- src/main/frontend/fc-toggle-button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 84255b2..b6c5f59 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -213,6 +213,7 @@ class FCToggleButton extends LitElement { :host([theme~="large"]) .switch { width: 56px; height: 32px; + border-radius: 16px; } :host([theme~="large"]) .slider { @@ -285,6 +286,7 @@ class FCToggleButton extends LitElement { :host([theme~="longswipe"][theme~="large"]) .switch { width: 84px; height: 32px; + border-radius: 16px; } :host([theme~="longswipe"][theme~="large"]) .slider { From 33656e2d4da2db97305e8849e09ccf48f612a816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:16:15 -0300 Subject: [PATCH 25/60] docs: document LONGSWIPE variant in README and Javadoc --- README.md | 7 ++++++- .../fctogglebutton/FCToggleButtonVariant.java | 16 ++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4819fe9..45d2a22 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,8 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Customizable left and right labels * Support for icons on both sides via slots * Optional label highlighting: active-side label uses the primary color, inactive side is dimmed -* Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` +* Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `LONGSWIPE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` +* `LONGSWIPE` variant produces a wider switch track, optimized for touch interaction; can be combined with size variants * Fluent API for easy configuration * Full integration with Vaadin's `HasValue`, `HasSize`, `HasLabel`, `HasAriaLabel`, and `HasTooltip` @@ -131,6 +132,10 @@ FCToggleButton toggle = new FCToggleButton() // Apply theme variants toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); toggle.addThemeVariants(FCToggleButtonVariant.CONTRAST); + +// Long swipe: wider track, optimized for touch (can be combined with size variants) +toggle.addThemeVariants(FCToggleButtonVariant.LONGSWIPE); +toggle.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.LARGE); ``` ## Special configuration when using Spring diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java index 7cb2bb4..c0e6591 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java @@ -24,17 +24,33 @@ /** * Theme variants for the {@link FCToggleButton} component. * + *

Size variants ({@link #SMALL}, {@link #MEDIUM}, {@link #LARGE}) and {@link #LONGSWIPE} can be + * combined (e.g. {@code LONGSWIPE} + {@code LARGE}). + * * @since 1.0.0 */ public enum FCToggleButtonVariant implements ThemeVariant { + /** Renders the toggle at a smaller size (32×18 px track). */ SMALL("small"), + /** Renders the toggle at the default medium size (44×24 px track). */ MEDIUM("medium"), + /** Renders the toggle at a larger size (56×32 px track). */ LARGE("large"), + /** + * Renders a wider switch track optimized for touch interaction. Can be combined with size + * variants: the track width is increased by 28 px while preserving the height of the chosen + * size. + */ LONGSWIPE("longswipe"), + /** Applies the primary color to the checked state. */ PRIMARY("primary"), + /** Applies the success color to the checked state. */ SUCCESS("success"), + /** Applies the warning color to the checked state. */ WARNING("warning"), + /** Applies the error color to the checked state. */ ERROR("error"), + /** Applies the contrast color to the checked state. */ CONTRAST("contrast"); private final String variant; From 465ce1506b7d0d31865200efd035d7b4e9154bf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:25:00 -0300 Subject: [PATCH 26/60] feat: add withIconsInside layout option for icons adjacent to switch --- src/main/frontend/fc-toggle-button.js | 18 +++++++++---- .../addons/fctogglebutton/FCToggleButton.java | 27 +++++++++++++++++++ 2 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index b6c5f59..6ef8b03 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -12,7 +12,8 @@ class FCToggleButton extends LitElement { rightLabel: { type: String }, disabled: { type: Boolean, reflect: true }, readonly: { type: Boolean, reflect: true }, - highlightLabel: { type: Boolean, reflect: true } + highlightLabel: { type: Boolean, reflect: true }, + iconsInside: { type: Boolean } }; static styles = css` @@ -332,6 +333,7 @@ class FCToggleButton extends LitElement { this.disabled = false; this.readonly = false; this.highlightLabel = false; + this.iconsInside = false; this._touchStartX = null; this._touchStartY = null; this._isSwiping = false; @@ -439,16 +441,22 @@ class FCToggleButton extends LitElement { } render() { + const leftLabelClass = this.highlightLabel && !this.checked ? 'active' : this.highlightLabel ? 'inactive' : ''; + const rightLabelClass = this.highlightLabel && this.checked ? 'active' : this.highlightLabel ? 'inactive' : ''; + const leftLabelEl = this.leftLabel ? html`${this.leftLabel}` : ''; + const rightLabelEl = this.rightLabel ? html`${this.rightLabel}` : ''; + const leftSlot = html``; + const rightSlot = html``; return html` ${this.label ? html`${this.label}` : ''}

- - ${this.leftLabel ? html`${this.leftLabel}` : ''} + ${this.iconsInside ? leftLabelEl : leftSlot} + ${this.iconsInside ? leftSlot : leftLabelEl}
- ${this.rightLabel ? html`${this.rightLabel}` : ''} - + ${this.iconsInside ? rightSlot : rightLabelEl} + ${this.iconsInside ? rightLabelEl : rightSlot}
`; } diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index 7b98526..d441e75 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -151,6 +151,33 @@ public FCToggleButton withHighlightLabel() { return this; } + /** + * Places icons adjacent to the switch and labels on the outer edges, producing the layout + * {@code [left-label] [left-icon] [switch] [right-icon] [right-label]}. + * + *

By default the order is {@code [left-icon] [left-label] [switch] [right-label] + * [right-icon]}. + * + * @return this instance for method chaining + * @since 1.0.0 + */ + public FCToggleButton withIconsInside() { + getElement().setProperty("iconsInside", true); + return this; + } + + /** + * Restores the default layout where icons are on the outer edges and labels are adjacent to the + * switch: {@code [left-icon] [left-label] [switch] [right-label] [right-icon]}. + * + * @return this instance for method chaining + * @since 1.0.0 + */ + public FCToggleButton withIconsOutside() { + getElement().setProperty("iconsInside", false); + return this; + } + /** * Disables label highlighting so both labels are rendered with the same color regardless of the * toggle state. From 46ed45daa8f8ce3e9b0de7aeb85aeb29c65532a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:25:07 -0300 Subject: [PATCH 27/60] feat(demo): add icons-inside example to labels and icons demo --- .../vaadin/addons/fctogglebutton/FCToggleButtonDemo.java | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index 9b7ce4b..b458fc8 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -71,6 +71,13 @@ public FCToggleButtonDemo() { .setRightLabel("Light") .setRightIcon(new Icon(VaadinIcon.SUN_O)); + FCToggleButton withIconsInside = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setLeftLabel("Dark") + .setRightLabel("Light") + .setRightIcon(new Icon(VaadinIcon.SUN_O)) + .withIconsInside(); + FCToggleButton highlightLabels = new FCToggleButton() .setLeftLabel("Off") .setRightLabel("On") @@ -93,7 +100,7 @@ public FCToggleButtonDemo() { new H3("With icons"), new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons), new H3("With labels and icons"), - withLabelsAndIcons, + new HorizontalLayout(withLabelsAndIcons, withIconsInside), new H3("With label highlighting"), new HorizontalLayout(highlightLabels, highlightWithIcons))); } From 91c7c427cb61d43579175480f07efcb6f8280031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:25:13 -0300 Subject: [PATCH 28/60] docs(readme): document icons-inside layout option --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 45d2a22..0023c02 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Customizable left and right labels * Support for icons on both sides via slots * Optional label highlighting: active-side label uses the primary color, inactive side is dimmed +* Optional icons-inside layout: icons adjacent to the switch, labels on the outer edges * Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `LONGSWIPE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * `LONGSWIPE` variant produces a wider switch track, optimized for touch interaction; can be combined with size variants * Fluent API for easy configuration @@ -129,6 +130,14 @@ FCToggleButton toggle = new FCToggleButton() .setRightLabel("On") .withHighlightLabel(); +// Icons inside: [label] [icon] [switch] [icon] [label] (default is [icon] [label] [switch] [label] [icon]) +FCToggleButton toggle = new FCToggleButton() + .setLeftIcon(new Icon(VaadinIcon.MOON)) + .setLeftLabel("Dark") + .setRightLabel("Light") + .setRightIcon(new Icon(VaadinIcon.SUN_O)) + .withIconsInside(); + // Apply theme variants toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); toggle.addThemeVariants(FCToggleButtonVariant.CONTRAST); From fdc12dc2d26bafe246f94a4c4a86b6a757506515 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:31:17 -0300 Subject: [PATCH 29/60] feat(demo): use lumo-space-l gap between items in horizontal rows --- .../fctogglebutton/FCToggleButtonDemo.java | 21 ++++++++++++++----- .../FCToggleButtonVariantsDemo.java | 17 +++++++++++---- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index b458fc8..976e38b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -90,18 +90,29 @@ public FCToggleButtonDemo() { .setRightIcon(new Icon(VaadinIcon.SUN_O)) .withHighlightLabel(); + HorizontalLayout fieldLabelRow = new HorizontalLayout(withLabel, withLabelAndInitialValue); + HorizontalLayout labelsRow = new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels); + HorizontalLayout iconsRow = new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons); + HorizontalLayout labelsAndIconsRow = new HorizontalLayout(withLabelsAndIcons, withIconsInside); + HorizontalLayout highlightRow = new HorizontalLayout(highlightLabels, highlightWithIcons); + fieldLabelRow.getStyle().set("gap", "var(--lumo-space-l)"); + labelsRow.getStyle().set("gap", "var(--lumo-space-l)"); + iconsRow.getStyle().set("gap", "var(--lumo-space-l)"); + labelsAndIconsRow.getStyle().set("gap", "var(--lumo-space-l)"); + highlightRow.getStyle().set("gap", "var(--lumo-space-l)"); + add(new VerticalLayout( new H3("Basic"), basic, new H3("With field label"), - new HorizontalLayout(withLabel, withLabelAndInitialValue), + fieldLabelRow, new H3("With labels"), - new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels), + labelsRow, new H3("With icons"), - new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons), + iconsRow, new H3("With labels and icons"), - new HorizontalLayout(withLabelsAndIcons, withIconsInside), + labelsAndIconsRow, new H3("With label highlighting"), - new HorizontalLayout(highlightLabels, highlightWithIcons))); + highlightRow)); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java index 4b16197..f30357e 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java @@ -78,14 +78,23 @@ public FCToggleButtonVariantsDemo() { FCToggleButton readOnly = new FCToggleButton(true).setRightLabel("Read-only"); readOnly.setReadOnly(true); + HorizontalLayout colorRow = new HorizontalLayout(primary, success, error, warning, contrast); + HorizontalLayout sizeRow = new HorizontalLayout(small, medium, large); + HorizontalLayout longswipeRow = new HorizontalLayout(longswipeSmall, longswipeMedium, longswipeLarge); + HorizontalLayout statesRow = new HorizontalLayout(disabled, readOnly); + colorRow.getStyle().set("gap", "var(--lumo-space-l)"); + sizeRow.getStyle().set("gap", "var(--lumo-space-l)"); + longswipeRow.getStyle().set("gap", "var(--lumo-space-l)"); + statesRow.getStyle().set("gap", "var(--lumo-space-l)"); + add(new VerticalLayout( new H3("Color variants"), - new HorizontalLayout(primary, success, error, warning, contrast), + colorRow, new H3("Size variants"), - new HorizontalLayout(small, medium, large), + sizeRow, new H3("Long swipe"), - new HorizontalLayout(longswipeSmall, longswipeMedium, longswipeLarge), + longswipeRow, new H3("States"), - new HorizontalLayout(disabled, readOnly))); + statesRow)); } } From 7a46f66974b9828deafcd007b18a2410cee50482 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:38:53 -0300 Subject: [PATCH 30/60] feat: apply theme variant color to highlighted label active state --- src/main/frontend/fc-toggle-button.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/fc-toggle-button.js index 6ef8b03..065c37b 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/fc-toggle-button.js @@ -63,6 +63,22 @@ class FCToggleButton extends LitElement { color: var(--lumo-primary-text-color); } + :host([theme~="success"]) .label.active { + color: var(--lumo-success-text-color); + } + + :host([theme~="error"]) .label.active { + color: var(--lumo-error-text-color); + } + + :host([theme~="warning"]) .label.active { + color: var(--lumo-warning-text-color, #d08000); + } + + :host([theme~="contrast"]) .label.active { + color: var(--lumo-contrast-color); + } + .label.inactive { color: var(--lumo-secondary-text-color); opacity: 0.7; From 368a82d93cc86a5e5342949524490adc24bc63f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:38:59 -0300 Subject: [PATCH 31/60] feat(demo): show label highlighting for each color variant --- .../fctogglebutton/FCToggleButtonDemo.java | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java index 976e38b..9f17d36 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java @@ -78,23 +78,26 @@ public FCToggleButtonDemo() { .setRightIcon(new Icon(VaadinIcon.SUN_O)) .withIconsInside(); - FCToggleButton highlightLabels = new FCToggleButton() - .setLeftLabel("Off") - .setRightLabel("On") - .withHighlightLabel(); + FCToggleButton highlightPrimary = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightPrimary.addThemeVariants(FCToggleButtonVariant.PRIMARY); - FCToggleButton highlightWithIcons = new FCToggleButton() - .setLeftIcon(new Icon(VaadinIcon.MOON)) - .setLeftLabel("Dark") - .setRightLabel("Light") - .setRightIcon(new Icon(VaadinIcon.SUN_O)) - .withHighlightLabel(); + FCToggleButton highlightSuccess = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightSuccess.addThemeVariants(FCToggleButtonVariant.SUCCESS); + + FCToggleButton highlightWarning = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightWarning.addThemeVariants(FCToggleButtonVariant.WARNING); + + FCToggleButton highlightError = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightError.addThemeVariants(FCToggleButtonVariant.ERROR); + + FCToggleButton highlightContrast = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightContrast.addThemeVariants(FCToggleButtonVariant.CONTRAST); HorizontalLayout fieldLabelRow = new HorizontalLayout(withLabel, withLabelAndInitialValue); HorizontalLayout labelsRow = new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels); HorizontalLayout iconsRow = new HorizontalLayout(withLeftIcon, withRightIcon, withBothIcons); HorizontalLayout labelsAndIconsRow = new HorizontalLayout(withLabelsAndIcons, withIconsInside); - HorizontalLayout highlightRow = new HorizontalLayout(highlightLabels, highlightWithIcons); + HorizontalLayout highlightRow = new HorizontalLayout(highlightPrimary, highlightSuccess, highlightWarning, highlightError, highlightContrast); fieldLabelRow.getStyle().set("gap", "var(--lumo-space-l)"); labelsRow.getStyle().set("gap", "var(--lumo-space-l)"); iconsRow.getStyle().set("gap", "var(--lumo-space-l)"); From 01b622ad9a90ea29174435de9c3e470f90cb98e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Sun, 22 Mar 2026 14:40:05 -0300 Subject: [PATCH 32/60] docs: note that label highlighting respects the active color variant --- README.md | 4 ++-- .../vaadin/addons/fctogglebutton/FCToggleButton.java | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0023c02..0bed77d 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and * Toggle between two states with a single click * Customizable left and right labels * Support for icons on both sides via slots -* Optional label highlighting: active-side label uses the primary color, inactive side is dimmed +* Optional label highlighting: active-side label uses the theme variant color (primary, success, warning, error, or contrast), inactive side is dimmed * Optional icons-inside layout: icons adjacent to the switch, labels on the outer edges * Theme variants: `SMALL`, `MEDIUM`, `LARGE`, `LONGSWIPE`, `PRIMARY`, `SUCCESS`, `WARNING`, `ERROR`, `CONTRAST` * `LONGSWIPE` variant produces a wider switch track, optimized for touch interaction; can be combined with size variants @@ -124,7 +124,7 @@ FCToggleButton toggle = new FCToggleButton() toggle.addValueChangeListener(e -> Notification.show("Toggle is now: " + (e.getValue() ? "on" : "off"))); -// Enable label highlighting (active side uses primary color, inactive side is dimmed) +// Enable label highlighting (active side uses the theme variant color, inactive side is dimmed) FCToggleButton toggle = new FCToggleButton() .setLeftLabel("Off") .setRightLabel("On") diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java index d441e75..b37b64d 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java @@ -140,8 +140,12 @@ private void updateLabels() { } /** - * Enables label highlighting: the label on the active side is shown with the primary text color - * and the other with a dimmed color. + * Enables label highlighting: the label on the active side is shown using the color of the + * active theme variant ({@link FCToggleButtonVariant#PRIMARY PRIMARY}, + * {@link FCToggleButtonVariant#SUCCESS SUCCESS}, {@link FCToggleButtonVariant#WARNING WARNING}, + * {@link FCToggleButtonVariant#ERROR ERROR}, or {@link FCToggleButtonVariant#CONTRAST + * CONTRAST}), falling back to the primary color when no color variant is set. The inactive-side + * label is dimmed. * * @return this instance for method chaining * @since 1.0.0 From af7b812ecda0fc74cb306571628285c7abffc76d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 25 Mar 2026 14:15:41 -0300 Subject: [PATCH 33/60] refactor: rename addon as ToggleButton --- .../{fc-toggle-button.js => toggle-button.js} | 6 +- .../ToggleButton.java} | 48 +++++++-------- .../ToggleButtonVariant.java} | 14 ++--- .../flowingcode/vaadin/addons/DemoLayout.java | 2 +- .../ToggleButtonDemo.java} | 52 ++++++++--------- .../ToggleButtonDemoView.java} | 18 +++--- .../ToggleButtonEventsDemo.java} | 16 ++--- .../ToggleButtonVariantsDemo.java} | 58 +++++++++---------- .../it/AbstractViewTest.java | 4 +- .../it/ToggleButtonIT.java} | 12 ++-- .../it/ToggleButtonVariantsIT.java} | 12 ++-- .../it/ViewIT.java | 6 +- .../test/SerializationTest.java | 8 +-- 13 files changed, 128 insertions(+), 128 deletions(-) rename src/main/frontend/{fc-toggle-button.js => toggle-button.js} (99%) rename src/main/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButton.java => togglebutton/ToggleButton.java} (84%) rename src/main/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButtonVariant.java => togglebutton/ToggleButtonVariant.java} (88%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButtonDemo.java => togglebutton/ToggleButtonDemo.java} (62%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButtonDemoView.java => togglebutton/ToggleButtonDemoView.java} (70%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButtonEventsDemo.java => togglebutton/ToggleButtonEventsDemo.java} (80%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/FCToggleButtonVariantsDemo.java => togglebutton/ToggleButtonVariantsDemo.java} (50%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton => togglebutton}/it/AbstractViewTest.java (97%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/it/FCToggleButtonIT.java => togglebutton/it/ToggleButtonIT.java} (91%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton/it/FCToggleButtonVariantsIT.java => togglebutton/it/ToggleButtonVariantsIT.java} (92%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton => togglebutton}/it/ViewIT.java (93%) rename src/test/java/com/flowingcode/vaadin/addons/{fctogglebutton => togglebutton}/test/SerializationTest.java (88%) diff --git a/src/main/frontend/fc-toggle-button.js b/src/main/frontend/toggle-button.js similarity index 99% rename from src/main/frontend/fc-toggle-button.js rename to src/main/frontend/toggle-button.js index 065c37b..3aab02d 100644 --- a/src/main/frontend/fc-toggle-button.js +++ b/src/main/frontend/toggle-button.js @@ -4,7 +4,7 @@ import { LitElement, html, css } from 'lit'; * Custom Toggle Button component. * Supports left and right labels, and is fully stylable. */ -class FCToggleButton extends LitElement { +class ToggleButton extends LitElement { static properties = { checked: { type: Boolean, reflect: true }, label: { type: String }, @@ -478,5 +478,5 @@ class FCToggleButton extends LitElement { } } -customElements.define('fc-toggle-button', FCToggleButton); -export { FCToggleButton }; +customElements.define('toggle-button', ToggleButton); +export { ToggleButton }; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java similarity index 84% rename from src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java rename to src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index b37b64d..9d0e603 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -1,15 +1,15 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 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. @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.vaadin.flow.component.AbstractSinglePropertyField; import com.vaadin.flow.component.Component; @@ -41,21 +41,21 @@ * * @since 1.0.0 */ -@Tag("fc-toggle-button") -@JsModule("./fc-toggle-button.js") +@Tag("toggle-button") +@JsModule("./toggle-button.js") @NpmPackage(value = "lit", version = "3.3.2") -public class FCToggleButton extends AbstractSinglePropertyField +public class ToggleButton extends AbstractSinglePropertyField implements HasSize, HasComponents, HasLabel, HasAriaLabel, HasTooltip, - HasThemeVariant { + HasThemeVariant { private ItemLabelGenerator itemLabelGenerator = b -> ""; /** Creates a new toggle button with an initial value of {@code false}. */ - public FCToggleButton() { + public ToggleButton() { this(false); } @@ -65,7 +65,7 @@ public FCToggleButton() { * @param initialValue the initial checked state * @since 1.0.0 */ - public FCToggleButton(boolean initialValue) { + public ToggleButton(boolean initialValue) { super("checked", initialValue, false); if (initialValue) { getElement().setAttribute("checked", ""); @@ -79,7 +79,7 @@ public FCToggleButton(boolean initialValue) { * @param label the label text shown above the toggle * @since 1.0.0 */ - public FCToggleButton(String label) { + public ToggleButton(String label) { this(false); setLabel(label); } @@ -91,7 +91,7 @@ public FCToggleButton(String label) { * @param initialValue the initial checked state * @since 1.0.0 */ - public FCToggleButton(String label, boolean initialValue) { + public ToggleButton(String label, boolean initialValue) { this(initialValue); setLabel(label); } @@ -122,7 +122,7 @@ public Tooltip setTooltipText(String text) { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { + public ToggleButton setItemLabelGenerator(ItemLabelGenerator itemLabelGenerator) { this.itemLabelGenerator = itemLabelGenerator; updateLabels(); return this; @@ -141,16 +141,16 @@ private void updateLabels() { /** * Enables label highlighting: the label on the active side is shown using the color of the - * active theme variant ({@link FCToggleButtonVariant#PRIMARY PRIMARY}, - * {@link FCToggleButtonVariant#SUCCESS SUCCESS}, {@link FCToggleButtonVariant#WARNING WARNING}, - * {@link FCToggleButtonVariant#ERROR ERROR}, or {@link FCToggleButtonVariant#CONTRAST + * active theme variant ({@link ToggleButtonVariant#PRIMARY PRIMARY}, + * {@link ToggleButtonVariant#SUCCESS SUCCESS}, {@link ToggleButtonVariant#WARNING WARNING}, + * {@link ToggleButtonVariant#ERROR ERROR}, or {@link ToggleButtonVariant#CONTRAST * CONTRAST}), falling back to the primary color when no color variant is set. The inactive-side * label is dimmed. * * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton withHighlightLabel() { + public ToggleButton withHighlightLabel() { getElement().setProperty("highlightLabel", true); return this; } @@ -165,7 +165,7 @@ public FCToggleButton withHighlightLabel() { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton withIconsInside() { + public ToggleButton withIconsInside() { getElement().setProperty("iconsInside", true); return this; } @@ -177,7 +177,7 @@ public FCToggleButton withIconsInside() { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton withIconsOutside() { + public ToggleButton withIconsOutside() { getElement().setProperty("iconsInside", false); return this; } @@ -189,7 +189,7 @@ public FCToggleButton withIconsOutside() { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton withoutHighlightLabel() { + public ToggleButton withoutHighlightLabel() { getElement().setProperty("highlightLabel", false); return this; } @@ -201,7 +201,7 @@ public FCToggleButton withoutHighlightLabel() { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton setLeftLabel(String label) { + public ToggleButton setLeftLabel(String label) { getElement().setProperty("leftLabel", label); return this; } @@ -213,7 +213,7 @@ public FCToggleButton setLeftLabel(String label) { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton setRightLabel(String label) { + public ToggleButton setRightLabel(String label) { getElement().setProperty("rightLabel", label); return this; } @@ -225,7 +225,7 @@ public FCToggleButton setRightLabel(String label) { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton setLeftIcon(Component icon) { + public ToggleButton setLeftIcon(Component icon) { icon.getElement().setAttribute("slot", "left"); add(icon); return this; @@ -238,7 +238,7 @@ public FCToggleButton setLeftIcon(Component icon) { * @return this instance for method chaining * @since 1.0.0 */ - public FCToggleButton setRightIcon(Component icon) { + public ToggleButton setRightIcon(Component icon) { icon.getElement().setAttribute("slot", "right"); add(icon); return this; diff --git a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariant.java similarity index 88% rename from src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java rename to src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariant.java index c0e6591..d7a7179 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariant.java @@ -1,15 +1,15 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 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. @@ -17,19 +17,19 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.vaadin.flow.component.shared.ThemeVariant; /** - * Theme variants for the {@link FCToggleButton} component. + * Theme variants for the {@link ToggleButton} component. * *

Size variants ({@link #SMALL}, {@link #MEDIUM}, {@link #LARGE}) and {@link #LONGSWIPE} can be * combined (e.g. {@code LONGSWIPE} + {@code LARGE}). * * @since 1.0.0 */ -public enum FCToggleButtonVariant implements ThemeVariant { +public enum ToggleButtonVariant implements ThemeVariant { /** Renders the toggle at a smaller size (32×18 px track). */ SMALL("small"), /** Renders the toggle at the default medium size (44×24 px track). */ @@ -55,7 +55,7 @@ public enum FCToggleButtonVariant implements ThemeVariant { private final String variant; - FCToggleButtonVariant(String variant) { + ToggleButtonVariant(String variant) { this.variant = variant; } diff --git a/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java b/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java index 8b8bdc8..5ade712 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java +++ b/src/test/java/com/flowingcode/vaadin/addons/DemoLayout.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java similarity index 62% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java index 9f17d36..7a09582 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.flowingcode.vaadin.addons.demo.DemoSource; import com.vaadin.flow.component.html.Div; @@ -32,66 +32,66 @@ @DemoSource @PageTitle("Labels and Icons") @SuppressWarnings("serial") -@Route(value = "labels", layout = FCToggleButtonDemoView.class) -public class FCToggleButtonDemo extends Div { +@Route(value = "labels", layout = ToggleButtonDemoView.class) +public class ToggleButtonDemo extends Div { - public FCToggleButtonDemo() { + public ToggleButtonDemo() { - FCToggleButton basic = new FCToggleButton(); + ToggleButton basic = new ToggleButton(); - FCToggleButton withLabel = new FCToggleButton("Notifications"); + ToggleButton withLabel = new ToggleButton("Notifications"); - FCToggleButton withLabelAndInitialValue = new FCToggleButton("Dark mode", true) + ToggleButton withLabelAndInitialValue = new ToggleButton("Dark mode", true) .setLeftLabel("Off") .setRightLabel("On"); - FCToggleButton withLeftLabel = new FCToggleButton() + ToggleButton withLeftLabel = new ToggleButton() .setLeftLabel("Off"); - FCToggleButton withRightLabel = new FCToggleButton() + ToggleButton withRightLabel = new ToggleButton() .setRightLabel("On"); - FCToggleButton withBothLabels = new FCToggleButton() + ToggleButton withBothLabels = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); - FCToggleButton withLeftIcon = new FCToggleButton() + ToggleButton withLeftIcon = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)); - FCToggleButton withRightIcon = new FCToggleButton() + ToggleButton withRightIcon = new ToggleButton() .setRightIcon(new Icon(VaadinIcon.SUN_O)); - FCToggleButton withBothIcons = new FCToggleButton() + ToggleButton withBothIcons = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)) .setRightIcon(new Icon(VaadinIcon.SUN_O)); - FCToggleButton withLabelsAndIcons = new FCToggleButton() + ToggleButton withLabelsAndIcons = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)) .setLeftLabel("Dark") .setRightLabel("Light") .setRightIcon(new Icon(VaadinIcon.SUN_O)); - FCToggleButton withIconsInside = new FCToggleButton() + ToggleButton withIconsInside = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)) .setLeftLabel("Dark") .setRightLabel("Light") .setRightIcon(new Icon(VaadinIcon.SUN_O)) .withIconsInside(); - FCToggleButton highlightPrimary = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); - highlightPrimary.addThemeVariants(FCToggleButtonVariant.PRIMARY); + ToggleButton highlightPrimary = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightPrimary.addThemeVariants(ToggleButtonVariant.PRIMARY); - FCToggleButton highlightSuccess = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); - highlightSuccess.addThemeVariants(FCToggleButtonVariant.SUCCESS); + ToggleButton highlightSuccess = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightSuccess.addThemeVariants(ToggleButtonVariant.SUCCESS); - FCToggleButton highlightWarning = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); - highlightWarning.addThemeVariants(FCToggleButtonVariant.WARNING); + ToggleButton highlightWarning = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightWarning.addThemeVariants(ToggleButtonVariant.WARNING); - FCToggleButton highlightError = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); - highlightError.addThemeVariants(FCToggleButtonVariant.ERROR); + ToggleButton highlightError = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightError.addThemeVariants(ToggleButtonVariant.ERROR); - FCToggleButton highlightContrast = new FCToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); - highlightContrast.addThemeVariants(FCToggleButtonVariant.CONTRAST); + ToggleButton highlightContrast = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightContrast.addThemeVariants(ToggleButtonVariant.CONTRAST); HorizontalLayout fieldLabelRow = new HorizontalLayout(withLabel, withLabelAndInitialValue); HorizontalLayout labelsRow = new HorizontalLayout(withLeftLabel, withRightLabel, withBothLabels); diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemoView.java similarity index 70% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemoView.java index 83cc296..915634d 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemoView.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.flowingcode.vaadin.addons.DemoLayout; import com.flowingcode.vaadin.addons.GithubLink; @@ -27,14 +27,14 @@ @SuppressWarnings("serial") @ParentLayout(DemoLayout.class) -@Route("fctogglebutton") -@GithubLink("https://github.com/FlowingCode/FCToggleButton") -public class FCToggleButtonDemoView extends TabbedDemo { +@Route("togglebutton") +@GithubLink("https://github.com/FlowingCode/ToggleButton") +public class ToggleButtonDemoView extends TabbedDemo { - public FCToggleButtonDemoView() { - addDemo(FCToggleButtonDemo.class); - addDemo(FCToggleButtonVariantsDemo.class); - addDemo(FCToggleButtonEventsDemo.class); + public ToggleButtonDemoView() { + addDemo(ToggleButtonDemo.class); + addDemo(ToggleButtonVariantsDemo.class); + addDemo(ToggleButtonEventsDemo.class); setSizeFull(); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java similarity index 80% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java index 2aa2661..e8eab94 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonEventsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.flowingcode.vaadin.addons.demo.DemoSource; import com.vaadin.flow.component.html.Div; @@ -30,23 +30,23 @@ @DemoSource @PageTitle("Events and Accessibility") @SuppressWarnings("serial") -@Route(value = "events", layout = FCToggleButtonDemoView.class) -public class FCToggleButtonEventsDemo extends Div { +@Route(value = "events", layout = ToggleButtonDemoView.class) +public class ToggleButtonEventsDemo extends Div { - public FCToggleButtonEventsDemo() { + public ToggleButtonEventsDemo() { - FCToggleButton withValueChange = new FCToggleButton() + ToggleButton withValueChange = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); withValueChange.addValueChangeListener(e -> Notification.show("Value changed to: " + e.getValue())); - FCToggleButton withAriaLabel = new FCToggleButton() + ToggleButton withAriaLabel = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); withAriaLabel.setAriaLabel("Enable notifications"); - FCToggleButton withTooltip = new FCToggleButton() + ToggleButton withTooltip = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); withTooltip.setTooltipText("Toggle to enable or disable this feature"); diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java similarity index 50% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java index f30357e..357535d 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/FCToggleButtonVariantsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton; +package com.flowingcode.vaadin.addons.togglebutton; import com.flowingcode.vaadin.addons.demo.DemoSource; import com.vaadin.flow.component.html.Div; @@ -30,52 +30,52 @@ @DemoSource @PageTitle("Theme Variants") @SuppressWarnings("serial") -@Route(value = "variants", layout = FCToggleButtonDemoView.class) -public class FCToggleButtonVariantsDemo extends Div { +@Route(value = "variants", layout = ToggleButtonDemoView.class) +public class ToggleButtonVariantsDemo extends Div { - public FCToggleButtonVariantsDemo() { + public ToggleButtonVariantsDemo() { // Color variants - FCToggleButton primary = new FCToggleButton(true).setLeftLabel("Primary"); - primary.addThemeVariants(FCToggleButtonVariant.PRIMARY); + ToggleButton primary = new ToggleButton(true).setLeftLabel("Primary"); + primary.addThemeVariants(ToggleButtonVariant.PRIMARY); - FCToggleButton success = new FCToggleButton(true).setLeftLabel("Success"); - success.addThemeVariants(FCToggleButtonVariant.SUCCESS); + ToggleButton success = new ToggleButton(true).setLeftLabel("Success"); + success.addThemeVariants(ToggleButtonVariant.SUCCESS); - FCToggleButton error = new FCToggleButton(true).setLeftLabel("Error"); - error.addThemeVariants(FCToggleButtonVariant.ERROR); + ToggleButton error = new ToggleButton(true).setLeftLabel("Error"); + error.addThemeVariants(ToggleButtonVariant.ERROR); - FCToggleButton warning = new FCToggleButton(true).setLeftLabel("Warning"); - warning.addThemeVariants(FCToggleButtonVariant.WARNING); + ToggleButton warning = new ToggleButton(true).setLeftLabel("Warning"); + warning.addThemeVariants(ToggleButtonVariant.WARNING); - FCToggleButton contrast = new FCToggleButton(true).setLeftLabel("Contrast"); - contrast.addThemeVariants(FCToggleButtonVariant.CONTRAST); + ToggleButton contrast = new ToggleButton(true).setLeftLabel("Contrast"); + contrast.addThemeVariants(ToggleButtonVariant.CONTRAST); // Size variants - FCToggleButton small = new FCToggleButton().setRightLabel("Small"); - small.addThemeVariants(FCToggleButtonVariant.SMALL); + ToggleButton small = new ToggleButton().setRightLabel("Small"); + small.addThemeVariants(ToggleButtonVariant.SMALL); - FCToggleButton medium = new FCToggleButton().setRightLabel("Medium"); - medium.addThemeVariants(FCToggleButtonVariant.MEDIUM); + ToggleButton medium = new ToggleButton().setRightLabel("Medium"); + medium.addThemeVariants(ToggleButtonVariant.MEDIUM); - FCToggleButton large = new FCToggleButton().setRightLabel("Large"); - large.addThemeVariants(FCToggleButtonVariant.LARGE); + ToggleButton large = new ToggleButton().setRightLabel("Large"); + large.addThemeVariants(ToggleButtonVariant.LARGE); // Long swipe variants - FCToggleButton longswipeSmall = new FCToggleButton().setRightLabel("Small"); - longswipeSmall.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.SMALL); + ToggleButton longswipeSmall = new ToggleButton().setRightLabel("Small"); + longswipeSmall.addThemeVariants(ToggleButtonVariant.LONGSWIPE, ToggleButtonVariant.SMALL); - FCToggleButton longswipeMedium = new FCToggleButton().setRightLabel("Medium"); - longswipeMedium.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.MEDIUM); + ToggleButton longswipeMedium = new ToggleButton().setRightLabel("Medium"); + longswipeMedium.addThemeVariants(ToggleButtonVariant.LONGSWIPE, ToggleButtonVariant.MEDIUM); - FCToggleButton longswipeLarge = new FCToggleButton().setRightLabel("Large"); - longswipeLarge.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.LARGE); + ToggleButton longswipeLarge = new ToggleButton().setRightLabel("Large"); + longswipeLarge.addThemeVariants(ToggleButtonVariant.LONGSWIPE, ToggleButtonVariant.LARGE); // States - FCToggleButton disabled = new FCToggleButton().setRightLabel("Disabled"); + ToggleButton disabled = new ToggleButton().setRightLabel("Disabled"); disabled.setEnabled(false); - FCToggleButton readOnly = new FCToggleButton(true).setRightLabel("Read-only"); + ToggleButton readOnly = new ToggleButton(true).setRightLabel("Read-only"); readOnly.setReadOnly(true); HorizontalLayout colorRow = new HorizontalLayout(primary, success, error, warning, contrast); diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/AbstractViewTest.java similarity index 97% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/AbstractViewTest.java index 486a83b..d4d7da8 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/AbstractViewTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/AbstractViewTest.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton.it; +package com.flowingcode.vaadin.addons.togglebutton.it; import com.vaadin.testbench.ScreenshotOnFailureRule; import com.vaadin.testbench.TestBench; diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java similarity index 91% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java index 28da312..c7b2bb5 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton.it; +package com.flowingcode.vaadin.addons.togglebutton.it; import static org.junit.Assert.assertEquals; import static org.junit.Assert.assertNotNull; @@ -27,7 +27,7 @@ import org.junit.Test; /** - * Integration tests for {@code FCToggleButton} label and value-change behavior. + * Integration tests for {@code ToggleButton} label and value-change behavior. * *

Tests navigate to the "Labels and Icons" demo (route {@code labels}). * Component index mapping: @@ -44,14 +44,14 @@ *

  • highlightWithIcons (withHighlightLabel)
    • * */ -public class FCToggleButtonIT extends AbstractViewTest { +public class ToggleButtonIT extends AbstractViewTest { - public FCToggleButtonIT() { + public ToggleButtonIT() { super("labels"); } private TestBenchElement getToggle(int index) { - return $("fc-toggle-button").get(index); + return $("toggle-button").get(index); } @Test diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java similarity index 92% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java index d0380a8..a002166 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/FCToggleButtonVariantsIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton.it; +package com.flowingcode.vaadin.addons.togglebutton.it; import static org.junit.Assert.assertNotNull; import static org.junit.Assert.assertNull; @@ -27,7 +27,7 @@ import org.junit.Test; /** - * Integration tests for {@code FCToggleButton} theme variants and component states. + * Integration tests for {@code ToggleButton} theme variants and component states. * *

    Tests navigate to the "Theme Variants" demo (route {@code variants}). * Component index mapping: @@ -44,14 +44,14 @@ *

  • readOnly (checked=true, readonly)
    • * */ -public class FCToggleButtonVariantsIT extends AbstractViewTest { +public class ToggleButtonVariantsIT extends AbstractViewTest { - public FCToggleButtonVariantsIT() { + public ToggleButtonVariantsIT() { super("variants"); } private TestBenchElement getToggle(int index) { - return $("fc-toggle-button").get(index); + return $("toggle-button").get(index); } // --- Color variants --- diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java similarity index 93% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java index 54d3e99..d65e34e 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,7 +17,7 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton.it; +package com.flowingcode.vaadin.addons.togglebutton.it; import static org.hamcrest.Matchers.is; import static org.hamcrest.Matchers.not; @@ -57,7 +57,7 @@ protected boolean matchesSafely(TestBenchElement item, Description mismatchDescr @Test public void componentWorks() { - TestBenchElement element = $("fc-toggle-button").first(); + TestBenchElement element = $("toggle-button").first(); assertThat(element, hasBeenUpgradedToCustomElement); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/test/SerializationTest.java similarity index 88% rename from src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java rename to src/test/java/com/flowingcode/vaadin/addons/togglebutton/test/SerializationTest.java index 9bab2cf..baa282a 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/fctogglebutton/test/SerializationTest.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/test/SerializationTest.java @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% @@ -17,9 +17,9 @@ * limitations under the License. * #L% */ -package com.flowingcode.vaadin.addons.fctogglebutton.test; +package com.flowingcode.vaadin.addons.togglebutton.test; -import com.flowingcode.vaadin.addons.fctogglebutton.FCToggleButton; +import com.flowingcode.vaadin.addons.togglebutton.ToggleButton; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOException; @@ -44,7 +44,7 @@ private void testSerializationOf(Object obj) throws IOException, ClassNotFoundEx @Test public void testSerialization() throws ClassNotFoundException, IOException { try { - testSerializationOf(new FCToggleButton()); + testSerializationOf(new ToggleButton()); } catch (Exception e) { Assert.fail("Problem while testing serialization: " + e.getMessage()); } From b98d490d7db28c119cb4483028de34dc3ff88e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 25 Mar 2026 14:15:56 -0300 Subject: [PATCH 34/60] build: rename addon as ToggleButton --- pom.xml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pom.xml b/pom.xml index 140a299..9212ed9 100644 --- a/pom.xml +++ b/pom.xml @@ -5,11 +5,11 @@ 4.0.0 com.flowingcode.vaadin.addons - fc-toggle-button-addon + toggle-button-addon 1.0.0-SNAPSHOT - FC Toggle Button Add-On + Toggle Button Add-On Toggle button built on Vaadin components with support for customizable labels and icons - https://github.com/FlowingCode/FCToggleButton + https://github.com/FlowingCode/ToggleButton 24.9.1 @@ -38,9 +38,9 @@ - https://github.com/FlowingCode/FCToggleButton - scm:git:git://github.com/FlowingCode/FCToggleButton.git - scm:git:ssh://git@github.com:/FlowingCode/FCToggleButton.git + https://github.com/FlowingCode/ToggleButton + scm:git:git://github.com/FlowingCode/ToggleButton.git + scm:git:ssh://git@github.com:/FlowingCode/ToggleButton.git master From a1a6b3e786acf0f3b5ca6ca5bd151d839e02d514 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 25 Mar 2026 14:16:06 -0300 Subject: [PATCH 35/60] docs: rename addon as ToggleButton --- README.md | 44 +++++++++---------- .../META-INF/VAADIN/package.properties | 2 +- .../frontend/styles/shared-styles.css | 2 +- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 0bed77d..e26f847 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/fc-toggle-button-addon) -[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/fc-toggle-button-addon.svg)](https://vaadin.com/directory/component/fc-toggle-button-addon) -[![Build Status](https://jenkins.flowingcode.com/job/fc-toggle-button-addon/badge/icon)](https://jenkins.flowingcode.com/job/fc-toggle-button-addon) -[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/fc-toggle-button-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/fc-toggle-button-addon) -[![Javadoc](https://img.shields.io/badge/javadoc-00b4f0)](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/fc-toggle-button-addon) +[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/toggle-button-addon) +[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/toggle-button-addon.svg)](https://vaadin.com/directory/component/toggle-button-addon) +[![Build Status](https://jenkins.flowingcode.com/job/toggle-button-addon/badge/icon)](https://jenkins.flowingcode.com/job/toggle-button-addon) +[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/toggle-button-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/toggle-button-addon) +[![Javadoc](https://img.shields.io/badge/javadoc-00b4f0)](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/toggle-button-addon) -# FC Toggle Button Add-On +# Toggle Button Add-On A toggle button component for Vaadin Flow that supports customizable labels and icons on both sides of the toggle. @@ -22,11 +22,11 @@ A toggle button component for Vaadin Flow that supports customizable labels and ## Online demo -[Online demo here](http://addonsv24.flowingcode.com/fctogglebutton) +[Online demo here](http://addonsv24.flowingcode.com/togglebutton) ## Download release -[Available in Vaadin Directory](https://vaadin.com/directory/component/fc-toggle-button-addon) +[Available in Vaadin Directory](https://vaadin.com/directory/component/toggle-button-addon) ### Maven install @@ -35,7 +35,7 @@ Add the following dependencies in your pom.xml file: ```xml com.flowingcode.vaadin.addons - fc-toggle-button-addon + toggle-button-addon 1.0.0 ``` @@ -52,7 +52,7 @@ To see the demo, navigate to http://localhost:8080/ ## Release notes -See [here](https://github.com/FlowingCode/FCToggleButton/releases) +See [here](https://github.com/FlowingCode/ToggleButton/releases) ## Issue tracking @@ -92,7 +92,7 @@ Then, follow these steps for creating a contribution: This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt. -FC Toggle Button Add-On is written by Flowing Code S.A. +Toggle Button Add-On is written by Flowing Code S.A. # Developer Guide @@ -100,21 +100,21 @@ FC Toggle Button Add-On is written by Flowing Code S.A. ```java // Basic toggle button -FCToggleButton toggle = new FCToggleButton(); +ToggleButton toggle = new ToggleButton(); // With a field label (shown above the toggle) -FCToggleButton toggle = new FCToggleButton("Notifications"); +ToggleButton toggle = new ToggleButton("Notifications"); // With a field label and initial value -FCToggleButton toggle = new FCToggleButton("Dark mode", true); +ToggleButton toggle = new ToggleButton("Dark mode", true); // With labels -FCToggleButton toggle = new FCToggleButton() +ToggleButton toggle = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); // With icons -FCToggleButton toggle = new FCToggleButton() +ToggleButton toggle = new ToggleButton() .setLeftLabel("Dark") .setRightLabel("Light") .setLeftIcon(new Icon(VaadinIcon.MOON)) @@ -125,13 +125,13 @@ toggle.addValueChangeListener(e -> Notification.show("Toggle is now: " + (e.getValue() ? "on" : "off"))); // Enable label highlighting (active side uses the theme variant color, inactive side is dimmed) -FCToggleButton toggle = new FCToggleButton() +ToggleButton toggle = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On") .withHighlightLabel(); // Icons inside: [label] [icon] [switch] [icon] [label] (default is [icon] [label] [switch] [label] [icon]) -FCToggleButton toggle = new FCToggleButton() +ToggleButton toggle = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)) .setLeftLabel("Dark") .setRightLabel("Light") @@ -139,12 +139,12 @@ FCToggleButton toggle = new FCToggleButton() .withIconsInside(); // Apply theme variants -toggle.addThemeVariants(FCToggleButtonVariant.PRIMARY); -toggle.addThemeVariants(FCToggleButtonVariant.CONTRAST); +toggle.addThemeVariants(ToggleButtonVariant.PRIMARY); +toggle.addThemeVariants(ToggleButtonVariant.CONTRAST); // Long swipe: wider track, optimized for touch (can be combined with size variants) -toggle.addThemeVariants(FCToggleButtonVariant.LONGSWIPE); -toggle.addThemeVariants(FCToggleButtonVariant.LONGSWIPE, FCToggleButtonVariant.LARGE); +toggle.addThemeVariants(ToggleButtonVariant.LONGSWIPE); +toggle.addThemeVariants(ToggleButtonVariant.LONGSWIPE, ToggleButtonVariant.LARGE); ``` ## Special configuration when using Spring diff --git a/src/main/resources/META-INF/VAADIN/package.properties b/src/main/resources/META-INF/VAADIN/package.properties index 785dce8..ba53c73 100644 --- a/src/main/resources/META-INF/VAADIN/package.properties +++ b/src/main/resources/META-INF/VAADIN/package.properties @@ -1,6 +1,6 @@ ### # #%L -# FC Toggle Button Add-On +# Toggle Button Add-On # %% # Copyright (C) 2026 Flowing Code # %% diff --git a/src/test/resources/META-INF/frontend/styles/shared-styles.css b/src/test/resources/META-INF/frontend/styles/shared-styles.css index 3af2c70..dded7b2 100644 --- a/src/test/resources/META-INF/frontend/styles/shared-styles.css +++ b/src/test/resources/META-INF/frontend/styles/shared-styles.css @@ -1,6 +1,6 @@ /*- * #%L - * FC Toggle Button Add-On + * Toggle Button Add-On * %% * Copyright (C) 2026 Flowing Code * %% From b87eba8348d0f2481e5bf365249cd1a7bad6eefb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 25 Mar 2026 14:20:46 -0300 Subject: [PATCH 36/60] chore: add apache license --- LICENSE => LICENSE.txt | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename LICENSE => LICENSE.txt (99%) diff --git a/LICENSE b/LICENSE.txt similarity index 99% rename from LICENSE rename to LICENSE.txt index 980a15a..261eeb9 100644 --- a/LICENSE +++ b/LICENSE.txt @@ -1,4 +1,4 @@ - Apache License + Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -178,7 +178,7 @@ APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" + boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright {yyyy} {name of copyright owner} + Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From 92bbf1ebded70a0c2559375a90917ddcffff9dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 25 Mar 2026 16:06:04 -0300 Subject: [PATCH 37/60] chore: update bug-report and feature-request templates --- .github/ISSUE_TEMPLATE/bug-report.yml | 2 +- .github/ISSUE_TEMPLATE/feature-request.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 6ac7bfb..ce77a38 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -1,5 +1,5 @@ name: Bug Report -description: Please report issues related to FC Toggle Button Add-On here. +description: Please report issues related to Toggle Button Add-On here. body: - type: textarea id: problem-description diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml index b54257d..3ba43fa 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.yml +++ b/.github/ISSUE_TEMPLATE/feature-request.yml @@ -1,5 +1,5 @@ name: Feature Request -description: Please add feature suggestions related to FC Toggle Button Add-On here. +description: Please add feature suggestions related to Toggle Button Add-On here. body: - type: textarea id: feature-proposal From 6c2133e7c66be7cf784196c9e16461ff70e9cc15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Thu, 26 Mar 2026 15:04:58 -0300 Subject: [PATCH 38/60] WIP: test: identify IT components by id instead of positional index --- .../addons/togglebutton/ToggleButtonDemo.java | 5 ++ .../ToggleButtonVariantsDemo.java | 10 ++++ .../togglebutton/it/ToggleButtonIT.java | 39 ++++---------- .../it/ToggleButtonVariantsIT.java | 53 ++++++------------- 4 files changed, 43 insertions(+), 64 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java index 7a09582..0d2a9e5 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java @@ -38,6 +38,7 @@ public class ToggleButtonDemo extends Div { public ToggleButtonDemo() { ToggleButton basic = new ToggleButton(); + basic.setId("basic"); ToggleButton withLabel = new ToggleButton("Notifications"); @@ -47,13 +48,16 @@ public ToggleButtonDemo() { ToggleButton withLeftLabel = new ToggleButton() .setLeftLabel("Off"); + withLeftLabel.setId("with-left-label"); ToggleButton withRightLabel = new ToggleButton() .setRightLabel("On"); + withRightLabel.setId("with-right-label"); ToggleButton withBothLabels = new ToggleButton() .setLeftLabel("Off") .setRightLabel("On"); + withBothLabels.setId("with-both-labels"); ToggleButton withLeftIcon = new ToggleButton() .setLeftIcon(new Icon(VaadinIcon.MOON)); @@ -79,6 +83,7 @@ public ToggleButtonDemo() { .withIconsInside(); ToggleButton highlightPrimary = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); + highlightPrimary.setId("highlight-primary"); highlightPrimary.addThemeVariants(ToggleButtonVariant.PRIMARY); ToggleButton highlightSuccess = new ToggleButton(true).setLeftLabel("Off").setRightLabel("On").withHighlightLabel(); diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java index 357535d..b77d7af 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java @@ -37,28 +37,36 @@ public ToggleButtonVariantsDemo() { // Color variants ToggleButton primary = new ToggleButton(true).setLeftLabel("Primary"); + primary.setId("primary"); primary.addThemeVariants(ToggleButtonVariant.PRIMARY); ToggleButton success = new ToggleButton(true).setLeftLabel("Success"); + success.setId("success"); success.addThemeVariants(ToggleButtonVariant.SUCCESS); ToggleButton error = new ToggleButton(true).setLeftLabel("Error"); + error.setId("error"); error.addThemeVariants(ToggleButtonVariant.ERROR); ToggleButton warning = new ToggleButton(true).setLeftLabel("Warning"); + warning.setId("warning"); warning.addThemeVariants(ToggleButtonVariant.WARNING); ToggleButton contrast = new ToggleButton(true).setLeftLabel("Contrast"); + contrast.setId("contrast"); contrast.addThemeVariants(ToggleButtonVariant.CONTRAST); // Size variants ToggleButton small = new ToggleButton().setRightLabel("Small"); + small.setId("small"); small.addThemeVariants(ToggleButtonVariant.SMALL); ToggleButton medium = new ToggleButton().setRightLabel("Medium"); + medium.setId("medium"); medium.addThemeVariants(ToggleButtonVariant.MEDIUM); ToggleButton large = new ToggleButton().setRightLabel("Large"); + large.setId("large"); large.addThemeVariants(ToggleButtonVariant.LARGE); // Long swipe variants @@ -73,9 +81,11 @@ public ToggleButtonVariantsDemo() { // States ToggleButton disabled = new ToggleButton().setRightLabel("Disabled"); + disabled.setId("disabled"); disabled.setEnabled(false); ToggleButton readOnly = new ToggleButton(true).setRightLabel("Read-only"); + readOnly.setId("read-only"); readOnly.setReadOnly(true); HorizontalLayout colorRow = new HorizontalLayout(primary, success, error, warning, contrast); diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java index c7b2bb5..c51e0b2 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java @@ -26,49 +26,32 @@ import com.vaadin.testbench.TestBenchElement; import org.junit.Test; -/** - * Integration tests for {@code ToggleButton} label and value-change behavior. - * - *

    Tests navigate to the "Labels and Icons" demo (route {@code labels}). - * Component index mapping: - *

      - *
    1. basic
      2. - *
    2. withLeftLabel ("Off")
      3. - *
    3. withRightLabel ("On")
      4. - *
    4. withBothLabels ("Off" / "On")
      5. - *
    5. withLeftIcon
      6. - *
    6. withRightIcon
      7. - *
    7. withBothIcons
      8. - *
    8. withLabelsAndIcons
      9. - *
    9. highlightLabels (withHighlightLabel)
      10. - *
    10. highlightWithIcons (withHighlightLabel)
      11. - *
    - */ +/** Integration tests for {@code ToggleButton} label and value-change behavior. */ public class ToggleButtonIT extends AbstractViewTest { public ToggleButtonIT() { super("labels"); } - private TestBenchElement getToggle(int index) { - return $("toggle-button").get(index); + private TestBenchElement getToggle(String id) { + return $("toggle-button").id(id); } @Test public void initialValueIsFalse() { - assertNull(getToggle(0).getAttribute("checked")); + assertNull(getToggle("basic").getAttribute("checked")); } @Test public void clickTogglesChecked() { - TestBenchElement toggle = getToggle(0); + TestBenchElement toggle = getToggle("basic"); toggle.click(); assertNotNull(toggle.getAttribute("checked")); } @Test public void clickAgainTogglesBack() { - TestBenchElement toggle = getToggle(0); + TestBenchElement toggle = getToggle("basic"); toggle.click(); toggle.click(); assertNull(toggle.getAttribute("checked")); @@ -76,7 +59,7 @@ public void clickAgainTogglesBack() { @Test public void leftLabelIsRendered() { - TestBenchElement toggle = getToggle(1); + TestBenchElement toggle = getToggle("with-left-label"); String text = (String) toggle @@ -88,7 +71,7 @@ public void leftLabelIsRendered() { @Test public void rightLabelIsRendered() { - TestBenchElement toggle = getToggle(2); + TestBenchElement toggle = getToggle("with-right-label"); String text = (String) toggle @@ -100,7 +83,7 @@ public void rightLabelIsRendered() { @Test public void bothLabelsAreRendered() { - TestBenchElement toggle = getToggle(3); + TestBenchElement toggle = getToggle("with-both-labels"); String texts = (String) toggle @@ -114,11 +97,11 @@ public void bothLabelsAreRendered() { @Test public void highlightLabelAttributeIsReflected() { - assertNotNull(getToggle(8).getAttribute("highlightlabel")); + assertNotNull(getToggle("highlight-primary").getAttribute("highlightlabel")); } @Test public void noHighlightLabelByDefault() { - assertNull(getToggle(0).getAttribute("highlightlabel")); + assertNull(getToggle("basic").getAttribute("highlightlabel")); } } diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java index a002166..2265c65 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java @@ -26,93 +26,74 @@ import com.vaadin.testbench.TestBenchElement; import org.junit.Test; -/** - * Integration tests for {@code ToggleButton} theme variants and component states. - * - *

    Tests navigate to the "Theme Variants" demo (route {@code variants}). - * Component index mapping: - *

      - *
    1. primary (checked=true, theme=primary)
      2. - *
    2. success (checked=true, theme=success)
      3. - *
    3. error (checked=true, theme=error)
      4. - *
    4. warning (checked=true, theme=warning)
      5. - *
    5. contrast (checked=true, theme=contrast)
      6. - *
    6. small (checked=false, theme=small)
      7. - *
    7. medium (checked=false, theme=medium)
      8. - *
    8. large (checked=false, theme=large)
      9. - *
    9. disabled (checked=false, disabled)
      10. - *
    10. readOnly (checked=true, readonly)
      11. - *
    - */ +/** Integration tests for {@code ToggleButton} theme variants and component states. */ public class ToggleButtonVariantsIT extends AbstractViewTest { public ToggleButtonVariantsIT() { super("variants"); } - private TestBenchElement getToggle(int index) { - return $("toggle-button").get(index); + private TestBenchElement getToggle(String id) { + return $("toggle-button").id(id); } // --- Color variants --- @Test public void primaryVariantHasThemeAttribute() { - assertTrue(getToggle(0).getAttribute("theme").contains("primary")); + assertTrue(getToggle("primary").getAttribute("theme").contains("primary")); } @Test public void successVariantHasThemeAttribute() { - assertTrue(getToggle(1).getAttribute("theme").contains("success")); + assertTrue(getToggle("success").getAttribute("theme").contains("success")); } @Test public void errorVariantHasThemeAttribute() { - assertTrue(getToggle(2).getAttribute("theme").contains("error")); + assertTrue(getToggle("error").getAttribute("theme").contains("error")); } @Test public void warningVariantHasThemeAttribute() { - assertTrue(getToggle(3).getAttribute("theme").contains("warning")); + assertTrue(getToggle("warning").getAttribute("theme").contains("warning")); } @Test public void contrastVariantHasThemeAttribute() { - assertTrue(getToggle(4).getAttribute("theme").contains("contrast")); + assertTrue(getToggle("contrast").getAttribute("theme").contains("contrast")); } // --- Size variants --- @Test public void smallVariantHasThemeAttribute() { - assertTrue(getToggle(5).getAttribute("theme").contains("small")); + assertTrue(getToggle("small").getAttribute("theme").contains("small")); } @Test public void mediumVariantHasThemeAttribute() { - assertTrue(getToggle(6).getAttribute("theme").contains("medium")); + assertTrue(getToggle("medium").getAttribute("theme").contains("medium")); } @Test public void largeVariantHasThemeAttribute() { - assertTrue(getToggle(7).getAttribute("theme").contains("large")); + assertTrue(getToggle("large").getAttribute("theme").contains("large")); } // --- Initial values --- @Test public void colorVariantsInitializedChecked() { - // All color variants (indices 0-4) are created with initialValue=true - for (int i = 0; i < 5; i++) { - assertNotNull("Expected toggle " + i + " to be checked", getToggle(i).getAttribute("checked")); + for (String id : new String[] {"primary", "success", "error", "warning", "contrast"}) { + assertNotNull("Expected " + id + " to be checked", getToggle(id).getAttribute("checked")); } } @Test public void sizeVariantsInitializedUnchecked() { - // Size variants (indices 5-7) are created with default initialValue=false - for (int i = 5; i < 8; i++) { - assertNull("Expected toggle " + i + " to be unchecked", getToggle(i).getAttribute("checked")); + for (String id : new String[] {"small", "medium", "large"}) { + assertNull("Expected " + id + " to be unchecked", getToggle(id).getAttribute("checked")); } } @@ -120,7 +101,7 @@ public void sizeVariantsInitializedUnchecked() { @Test public void disabledButtonCannotBeToggled() { - TestBenchElement disabled = getToggle(8); + TestBenchElement disabled = getToggle("disabled"); assertNull(disabled.getAttribute("checked")); disabled.click(); assertNull(disabled.getAttribute("checked")); @@ -128,7 +109,7 @@ public void disabledButtonCannotBeToggled() { @Test public void readonlyButtonCannotBeToggled() { - TestBenchElement readOnly = getToggle(9); + TestBenchElement readOnly = getToggle("read-only"); assertNotNull(readOnly.getAttribute("checked")); readOnly.click(); assertNotNull(readOnly.getAttribute("checked")); From 294d6501c90ec83952be11f80ccef34de4e33790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Thu, 26 Mar 2026 15:20:47 -0300 Subject: [PATCH 39/60] WIP: fix: preserve left/right labels when setValue is called --- .../vaadin/addons/togglebutton/ToggleButton.java | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index 9d0e603..26ab66e 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -128,12 +128,6 @@ public ToggleButton setItemLabelGenerator(ItemLabelGenerator itemLabelG return this; } - @Override - public void setValue(Boolean value) { - super.setValue(value); - updateLabels(); - } - private void updateLabels() { getElement().setProperty("leftLabel", itemLabelGenerator.apply(false)); getElement().setProperty("rightLabel", itemLabelGenerator.apply(true)); From 084e70aa6279a8f6552dafcc70572e50e8eebcdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Thu, 26 Mar 2026 15:23:36 -0300 Subject: [PATCH 40/60] WIP: chore: add license header to toggle-button.js --- src/main/frontend/toggle-button.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/main/frontend/toggle-button.js b/src/main/frontend/toggle-button.js index 3aab02d..2544001 100644 --- a/src/main/frontend/toggle-button.js +++ b/src/main/frontend/toggle-button.js @@ -1,3 +1,22 @@ +/*- + * #%L + * Toggle Button Add-On + * %% + * Copyright (C) 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% + */ import { LitElement, html, css } from 'lit'; /** From 37bd629637c7281d9ee5d5a6d143c0e6f2c9f65d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Thu, 26 Mar 2026 15:30:20 -0300 Subject: [PATCH 41/60] WIP: refactor: rename web component tag from toggle-button to fc-toggle-button --- src/main/frontend/toggle-button.js | 2 +- .../flowingcode/vaadin/addons/togglebutton/ToggleButton.java | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/frontend/toggle-button.js b/src/main/frontend/toggle-button.js index 2544001..0aea97a 100644 --- a/src/main/frontend/toggle-button.js +++ b/src/main/frontend/toggle-button.js @@ -497,5 +497,5 @@ class ToggleButton extends LitElement { } } -customElements.define('toggle-button', ToggleButton); +customElements.define('fc-toggle-button', ToggleButton); export { ToggleButton }; diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index 26ab66e..e7fc9ca 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -41,7 +41,7 @@ * * @since 1.0.0 */ -@Tag("toggle-button") +@Tag("fc-toggle-button") @JsModule("./toggle-button.js") @NpmPackage(value = "lit", version = "3.3.2") public class ToggleButton extends AbstractSinglePropertyField From e53af4bc1b17e60e7ccf1df3e4fc13cdb3e4de43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 27 Mar 2026 09:45:23 -0300 Subject: [PATCH 42/60] WIP: refactor: remove lit import from ToggleButton --- .../flowingcode/vaadin/addons/togglebutton/ToggleButton.java | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index e7fc9ca..73956fb 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -28,7 +28,6 @@ import com.vaadin.flow.component.ItemLabelGenerator; import com.vaadin.flow.component.Tag; import com.vaadin.flow.component.dependency.JsModule; -import com.vaadin.flow.component.dependency.NpmPackage; import com.vaadin.flow.component.shared.HasThemeVariant; import com.vaadin.flow.component.shared.HasTooltip; import com.vaadin.flow.component.shared.Tooltip; @@ -43,7 +42,6 @@ */ @Tag("fc-toggle-button") @JsModule("./toggle-button.js") -@NpmPackage(value = "lit", version = "3.3.2") public class ToggleButton extends AbstractSinglePropertyField implements HasSize, HasComponents, From 3cbc52a990527179454765ea4d90a19545f960c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 27 Mar 2026 10:04:21 -0300 Subject: [PATCH 43/60] WIP: test: update demo view routes --- .../vaadin/addons/togglebutton/ToggleButtonDemo.java | 2 +- .../vaadin/addons/togglebutton/ToggleButtonEventsDemo.java | 2 +- .../vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java index 0d2a9e5..125dfd5 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonDemo.java @@ -32,7 +32,7 @@ @DemoSource @PageTitle("Labels and Icons") @SuppressWarnings("serial") -@Route(value = "labels", layout = ToggleButtonDemoView.class) +@Route(value = "togglebutton/labels", layout = ToggleButtonDemoView.class) public class ToggleButtonDemo extends Div { public ToggleButtonDemo() { diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java index e8eab94..ef492c7 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonEventsDemo.java @@ -30,7 +30,7 @@ @DemoSource @PageTitle("Events and Accessibility") @SuppressWarnings("serial") -@Route(value = "events", layout = ToggleButtonDemoView.class) +@Route(value = "togglebutton/events", layout = ToggleButtonDemoView.class) public class ToggleButtonEventsDemo extends Div { public ToggleButtonEventsDemo() { diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java index b77d7af..740f95b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButtonVariantsDemo.java @@ -30,7 +30,7 @@ @DemoSource @PageTitle("Theme Variants") @SuppressWarnings("serial") -@Route(value = "variants", layout = ToggleButtonDemoView.class) +@Route(value = "togglebutton/variants", layout = ToggleButtonDemoView.class) public class ToggleButtonVariantsDemo extends Div { public ToggleButtonVariantsDemo() { From 18e266e914bf61524b2663f4529193c109482e6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 27 Mar 2026 10:13:09 -0300 Subject: [PATCH 44/60] WIP: refactor: move toggle-button.js to META-INF/resources/frontend --- .../{ => resources/META-INF/resources}/frontend/toggle-button.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/main/{ => resources/META-INF/resources}/frontend/toggle-button.js (100%) diff --git a/src/main/frontend/toggle-button.js b/src/main/resources/META-INF/resources/frontend/toggle-button.js similarity index 100% rename from src/main/frontend/toggle-button.js rename to src/main/resources/META-INF/resources/frontend/toggle-button.js From 20e876dd23824a50d9a9f661eb5f87a94022a764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Fri, 27 Mar 2026 10:30:58 -0300 Subject: [PATCH 45/60] WIP: build: upgrade commons demo to 5.2.0 --- pom.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index 9212ed9..29563bd 100644 --- a/pom.xml +++ b/pom.xml @@ -20,7 +20,7 @@ UTF-8 ${project.basedir}/drivers 11.0.20 - 5.0.0 + 5.2.0     From dcd67bfa947dca8f6c424a1e800505cb8f8644a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 30 Mar 2026 08:46:37 -0300 Subject: [PATCH 46/60] WIP: refactor: rename fc-toggle-button-js --- .../flowingcode/vaadin/addons/togglebutton/ToggleButton.java | 2 +- .../frontend/{toggle-button.js => fc-toggle-button.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/main/resources/META-INF/resources/frontend/{toggle-button.js => fc-toggle-button.js} (100%) diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index 73956fb..38ad68f 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -41,7 +41,7 @@ * @since 1.0.0 */ @Tag("fc-toggle-button") -@JsModule("./toggle-button.js") +@JsModule("./fc-toggle-button.js") public class ToggleButton extends AbstractSinglePropertyField implements HasSize, HasComponents, diff --git a/src/main/resources/META-INF/resources/frontend/toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js similarity index 100% rename from src/main/resources/META-INF/resources/frontend/toggle-button.js rename to src/main/resources/META-INF/resources/frontend/fc-toggle-button.js From 9e1766bca4ed3a9dbb8e014342c835b275e58480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Tue, 31 Mar 2026 15:01:34 -0300 Subject: [PATCH 47/60] chore: add .claude to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 9a38502..749053c 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ vite.config.ts /src/main/bundles /src/main/frontend/generated /src/main/frontend/index.html +/.claude From b96eb6b437f2d5cc02875d02ab1e2d28cf4ddf8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Tue, 31 Mar 2026 15:57:45 -0300 Subject: [PATCH 48/60] WIP: fix: add style fallback aura variables --- .../resources/frontend/fc-toggle-button.js | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js index 0aea97a..34aa2d3 100644 --- a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js +++ b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js @@ -40,18 +40,18 @@ class ToggleButton extends LitElement { display: inline-flex; flex-direction: column; align-items: flex-start; - gap: var(--lumo-space-xs, 4px); - font-family: var(--lumo-font-family); - color: var(--lumo-body-text-color); + gap: var(--lumo-space-xs, var(--vaadin-gap-xs)); + font-family: var(--lumo-font-family, var(--aura-font-family)); + color: var(--lumo-body-text-color, var(--vaadin-text-color)); cursor: pointer; user-select: none; transition: opacity 0.2s; } .field-label { - font-size: var(--lumo-font-size-s, 14px); + font-size: var(--lumo-font-size-s, var(--aura-font-size-s)); font-weight: 500; - color: var(--lumo-secondary-text-color); + color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary)); line-height: 1; } @@ -69,37 +69,37 @@ class ToggleButton extends LitElement { .container { display: flex; align-items: center; - gap: var(--lumo-space-s, 8px); + gap: var(--lumo-space-s, var(--vaadin-gap-s)); } .label { - font-size: var(--lumo-font-size-s, 14px); + font-size: var(--lumo-font-size-s, var(--aura-font-size-s)); font-weight: 500; transition: color 0.3s; } .label.active { - color: var(--lumo-primary-text-color); + color: var(--lumo-primary-text-color, var(--aura-blue-text)); } :host([theme~="success"]) .label.active { - color: var(--lumo-success-text-color); + color: var(--lumo-success-text-color, var(--aura-green-text)); } :host([theme~="error"]) .label.active { - color: var(--lumo-error-text-color); + color: var(--lumo-error-text-color, var(--aura-red-text)); } :host([theme~="warning"]) .label.active { - color: var(--lumo-warning-text-color, #d08000); + color: var(--lumo-warning-text-color, var(--aura-orange-text)); } :host([theme~="contrast"]) .label.active { - color: var(--lumo-contrast-color); + color: var(--lumo-contrast, var(--aura-neutral)); } .label.inactive { - color: var(--lumo-secondary-text-color); + color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary)); opacity: 0.7; } @@ -114,16 +114,16 @@ class ToggleButton extends LitElement { } :host([checked]) .switch { - background-color: var(--lumo-primary-color, #007bff); + background-color: var(--lumo-primary-color, var(--aura-blue)); } /* Theme Variants */ :host([theme~="success"][checked]) .switch { - background-color: var(--lumo-success-color, #28a745); + background-color: var(--lumo-success-color, var(--aura-green)); } :host([theme~="error"][checked]) .switch { - background-color: var(--lumo-error-color, #dc3545); + background-color: var(--lumo-error-color, var(--aura-red)); } :host([theme~="warning"][checked]) .switch { @@ -132,15 +132,15 @@ class ToggleButton extends LitElement { } :host([theme~="primary"][checked]) .switch { - background-color: var(--lumo-primary-color, #007bff); + background-color: var(--lumo-primary-color, var(--aura-blue)); } :host([theme~="contrast"][checked]) .switch { - background-color: var(--lumo-contrast-color, #000); + background-color: var(--lumo-contrast, var(--aura-neutral)); } :host([theme~="contrast"]) .slider { - background-color: var(--lumo-base-color, #fff); + background-color: var(--lumo-base-color, var(--vaadin-background-color)); } /* Slider colors for variants if needed */ @@ -154,9 +154,9 @@ class ToggleButton extends LitElement { left: 3px; width: 18px; height: 18px; - background-color: var(--lumo-base-color, #fff); + background-color: var(--lumo-base-color, var(--vaadin-background-color)); border-radius: 50%; - box-shadow: var(--lumo-box-shadow-s, 0 2px 4px rgba(0,0,0,0.2)); + box-shadow: var(--lumo-box-shadow-s, var(--aura-shadow-xs)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @@ -223,7 +223,7 @@ class ToggleButton extends LitElement { } :host([theme~="medium"]) .label { - font-size: var(--lumo-font-size-s, 14px); + font-size: var(--lumo-font-size-s, var(--aura-font-size-s)); } :host([theme~="small"]) .switch { @@ -243,7 +243,7 @@ class ToggleButton extends LitElement { } :host([theme~="small"]) .label { - font-size: var(--lumo-font-size-xs, 12px); + font-size: var(--lumo-font-size-xs, var(--aura-font-size-xs)); } :host([theme~="large"]) .switch { @@ -264,7 +264,7 @@ class ToggleButton extends LitElement { } :host([theme~="large"]) .label { - font-size: var(--lumo-font-size-l, 18px); + font-size: var(--lumo-font-size-l, var(--aura-font-size-l)); } :host([theme~="longswipe"]) .switch { @@ -292,7 +292,7 @@ class ToggleButton extends LitElement { } :host([theme~="longswipe"]) .label { - font-size: var(--lumo-font-size-s, 14px); + font-size: var(--lumo-font-size-s, var(--aura-font-size-s)); } :host([theme~="longswipe"][theme~="small"]) .switch { @@ -346,8 +346,8 @@ class ToggleButton extends LitElement { /* Readonly Styles: Unify the look for both checked/unchecked and variants */ :host([readonly]) .switch { - background-color: var(--lumo-contrast-10pct, #f0f0f0) !important; - border: 3px dotted var(--lumo-contrast-30pct, #ccc) !important; + background-color: var(--lumo-contrast-10pct, var(--vaadin-background-container)) !important; + border: 3px dotted var(--lumo-contrast-30pct, var(--vaadin-border-color)) !important; box-sizing: border-box; } @@ -355,7 +355,7 @@ class ToggleButton extends LitElement { top: 0 !important; left: 0 !important; box-shadow: none !important; - background-color: var(--lumo-contrast-40pct, #999) !important; + background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong)) !important; } `; From 81f86eaee02139933761306d761364cae37714ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Tue, 31 Mar 2026 15:58:00 -0300 Subject: [PATCH 49/60] WIP: test: add AppShellConfiguratorImpl --- .../addons/AppShellConfiguratorImpl.java | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java new file mode 100644 index 0000000..31f2f61 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -0,0 +1,35 @@ +/*- + * #%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% + */ +package com.flowingcode.vaadin.addons; + +import com.flowingcode.vaadin.addons.demo.DynamicTheme; +import com.vaadin.flow.component.page.AppShellConfigurator; +import com.vaadin.flow.server.AppShellSettings; + +public class AppShellConfiguratorImpl implements AppShellConfigurator { + + @Override + public void configurePage(AppShellSettings settings) { + if (DynamicTheme.isFeatureSupported()) { + DynamicTheme.LUMO.initialize(settings); + } + } + +} \ No newline at end of file From ad0dad983e9f38d6d70c9b8840c692237c61b615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Wed, 1 Apr 2026 11:42:38 -0300 Subject: [PATCH 50/60] WIP: docs: update online demo link pointing to v25 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e26f847..2a38027 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ A toggle button component for Vaadin Flow that supports customizable labels and ## Online demo -[Online demo here](http://addonsv24.flowingcode.com/togglebutton) +[Online demo here](http://addonsv25.flowingcode.com/togglebutton) ## Download release From 710567ca2fa44c745e59e197e59454fc986d3286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:32:01 -0300 Subject: [PATCH 51/60] WIP: fix: fix header comment in AppShellConfiguratorImpl --- .../com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java index 31f2f61..dd49a3a 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -1,6 +1,6 @@ /*- * #%L - * Badge List Add-on + * Toggle Button Add-On * %% * Copyright (C) 2023 - 2026 Flowing Code * %% From 9bf6096a98f7c50aca3fed2c532f92e8b7320bdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:32:56 -0300 Subject: [PATCH 52/60] WIP: fix: fix copyright year in AppShellConfiguratorImpl --- .../com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java index dd49a3a..4fea7d8 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java +++ b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java @@ -2,7 +2,7 @@ * #%L * Toggle Button Add-On * %% - * Copyright (C) 2023 - 2026 Flowing Code + * Copyright (C) 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. From f7e66dba43014ba14eadebcb6660c9a2973f5a40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:48:48 -0300 Subject: [PATCH 53/60] WIP: fix: replace existing slotted icon instead of adding duplicate --- .../vaadin/addons/togglebutton/ToggleButton.java | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index 38ad68f..16096b4 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -218,8 +218,7 @@ public ToggleButton setRightLabel(String label) { * @since 1.0.0 */ public ToggleButton setLeftIcon(Component icon) { - icon.getElement().setAttribute("slot", "left"); - add(icon); + setSlottedIcon(icon, "left"); return this; } @@ -231,8 +230,15 @@ public ToggleButton setLeftIcon(Component icon) { * @since 1.0.0 */ public ToggleButton setRightIcon(Component icon) { - icon.getElement().setAttribute("slot", "right"); - add(icon); + setSlottedIcon(icon, "right"); return this; } + + private void setSlottedIcon(Component icon, String slot) { + getElement().getChildren() + .filter(e -> slot.equals(e.getAttribute("slot"))) + .forEach(e -> e.removeFromParent()); + icon.getElement().setAttribute("slot", slot); + add(icon); + } } From 282bd1b8c07c40db83694900e4038c5c57d846c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:51:04 -0300 Subject: [PATCH 54/60] WIP: test: rename fc-toggle-button selector in IT tests --- .../vaadin/addons/togglebutton/it/ToggleButtonIT.java | 2 +- .../vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java | 2 +- .../com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java index c51e0b2..9e955ec 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java @@ -34,7 +34,7 @@ public ToggleButtonIT() { } private TestBenchElement getToggle(String id) { - return $("toggle-button").id(id); + return $("fc-toggle-button").id(id); } @Test diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java index 2265c65..90392b0 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java @@ -34,7 +34,7 @@ public ToggleButtonVariantsIT() { } private TestBenchElement getToggle(String id) { - return $("toggle-button").id(id); + return $("fc-toggle-button").id(id); } // --- Color variants --- diff --git a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java index d65e34e..f38ba2b 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java +++ b/src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java @@ -57,7 +57,7 @@ protected boolean matchesSafely(TestBenchElement item, Description mismatchDescr @Test public void componentWorks() { - TestBenchElement element = $("toggle-button").first(); + TestBenchElement element = $("fc-toggle-button").first(); assertThat(element, hasBeenUpgradedToCustomElement); } } From 8d0cc65cec28f4be4a165f8435e975e7faebdd2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:54:17 -0300 Subject: [PATCH 55/60] WIP: style: use lumo and aura variables in css config --- .../resources/META-INF/resources/frontend/fc-toggle-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js index 34aa2d3..06b4166 100644 --- a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js +++ b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js @@ -127,7 +127,7 @@ class ToggleButton extends LitElement { } :host([theme~="warning"][checked]) .switch { - background-color: #ffc107; /* Custom warning color if Lumo doesn't provide one */ + background-color: var(--lumo-warning-color, var(--aura-yellow)); color: rgba(0, 0, 0, 0.85); } From 411c0959676bd3a3111c338380b49b128fee1323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 13:56:40 -0300 Subject: [PATCH 56/60] WIP: build: add jakarta.servlet-api dependency in v25 profile Vaadin 25 uses Jakarta Servlet, so the javax.servlet:javax.servlet-api declared in the main dependencies won't be compatible when building with -Pv25. --- pom.xml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pom.xml b/pom.xml index 29563bd..69158cd 100644 --- a/pom.xml +++ b/pom.xml @@ -580,6 +580,12 @@ vaadin-dev true + + jakarta.servlet + jakarta.servlet-api + 6.1.0 + test + From 11719514bf34bf6dcfb9b6a6f29871ca5d4fc9e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 17:16:31 -0300 Subject: [PATCH 57/60] WIP: fix: avoid creating duplicate tooltips in HasTooltip impl --- .../vaadin/addons/togglebutton/ToggleButton.java | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java index 16096b4..3c504ef 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java +++ b/src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java @@ -51,6 +51,7 @@ public class ToggleButton extends AbstractSinglePropertyField { private ItemLabelGenerator itemLabelGenerator = b -> ""; + private Tooltip tooltip; /** Creates a new toggle button with an initial value of {@code false}. */ public ToggleButton() { @@ -106,11 +107,21 @@ public boolean isReadOnly() { @Override public Tooltip setTooltipText(String text) { - Tooltip tooltip = Tooltip.forComponent(this); + if (tooltip == null) { + tooltip = Tooltip.forComponent(this); + } tooltip.setText(text); return tooltip; } + @Override + public Tooltip getTooltip() { + if (tooltip == null) { + tooltip = Tooltip.forComponent(this); + } + return tooltip; + } + /** * Sets a generator that provides labels for the checked ({@code true}) and unchecked * ({@code false}) states. The generator is called with the state value and its result is used From 0c428e1ce480acd54e460b5764e12cc03aaf7258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 17:18:34 -0300 Subject: [PATCH 58/60] WIP: refactor: simplify var assignment --- .../resources/META-INF/resources/frontend/fc-toggle-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js index 06b4166..fcbb651 100644 --- a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js +++ b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js @@ -456,7 +456,7 @@ class ToggleButton extends LitElement { const maxTranslate = switchEl ? switchEl.offsetWidth - sliderWidth - gap * 2 : 20; const threshold = maxTranslate * 0.5; - const newChecked = dx > 0 ? true : false; + const newChecked = dx > 0; if (Math.abs(dx) >= threshold && newChecked !== this.checked) { this.checked = newChecked; this._fireChange(); From e9764f9a27c5db461c75d9408d2f5a5a21254ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 17:19:56 -0300 Subject: [PATCH 59/60] WIP: refactor: remove !important declarations from styles --- .../META-INF/resources/frontend/fc-toggle-button.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js index fcbb651..e1755e2 100644 --- a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js +++ b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js @@ -346,16 +346,16 @@ class ToggleButton extends LitElement { /* Readonly Styles: Unify the look for both checked/unchecked and variants */ :host([readonly]) .switch { - background-color: var(--lumo-contrast-10pct, var(--vaadin-background-container)) !important; - border: 3px dotted var(--lumo-contrast-30pct, var(--vaadin-border-color)) !important; + background-color: var(--lumo-contrast-10pct, var(--vaadin-background-container)); + border: 3px dotted var(--lumo-contrast-30pct, var(--vaadin-border-color)); box-sizing: border-box; } :host([readonly]) .slider { - top: 0 !important; - left: 0 !important; - box-shadow: none !important; - background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong)) !important; + top: 0; + left: 0; + box-shadow: none; + background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong)); } `; From a451e6a57f60b53992409408f02a6c9ac2e44a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicola=CC=81s=20Luis=20Gonza=CC=81lez=20Paz?= Date: Mon, 6 Apr 2026 17:23:36 -0300 Subject: [PATCH 60/60] WIP: style: use transparent background and dashed border for readonl --- .../META-INF/resources/frontend/fc-toggle-button.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js index e1755e2..3dd875a 100644 --- a/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js +++ b/src/main/resources/META-INF/resources/frontend/fc-toggle-button.js @@ -346,14 +346,14 @@ class ToggleButton extends LitElement { /* Readonly Styles: Unify the look for both checked/unchecked and variants */ :host([readonly]) .switch { - background-color: var(--lumo-contrast-10pct, var(--vaadin-background-container)); - border: 3px dotted var(--lumo-contrast-30pct, var(--vaadin-border-color)); + background-color: transparent; + border: 2px dashed var(--lumo-contrast-30pct, var(--vaadin-border-color)); box-sizing: border-box; } :host([readonly]) .slider { - top: 0; - left: 0; + top: 1px; + left: 1px; box-shadow: none; background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong)); }