Skip to content

docs: move Details style variants docs, add Aura style props #4902

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

Merged
web-padawan merged 3 commits into from
Dec 4, 2025
Merged

docs: move Details style variants docs, add Aura style props #4902

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
e651c64
docs: move Details style variants docs, add Aura style props
web-padawan Dec 4, 2025
e7e3cc7
Merge branch 'main' into docs/details-styling
web-padawan Dec 4, 2025
f9cc75a
Merge branch 'main' into docs/details-styling
web-padawan Dec 4, 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: 0 additions & 95 deletions articles/components/details/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,101 +111,6 @@ endif::[]
--



== Theme Variants

Details has three theme variants: `filled`, `small`, and `reverse`. These variants can be combined with each other. For example, all three theme variants can be applied to the same Details component.


=== Filled

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

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

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

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


=== Small

Use the `small` theme variant for compact UIs.

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

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

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


=== Reverse

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

[.example]
--

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

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


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


=== Disabling

Details can be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded Details are automatically disabled as well.
Expand Down
153 changes: 153 additions & 0 deletions articles/components/details/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,159 @@
---
= Details Styling

== Style Variants

The following style variants are supported by Details:

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

|`filled`
|Makes the component’s boundaries visible
|Aura, Lumo

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

|`small`
|Used for compact UIs

Check failure on line 27 in articles/components/details/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/details/styling.adoc", "range": {"start": {"line": 27, "column": 19}}}, "severity": "ERROR"}
|Lumo

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

|===

=== Filled

The `filled` variant makes the component's boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.

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

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

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

--

=== Small

Use the `small` variant for compact UIs.

Check failure on line 67 in articles/components/details/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/details/styling.adoc", "range": {"start": {"line": 67, "column": 37}}}, "severity": "ERROR"}

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

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

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

--

=== Reverse

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

[.example]
--

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

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


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

--

include::../_styling-section-theming-props.adoc[tag=style-properties]

[cols="2,1"]
|===
| Property | Supported by

|`--vaadin-details-summary-background`
|Aura

|`--vaadin-details-summary-border-color`
|Aura

|`--vaadin-details-summary-border-radius`
|Aura

|`--vaadin-details-summary-border-width`
|Aura

|`--vaadin-details-summary-font-size`
|Aura

|`--vaadin-details-summary-font-weight`
|Aura

|`--vaadin-details-summary-gap`
|Aura

|`--vaadin-details-summary-height`
|Aura

|`--vaadin-details-summary-padding`
|Aura

|`--vaadin-details-summary-text-color`
|Aura

|===

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


Expand Down