From 5ebcaaf130030e552128b84cadd0fe1aa5b6e7d7 Mon Sep 17 00:00:00 2001 From: Caroline Taymor and Geoff Pleiss Date: Tue, 7 Jul 2015 14:51:34 -0700 Subject: [PATCH] fix(dropdown): Fix border on default alt dropdown hover DefaultAltDropdown, LowlightDropdown, HighlightDropdown, and HighlightAltDropdown no longer have `btn-default` class, which was causing problems [finishes #97856614] --- .../dropdown/dropdown_spec.js | 59 ++++++++++++++++--- src/pivotal-ui-react/dropdowns/dropdowns.js | 8 +-- 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/spec/pivotal-ui-react/dropdown/dropdown_spec.js b/spec/pivotal-ui-react/dropdown/dropdown_spec.js index a62aad833..802494c54 100644 --- a/spec/pivotal-ui-react/dropdown/dropdown_spec.js +++ b/spec/pivotal-ui-react/dropdown/dropdown_spec.js @@ -3,7 +3,7 @@ require('../spec_helper'); describe('Dropdowns', function() { describe('Dropdown', function() { beforeEach(function() { - var Dropdown = require('../../../src/pivotal-ui-react/dropdowns/dropdowns').LinkDropdown; + var Dropdown = require('../../../src/pivotal-ui-react/dropdowns/dropdowns').Dropdown; React.render(, root); }); @@ -12,7 +12,11 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-link').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-default'); }); }); @@ -27,7 +31,12 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-link').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-link'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); @@ -42,7 +51,12 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-default-alt').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-default-alt'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); @@ -57,8 +71,14 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-primary').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-primary'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); + }); describe('LowlightDropdown', function() { @@ -72,7 +92,13 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-lowlight').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-lowlight'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); @@ -87,7 +113,12 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-danger').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-danger'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); @@ -102,7 +133,12 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-highlight').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-highlight'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); @@ -117,7 +153,12 @@ describe('Dropdowns', function() { }); it('creates a dropdown', function() { - expect('button.dropdown-toggle.btn.btn-highlight-alt').toContainText('Dropping'); + expect('button.dropdown-toggle').toContainText('Dropping'); + }); + + it('adds the appropriate button classes to the dropdown toggle', () => { + expect('button.dropdown-toggle').toHaveClass('btn-highlight-alt'); + expect('button.dropdown-toggle').not.toHaveClass('btn-default'); }); }); }); diff --git a/src/pivotal-ui-react/dropdowns/dropdowns.js b/src/pivotal-ui-react/dropdowns/dropdowns.js index 06d9fe045..4fb6cdf36 100644 --- a/src/pivotal-ui-react/dropdowns/dropdowns.js +++ b/src/pivotal-ui-react/dropdowns/dropdowns.js @@ -69,7 +69,7 @@ module.exports = { * @see [Pivotal UI React](http://styleguide.pivotal.io/react_beta.html#dropdown_react) * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#dropdown) */ - DefaultAltDropdown: defDropdown({buttonClassName: 'btn-default-alt'}), + DefaultAltDropdown: defDropdown({buttonClassName: 'btn-default-alt', bsStyle: null}), /** * @component PrimaryDropdown @@ -91,7 +91,7 @@ module.exports = { * @see [Pivotal UI React](http://styleguide.pivotal.io/react_beta.html#dropdown_react) * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#dropdown) */ - LowlightDropdown: defDropdown({buttonClassName: 'btn-lowlight'}), + LowlightDropdown: defDropdown({buttonClassName: 'btn-lowlight', bsStyle: null}), /** * @component DangerDropdown @@ -113,7 +113,7 @@ module.exports = { * @see [Pivotal UI React](http://styleguide.pivotal.io/react_beta.html#dropdown_react) * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#dropdown) */ - HighlightDropdown: defDropdown({buttonClassName: 'btn-highlight'}), + HighlightDropdown: defDropdown({buttonClassName: 'btn-highlight', bsStyle: null}), /** * @component HighlightAltDropdown @@ -124,5 +124,5 @@ module.exports = { * @see [Pivotal UI React](http://styleguide.pivotal.io/react_beta.html#dropdown_react) * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#dropdown) */ - HighlightAltDropdown: defDropdown({buttonClassName: 'btn-highlight-alt'}) + HighlightAltDropdown: defDropdown({buttonClassName: 'btn-highlight-alt', bsStyle: null}) };