Only render <button> when trigger is present

[Hugos68]

Linked Issue

Closes #2944

Description

Adds an if statement around the button to only render it if the snippet is actually passed, this was previously posing an a11y hazard.

Changsets

Instructions: Changesets automate our changelog. If you modify files in /packages, run pnpm changeset in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be minor while chores and bugfixes should be patch. Please prefix the changeset message with feat:, bugfix: or chore:.

Checklist

Please read and apply all contribution requirements.

• This PR targets the dev branch (NEVER master)
• Documentation reflects all relevant changes
• Branch is prefixed with: docs/, feat/, chore/, bugfix/
• Ensure Svelte and Typescript linting is current - run pnpm ci:check
• Ensure Prettier linting is current - run pnpm format
• All test cases are passing - run pnpm test
• Includes a changeset (if relevant; see above)

[changeset-bot]

🦋 Changeset detected

Latest commit: e87ed81

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Name	Status	Preview	Updated (UTC)
skeleton-docs	❌ Failed (Inspect)		Nov 11, 2024 9:45pm

[vercel]

@Hugos68 is attempting to deploy a commit to the Skeleton Labs Team on Vercel.

A member of the Team first needs to authorize it.

[Hugos68]

@endigo9740 What is the span doing? I'm in favor of removing that, unless you added that for a specific reason.

[endigo9740]

@endigo9740 What is the span doing? I'm in favor of removing that, unless you added that for a specific reason.

This prevents the trigger/popup from being affected by the surrounding flow of styles. So if you do something like this:

<div class="space-y-4">
    (element)
    <Modal>
    (element)
<div>

We don't want the trigger/modal getting affected by the extra spacing between elements. The span isolates that so it's only affected by the positioning of the Modal logic itself (via Floating UI or w/e).

It can be a span, div, etc. But span are inline block by default in case folks embed this within paragraph block:

<p class="space-y-4">This is a <Modal> example.<p>

If this wasn't a span the text lines would wrap like this:

This is a
(modal trigger)
example.