Child of vaadin/vaadin-core#80

Needs vaadin/vaadin-element-skeleton#207

Needs vaadin/vaadin-details#14

I have an accordion with 1 panel element. Definition below:

<vaadin-form-item>
  <vaadin-accordion id="aclList" opened="null">
    <vaadin-accordion-panel theme="small">
      <div slot="summary">Access Control List (Advanced use only)</div>
      <div id="checkboxGroups">DATA HERE</div>
    </vaadin-accordion-panel>
  </vaadin-accordion>
</vaadin-form-item>

The panel displays, and if I tab to it, I can use any key to toggle the panel (onKeyDown() fires). However, clicking on the panel will not toggle the panel.

I have multiple Panels in an Accordion and I want to add a theme for all of its panels.
Instead of doing this one by one, it would be great if it could be done in a for-loop.
For that, access is needed to a list holding the current panels.
Here is a simple usage example:

CustomAccordion customAccordion = new CustomAccordion();
        customAccordion.add("Example Panel", new Span("Sample content."));
        customAccordion.add("Example Panel", new Span("Sample content."));
        customAccordion.add("Example Panel", new Span("Sample content."));
        customAccordion.add("Example Panel", new Span("Sample content."));

        for (AccordionPanel panel :
                pluginsUpdater.getPanels()) {
            panel.addThemeVariants(DetailsVariant.FILLED);
        }

Here is the CustomAccordion class, where I extend the Accordion and add the functionality I want:

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;

import java.util.ArrayList;
import java.util.List;

public class CustomAccordion extends Accordion {
    private final List<AccordionPanel> panels = new ArrayList<>();

    @Override
    public AccordionPanel add(AccordionPanel panel) {
        super.add(panel);
        panels.add(panel);
        return panel;
    }

    public List<AccordionPanel> getPanels() {
        return panels;
    }
}

It would be cool if this feature was implemented.

Was looking to begin using and testing the new LitElement version, but it needs to have the dist/ directory built and package.json changed

  "main": "dist/vaadin-accordion.js",
  "module": "dist/vaadin-accordion.js",

so it will be compiled to .js and work with existing bundling workflows.

Can be deleted.

As the accordion panel is not an internal component but something a developer uses directly, it should be in a separate file/explicit import

Current structure:

heading
  toggle
  summary
    [user content]
content
  [user content]

Proposed alternative:

summary
  toggle
  [user content]
content
  [user content]

I’m not sure how much benefit the extra wrapper around the user provided summary content has. I would always opt for having less stylable parts in the beginning, and only add more if something is not feasible to style without additional parts.

If the extra wrapper is necessary, I might name those summary and summary-content instead.

Update:

To be specific, there probably should still be a wrapper around the summary content – just not with a part attribute – so that it is always a block formatting context, even if the wrapping summary (current heading) part is a flex container.

Child of vaadin/vaadin-core#80

Static visual designs for the Details and Accordion components.

• Details
• Accordion

There are existing implementations in other UI libraries, called “Expansion Panel”.

• https://material-ui.com/demos/expansion-panels/
• https://material.angular.io/components/expansion/overview

There are no official specs for this component in Material Design, but I think we might want to follow the others quite closely.

Child of vaadin/vaadin-core#80

I am using vaadin lit components library in my project and not able to apply transition when panel opens / closes. I searched but did not get any example for that. Can you help with this?

We are going to postpone LitElement conversion until lit-html 2.0 is out and Vaadin Fusion is updated to depend on it.

This means the following:

1. The Polymer 3 version will be implemented on top of master branch which will be forwarded to 1.2 branch.
2. There will be 2.0.0-alpha5 based on the Polymer 3 and using JS + generated TS definitions.

Once we start updating Vaadin to use lit-html 2.0, the current implementation can be restored.

I am aware that v2 is pre-release, so this is just a question.

Will dependency against Polymer stay on a more mature v2?
For the time being : vaadin-accordion-base -> element-base/vaadin-element -> themable-element -> @polymer/polymer/lib/elements/dom-module.js.

That makes lit-based version of Vaadin-accordion (and potentially other lit-based Vaadin component) difficult to work with Polymer 2.0. as dom-module would already be registered against the app registry.

2b27dd3 seems to mistakenly provide an example like <vaadin-accordion theme="reverse">, which is contradicted by the next very sentence stating theme attribute has to be applied on panels.

Some use cases require more than a simple string for the summary.

For example, a badge indicating the number of important items within the detail element.

Child of vaadin/vaadin-core#80

Currently the accordion uses querySelectorAll which might break with nested accordions.
We should change this to use children and filter out accordion panels from there.

Instead of opened, we might want to consider using the same API as the standard <details> element, which uses open (e.g. <details open>).

On the other hand, using opened aligns with the rest of the Vaadin components, so it might be a stronger argument to keep it as is.

Child of vaadin/vaadin-core#80

Child of vaadin/vaadin-core#186

Depends on vaadin/vaadin-details#29