Improve and add styles to the demo page.

[jgerigmeyer]

Figma File https://popover-polyfill.netlify.app/

• [x] Demo page design @SondraE
• [x] Review @dvdherron
• [x] Review @jgerigmeyer
• [x] Revise @SondraE
• [x] Re-review @dvdherron
• [x] Review feedback @SondraE
• [x] Update text @dvdherron
• [x] Add styles @dvdherron
• [x] Review styles @stacyk
• [x] Review styles @SondraE
• [x] Re-review styles @SondraE
• [x] Review descriptions/code @jgerigmeyer
• [ ] Re-review @mirisuzanne

[SondraE]

@jgerigmeyer I believe the Anchor Positioning demo was mentioned as a good example of what this popover demo should look like. Am I remember that correctly? Are there other good examples you'd recommend looking at too?

I believe there was also discussion about documentation being added. I see a link to a Popover API explainer with a note that it's a bit out-of-date and installation documentation on GH. It's not clear to me what documentation should be included. Can you direct me?

Would it make sense to include any or all of this description and these links on OddSite at the top of the demo page? Are there additional or alternative descriptions or links you'd recommend?

[jgerigmeyer]

@jgerigmeyer I believe the Anchor Positioning demo was mentioned as a good example of what this popover demo should look like. Am I remember that correctly? Are there other good examples you'd recommend looking at too?

@SondraE Yes. The CSS Layers Polyfill Demo is also a good example.

I believe there was also discussion about documentation being added. I see a link to a Popover API explainer with a note that it's a bit out-of-date and installation documentation on GH. It's not clear to me what documentation should be included. Can you direct me?

I'm not sure we need full documentation, but we should offer a brief explanation of what popover does, what this polyfill does, and then link to better docs. See:

• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
• https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute

Would it make sense to include any or all of this description and these links on OddSite at the top of the demo page? Are there additional or alternative descriptions or links you'd recommend?

Sure, I think that's a reasonable summary, but I would defer to @mirisuzanne or @stacyk on that.

[mirisuzanne]

Yeah, that summary makes sense to me - seems like a good start.

[dvdherron]

@SondraE Here's a quick rundown of what (I think) each example is showing on the demo page to give you a sense of what we might want to show for each example. Let me know if any of this doesn't make sense or if you have any questions. (And @jgerigmeyer please chime in if I've gotten any of the below wrong.)

• The buttons that have the word "shadowed" in them show examples of how elements in the shadow root can be popovers. One the buttons opens a popover nested inside of another element.

• Popover 1 is a popover with only a true/false popover attribute: <div id="popover1" popover>Popover 1</div>

• Popover two shows a popover with an empty attribute: <div id="popover2" popover="">Popover 2</div>

• Popover 3 shows a popover with a link that has an autofocus attribute applied. (When the popover is opened, focus goes directly to the link)

  <div id="popover3" popover="auto">
   Popover 3. This popover has an autofocus link:
    <a href="#" autofocus>I'm a link!</a>
  </div>`

• Popover 4 (the button to open it is not shown) is an invalid popover. The popover attribute only accepts the values "auto" or "manual" for now. So the popover isn't shown. <div id="popover4" popover="hint">Invalid Popover ("hint")</div>

• Popover 5 shows the behavior of a popover with the attribute "manual". This popover must be manually dismissed. Hence the "click to hide Popover 5" button.

  <div id="popover5" popover="manual">
  Popover 5. This popover has an autofocus link:
  <a href="#" autofocus>I'm a link!</a>
  </div>

• Popover 6 is another invalid popover with the attribute "invalid" <div id="popover6" popover="invalid">Invalid Popover ("invalid")</div>

• I think Popover 7 isn't shown just because it doesn't have have a button to toggle it open?

• ditto for Popover 8

• Popovers 9 and 10 show how you can toggle a popover opening and closing with one button.

• The "Click to toggle nothing" but doesn't have a popover linked to it, so nothing pops up.

• The Menu button opens a popup with a list inside

[jgerigmeyer]

That sounds right.

• The Menu button opens a popup with a list inside

Clicking "Items" in the menu opens another nested popover.

[SondraE]

@dvdherron Here's a first draft.

• Did I get the right content in the right places?
• I tried 2 layouts, sticky content at the top or sticky content on the left side. Do you have preference? Is one quicker to build?

This is the design with all the content centered and a sticky header. Move to the right in Figma to see popover samples and a left/right column design. Figma File 1

[dvdherron]

@dvdherron Here's a first draft.

This looks great so far, @SondraE! Thanks for putting this together.

* Did I get the right content in the right places?

I think the titles of the popovers, the descriptions, and buttons all work where they are.

Is the text for the popovers currently just placeholder text? Like for the "Toggle Shadowed Popover" button should the popover say "Shadowed Popover"?

* I tried 2 layouts, sticky content at the top or sticky content on the left side. Do you have preference? Is one quicker to build?

I think the first layout with the sticky header at the top seems simplest. It's my preference but I'm open to other suggestions.

As far as what the popovers look like I'm not completely clear on what the pink background part is in the first couple of designs. Could we make all popovers the size of the smaller pink versions in the designs towards the end?

And as far as where the popups appear, what do you think of having them pop up in the same general place for each example? For example, they could all appear either directly above or below their respective buttons?

For the popover buttons that are currently missing we should see if it make sense to add them in or, if not, maybe rename those buttons/popovers without numbers?

This is the design with all the content centered and a sticky header. Move to the right in Figma to see popover samples and a left/right column design. Figma File 1

[jgerigmeyer]

Looks good! We can iterate on exact text after we get something in-browser to play with.

I think the first layout with the sticky header at the top seems simplest. It's my preference but I'm open to other suggestions.

I agree 👍

And as far as where the popups appear, what do you think of having them pop up in the same general place for each example? For example, they could all appear either directly above or below their respective buttons?

I think this is a good idea 👍

For the popover buttons that are currently missing we should see if it make sense to add them in or, if not, maybe rename those buttons/popovers without numbers?

I think we want to ideally remove all the numbers, and have each button use a descriptive name instead.

[SondraE]

@dvdherron I believe I addressed all the feedback. I left some questions and thoughts for you in the second of the two linked files below.

Figma File - not displaying popovers Figma File - displaying all popovers

[dvdherron]

@SondraE I think I responded to all over your questions in the Figma file. I can also update some of the text after I get write access to the file too.

[SondraE]

@dvdherron I'm not sure why you didn't already have write access, but I think you do now. All your comments seem right to me, and I would be happy for you to make the changes you propose, either in the mockup or when you implement the design.