vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
164 stars 42 forks source link

Accordion not expanding/collapsing correctly #206

Open ashleynuttall opened 1 year ago

ashleynuttall commented 1 year ago

Describe the bug

Accordion content panel does not correctly expand/collapse when nested content is expanded/collapsed. When nested content is expanded it gets partially hidden, constrained by the parent's current size.

It works correctly in Chrome and Firefox if motion is set to on. It doesn't work at all in Safari.

How to reproduce

Steps to reproduce the behavior:

  1. Go to 'https://stackblitz.com/edit/clarity-javascript-demo-jyubph?file=src/index.html'
  2. Click on 'Header 1'
  3. Click on 'Header 1.1'
  4. On Chrome, FF and Safari content is partially hidden; cf. 'Header 2' which works correctly on Chrome and Firefox.

Expected behavior

Accordion content should correctly resize to fit its current content.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: Vue 3.2

Device: