PTNFLY-938 Adding Find to the toolbar

[junezhang]

https://patternfly.atlassian.net/browse/PTNFLY-938

Adding Find to the toolbar
Based on Jeff and Sarah’s feedback, refine the code.

[jeff-phillips-18]

👍

[jeff-phillips-18]

@dlabrecq @srambach Please review

[jeff-phillips-18]

@dtaylor113 Please review

[srambach]

Can these -pf- classes be un-nested to reduce specificity without breaking anything? (.toolbar-pf-view-selector, .toolbar-pf-find, and .find-pf-dropdown-container?)

[junezhang]

@srambach, Thanks for checking. :-)
But .toolbar-pf-find and .find-pf-dropdown-container should be nested.
As the attached link: https://devops-ucd.rhcloud.com/June/patternfly/find.png

The position of .find-pf-dropdown-container is based on the father node .toolbar-pf-find.
Absolute positioning inside relative positioning make the .find-pf-dropdowm-container to be below of the magnifying glass icon.

[srambach]

Sorry, I mean un-nesting the Less rules. The HTML is fine as is, but even if the elements are nested in the HTML, the selectors to style them don't need to be nested. Nesting them makes the selector very long and specificity increases, making it difficult to override the rules later if desired.
I think that you can move .toolbar-pf-view-selector, .toolbar-pf-action-right, .toolbar-pf-view-selector, and .toolbar-pf-find all out to the top level and everything still works fine.

[dtaylor113]

Cloned this dev branch and ran the toolbar test page. Find LGTM.
Just need to address @srambach 's comments

[LHinson]

@jeff-phillips-18 came across the note that "In the angular version, an interim solution was created that added a class to the toolbar when there are no filters and put in a bottom margin... base PF needs to address this so that the angularjs story can remove and replace with the base pf solution." Does this PR include this detail?

[junezhang]

@jeff-phillips-18 @LHinson
I knew what you mean. I just think no need to add a class, I only add “margin-bottom: 10px” to .toolbar-pf-action. It can resolve the problem when no filters.
As the margin-top and margin-bottom of two elements will overlap, not conflict.
Please check if is it okay?

[jeff-phillips-18]

@LHinson Yes, adding the 10px bottom-margin to .toolbar-pf-actions fixes the issue caused when there is no filtering. Angular-Patternfly can remove the code that works around this.

[LHinson]

great, thank you @jeff-phillips-18 @junezhang

Looks like the comment from @srambach is the only open issue?

[junezhang]

@srambach Thanks, I got your point, I will update the code soon.

[srambach]

Looks great! Thanks for the changes.