Skip to content

[Bug]: TreeItemPersonaLayout doesn't reflect appearance property from Tree #34914

@mindlessroman

Description

@mindlessroman

Component

Tree

Package version

^9.67.0

React version

^18.2.0

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 AMD EPYC 7763 64-Core Processor
    Memory: 18.36 GB / 31.95 GB
  Browsers:
    Edge: Chromium (138.0.3351.95)
  npmPackages:
    @fluentui/react: ^8.123.1 => 8.123.1
    @fluentui/react-components: ^9.67.0 => 9.67.0
    @fluentui/react-icons: ^2.0.306 => 2.0.306
    @types/react: ^18.2.66 => 18.3.23
    @types/react-dom: ^18.2.22 => 18.3.7
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

The TreeItemLayout will render the appearance declared in the tree (subtle, subtle-alpha, transparent), but regardless of the appearance property set in the Tree, TreeItemPersonaLayout will always do what appears to be subtle.

Expected Behavior

I'd expect both types of layout to behave the same, because no distinction is made in the Appearance Section of the documentation. I don't know if this has A11y implications.

Reproduction

https://stackblitz.com/edit/6qkuwjfy?file=src%2Fexample.tsx

Steps to reproduce

  1. Go to the StackBlitz - I chose the dark theme for clarity, but it happens in both themes.
  2. Hover over each of the items in the trees.
  3. See that TreeItemLayout behaves in accordance with the appearance property set in the Tree.
  4. See that TreeItemPersonaLayout does not recognize the appearance property set in the Tree.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions