2020-12-17 Meeting notes

2

Iconography (PSA)

@Adam Butterworth (Deactivated)

• https://openedx.atlassian.net/wiki/spaces/BPL/pages/2152661212 Please review async

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

• https://openedx.atlassian.net/wiki/pages/createpage.action?spaceKey=BPL&title=Banners&linkCreation=true&fromPageId=2157937309

• 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
  
  

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?