fix(pagination): minor css for react-bootstrap pagination dropdown

[priley86]

Description

This PR attempts to address a minor issue using the React Bootstrap DropdownButton instead of bootstrap-select. The DOM rendered is a tad bit different from bootstrap-select and customizing this via a few minor CSS tweaks seems to be the easier option.

Link to OSUX story:
https://patternfly.atlassian.net/browse/OSUX-339

PF-React PR:
patternfly/patternfly-react#143

Link to React Storybook

Note: I am ignoring the bootstrap-select paddings added to the dropdown-toggle and would prefer to just leave it at min-width:auto as to not introduce more CSS.

Changes

• minor tweaks to pagination btn-group selector as to ensure React Bootstrap button-group is styled closely w/o the bootstrap-select class
• ensures the React Bootstrap dropdown-menu is min-width:auto

Link to rawgit and/or image

For example: Here is a link to Alerts on rawgit

This is an image:

PR checklist (if relevant)

• Cross browser: works in IE9
• Cross browser: works in IE10
• Cross browser: works in IE11
• Cross browser: works in Edge
• Cross browser: works in Chrome
• Cross browser: works in Firefox
• Cross browser: works in Safari
• Cross browser: works in Opera
• Responsive: works in extra small, small, medium and large view ports.
• Preview the PR: An image or a URL for designer to preview this PR is provided.

[andresgalante]

Hi @priley86 Although I don't see a technical problem to merge this, it leads me to think how much we should clutter patternfly's core code base for the sake of one JS framework implementation.

If we start treating PF core as a dump site to all possible implementations, then everyone loses. any patternfly user that is not using our React implementation will ship more useless code if we merge this PR.

@jeff-phillips-18 I'll let you decide on this.

[dtaylor113]

Hi @andresgalante, @priley86, yeah, it's a balancing act. I think in general we are trying to avoid whenever possible adding less/css to the js framework repos so that patternfly core is the main/single place for Patternlfy less/scss/css. This angular-patternfly issue/epic is an attempt to move less to core where ever possible.

[priley86]

@andresgalante i don't see why pf-core should be scoping css specifically for jquery extensions at this point. Is there anything here that is really pf-react specific though? 🙋‍♂️

[jeff-phillips-18]

@andresgalante Is the specificity that is there now required for patternfly?

[jeff-phillips-18]

I see that we do need to provide the original level of specificity in order to override the bootstrap setting. I'm OK with this change since it is really just providing an alternative to using the jquery bootstrap-select.

[cdcabrera]

The selector addition and minor resets look easy enough. Curious how an inherited float was influencing a flex layout... overall lgtm.