feat(popover): add popover component

[stevenh77]

No description provided.

[gustavohenke]

See #1120

[stevenh77]

As requested popover created based on mdTooltip

[gustavohenke]

Sorry, my bad! 👎 for me
I haven't noted that you were the creator of that issue and that a PR was requested!

[ThomasBurleson]

@stevenh77 - This is looking good.

I do not see your demo using the md-direction nor rich content. I think we need to clearly delineate the differences between and popup and a tooltip. Can you add some rich content and direction indicators to the demo popup instance body?

[stevenh77]

@ThomasBurleson I've added md-placement along with some rich content (an image) and updated the demo, what do you think?

[gkalpak]

$mdUtil has a debounce method. Maybe it could be used instead of custom debouncing.

[stevenh77]

As requested the popover has been created in the style of tooltip. Perhaps the $mdUtil could be refactored across all components?

[stevenh77]

Ok, ready for you guys to take a look, thanks @gkalpak @ThomasBurleson

[ThomasBurleson]

@stevenh77 - I will look at this later today.

We are preparing to release 0.7.0-rc2 today. Your changes will not be in that release. But after reviews, it would be nice to see your contribution(s) in 0.7.1.

[ThomasBurleson]

@ajoslin - later, let's you and I review this new component and discuss impacts.

[marcysutton]

It's a bit hard to fully evaluate without forking and building your branch, but the popover content needs to be semantically associated with its trigger button. The bootstrap version uses aria-describedby="popoverId" on the button, with id="popoverId" on the popover div. Can you look into adding this?

[stevenh77]

@marcysutton It's based on tooltip but sure I can add that

[stevenh77]

@marcysutton ah just checked and it's already there.

You can run my docs here: http://stevenhollidge.com/docs/#/demo/material.components.popover

Or view the aria-described by here:
http://stevenhollidge.com/docs/popover-aria.png

[marcysutton]

A couple things:

• popover is not a valid ARIA role. Use tooltip instead (docs)
• The popover needs a text alternative when it has image content in it–either offscreen text, an aria-label attribute, or accessible text inside of SVG. To enforce this, we use the internal $mdAria.expect() method (which needs a refactor, but it's still good to include).

[stevenh77]

@marcysutton I was asked by @ThomasBurleson to differentiate the popover from a tooltip but I'm happy to set it's role to tooltip if that's the spec.

The popover is just a container for whatever content the developer wants to display, in my demo example I happened to display a SVG. I saw the contents aria attributes as being the responsibility of the developer who sets the content, is that how you see it?

[marcysutton]

My comment about ARIA roles was because popover is invalid for the role attribute (tooltip is valid, explained in the doc I attached). Roles affect users of assistive technologies, and all they do is say "what does this thing do?" Not how it looks, or even how it works necessarily. So yes, the components should be differentiated, but you were using role with a value that doesn't exist in accessibility APIs, which is essentially the same as having no role at all. Here is some information about using ARIA roles and other attributes: http://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/

I do see setting the contents as a responsibility of the developer. But in Angular Material, we warn them when they have forgotten text content....otherwise they'd never know it was an issue, and we'd be contributing more accessibility issues on the Web. By using the mdAria utility on the popover component itself, you can warn developers they are missing content to make their apps accessible.

[stevenh77]

Ok cool, is there an example of using the mdAria utility? Sounds like it needs to be applied to the tooltip as well.

[ThomasBurleson]

@stevenh77 - this is looking really good. I only have two (2) summary points:

1. The Angular Material team must get approval from the Material Design UX team to add the Popover component formally to the library component set. This component, IMHO, would be a wonderful addition.
2. The current samples still look to much like a tooltip. @see mdPopover: use mdPanel to create popover example #1217 for details regarding rich content; to be accepted as a new component, we must clearly distinguish a Popover from a Tooltip.

[stevenh77]

@ThomasBurleson to save me recreating the code do you have the HTML you used for your mockup or was it generated using graphics software?

[ThomasBurleson]

@stevenh77 - The image above was a snapshot from FrontEnd Masters; but it nicely highlights Popovers with rich content:

<div class="master-tooltip master-tooltip-top">
 <div class="wrap">
  <p class="links">
    <a href="https://github.com/douglascrockford"                 class="github">github</a>
    <a href="https://en.wikipedia.org/wiki/Douglas_Crockford"     class="wikipedia">wikipedia</a>
    <a href="https://plus.google.com/118095276221607585885/posts" class="blog">blog</a></p>
  <p class="large-name">Douglas Crockford</p>
  <p class="bio">Douglas is the author of <em>Javascript: the Good Parts</em> and Senior Javascript Architect at PayPal.</p>
 </div>
</div>

[stevenh77]

@ThomasBurleson demo updated with rich content:

[ThomasBurleson]

@stevenh77 - really nice work.

Let's see if we can get this approved for inclusion in a 0.8 release.

[stevenh77]

Let's hope they give it the nod after all this ;)

[marcysutton]

This is looking great! We should think through accessibility a bit more, though, because I imagine people will continue using it regardless of whether it gets accepted by the UX team. :)

When an element has links and content inside of it, keyboard and screen reader users have to know they're there and be able to access them. This is where a tooltip and popover start to differ–the popover may have too much content to put in an aria-label, and it could have interactive controls in it (links, buttons, switches, etc.). This is a similar situation to mdDialog, which already has focus management built-in: when a user triggers a dialog or popover, send focus to it (caught with tabIndex="-1" on the element), so the user has easy access to the links or whatever is in it (focus could also be sent to the first link). If the user hits the escape key, send focus back to the triggering element. The UX team may come back and say there has to be a close button. But wiring the escape key and handling focus should be good enough to start, and will make this component a lot better for people to use.

[stevenh77]

Hi @marcysutton escape key to close popover has now been added. The dialog component when opened sets it's close button to focus. so if the UX team do ask for a close button to the added to the popover, the focus will also have to be updated accordingly.

[EladBezalel]

👍 Really good job man!

How can i use it? why it's not a part of material?

[marcysutton]

For a popover to blend in with Material Design, it needs to do a few things:

• Animate out from a specific point (from a point of origin)
• Follow the same design language for typography and style
• Cast a shadow and have a "material" feel
• Not look like a tooltip

We talked about adding a service for point of origin animations, but there wasn't enough demand. You can read about it in the spec: http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-material-response

Were a popover contributed that aligned more with Material Design, it would be a better candidate.

[leefernandes]

Just update mdDialog to provide optional placement of the dialog. There is plenty of guidance in the material design guidelines to support this functionality.

Demo:
https://www.dropbox.com/s/n9gcq9g2fudjnzk/angular-material-dialog-positioning.mp4?dl=0

Source:
https://github.com/ItsLeeOwen/material/tree/dialog-position

[ThomasBurleson]

@itsleeowen, please note that the Dialog zoom animation has changed significantly in master. Would you mind integrating your enhancements to work with the code in the latest master code base and then submitting a PR?

@stevenh77 - I worry that I never thanked you for your amazing work. I would still like to campaign to get your features into AM...

[EladBezalel]

Any news?
this is a great feature i'd really like to have

[csvan]

Would anyone like to collaborate to get this finished and pulled? Ping me.

[volmerf]

Any update on this? Would be a nice addition to Angular Material.

[EladBezalel]

@volmerf this won't be supported and can be implemented using our Panel api