2022-02-09 Meeting notes

5-10 mins

New text field style variants (early look)

Jon

• All general thoughts and feedback welcome!

• Notes

  • Text field variant added to designs

    • “Inline edit”

      • Similar to current TextField, primarily without border on left/right, no x-padding.

      • Still has floating label variants and other parameters like leading/trailing.

  • Multiple choice radio and input combined

  • Gabe: Is this replacing current text field, or be a separate option?

    • Not a replacement.

      • “If you use it, use it sparingly”

        • @Jon F to outline when this should or should not be used, with examples.

          • “What are the right use cases?”

  • Adam: another potential use case (e.g., inline editable cells in DataTable)

• Feedback

  • Jeff: a11y – requirement of visible edges, might not be a concern (doesn’t raise flags); a bit concerned that it might be caught in an audit; it’s a bit wish-washy, might be required to be “ugly” by WAG standards.

    • “Edges of interactive things need to clearly depict what’s clickable and what isn’t”

      • Kind of a flaw with “gaping holes” in the a11y requirement.

    • “Didn’t see it there, didn’t know I could click”

    • Jon: Is placeholder enough to indicate it’s editable?

      • Also has cursor change, focus state

    • Jeff: possible idea – if it starts out salient, grew into something elegant when interacted with

  • Technical feedback: Likely a variant on existing form text field input component.

n/a

Error content block

Gabe

• @Gabriel Weinberg to discuss with @Bronwyn Hawkins (Deactivated) on original designs before discussing further.

  • Still some open questions:

    • How different is this from a standard alert?

    • Is this an appropriate way to style an error?

@Connor Haugh (Deactivated)

@Adam Stankiewicz

Challenge

• Nested / stacked modals (a modal that opens another modal).

  • need to override the modals' z-index CSS property for them to stack properly.

  • Use case:

    • Figma

  • Modal rendered first gets shown above

• Using TinyMCE in a Paragon modal

  • toolbar dropdowns have a z-index of ~1000 which is less than the z-index of 3050 uses for Paragon modals.

Open

Open

Open questions

• Are nested / stacked modals a design pattern we expect to use more moving forward?

  • Some evidence for maybe why we should avoid nested modals, if possible (e.g., harder to exit a flow)

  • Are there alternative design patterns to nested modals?

• Should Paragon natively support nested / stacked modals without requiring custom CSS overrides?

• Should we update ModalDialog’s z-index to use a pre-defined z-index value?

  • See existing values

Feedback/notes:

• There are some other use cases in flight as well.

• Gabe:

  • We probably need guidelines for designers for nested modals.

  • But it does seem like something we’ll want to support technically.

  • @Gabriel Weinberg to file a ticket for this

  • Maybe animations to provide more obvious transition?

• Jeff:

  • Remove behavior with dialogs that dismiss when clicking outside of them, and with appropriate opacity

  • NN may have some guidelines on this.

Connor not currently blocked, has workarounds. @Adam Stankiewicz to work with Raccoon Gang on finding solution for automatically stacking modals properly.

Tabs

@Adam Stankiewicz

• Should Tabs have cursor: pointer on hover?

  • Yes!

• Also, looks like there’s no focus stop on the Tabs docs site @Adam Stankiewicz to look into this as well.