fix(components): Adjust z-index of clickable areas in FormatFile

[taylorvnoj]

Motivations

FormatFile has an issue when both onClick and onDelete are present, where you cannot click the delete Icon immediately after clicking the FormatFile component itself. Instead, you'd have to remove focus from the FormatFile in order to click the delete Icon.

Changes

Added

• a new ExpandedwithDelete story; good for testing this functionality but also, we should have a story with the onDelete
• added a deleteButton class so that we can raise the z-index of that element

Fixed

Before

When an onClick & an onDelete are both present, you cannot click the delete button immediately after triggering the onClick (volume up):

https://github.com/user-attachments/assets/abaded2d-d0df-4f8d-9c89-8f1e940e6f9b

After

When onClick & onDelete are both present, you can trigger the onClick and then trigger the onDelete without removing focus/tabbing (volume up):

https://github.com/user-attachments/assets/7fbf334e-fe35-42e1-86a5-60eb8e3f1c2d

Testing

• test this in the new ExpandedwithDelete story
• pre-release sent in slack msg

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	f82c624
Status:	✅  Deploy successful!
Preview URL:	https://f31efc3f.atlantis.pages.dev
Branch Preview URL:	https://taylor-formatfile-click-bug.atlantis.pages.dev

View logs

[github-actions[bot]]

Published Pre-release for f82c6242be5c63c1f5ae7ded514c1df109fa2d58 with versions:

  - @jobber/components@5.21.3-TAYLORfor.1+f82c6242

To install the new version(s) for Web run:

npm install @jobber/components@5.21.3-TAYLORfor.1+f82c6242