Skip to content

Commit c52719e

Browse files
nguerettereidmit
nguerette
authored and
reidmit
committed
Use BEM in button class names [#164253492]
Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
1 parent 6799fb3 commit c52719e

File tree

7 files changed

+65
-143
lines changed

7 files changed

+65
-143
lines changed

‎spec/pivotal-ui-react/alerts/alerts_spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ describe('Alert Component', () => {
3838

3939
it('has a close button', () => {
4040
expect('.pui-alert button').toHaveLength(1);
41-
expect('.pui-btn-default-flat.pui-btn-icon').toHaveClass('pui-alert-close-btn');
42-
expect('.pui-btn-default-flat.pui-btn-icon .icon-close').toExist();
41+
expect('.pui-btn--default.pui-btn--flat.pui-btn--icon').toHaveClass('pui-alert-close-btn');
42+
expect('.pui-btn--default.pui-btn--flat.pui-btn--icon .icon-close').toExist();
4343
});
4444

4545
it('has an sr-only close button', () => {

‎spec/pivotal-ui-react/buttons/buttons_spec.js‎

Lines changed: 14 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ describe('UIButton', () => {
1111

1212
it('creates a button', () => {
1313
expect('button').toHaveClass('pui-btn');
14-
expect('button').toHaveClass('pui-btn-default');
15-
expect('button').toHaveText('Click here');
14+
expect('button').toHaveClass('pui-btn--default');
15+
expect('button .pui-btn__inner-content').toHaveText('Click here');
1616
});
1717

1818
describe('when href attribute is set', () => {
@@ -135,7 +135,7 @@ describe('UIButton', () => {
135135
});
136136

137137
it('adds the kind class to the button', () => {
138-
expect('button.pui-btn').toHaveClass('pui-btn-default');
138+
expect('button.pui-btn').toHaveClass('pui-btn--default');
139139
});
140140
});
141141

@@ -145,7 +145,7 @@ describe('UIButton', () => {
145145
});
146146

147147
it('adds the kind class to the button', () => {
148-
expect('button.pui-btn').toHaveClass('pui-btn-danger');
148+
expect('button.pui-btn').toHaveClass('pui-btn--danger');
149149
});
150150
});
151151

@@ -155,7 +155,7 @@ describe('UIButton', () => {
155155
});
156156

157157
it('adds the kind class to the button', () => {
158-
expect('button.pui-btn').toHaveClass('pui-btn-brand');
158+
expect('button.pui-btn').toHaveClass('pui-btn--brand');
159159
});
160160
});
161161

@@ -165,7 +165,7 @@ describe('UIButton', () => {
165165
});
166166

167167
it('adds the kind class to the button', () => {
168-
expect('button.pui-btn').toHaveClass('pui-btn-primary');
168+
expect('button.pui-btn').toHaveClass('pui-btn--primary');
169169
});
170170
});
171171

@@ -175,7 +175,7 @@ describe('UIButton', () => {
175175
});
176176

177177
it('adds the large button class', () => {
178-
expect('button.pui-btn').toHaveClass('pui-btn-lg');
178+
expect('button.pui-btn').toHaveClass('pui-btn--lg');
179179
});
180180
});
181181

@@ -185,7 +185,7 @@ describe('UIButton', () => {
185185
});
186186

187187
it('adds the large button class', () => {
188-
expect('button.pui-btn').toHaveClass('pui-btn-full');
188+
expect('button.pui-btn').toHaveClass('pui-btn--full');
189189
});
190190
});
191191

@@ -195,7 +195,7 @@ describe('UIButton', () => {
195195
});
196196

197197
it('adds the large button class', () => {
198-
expect('button.pui-btn').toHaveClass('pui-btn-sm');
198+
expect('button.pui-btn').toHaveClass('pui-btn--sm');
199199
});
200200
});
201201

@@ -205,7 +205,7 @@ describe('UIButton', () => {
205205
});
206206

207207
it('adds the large button class', () => {
208-
expect('button.pui-btn').toHaveClass('pui-btn-icon');
208+
expect('button.pui-btn').toHaveClass('pui-btn--icon');
209209
});
210210
});
211211

@@ -214,44 +214,8 @@ describe('UIButton', () => {
214214
subject::setProps({alt: true});
215215
});
216216

