(blue star) Date

(blue star) Participants

List meeting participants using their @ mention names

(blue star) Goals

List goals for this meeting (e.g., Set design priorities for FY19)

(blue star) Discussion topics

Time

Item

Presenter

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



Connor Haugh

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:

    • 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 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?

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 (blue star) Adam Stankiewicz to look into this as well.

(blue star) Action items

Add action items to close the loop on open questions or discussion topics:

(blue star) Decisions

Type /decision to record the decisions you make in this meeting:

8c3e1257-0555-4d3b-8f19-4c54c17c4128DECIDEDaa7173db-851e-454b-a28a-16a481447533