Add a CSS animation to expanding of details elements

Let's move this to the theme system queue if we still think it's worth pursuing. And remove some of the redundant issue tags.

per #88

This would have to be done in Claro. Would be great to hear from the Claro designers what are their thoughts about this.

As the detail accordion icon have a transition, and the detail doesn't have. It's not smooth experience. Detail opens up without and transition and the icon take some time (transition) to rotate.

I have added a patch with same transition timings as per icon. please review

Reviewing this ticket.

Adding SC 2.2.9

I have reviewed #106 but I don't see any transition happening while expanding of details element.

Adding the patch with the suggestions included at #55, #83, #84 and #85.

Recreated the patch after fixing the error in test `order/properties-order`.

#111 applied cleanly and changes look good.

I think using the CSS trick described here
https://www.youtube.com/watch?v=B_n4YONte5A

would achieve a smooth transition for any height (since the browser handles it).

For accessibility, the patch should include support for reduced-motion

@media (prefers-reduced-motion: no-preference) {
    .claro-details--accordion-item {
        transition: max-height 1s ease-in-out;
    }
}

The above suggested trick is not working with the current structure. To incorporate the change, we have to use generic accordion structure instead of since it has its own mechanism to show and hide the elements.

Re-rolled patch #113 for 11.x-dev

#113 has a trailing space issue but still applies to 11.x

I'd love to see animation here:) But I'm a bit concerned with the max-height approach: have this been tried with longer content that exceeds these max-height defined? Like with the Metatags modules, where you can have really long forms inside the item. Or even custom items on the sidebar that jump into 3 lines (and take more than 90px)?

Just tested with metatags and it does cut off. So agree with @ckrina setting max-height doesn't seem the correct approach.

Hamid.ali → made their first commit to this issue’s fork.

The patch in #113 doesn't seem to respect 🌱 [policy, no patch] Use "prefers-reduced-motion" media query to disable animations Active . Is that now handled automatically by core, or is a change needed to the patch to agree with policy?