feat(): dropdown-toggle rewrite

[shaungrady]

@bekos @pkozlowski-opensource @ajoslin, here's what I'm thinking about for a refactored dropdownToggle directive. First, I'd propose renaming it to simply dropdown. The markup would be very simple:

<button class="dropdown" label="Dropdown Button <span class='caret'></span>">
  <ul>
    <li><a href="#">Do</a></li>
    <li><a href="#">Re</a></li>
    <li class="divider"></li>
    <li><a href="#">Mi</a></li>
  </ul>
</button>

When the dropdown directive is compiled, it would move the ul to the outside of the button (so it's a sibling) and set a style of display: none, then the innerHTML of the button would be set to the label attr.

When the button is clicked, the ul will have the display: none style unset and the button will receive a class of active (could be changed via activeclass attr, or config?)

I think this is a simple and flexible solution, and it's all self-contained. The only downside to this approach is that it assumes the dropdown element is wrapped in a relatively positioned element, e.g., a div.btn-group.

What are your thoughts?

[shaungrady]

I forgot to add, there'd be no isolate scope or transclusion happening.

[joshdmiller]

I've only been following this conversation passively, but I'm hoping to get more involved.

My issue here is that it's very Bootstrap-specific. It seems like we would have to rewrite the plugin in order to use something else (e.g. Foundation).

[shaungrady]

It's not really, though. If it's desired, the directive could automatically apply position: relative to the parent element and position: absolute to the ul, along with maybe a top and left. The only part of this concept that relies on Bootstrap is giving the button a class of active when the ul is being displayed—and that can easily be configurable.

I'm not familiar with Foundation and I did some Googling, but I wasn't able to find an example of a dropdown menu using Foundation—can you point me to a specific example?

[shaungrady]

Ahh, I found Foundation's docs on it. They do dropdowns strangely—not a fan. Regardless, making it compatible with Foundation probably wouldn't be too much work. The biggest hurdle I can see is getting accurate positioning. That aside, Foundation and Bootstrap do not behave the same way, especially in the case of the split button: Bootstrap's dropdown is positioned relative to parent while Foundation's dropdown is positioned relative to the toggler. That could be reconciled by allowing the user to specify whether they would like the dropdown positioned relative to parent or button.

[joshdmiller]

UI Bootstrap has a long-term goal to support any framework, which is why we've been trying really hard to ensure none of the components include knowledge of the DOM structure or CSS classes from within the directive (though it's not perfect yet), but instead place all of that in the template.

I agree that dropdowns are a tricky case, but I feel we should try to find a solution that doesn't tie us to any framework and would hopefully rely on templates for everything DOM- or style-related.

[shaungrady]

The frameworkless path would be the Foundation method of absolutely positioning the dropdown as a direct child of the body elem. The markup in the original post would still work for that path. So then the user would need to configure if they want the dropdown positioned relative to the toggler's parent or the toggler itself--the Bootstrap style or the Foundation style, respectively.

[bekos]

@angular-ui/bootstrap Why we can't use something like popover's code with a <ul> content and an additional bind for document clicks in order to close the popover? This way we can open the dropdown in many directions and with animation. This is more like foundation's implementation of dropdown that can hold also content.

Bootstrap's feaures for the dropdown are keyboard navigation and close on Esc. I think a refactor should address this ones also.

[shaungrady]

Good idea, looks like a lot can be borrowed from popover. I agree that the refactor should support keyboard navigation/dismissal.

[ajoslin]

Yeah you're right, it is a lot like popover. Another thing: I think we should have no opinion about what element opens it - we should just have it have a variable for being shown/hidden.

Or ... do we need to know something for the sake of positioning?

[bekos]

@ajoslin I agree with the variable, so that we can programmatically open / close the dropdown. If we follow bootstrap's html I don't think there will be a problem with positioning.

[shaungrady]

The toggler and the menu are still linked in that the menu has to be positioned relative to the toggler. Following Bootstrap's HTML as far as including the btn-group wrapper in the directive would bring back the problem of maintaining flexibility of implementation.

I'm not sure what you mean @ajoslin when you talk about abstracting it down to a variable—what would the use case be for that? Having many togglers to one menu? How would that relationship be defined?

[bekos]

@shaungrady I think @ajoslin proposes the dropdown directive will $watch a variable in order to be visible or hidden. This way we can toggle the dropdown from anywhere. The toggler as you mention it, will be another way to change the value of this variable.

Also, the toggler will be used to position the dropdown element.

[ajoslin]

@shaungrady yeah, as @bekos said.

You could do btn-group like this:

<div class="btn-group" ng-class="{toggle: showDropdown}">
  <button class="btn">Hello</button>
  <button class="btn dropdown-toggle" ng-cilck="showDropdown = !showDropdown">
    <span class="caret"></span>
  </button>
  <!-- compiles to <ul> element -->
  <dropdown is-open="showDropdown"> 
    <li ng-repeat="opt in options">{{opt}}</li>
  </ul>
</div>

It wouldn't even require a new scope - it would just use $parse to set attrs.isOpen to false whenever the user clicks outside.

This way allows you to do weird dropdown buttons that aren't sibling elements with their openers. Eg:

<div class="things">
  <dropdown is-open="showMe">
    <li>Option</li>
  </dropdown>
</div>
<button class="btn" ng-click="showMe=!showMe">Toggle Dropdown</button>

[shaungrady]

So the toggler and menu would be defined separately, and you'd have to give each menu a unique identifier that each toggler would use to reference a dropdown. Sounds fragile, and I'm not sure that use case would be very common. You lose the convenience to defining the dropdown in one place and not having to worry about how it works.

A DRY approach of defining one menu to many togglers could be achieved by defining the menu in the scope and referencing it in a toggler attr, or by passing a menu template to the toggler to be compiled with the toggler.

[shaungrady]

I think I've got a good idea for how I envision it working—I'll start work on my potential solution when I've got spare time and show it to you guys for feedback.