Skip to content

refactor: update Accordion article to Aura theme #4845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sissbruecker wants to merge 3 commits into from
Closed

refactor: update Accordion article to Aura theme #4845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f826c9
refactor accordion summary example
sissbruecker Nov 27, 2025
440c308
refactor accordion content example
sissbruecker Nov 27, 2025
d90bb9a
add style variants section
sissbruecker Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 1 addition & 94 deletions articles/components/accordion/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,99 +109,6 @@ endif::[]
--


== Theme Variants

Accordion has three theme variants: `filled`, `small`, and `reverse`. Set the theme attribute separately for each panel, not on Accordion itself. Theme names can be combined with each other. For example, all three themes variants can be applied to a panel.

// TODO example would be nice to have

=== Filled Panels

The `filled` theme variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/accordion/accordion-filled-panels.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/accordion/AccordionFilledPanels.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/accordion/react/accordion-filled-panels.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

=== Small Panels

Use the `small` theme variant for compact UIs.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/accordion/accordion-small-panels.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/accordion/AccordionSmallPanels.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/accordion/react/accordion-small-panels.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

=== Reverse Panels

The `reverse` theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/accordion/accordion-reverse-panels.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/accordion/AccordionReversePanels.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/accordion/react/accordion-reverse-panels.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

== Disabled Panels

Accordion panels can be disabled to prevent them from being expanded or collapsed. Details can also be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded panel are automatically disabled as well.
Expand Down Expand Up @@ -241,7 +148,7 @@ Details can be used instead of Accordion when there is a need to see content fro

Accordions can be used to break a complex form into smaller step-by-step sections.

The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. Use the <<filled-panels,filled variant>> and apply [since:com.vaadin:[email protected]]##<<../tooltip#,tooltips>>## on the panels to make this more discoverable.
The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. Use the <<styling#filled-panels,filled variant>> and apply [since:com.vaadin:[email protected]]##<<../tooltip#,tooltips>>## on the panels to make this more discoverable.
Copy link
Member

@web-padawan web-padawan Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could probably remove "since" tag from here as it was only relevant for V23 docs.

Copy link
Member

@jouni jouni Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should remove all [since] annotations from v25 docs (and any [since v23] annotations from v24 docs).



== Related Components
Expand Down
86 changes: 86 additions & 0 deletions articles/components/accordion/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,92 @@
---
= Accordion Styling

== Style Variants
Copy link
Contributor Author

@sissbruecker sissbruecker Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There probably should be a paragraph about how to apply style variants with a code snippet, especially since the terminology is now different from the theme attribute that you need to use. I think we can separately add a common section for this in a shared asciidoc and then include it in the styling pages that have a style variants section.


Accordion supports the following style variants. Variants must be applied to individual panels, not to the Accordion itself.

[cols="1,3,1"]
|===
| Variant | Description | Supported by

|`filled`
|The filled theme variant makes the panel’s boundaries visible
Copy link
Member

@web-padawan web-padawan Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's probably align wording here with other variants below:

Suggested change
|The filled theme variant makes the panel’s boundaries visible
|Makes the panel’s boundaries visible

|Aura, Lumo

|`no-padding`
|Removes the padding from the panel content area
|Aura

|`small`
|Used for compact UIs

Check failure on line 27 in articles/components/accordion/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'UIs'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'UIs'?", "location": {"path": "articles/components/accordion/styling.adoc", "range": {"start": {"line": 27, "column": 19}}}, "severity": "ERROR"}
| Lumo

|`reverse`
|Places the toggle icon after the summary contents
|Aura, Lumo

|===


=== Filled Panels

The `filled` theme variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.
Copy link
Member

@web-padawan web-padawan Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use "style variant" consistently:

Suggested change
The `filled` theme variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.
The `filled` style variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.


[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/accordion/accordion-filled-panels.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/accordion/AccordionFilledPanels.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/accordion/react/accordion-filled-panels.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

=== Reverse Panels

The `reverse` theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.
Copy link
Member

@web-padawan web-padawan Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, let's use "style variant" consistently:

Suggested change
The `reverse` theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.
The `reverse` style variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.


[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/accordion/accordion-reverse-panels.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/accordion/AccordionReversePanels.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/accordion/react/accordion-reverse-panels.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--


include::../_styling-section-intros.adoc[tag=selectors]

Root element:: `vaadin-accordion`
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/accordion/accordion-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import { applyTheme } from 'Frontend/demo/theme';
export class Example extends LitElement {
static override styles = css`
a {
text-decoration: none;
color: var(--lumo-primary-text-color);
color: var(--aura-blue-text);
}
`;

Expand Down
50 changes: 0 additions & 50 deletions frontend/demo/component/accordion/accordion-small-panels.ts
View file
Open in desktop

This file was deleted.

Loading
Loading