First implementation by ngonzalezpazFC · Pull Request #1 · FlowingCode/ToggleButton

ngonzalezpazFC · 2026-03-21T00:55:06Z

Summary

Add ToggleButton component extending AbstractSinglePropertyField<ToggleButton, Boolean>,
implementing HasSize, HasComponents, HasLabel, HasAriaLabel, HasTooltip, and
HasThemeVariant<ToggleButtonVariant>
Add ToggleButtonVariant enum with color variants (PRIMARY, SUCCESS, WARNING,
ERROR, CONTRAST), size variants (SMALL, MEDIUM, LARGE), and touch variant (LONGSWIPE)
Implement fc-toggle-button LitElement web component with shadow DOM, Lumo token
integration, and symmetric active-state animations for all size variants
Add LONGSWIPE variant producing a wider switch track optimized for touch; combinable with
size variants (LONGSWIPE + SMALL/MEDIUM/LARGE)
Add mobile swipe gesture support: horizontal drag moves the slider in real time; releasing
past the 50% threshold snaps to the new state with a smooth CSS transition
Expose fluent API: setLeftLabel, setRightLabel, setLeftIcon, setRightIcon,
setItemLabelGenerator, withHighlightLabel, withoutHighlightLabel, withIconsInside,
withIconsOutside
Label highlighting respects the active color variant: the active-side label uses the color
of the SUCCESS, WARNING, ERROR, or CONTRAST variant instead of always defaulting to
primary
withIconsInside() swaps the default layout to [label] [icon] [switch] [icon] [label],
placing icons adjacent to the switch and labels on the outer edges
Add tabbed demo with three views: Labels & Icons, Theme Variants, and Events & Accessibility
Migrate all classes from the template package to com.flowingcode.vaadin.addons.togglebutton
Update pom.xml name and description per AddonsInternal guidelines
Update README.md with correct badges, links, features list, and Getting Started examples

Test plan

Run mvn clean install — build passes
Run mvn clean install jetty:run and verify all three demo tabs render correctly
Verify toggle animations are symmetric for all size variants (small, medium, large)
Verify withHighlightLabel() highlights the active side label
Verify theme variants apply correct colors and sizes
Verify disabled and read-only states behave correctly
Run mvn test
Integration tests run on CI (require Vaadin TestBench license)

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

Replace all template references with FC Toggle Button content: badges, description, features list, demo URL, getting started examples, and release notes link.

Add FCToggleButtonVariant.CONTRAST, applying --lumo-contrast-color to the switch track when checked, consistent with Vaadin Button's contrast variant behavior.

Add FCToggleButtonVariant.MEDIUM as an explicit variant matching the default size, allowing it to be set programmatically alongside other theme variants.

Replace TEMPLATE_ADDON placeholder with FC Toggle Button Add-On in bug-report.yml and feature-request.yml descriptions.

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

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.

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.

Add a "With label highlighting" section to FCToggleButtonDemo with two examples using withHighlightLabel(): one with labels only and one combining labels and icons.

ngonzalezpazFC · 2026-03-31T18:59:17Z

It would be better also to rename toggle-button.js to fc-toggle-button.js as well to avoid conflict with any other frontend file a project could have with the same name.

dcd67bf

src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java

src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java

src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonIT.java

src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ToggleButtonVariantsIT.java

src/test/java/com/flowingcode/vaadin/addons/togglebutton/it/ViewIT.java

src/main/resources/META-INF/resources/frontend/fc-toggle-button.js

javier-godoy

In the v25 profile, please add the jakarta.servlet-api dependency (as done in AddonStarter24). 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.

<profile>
    <id>v25</id>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-dev</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>6.1.0</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</profile>

README.md

javier-godoy · 2026-04-01T14:57:59Z

src/main/java/com/flowingcode/vaadin/addons/togglebutton/ToggleButton.java

