Skip to content

Conversation

HerbertsVaadin
Copy link
Collaborator

Description

Adds support for accordion to load without any opened panels.
For this, I introduced "closed" attribute / property that does not interfere with the old logic if it's not specified.

Using this as an exercise to learn web-components better, so detailed feedback would be appreciated. It's OK if this PR is closed / not accepted.

<vaadin-accordion closed>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
    <div>Panel 1 content</div>
  </vaadin-accordion-panel>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
    <div>Panel 2 content</div>
  </vaadin-accordion-panel>
</vaadin-accordion>

Fixes # (issue)
vaadin/flow-components#1638

Type of change

  • Bugfix
  • Feature

Checklist

  • I have read the contribution guide: https://vaadin.com/docs/latest/contributing/pr
  • I have added a description following the guideline.
  • The issue is created in the corresponding repository and I have referenced it.
  • I have added tests to ensure my change is effective and works as intended.
  • New and existing tests are passing locally with my change.
  • I have performed self-review and corrected misspellings.
  • I have not completed some of the steps above and my pull request can be closed immediately.

Additional for Feature type of change

  • Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.
    Nothing specific discussed, but straight forward implementation in my opinion.

Copy link

sonarqubecloud bot commented Sep 2, 2025

@HerbertsVaadin HerbertsVaadin marked this pull request as draft September 2, 2025 11:36
@HerbertsVaadin HerbertsVaadin marked this pull request as ready for review September 2, 2025 11:39
@HerbertsVaadin
Copy link
Collaborator Author

HerbertsVaadin commented Sep 2, 2025

Hmm, I guess this is already supported in flow with

var accordion = new Accordion();
accordion.close();

I guess in lit you'd just set the "opened" property to null and that would be it.
EDIT: but I'm unable to do it with some simple JS, so really unsure.

  <body>
    <vaadin-accordion>
      <vaadin-accordion-panel>
        <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
        <div>Panel 1 content</div>
      </vaadin-accordion-panel>
      <vaadin-accordion-panel>
        <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
        <div>Panel 2 content</div>
      </vaadin-accordion-panel>
      <vaadin-accordion-panel summary="Panel 3">
        <div>Panel 3 content</div>
      </vaadin-accordion-panel>
      <vaadin-accordion-panel summary="Panel 4 (disabled)" disabled>
        <div>Panel 4 content</div>
      </vaadin-accordion-panel>
    </vaadin-accordion>
    <button onclick="document.querySelector('vaadin-accordion').open = null">Close</button>
  </body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant