feat(details): use details and summary html tag to enable in browser …

[daKmoR]

…searching

What I did

1. Use the html tags <details> & <summary>
2. Do not set "hidden" on the content as otherwise browser search will ignore it (potentially breaking change 😅)
3. Us a mutation observer that sync the open state from <details> to the web components (as browser search will only open the native details and not sl-details

There are currently failing tests because of the removal of hidden...

If the idea sounds good then I can clean that up.

Before

After

[vercel]

@daKmoR is attempting to deploy a commit to the Font Awesome Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Jul 31, 2023 3:01pm

[daKmoR]

@claviska that should be ready to me reviewed/merged 👍

[claviska]

This is awesome! Thanks for taking a stab at making this more semantic. The only thing I'm noticing is that we may have a problem with the initial open state:

Link: https://shoelace-git-fork-dakmor-feat-detailsusingd-b4862d-font-awesome.vercel.app/components/details/#grouping-details

We should probably fix that and add a test. If you don't want to write the test, we'll be happy to handle it on our side.

Other than that, this seems to work perfectly!

[daKmoR]

This is awesome! Thanks for taking a stab at making this more semantic. The only thing I'm noticing is that we may have a problem with the initial open state:

We should probably fix that and add a test. If you don't want to write the test, we'll be happy to handle it on our side.

strange - I explicitly fixed this... and it works fine in my chrome (v115), arc (v115) and safari (16.5.2)
what browser do you use?

I can add a test no worries 👍

PS: just noticed a small styling issue with safari - will fix

Other than that, this seems to work perfectly!

nice 💪

[daKmoR]

fixed the Safari styling 💪

and we already have a test for the opening... so I can't reproduce what you see 😅

  it('should be visible with the open attribute', async () => {
    const el = await fixture<SlDetails>(html`
      <sl-details open>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </sl-details>
    `);
    const body = el.shadowRoot!.querySelector<HTMLElement>('.details__body')!;

    expect(parseInt(getComputedStyle(body).height)).to.be.greaterThan(0);
  });

[claviska]

strange - I explicitly fixed this... and it works fine in my chrome (v115), arc (v115) and safari (16.5.2)
what browser do you use?

I noticed it in Chrome. Looking again, it behaves correctly now. (I may have been seeing a cached version.)

I can add a test no worries 👍

Thanks! 🙌

[claviska]

Thank you!