217-
describe('when kind is default', () => {
218-
beforeEach(() => {
219-
subject::setProps({kind: 'default'});
220-
});
221-
222-
it('adds appropriate alt class to the button', () => {
223-
expect('button.pui-btn').toHaveClass('pui-btn-default-alt');
224-
});
225-
});
226-
227-
describe('when kind is danger', () => {
228-
beforeEach(() => {
229-
subject::setProps({kind: 'danger'});
230-
});
231-
232-
it('adds appropriate alt class to the button', () => {
233-
expect('button.pui-btn').toHaveClass('pui-btn-danger-alt');
234-
});
235-
});
236-
237-
describe('when kind is brand', () => {
238-
beforeEach(() => {
239-
subject::setProps({kind: 'brand'});
240-
});
241-
242-
it('adds appropriate alt class to the button', () => {
243-
expect('button.pui-btn').toHaveClass('pui-btn-brand-alt');
244-
});
245-
});
246-
247-
describe('when kind is primary', () => {
248-
beforeEach(() => {
249-
subject::setProps({kind: 'primary'});
250-
});
251-
252-
it('adds appropriate alt class to the button', () => {
253-
expect('button.pui-btn').toHaveClass('pui-btn-primary-alt');
254-
});
217+
it('adds appropriate alt class to the button', () => {
218+
expect('button.pui-btn').toHaveClass('pui-btn--alt');
255219
});
256220
});
257221

@@ -260,44 +224,8 @@ describe('UIButton', () => {
260224
subject::setProps({flat: true});
261225
});
262226

263-
describe('when kind is default', () => {
264-
beforeEach(() => {
265-
subject::setProps({kind: 'default'});
266-
});
267-
268-
it('adds appropriate flat class to the button', () => {
269-
expect('button.pui-btn').toHaveClass('pui-btn-default-flat');
270-
});
271-
});
272-
273-
describe('when kind is danger', () => {
274-
beforeEach(() => {
275-
subject::setProps({kind: 'danger'});
276-
});
277-
278-
it('adds appropriate flat class to the button', () => {
279-
expect('button.pui-btn').toHaveClass('pui-btn-danger-flat');
280-
});
281-
});
282-
283-
describe('when kind is brand', () => {
284-
beforeEach(() => {
285-
subject::setProps({kind: 'brand'});
286-
});
287-
288-
it('adds appropriate flat class to the button', () => {
289-
expect('button.pui-btn').toHaveClass('pui-btn-brand-flat');
290-
});
291-
});
292-
293-
describe('when kind is primary', () => {
294-
beforeEach(() => {
295-
subject::setProps({kind: 'primary'});
296-
});
297-
298-
it('adds appropriate flat class to the button', () => {
299-
expect('button.pui-btn').toHaveClass('pui-btn-primary-flat');
300-
});
227+
it('adds appropriate flat class to the button', () => {
228+
expect('button.pui-btn').toHaveClass('pui-btn--flat');
301229
});
302230
});
303231

‎spec/pivotal-ui-react/flyout/flyout_spec.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ describe('Flyout', () => {
4545
});
4646

