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 (Unlicensed) 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 (Deactivated) 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 (Deactivated)

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 (Deactivated) 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 (Deactivated) to work with Raccoon Gang on finding solution for automatically stacking modals properly.

Tabs

Adam Stankiewicz (Deactivated)

• Should Tabs have cursor: pointer on hover?

  • Yes!

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