+    }
+
+    @Override
+    public Tooltip setTooltipText(String text) {


setTooltipText creates a new Tooltip on every call. Tooltip.forComponent(this) allocates a fresh tooltip each time, which deviates from the standard HasTooltip contract. Either delegate to getTooltip().setText(text) and return getTooltip(), or remove this override and rely on the default HasTooltip implementation.

javier-godoy · 2026-04-01T14:57:59Z

src/main/resources/META-INF/resources/frontend/fc-toggle-button.js

+    const maxTranslate = switchEl ? switchEl.offsetWidth - sliderWidth - gap * 2 : 20;
+    const threshold = maxTranslate * 0.5;
+
+    const newChecked = dx > 0 ? true : false;


Unnecessary ternary. dx > 0 ? true : false is equivalent to dx > 0. Please simplify.

javier-godoy · 2026-04-01T14:58:00Z

src/main/resources/META-INF/resources/frontend/fc-toggle-button.js

+
+    /* 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;


!important in Shadow DOM readonly styles. Since these rules live inside the shadow root, selector specificity is already scoped — !important is not needed and prevents consumers from overriding the readonly appearance via CSS custom properties or ::part. Please remove all !important declarations from this block.

paodb · 2026-04-06T15:04:02Z

Some comments about read-only styles:

border shoud be thinner and use dashed intead of dotted
background should be transparent not grey (grey gives the impresion of disabled)
Check how checkbox are styled on read-only mode https://vaadin.com/docs/next/components/checkbox#read-only. This component should be similar.

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.

ngonzalezpazFC · 2026-04-06T16:56:59Z

In the v25 profile, please add the jakarta.servlet-api dependency (as done in AddonStarter24). 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.
<profile>
    <id>v25</id>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-dev</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>6.1.0</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</profile>

411c095

javier-godoy

See comments above.

ngonzalezpazFC · 2026-04-06T20:23:49Z

Some comments about read-only styles:

border shoud be thinner and use dashed intead of dotted

background should be transparent not grey (grey gives the impresion of disabled)
Check how checkbox are styled on read-only mode https://vaadin.com/docs/next/components/checkbox#read-only. This component should be similar.

a451e6a

paodb · 2026-04-08T15:46:15Z

src/main/resources/META-INF/resources/frontend/fc-toggle-button.js

+    /* Readonly Styles: Unify the look for both checked/unchecked and variants */
+    :host([readonly]) .switch {
+      background-color: transparent;
+      border: 2px dashed var(--lumo-contrast-30pct, var(--vaadin-border-color));


I would use 1px, so it looks thinner and more in sync with vaadin components

ngonzalezpazFC added 15 commits March 20, 2026 20:45

build: update name capitalization and improve description in pom.xml

b216368

feat: add toggle button first implementation

f01af09

refactor: remove TemplateAddon placeholder class

950015e

build: add license headers to FCToggleButton and FCToggleButtonVariant

40b94e2

docs: add Javadoc to FCToggleButton and FCToggleButtonVariant public API

0bbfb52

feat: make FCToggleButton API fluent

7d439ac

docs(readme): update README for FC Toggle Button add-on

0cc600e

Replace all template references with FC Toggle Button content: badges, description, features list, demo URL, getting started examples, and release notes link.

feat: add CONTRAST theme variant

822abbf

Add FCToggleButtonVariant.CONTRAST, applying --lumo-contrast-color to the switch track when checked, consistent with Vaadin Button's contrast variant behavior.

feat: add MEDIUM size variant

57c0730

Add FCToggleButtonVariant.MEDIUM as an explicit variant matching the default size, allowing it to be set programmatically alongside other theme variants.

chore: update issue templates for FC Toggle Button Add-On

ab04f7d

Replace TEMPLATE_ADDON placeholder with FC Toggle Button Add-On in bug-report.yml and feature-request.yml descriptions.

test(demo): add label highlighting examples to labels demo

820af40

Add a "With label highlighting" section to FCToggleButtonDemo with two examples using withHighlightLabel(): one with labels only and one combining labels and icons.

ngonzalezpazFC changed the title ~~Develop~~ First implementation Mar 21, 2026

ngonzalezpazFC self-assigned this Mar 21, 2026

ngonzalezpazFC added the enhancement New feature or request label Mar 21, 2026

ngonzalezpazFC requested a review from mlopezFC March 21, 2026 01:00

ngonzalezpazFC added 11 commits March 22, 2026 10:51

docs(readme): update README with highlight label feature and version

8bc2ac2

test: add integration tests for toggle behavior and theme variants

c0b5dc5

feat: add HasLabel support with label constructors

4ef8c06

feat(demo): add field label examples to labels and icons demo

371c752

docs(readme): document HasLabel support and label constructors

07cc262

feat: add swipe gesture support for mobile toggle interaction

b7b687b

feat: add LONGSWIPE theme variant

c8c630b

feat(demo): add long swipe section with size variant examples

8eaa1f8

fix: correct border-radius for large toggle to follow slider contour

6af7352

docs: document LONGSWIPE variant in README and Javadoc

33656e2

feat: add withIconsInside layout option for icons adjacent to switch

465ce15

ngonzalezpazFC force-pushed the develop branch from e300428 to 81f86ea Compare March 31, 2026 18:58

ngonzalezpazFC requested a review from paodb March 31, 2026 18:58

paodb requested changes Mar 31, 2026

View reviewed changes

src/main/resources/META-INF/resources/frontend/fc-toggle-button.js Outdated Show resolved Hide resolved

javier-godoy reviewed Apr 1, 2026

View reviewed changes

javier-godoy requested changes Apr 1, 2026

View reviewed changes

README.md Outdated Show resolved Hide resolved

ngonzalezpazFC requested a review from javier-godoy April 1, 2026 14:42

WIP: docs: update online demo link pointing to v25

ad0dad9

ngonzalezpazFC force-pushed the develop branch from f90435a to ad0dad9 Compare April 1, 2026 14:43

javier-godoy requested changes Apr 1, 2026

View reviewed changes

ngonzalezpazFC added 4 commits April 6, 2026 13:32

WIP: fix: fix header comment in AppShellConfiguratorImpl

710567c

WIP: fix: fix copyright year in AppShellConfiguratorImpl

9bf6096

WIP: fix: replace existing slotted icon instead of adding duplicate

f7e66db

WIP: test: rename fc-toggle-button selector in IT tests

282bd1b

ngonzalezpazFC force-pushed the develop branch from 3a1963e to 282bd1b Compare April 6, 2026 16:52

ngonzalezpazFC added 2 commits April 6, 2026 13:54

WIP: style: use lumo and aura variables in css config

8d0cc65

WIP: build: add jakarta.servlet-api dependency in v25 profile

411c095

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.

ngonzalezpazFC requested review from javier-godoy and paodb April 6, 2026 16:57

javier-godoy requested changes Apr 6, 2026

View reviewed changes

ngonzalezpazFC added 4 commits April 6, 2026 17:16

WIP: fix: avoid creating duplicate tooltips in HasTooltip impl

1171951

WIP: refactor: simplify var assignment

0c428e1

WIP: refactor: remove !important declarations from styles

e9764f9

WIP: style: use transparent background and dashed border for readonl

a451e6a

ngonzalezpazFC requested a review from javier-godoy April 6, 2026 20:24

paodb requested changes Apr 8, 2026

View reviewed changes

Conversation

ngonzalezpazFC commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

ngonzalezpazFC commented Mar 31, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

javier-godoy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

javier-godoy Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ngonzalezpazFC Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

javier-godoy Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ngonzalezpazFC Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

javier-godoy Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ngonzalezpazFC Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

paodb commented Apr 6, 2026

Uh oh!

ngonzalezpazFC commented Apr 6, 2026

Uh oh!

javier-godoy left a comment

Choose a reason for hiding this comment

Uh oh!

ngonzalezpazFC commented Apr 6, 2026

Uh oh!

paodb Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ngonzalezpazFC commented Mar 21, 2026 •

edited

Loading