[Bug]: FluidDropdownSkeleton className is being added to wrong element

[ind1go]

Package

@carbon/react

Browser

Chrome

Package version

v1.46.1

React version

v18.2.0

Description

I'm using FluidDropdown in a FluidForm, and it's in a flex layout where I'd like it to grow equally with its peers to fill the available width in the row. This is working well, because I can apply styles via a className to the FluidDropdown and it gets put on the top-level DOM element of the dropdown i.e. the one that also has cds--dropdown__wrapper cds--list-box__wrapper cds--list-box__wrapper--fluid.

While the data for the dropdown is loading I'm using a FluidDropdownSkeleton but this is failing to grow equally with its peers because the styles are not applied to the right place, but to a child element.

For demonstration here's the moment where one dropdown has loaded but not the other. Note that big-input is applied at the top level to the top one (FluidDropdown), but applied at the second level of the bottom one (FluidDropdownSkeleton):

Reproduction/example

https://stackblitz.com/edit/github-tymoau?file=src%2FApp.jsx

Steps to reproduce

1. Use a FluidDropdownSkeleton.
2. Apply styles to the FluidDropdownSkeleton via className to influence its position in its parent, such as flex-grow or flex-basis.
3. Notice that the FluidDropdownSkeleton does not lay out as expected because the styles are not applied at the top level of the FluidDropdownSkeleton.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[kuri-sun]

Hi @ind1go!
Thanks for the report! I will take a look at this issue ASAP! 🎅 🎄