4747
it('renders an icon button', () => {
48-
expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn-default-flat');
49-
expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn-icon');
48+
expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--default');
49+
expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--flat');
50+
expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--icon');
5051
expect('.pui-dialog .pui-flyout-icon-btn').toHaveAttr('aria-label', 'Close');
5152
expect(Icon).toHaveBeenRenderedWithProps({
5253
src: 'chevron_left',
@@ -102,7 +103,7 @@ describe('Flyout', () => {
102103
});
103104

104105
it('renders the specified icon', () => {
105-
expect('.pui-flyout-header.grid > .col.col-fixed .pui-btn.pui-btn-default-flat.pui-btn-icon .icon.icon-middle .icon-chevron_left').toHaveText('');
106+
expect('.pui-flyout-header.grid > .col.col-fixed .icon.icon-middle .icon-chevron_left').toExist();
106107
});
107108

108109
describe('when clicking the icon button', () => {
@@ -127,7 +128,7 @@ describe('Flyout', () => {
127128
});
128129

129130
it('renders that icon instead of the close icon', () => {
130-
expect(`.pui-flyout-header.grid > .col.col-fixed .pui-btn.pui-btn-default-flat.pui-btn-icon .icon.icon-middle .icon-${iconSrc}`).toHaveText('');
131+
expect(`.pui-flyout-header.grid > .col.col-fixed .icon.icon-middle .icon-${iconSrc}`).toExist();
131132
});
132133
});
133134
});

‎spec/pivotal-ui-react/modal/modal_spec.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ describe('Modal', () => {
4545

4646
it('renders a close button', () => {
4747
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveAttr('aria-label', 'Close');
48-
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn-default-flat');
49-
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn-icon');
48+
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--default');
49+
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--flat');
50+
expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--icon');
5051
expect(Icon).toHaveBeenRenderedWithProps({src: 'close', size: 'inherit', style: {}, verticalAlign: 'middle'});
5152
});
5253

‎spec/pivotal-ui-react/pagination/pagination_spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ describe('Pagination', () => {
2929
});
3030

3131
it('renders all buttons with flat class', () => {
32-
expect('.pagination .pui-btn:eq(0)').toHaveClass('pui-btn-default-flat');
33-
expect('.pagination .pui-btn:eq(1)').toHaveClass('pui-btn-brand-flat');
34-
expect('.pagination .pui-btn:eq(2)').toHaveClass('pui-btn-default-flat');
32+
expect('.pagination .pui-btn:eq(0)').toHaveClass(['pui-btn--default', 'pui-btn--flat']);
33+
expect('.pagination .pui-btn:eq(1)').toHaveClass(['pui-btn--brand', 'pui-btn--flat']);
34+
expect('.pagination .pui-btn:eq(2)').toHaveClass(['pui-btn--default', 'pui-btn--flat']);
3535
});
3636

3737
describe('props', () => {
@@ -63,7 +63,7 @@ describe('Pagination', () => {
6363

6464
it('renders an active .pui-btn when activePage number is specified', () => {
6565
renderComponent({activePage: 1});
66-
expect('.pagination .pui-btn:eq(1)').toHaveClass('pui-btn-brand-flat');
66+
expect('.pagination .pui-btn:eq(1)').toHaveClass(['pui-btn--brand', 'pui-btn--flat']);
6767
expect('.pagination .pui-btn:eq(1)').toHaveClass('active');
6868
});
6969

‎spec/pivotal-ui-react/wizard/wizard_spec.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ describe('Wizard', () => {
234234
});
235235

236236
it('renders a cancel button', () => {
237-
expect('.wizard-cancel-btn.pui-btn-primary-alt').toHaveText('Cancel');
237+
expect('.wizard-cancel-btn.pui-btn--primary.pui-btn--alt').toHaveText('Cancel');
238238
});
239239

240240
describe('with custom cancel text', () => {
@@ -243,7 +243,7 @@ describe('Wizard', () => {
243243
});
244244

245245
it('renders a cancel button with custom text', () => {
246-
expect('.wizard-cancel-btn.pui-btn-primary-alt').toHaveText('Close');
246+
expect('.wizard-cancel-btn.pui-btn--primary.pui-btn--alt').toHaveText('Close');
247247
});
248248
});
249249
});
@@ -253,7 +253,7 @@ describe('Wizard', () => {
253253
});
254254

255255
it('renders a "next" PrimaryButton', () => {
256-
expect('.wizard-next-btn.pui-btn-primary').toHaveText('Next');
256+
expect('.wizard-next-btn.pui-btn--primary').toHaveText('Next');
257257
});
258258

259259
it('checks if the next button is enabled', () => {
@@ -279,7 +279,7 @@ describe('Wizard', () => {
279279
});
280280

281281
it('does not render the next button', () => {
282-
expect('.wizard-next-btn.pui-btn-primary').not.toExist();
282+
expect('.wizard-next-btn.pui-btn--primary').not.toExist();
283283
});
284284
});
285285

@@ -290,7 +290,7 @@ describe('Wizard', () => {
290290
});
291291

292292
it('renders the custom text', () => {
293-
expect('.wizard-next-btn.pui-btn-primary').toHaveText('customNext');
293+
expect('.wizard-next-btn.pui-btn--primary').toHaveText('customNext');
294294
});
295295
});
296296

@@ -306,7 +306,7 @@ describe('Wizard', () => {
306306
});
307307

308308
it('disables the "next" button', () => {
309-
expect('.wizard-next-btn.pui-btn-primary').toHaveAttr('disabled');
309+
expect('.wizard-next-btn.pui-btn--primary').toHaveAttr('disabled');
310310
});
311311
});
312312
});
@@ -317,7 +317,7 @@ describe('Wizard', () => {
317317
});
318318

319319
it('renders a "finish" PrimaryButton', () => {
320-
expect('.wizard-finish-btn.pui-btn-primary').toHaveText('Finish');
320+
expect('.wizard-finish-btn.pui-btn--primary').toHaveText('Finish');
321321
});
322322

323323
describe('when "hideFinishButton" is true', () => {
@@ -345,11 +345,11 @@ describe('Wizard', () => {
345345
});
346346

347347
it('does not render a "next" PrimaryButton', () => {
348-
expect('.wizard-next-btn.pui-btn-primary').not.toExist();
348+
expect('.wizard-next-btn.pui-btn--primary').not.toExist();
349349
});
350350

351351
it('renders a "back" alt PrimaryButton', () => {
352-
expect('.wizard-back-btn.pui-btn-primary-alt').toHaveText('Back');
352+
expect('.wizard-back-btn.pui-btn--primary.pui-btn--alt').toHaveText('Back');
353353
});
354354

355355
describe('when clicking the "back" button', () => {
@@ -370,7 +370,7 @@ describe('Wizard', () => {
370370
});
371371

372372
it('renders the custom text', () => {
373-
expect('.wizard-finish-btn.pui-btn-primary').toHaveText('customFinish');
373+
expect('.wizard-finish-btn.pui-btn--primary').toHaveText('customFinish');
374374
});
375375
});
376376

0 commit comments

Comments
 (0)