2022-09-14 Meeting notes

 Date

Sep 14, 2022

 Participants

  • @Kira Miller

  • @Jeff Witt (Deactivated)

  • @Max Frank

  • @Adam Stankiewicz

  • @Vladyslav Zadorozhnii

  • @Alena Egorova

  • @Bronwyn Hawkins

  • @Jon F

  • @Kavya Basu

  • @Ben Schenerman

  • @Ben Warzeski (Deactivated)

  • @Varsha Menon

  • @Zainab Amir

  • Drew Botka

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

5 min

Dropzone file preview

Kira

  • Improvements to Dropzone file preview

  • Notes:

    • first implementation in an MFE, working well

    • current upload preview has behavior that replaces component

      • this was intentional as preview was intended to be a case-by-case basis.

    • Update proposal is to update dropzone to show a thumbnail after upload inside the dropzone container

    • Jeff: Suggest parameter for size of preview

    • Jon: Should preview have a delete?

    • Adam: Suggest an optional variant / sub-component that would have file preview.

    • Action item: we’d like more exploration around defining common design patterns.

5 min

Frontend Working Group

@Ben Warzeski (Deactivated)

  • Continuing discussion on revitalizing the frontend working group (FedX)

  • Need to set up a huddle of interested parties

    • generate quick meeting definition doc

    • Assign someone to run the meeting

    • Pick a time and schedule calendar meetings

10 minutes

Updates to carousel component

Alena and @Adam Stankiewicz

Discussion on creating a flexible, content-agnostic component for carousels where users may cycle through a row of elements that overflows its container.

  • Notes:

    • Use cases for current carousels are a bit different in their behavior

      • Scroll behavior:

        • Offset by pixel

        • Offset by 1 item.

        • Scroll to next “set”

      • Auto scroll has a11y challenges

      • Variants: * Buttons vs scroll * button size * Scroll increment type * Custom button elements * Icon selection

10 minutes

Data table component - making items selectable in a card view

Alena and @Adam Stankiewicz

Can we add a “select cards” in card view similar to row view

Notes:

  • SelectableBox is a similar pattern but different because of the card component inside the table

  • Kira: Do we want to allow buttons in selectable box or component? A11y concern about selectable box with actions inside of it

    • Should there be optional button CTAs in a SelectableBox?

  • Jeff: Can selectable things be peers of card instead of children?

  • It is multi selectable

  • Is the click target only on the checkbox?

    • Might depend on use case.

  • Adam: We should be able to already support interactive elements (buttons) in Card today when the entire card is interactive (clickable/focusable).

5 minutes

Tooltip variants

@Max Frank

Discuss potential use cases for adding variants to the Tooltip component

  • Maybe check out Toast?

5 minutes

Dropdown dark Variant

@Ben Warzeski (Deactivated)

https://github.com/openedx/paragon/pull/1613

  • Notes:

    • dark variant should probably be its own section under "advanced usage"

    • Check out “props switcher” on form conrol

5 minutes

Animation standardization

@Vladyslav Zadorozhnii

Set of animations across the Figma and Paragon repository will be helpful to increase consistency

Notes:

  • We currently do not have an animation section like other design systems do

  • Defining foundational design tokens for animation in the library

  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

    • Jeff: Might be an opportunity to honor this

  • As we update components over time, they should have an animation section of the spec, or at least consider if animation should be used

  • Some components have animation today, and could be updated to consider how to consume new animation tokens.

  • @Vladyslav Zadorozhnii create example and bring back to paragon working group for eng and design feedback

 Action items

 Decisions

  1. Defer adding dropzone preview, suggest fleshing out design and use cases further to build out needs and specs