2020-12-17 Meeting notes

Date

Dec 17, 2020

Participants

  • @Adam Butterworth (Deactivated)@David Joy (Deactivated) @Lael Birch (Deactivated) @Ange Romanska (Deactivated) @Alasdair Swan (Deactivated) @Adam Stankiewicz @Ben Warzeski (Deactivated) @Bronwyn Hawkins (Deactivated) @Carla Duarte (Deactivated) @Eugene Kang @Gabriel Weinberg @Jeff Witt (Deactivated) @Jon F @Olivia Ruiz-Knott (Deactivated) @Sharon Wang (Deactivated) @Stacey Messier (Deactivated) @TJ Tracy (Deactivated)

Goals

  • Review Banners, Inform and socialize

  • Review Bottom sheet → acceptance via slack

  • Review Fleximodal → acceptance via slack

  • Alignment on iconography

Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

2

Iconography (PSA)

@Adam Butterworth (Deactivated)

10

Bottom sheet

@Ange Romanska (Deactivated)

New pattern proposal for the upcoming free course content preview feature

  • For content previews

  • allows full takeover / blocking as needed

  • Let’s keep this distinct from navigational drawers left or right since those are unlikely to share blocking type use cases.

10

Fleximodal

@Ange Romanska (Deactivated)

New pattern proposal for a full page modal take over to support more complex setup and configuration actions

  • More real estate, full page view

  • Full page, accepts children, has action button lower right, close x upper right

  • Variant of current modal?

  • JW: Fixed headers & footers eat a chunk of the scarce viewport, how much use is there in the available space?

    • consider making footer not fixed on mobile

  • AB: We already have variants on the modal, let’s add one more which is full-screen. Wizard is a pattern we have.

  • BW: We need to look at if there’s visual difference we want to have as well, can we do that without functional changes to our existing modal?

  • @David Joy (Deactivated) will be actively involved


10


Banners

@Eugene Kang

  • BannersUNDEFINED

  • BW: These are for whole page context, in ORA sometimes we use something called a “message” that look similar. Its like one of these but related to an small object

  • SM: Constrain to just one banner is desirable

  • JW: Prefer to have things up top in the DOM (can move to bottom with css for cookie banner)

  • Naming

    • PromoBanner

    • Sitewide Banner

  • LB: How is this different from our Alerts, today?

    • BW: maybe these share a common ancestor

  • LB: Placement is separate from the component

  • BW: If it’s a modification of alert, the trick is there have to be a number of color options, and they don’t align perfectly with info/warning/error. If a bold/emphatic version of what we have works, great, but that might not be the case

  • GB: This is more global than alerts, would it be terrible if it adopted alert styling? Use case and context is somewhat different.

  • AB: Takeaways

    • Let’s outline how this is distinct or the same as other alerts

    • BW: It should handle colors for us so I don’t have to think about that as a developer

    • BW: Maybe add a “marketing” option for colors

  • @Eugene Kang will start a discussion thread in slack

@Adam Butterworth (Deactivated) Review cookie banner requirements. How can we minimize?

5

Heading links

@Adam Stankiewicz @Adam Butterworth (Deactivated)

Should we enforce links inside heading elements to use their parent styling instead of info-500 (blue)?

5

Buttons

@Adam Butterworth (Deactivated)

Considering adding iconBefore and iconAfter props on buttons. Thoughts?

<Button iconBefore={someSVGUrl}>Label</Button>

Action items

@Adam Butterworth (Deactivated) will discuss cookie banner with Legal

Decisions