search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
120 stars 87 forks source link

Dialog close button focus ring visibility and overlap with content #2970

Open origami-z opened 7 months ago

origami-z commented 7 months ago

Package name(s)

Lab (@salt-ds/lab)

Package version(s)

1.0.0-alpha.29

Description

  1. Dialog close button focus ring is not fully visible (top right) see screenshot
  2. Close button is overlapping with content (1-2px). This matters when content is filled with an image.

Dialog close button overlaps with content

Steps to reproduce

https://stackblitz.com/edit/salt-template-gu1jry?file=App.tsx

Expected behavior

No response

Operating system

Browser

Are you a JPMorgan Chase & Co. employee?

hyan83 commented 7 months ago

https://stackblitz.com/edit/salt-template-f83pqv?file=App.tsx

Adding margin: '5px' should fix this issue.

origami-z commented 3 months ago

Extend dates to Xion, 1 sprint behind

mark-tate commented 2 months ago

Goal: XS(1) Similar to Overlay issue

tomhazledine commented 2 months ago

Change done. Waiting for #3532 to be merged before raising PR

tomhazledine commented 1 month ago

Still blocked waiting for #3532 - fix for this PR needs to be applied to Overlay too.

tomhazledine commented 1 month ago

Change of approach following discussion with design team. New approach will address this and #3532 together.

New issue: #3839