package org.patternfly.component.expandable;

import org.jboss.elemento.ElementContainerDelegate;

import org.jboss.elemento.HTMLContainerBuilder;

import org.patternfly.component.button.Button;

import elemental2.dom.Element;

// ------------------------------------------------------ factory

public static ExpandableSectionToggle expandableSectionToggle() {

return new ExpandableSectionToggle(div(), null, null);

}

public static ExpandableSectionToggle expandableSectionToggle(String moreText) {

return new ExpandableSectionToggle(div(), moreText, null);

}

public static ExpandableSectionToggle expandableSectionToggle(String moreText, String lessText) {

return new ExpandableSectionToggle(div(), moreText, lessText);

}

public static <E extends HTMLElement> ExpandableSectionToggle expandableSectionToggle(HTMLContainerBuilder<E> builder) {

return new ExpandableSectionToggle(builder, null, null);

}

public static <E extends HTMLElement> ExpandableSectionToggle expandableSectionToggle(HTMLContainerBuilder<E> builder,

String moreText) {

return new ExpandableSectionToggle(builder, moreText, null);

}

public static <E extends HTMLElement> ExpandableSectionToggle expandableSectionToggle(HTMLContainerBuilder<E> builder,

String moreText, String lessText) {

return new ExpandableSectionToggle(builder, moreText, lessText);

}

// ------------------------------------------------------ instance

private String moreText;

private String lessText;

<E extends HTMLElement> ExpandableSectionToggle(HTMLContainerBuilder<E> builder, String moreText, String lessText) {

super(SUB_COMPONENT_ID, SUB_COMPONENT_NAME, builder.css(component(expandableSection, toggle)).element());

this.moreText = moreText;

this.lessText = lessText;

this.iconContainer = span().css(component(expandableSection, toggle, icon))

.add(caretRight())

.element();

this.button = button()

.link()

.aria(expanded, false)

.iconAndText(iconContainer, moreText, start)

.attr(role, group)

.element());

this.titleId = Id.unique(ComponentType.Form.id, SUB_COMPONENT_ID, "title");

this.expandable = expandable;

storeSubComponent();

Attachable.register(this, this);

}

<version.gwt.safehtml>1.0.0-RC1</version.gwt.safehtml> <!-- Only used to link the API doc -->

<version.junit>6.1.1</version.junit>

<version.node>v26.3.1</version.node>

<version.patternfly>6.6.0</version.patternfly>

<!-- Plugin versions -->

<version.central.publishing.plugin>0.11.0</version.central.publishing.plugin>

component: expandable-section

date: 2026-07-07

pf_version: Release 6.6.0

pf_url: https://www.patternfly.org/components/expandable-section

pfj_url: http://localhost:1234/components/expandable-section

sections:

pf_count: 10

pfj_count: 8

matched: 7

missing_in_pfj:

- Uncontrolled

- Uncontrolled with dynamic toggle content (function)

- With heading semantics

extra_in_pfj:

- Detached (after)

| # | PF Section | PFJ Section | Group | Status |

|---|------------|-------------|-------|--------|

| 1 | Basic | Basic | Examples | matched |

| 2 | Uncontrolled | --- | Examples | missing_in_pfj |

| 3 | Uncontrolled with dynamic toggle text | Basic with dynamic toggle text | Examples | semantic_match |

| 4 | Uncontrolled with dynamic toggle content (function) | --- | Examples | missing_in_pfj |

| 5 | Detached | Detached (before) | Examples | semantic_match |

| 6 | --- | Detached (after) | Examples | extra_in_pfj |

| 7 | Disclosure variation | Disclosure variation | Examples | matched |

| 8 | Indented expandable content | Indented | Examples | semantic_match |

| 9 | With custom toggle content | With custom toggle content | Examples | matched |

| 10 | With heading semantics | --- | Examples | missing_in_pfj |

| 11 | Truncate expansion | Truncate | Examples | semantic_match |

**Status:** differences_found

- PFJ `<button>` has extra class `pf-v6-c-expandable-section__toggle` alongside `pf-v6-c-button`. PF only has `pf-v6-c-button` on the button; the `__toggle` class is on the wrapper `<div>`.

