spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard
verified publisher icon adobe

[Dialog] Content area can clip focus rings.

Open Westbrook opened this issue 4 years ago • 6 comments

Description

When the first item in the content area of a dialog can have a focus ring, it will get clipped by the current CSS application.

Steps to reproduce

  1. Go to https://opensource.adobe.com/spectrum-css/dialog.html#dialog-fullscreen
  2. Click on "Open Fullscreen Dialog"
  3. Place a focusable pattern, e.g. a Text Field at the top of the content area therein
  4. Focus the pattern with the keyboard
  5. Observer the clipped focus ring

Expected behavior

The ring should not be clipped.

Screenshots

image

Environment

  • Spectrum CSS version: Current
  • Browser(s) and OS(s): MacOS Chrome Current

Additional context

You'll also note that when scrollbars are visible, they will display in a pretty floaty way here. I think that both issues can be mitigated by taking the margin off of the bottom of the Divider or Headline proceeding the content area and converting that to padding within the top of the content area.

synced to jira: https://jira.corp.adobe.com/browse/CSS-79

Westbrook avatar Dec 08 '21 16:12 Westbrook

Could change the padding

Deanna-w1 avatar Mar 28 '22 17:03 Deanna-w1

I discussed this with design and they would like to talk about it more in design workshop.

The current proposal I'm giving them is to use the divider margin as the content padding.

Current: image

Proposal: image

GarthDB avatar Apr 08 '22 21:04 GarthDB

This applies in some cases to the left edge of the content area as well: image

CC: @joekukish

Westbrook avatar Apr 08 '22 21:04 Westbrook

duplicate of #539

GarthDB avatar May 09 '22 18:05 GarthDB

I've just encountered this on the Express theme with buttons and checkboxes.

joekukish avatar Aug 05 '22 20:08 joekukish

Feel free to watch this Jira ticket for updates - CSS-79

Deanna-w1 avatar Aug 11 '22 20:08 Deanna-w1