Rename pui-btn--icon class name to pui-btn--icon-only [#164253492]

Signed-off-by: Nick Guerette <nguerette@pivotal.io>
pivotal-cf · Feb 26, 2019 · 2823332 · 2823332
1 parent c52719e
commit 2823332
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/spec/pivotal-ui-react/alerts/alerts_spec.js b/spec/pivotal-ui-react/alerts/alerts_spec.js
@@ -38,8 +38,8 @@ describe('Alert Component', () => {
 
       it('has a close button', () => {
         expect('.pui-alert button').toHaveLength(1);
-        expect('.pui-btn--default.pui-btn--flat.pui-btn--icon').toHaveClass('pui-alert-close-btn');
-        expect('.pui-btn--default.pui-btn--flat.pui-btn--icon .icon-close').toExist();
+        expect('.pui-btn--default.pui-btn--flat.pui-btn--icon-only').toHaveClass('pui-alert-close-btn');
+        expect('.pui-btn--default.pui-btn--flat.pui-btn--icon-only .icon-close').toExist();
       });
 
       it('has an sr-only close button', () => {

diff --git a/spec/pivotal-ui-react/buttons/buttons_spec.js b/spec/pivotal-ui-react/buttons/buttons_spec.js
@@ -201,11 +201,15 @@ describe('UIButton', () => {
 
   describe('when iconOnly is true', () => {
     beforeEach(() => {
-      subject::setProps({iconOnly: true, 'aria-label': 'Large Button'});
+      subject::setProps({iconOnly: true, 'aria-label': 'Icon-only Button'});
     });
 
-    it('adds the large button class', () => {
-      expect('button.pui-btn').toHaveClass('pui-btn--icon');
+    it('adds the appropriate button class', () => {
+      expect('button.pui-btn').toHaveClass('pui-btn--icon-only');
+    });
+
+    it('has the required aria-label attribute set', () => {
+      expect('button.pui-btn').toHaveAttr('aria-label', 'Icon-only Button');
     });
   });
 

diff --git a/spec/pivotal-ui-react/flyout/flyout_spec.js b/spec/pivotal-ui-react/flyout/flyout_spec.js
@@ -47,7 +47,7 @@ describe('Flyout', () => {
   it('renders an icon button', () => {
     expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--default');
     expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--flat');
-    expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--icon');
+    expect('.pui-dialog .pui-flyout-icon-btn').toHaveClass('pui-btn--icon-only');
     expect('.pui-dialog .pui-flyout-icon-btn').toHaveAttr('aria-label', 'Close');
     expect(Icon).toHaveBeenRenderedWithProps({
       src: 'chevron_left',

diff --git a/spec/pivotal-ui-react/modal/modal_spec.js b/spec/pivotal-ui-react/modal/modal_spec.js
@@ -47,7 +47,7 @@ describe('Modal', () => {
     expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveAttr('aria-label', 'Close');
     expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--default');
     expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--flat');
-    expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--icon');
+    expect('.pui-dialog.pui-modal-dialog .pui-modal-close-btn').toHaveClass('pui-btn--icon-only');
     expect(Icon).toHaveBeenRenderedWithProps({src: 'close', size: 'inherit', style: {}, verticalAlign: 'middle'});
   });
 

diff --git a/src/react/buttons/buttons.js b/src/react/buttons/buttons.js
@@ -42,7 +42,7 @@ export class UIButton extends React.Component {
           'pui-btn--flat': flat,
           'pui-btn--lg': large,
           'pui-btn--sm': small,
-          'pui-btn--icon': iconOnly,
+          'pui-btn--icon-only': iconOnly,
           'pui-btn--icon-right': !!icon && iconPosition === 'right',
           'pui-btn--full': fullWidth
         }