- Toggle icon: PF viewBox `0 0 20 20` (chevron-down), PFJ viewBox `0 0 32 32` (caret-right with CSS rotation)

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- Same as Basic: PF viewBox `0 0 20 20`, PFJ viewBox `0 0 32 32`.

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- Same as Basic: PF viewBox `0 0 20 20`, PFJ viewBox `0 0 32 32`.

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- Root modifiers `pf-m-display-lg pf-m-limit-width` match correctly.

- Same as Basic: PF viewBox `0 0 20 20`, PFJ viewBox `0 0 32 32`.

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- Root `pf-m-indented` modifier matches correctly.

- Same as Basic: PF viewBox `0 0 20 20`, PFJ viewBox `0 0 32 32`.

- PF demo shows expanded state (`pf-m-expanded`) with a checkbox to toggle `displaySize`. PFJ shows collapsed state without checkbox. This is a showcase layout difference only.

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- Toggle icon: PF viewBox `0 0 20 20`, PFJ viewBox `0 0 32 32`.

- Check-circle icon inside toggle content: Both use viewBox `0 0 32 32` — OK.

- Badge `pf-v6-c-badge pf-m-read` — matches correctly.

- PF wraps in `pf-v6-l-stack` with an accessibility note section. PFJ shows only the expandable section without the note. This is showcase layout only.

**Status:** differences_found

- Same as Basic: PFJ button has extra `pf-v6-c-expandable-section__toggle` class.

- PFJ root has extra `pf-m-expand-top` modifier not present in PF. PF achieves content-first order through DOM ordering alone.

- Button `pf-m-inline pf-m-link` modifiers match correctly.

1. **[P1] Add section: Uncontrolled** — PF has an "Uncontrolled" demo showing controlled state management. Add equivalent PFJ demo or document why it's not applicable.

2. **[P1] Add section: Uncontrolled with dynamic toggle content (function)** — PF shows a `toggleContent` function that receives expanded state and returns dynamic JSX. Evaluate whether PFJ needs an equivalent callback-based API for dynamic toggle content.

3. **[P1] Add section: With heading semantics** — PF uses `toggleWrapper` prop to wrap the toggle button in a heading element (h1-h6) for document structure. PFJ should support this for accessibility.

4. **[P2] Fix toggle button class** — PFJ button has extra `pf-v6-c-expandable-section__toggle` class. PF only applies this class to the wrapper `<div>`, not the `<button>` itself. Remove the extra class from the button element. Affects all sections.

5. **[P2] Fix truncate modifier** — PFJ truncate adds `pf-m-expand-top` on the root element. PF truncate does not use this modifier. Remove it if not required by CSS.

6. **[P4] Fix toggle icon** — PFJ uses caret-right (viewBox `0 0 32 32`) while PF uses chevron-down (viewBox `0 0 20 20`). This reflects a Red Hat vs FontAwesome icon set difference. Affects all sections with toggle icons.

{

"name": "patternfly-java-showcase",

"packageManager": "pnpm@11.10.0",

"private": true,

"scripts": {

"audit:fix": "node audit.mjs",

"code": "node code.mjs",

"http-server": "http-server target/showcase --ssl --cert cert.pem",

"images:clean": "rm -rf src/web/images/*",

"images:download": "node images.mjs",

"markdown": "node markdown.mjs",

"prod": "vite build",

"watch": "vite"

},

"dependencies": {

"@github/relative-time-element": "^5.2.0",

"@patternfly/patternfly": "^6.6.0"

"unified": "^11.0.5",

"vite": "^8.1.3",

"yaml": "^2.9.0"

}

}

- GHSA-vxr8-fq34-vvx9

- GHSA-x4vx-rjvf-j5p4

peerDependencyRules:

allowAny:

- '@patternfly/react-code-editor'

- '@patternfly/react-core'

- '@patternfly/react-icons'

- '@patternfly/react-table'

overrides:

'@babel/core@<=7.29.0': '>=7.29.1'

axios@>=1.0.0 <1.15.1: '>=1.15.1'