Update: CSS className constants for react classNames (#299)

box · Nov 30, 2018 · b472a2e · b472a2e
1 parent 1c8a7e2
commit b472a2e
Show file tree

Hide file tree

Showing 21 changed files with 99 additions and 140 deletions.
diff --git a/src/__tests__/util-test.js b/src/__tests__/util-test.js
@@ -2,10 +2,10 @@
 import * as util from '../util';
 import {
     TYPES,
-    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ANNOTATION_POPOVER,
     CLASS_ANNOTATION_CARET,
     SELECTOR_ANNOTATION_POINT_MARKER,
-    CLASS_ANNOTATION_DIALOG,
+    CLASS_ANNOTATION_POPOVER,
     CLASS_ANNOTATION_POINT_MARKER
 } from '../constants';
 
@@ -22,7 +22,7 @@ const html = `<div class="wrapper" data-name="someName">
 <div class="foo"></div>
 </div>
 
-<div class="${CLASS_ANNOTATION_DIALOG}">
+<div class="${CLASS_ANNOTATION_POPOVER}">
 <div class="${CLASS_ANNOTATION_CARET}"></div>
 </div>
 
@@ -167,7 +167,7 @@ describe('util', () => {
 
     describe('isInAnnotationOrMarker()', () => {
         it('should return false if no dialog element exists', () => {
-            const dialogEl = rootElement.querySelector(SELECTOR_ANNOTATION_DIALOG);
+            const dialogEl = rootElement.querySelector(SELECTOR_ANNOTATION_POPOVER);
             const markerEl = rootElement.querySelector(SELECTOR_ANNOTATION_POINT_MARKER);
             expect(util.isInAnnotationOrMarker({ target: dialogEl })).toBeTruthy();
             expect(util.isInAnnotationOrMarker({ target: markerEl })).toBeTruthy();

diff --git a/src/components/ActionControls/ActionControls.js b/src/components/ActionControls/ActionControls.js
@@ -10,6 +10,9 @@ import DrawingControls from './DrawingControls';
 
 import './ActionControls.scss';
 
+const CLASS_ACTION_CONTROLS = 'ba-action-controls';
+const CLASS_INPUT_CONTAINER = 'ba-annotation-input-container';
+
 type Props = {
     id?: string,
     type: AnnotationType,
@@ -107,7 +110,7 @@ class ActionControls extends React.Component<Props, State> {
                 if (isPending || hasComments) {
                     return (
                         <ApprovalCommentForm
-                            className='ba-annotation-input-container'
+                            className={CLASS_INPUT_CONTAINER}
                             // $FlowFixMe
                             user={NULL_USER}
                             isOpen={isInputOpen}
@@ -152,7 +155,7 @@ class ActionControls extends React.Component<Props, State> {
                 // irrespective of whether or not they can create new point annotations
                 return (
                     <ApprovalCommentForm
-                        className='ba-annotation-input-container'
+                        className={CLASS_INPUT_CONTAINER}
                         // $FlowFixMe
                         user={NULL_USER}
                         isOpen={isInputOpen}
@@ -172,7 +175,7 @@ class ActionControls extends React.Component<Props, State> {
 
     render() {
         const { type } = this.props;
-        return <div className='ba-action-controls'>{this.determineControls(type)}</div>;
+        return <div className={CLASS_ACTION_CONTROLS}>{this.determineControls(type)}</div>;
     }
 }
 

diff --git a/src/components/ActionControls/DrawingControls.js b/src/components/ActionControls/DrawingControls.js
@@ -7,6 +7,10 @@ import IconTrash from 'box-react-ui/lib/icons/general/IconTrash';
 
 import './DrawingControls.scss';
 
+const CLASS_DRAW_CONTROLS = 'ba-action-controls-draw';
+const CLASS_DRAWING_SAVE_BTN = 'ba-drawing-save-btn';
+const CLASS_DRAWING_DELETE_BTN = 'ba-drawing-delete-btn';
+
 type Props = {
     canDelete: boolean,
     isPending: boolean,
@@ -15,14 +19,14 @@ type Props = {
 };
 
 const DrawingControls = ({ isPending, canDelete, onCreate, onDelete }: Props) => (
-    <div className='ba-action-controls-draw'>
+    <div className={CLASS_DRAW_CONTROLS}>
         {isPending && (
-            <PlainButton type='button' className='ba-drawing-save-btn' onClick={onCreate}>
+            <PlainButton type='button' className={CLASS_DRAWING_SAVE_BTN} onClick={onCreate}>
                 <IconCheck />
             </PlainButton>
         )}
         {canDelete && (
-            <PlainButton type='button' className='ba-drawing-delete-btn' onClick={onDelete}>
+            <PlainButton type='button' className={CLASS_DRAWING_DELETE_BTN} onClick={onDelete}>
                 <IconTrash height={20} width={20} />
             </PlainButton>
         )}

diff --git a/src/components/ActionControls/DrawingControls.scss b/src/components/ActionControls/DrawingControls.scss
@@ -30,7 +30,7 @@
 
     // MOBILE & TABLET CSS
     @media #{$mobile}, #{$tablet} {
-        .ba-inline .ba-action-controls-draw {
+        .ba-inline-popover .ba-action-controls-draw {
             background: white;
             border-top: 1px solid $seesee;
             bottom: 0;

diff --git a/src/components/ActionControls/HighlightControls.js b/src/components/ActionControls/HighlightControls.js
@@ -8,6 +8,11 @@ import IconHighlightCommentAnnotation from 'box-react-ui/lib/icons/annotations/I
 
 import './HighlightControls.scss';
 
+const CLASS_HIGHLIGHT_CONTROLS = 'ba-action-controls-highlight';
+const CLASS_HIGHLIGHT_BTN = 'ba-highlight-btn';
+const CLASS_HIGHLIGHT_COMMENT_BTN = 'ba-highlight-comment-btn';
+const CLASS_SAVED_HIGHLIGHT = 'ba-saved-highlight';
+
 type Props = {
     canAnnotateAndDelete: boolean,
     canComment: boolean,
@@ -25,18 +30,18 @@ const HighlightControls = ({
     onCommentClick,
     isPending
 }: Props) => (
-    <div className='ba-action-controls-highlight'>
+    <div className={CLASS_HIGHLIGHT_CONTROLS}>
         {canAnnotateAndDelete && (
-            <PlainButton type='button' className='ba-highlight-btn' onClick={isPending ? onCreate : onDelete}>
+            <PlainButton type='button' className={CLASS_HIGHLIGHT_BTN} onClick={isPending ? onCreate : onDelete}>
                 <IconHighlightAnnotation
                     className={classNames({
-                        'ba-saved-highlight': !isPending
+                        [CLASS_SAVED_HIGHLIGHT]: !isPending
                     })}
                 />
             </PlainButton>
         )}
         {canComment && (
-            <PlainButton type='button' className='ba-highlight-comment-btn' onClick={onCommentClick}>
+            <PlainButton type='button' className={CLASS_HIGHLIGHT_COMMENT_BTN} onClick={onCommentClick}>
                 <IconHighlightCommentAnnotation height={24} width={24} />
             </PlainButton>
         )}

diff --git a/src/components/ActionControls/HighlightControls.scss b/src/components/ActionControls/HighlightControls.scss
@@ -36,7 +36,7 @@
 
     // MOBILE & TABLET CSS
     @media #{$mobile}, #{$tablet} {
-        .ba-inline .ba-action-controls-highlight {
+        .ba-inline-popover .ba-action-controls-highlight {
             background: white;
             border-top: 1px solid $seesee;
             bottom: 0;

diff --git a/src/components/AnnotationPopover/AnnotationPopover.js b/src/components/AnnotationPopover/AnnotationPopover.js
@@ -8,12 +8,18 @@ import IconClose from 'box-react-ui/lib/icons/general/IconClose';
 import Internationalize from '../Internationalize';
 import Overlay from './Overlay';
 import CommentList from '../CommentList';
-import { TYPES, CLASS_ANNOTATION_POPOVER } from '../../constants';
+import { TYPES, CLASS_ANNOTATION_POPOVER, CLASS_ANNOTATION_CARET } from '../../constants';
 
 import './AnnotationPopover.scss';
 import ActionControls from '../ActionControls';
 import AnnotatorLabel from './AnnotatorLabel';
 
+const CLASS_INLINE_POPOVER = 'ba-inline-popover';
+const CLASS_ANIMATE_POPOVER = 'ba-animate-popover';
+const CLASS_CREATE_POPOVER = 'ba-create-popover';
+const CLASS_MOBILE_HEADER = 'ba-mobile-header';
+const CLASS_MOBILE_CLOSE_BTN = 'ba-mobile-close-btn';
+
 type Props = {
     isMobile: boolean,
     canComment: boolean,
@@ -79,19 +85,19 @@ class AnnotationPopover extends React.PureComponent<Props> {
             <Internationalize language={language} messages={intlMessages}>
                 <div
                     className={classNames(CLASS_ANNOTATION_POPOVER, {
-                        'ba-inline': isInline,
-                        'ba-animate-popover': isMobile,
-                        'ba-create-popover': isPending
+                        [CLASS_INLINE_POPOVER]: isInline,
+                        [CLASS_ANIMATE_POPOVER]: isMobile,
+                        [CLASS_CREATE_POPOVER]: isPending
                     })}
                 >
                     {isMobile ? (
-                        <span className='ba-mobile-header' style={{ height: headerHeight }}>
-                            <PlainButton className='ba-mobile-close-btn' onClick={onCancel}>
+                        <span className={CLASS_MOBILE_HEADER} style={{ height: headerHeight }}>
+                            <PlainButton className={CLASS_MOBILE_CLOSE_BTN} onClick={onCancel}>
                                 <IconClose height={24} width={24} />
                             </PlainButton>
                         </span>
                     ) : (
-                        <span className='ba-popover-caret' />
+                        <span className={CLASS_ANNOTATION_CARET} />
                     )}
                     <Overlay shouldDefaultFocus={!isMobile}>
                         {hasComments ? (

diff --git a/src/components/AnnotationPopover/AnnotationPopover.scss b/src/components/AnnotationPopover/AnnotationPopover.scss
@@ -50,7 +50,7 @@
         white-space: normal;
     }
 
-    .ba-inline .overlay {
+    .ba-inline-popover .overlay {
         display: inline-flex;
     }
 
@@ -126,11 +126,11 @@
         }
 
         // INLINE ANNOTATION POPOVER CSS
-        .ba-popover.ba-inline {
+        .ba-popover.ba-inline-popover {
             height: auto;
         }
 
-        .ba-inline .ba-popover-overlay {
+        .ba-inline-popover .ba-popover-overlay {
             background: transparent;
             border-bottom: 1px solid $seesee;
             box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
@@ -139,20 +139,20 @@
             text-align: center;
         }
 
-        .ba-inline.ba-create-popover .ba-popover-overlay {
+        .ba-inline-popover.ba-create-popover .ba-popover-overlay {
             border: none;
             box-shadow: none;
             display: flex;
             flex-direction: column;
         }
 
-        .ba-inline .ba-mobile-header,
+        .ba-inline-popover .ba-mobile-header,
         .ba-create-popover .ba-mobile-header {
             display: none;
         }
 
         .ba-create-popover .ba-popover-overlay,
-        .ba-inline .ba-popover-overlay {
+        .ba-inline-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }
@@ -186,12 +186,12 @@
             display: flex;
         }
 
-        .ba-popover.ba-inline {
+        .ba-popover.ba-inline-popover {
             border: none;
             width: 100%;
         }
 
-        .ba-inline .ba-mobile-header {
+        .ba-inline-popover .ba-mobile-header {
             display: none;
         }
 
@@ -201,8 +201,8 @@
             height: 100%;
         }
 
-        .ba-inline.ba-create-popover,
-        .ba-inline.ba-create-popover .ba-popover-overlay {
+        .ba-inline-popover.ba-create-popover,
+        .ba-inline-popover.ba-create-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }

diff --git a/src/components/AnnotationPopover/AnnotatorLabel.js b/src/components/AnnotationPopover/AnnotatorLabel.js
@@ -10,6 +10,8 @@ import messages from './messages';
 
 import './AnnotatorLabel.scss';
 
+const CLASS_ANNOTATOR_LABEL = 'ba-annotator-label';
+
 type Props = {
     id?: string,
     type: AnnotationType,
@@ -42,7 +44,7 @@ class AnnotatorLabel extends React.PureComponent<Props> {
         const { id, isPending } = this.props;
         return (
             !isPending && (
-                <span className='ba-annotator-label'>
+                <span className={CLASS_ANNOTATOR_LABEL}>
                     <CommentText id={id} tagged_message={this.getAnnotatorLabelMessage()} translationEnabled={false} />
                 </span>
             )

diff --git a/src/components/AnnotationPopover/Overlay.js b/src/components/AnnotationPopover/Overlay.js
@@ -3,6 +3,8 @@ import * as React from 'react';
 
 import OverlayComponent from 'box-react-ui/lib/components/flyout/Overlay';
 
+const CLASS_POPOVER_OVERLAY = 'ba-popover-overlay';
+
 type Props = {
     shouldDefaultFocus: boolean,
     children: React.Node
@@ -11,13 +13,13 @@ type Props = {
 const Overlay = ({ shouldDefaultFocus, children }: Props) => {
     if (shouldDefaultFocus) {
         return (
-            <OverlayComponent className='ba-popover-overlay' shouldOutlineFocus={false}>
+            <OverlayComponent className={CLASS_POPOVER_OVERLAY} shouldOutlineFocus={false}>
                 {children}
             </OverlayComponent>
         );
     }
 
-    return <div className='ba-popover-overlay'>{children}</div>;
+    return <div className={CLASS_POPOVER_OVERLAY}>{children}</div>;
 };
 
 export default Overlay;
diff --git a/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js b/src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js
@@ -51,7 +51,7 @@ describe('components/AnnotationPopover', () => {
             comments
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 
     test('should render a view-only annotation with a annotator label and no comments', () => {
@@ -60,7 +60,7 @@ describe('components/AnnotationPopover', () => {
             type: TYPES.highlight
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(1);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(1);
     });
 
     test('should correctly render an annotation with a annotator label and no comments', () => {
@@ -70,7 +70,7 @@ describe('components/AnnotationPopover', () => {
             type: TYPES.highlight
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(1);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(1);
     });
 
     test('should correctly render a BRUI Overlay if not on mobile', () => {
@@ -99,7 +99,7 @@ describe('components/AnnotationPopover', () => {
             comments
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 
     test('should correctly render a pending annotation', () => {
@@ -108,6 +108,6 @@ describe('components/AnnotationPopover', () => {
             canAnnotate: true
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('.ba-inline').length).toEqual(0);
+        expect(wrapper.find('.ba-inline-popover').length).toEqual(0);
     });
 });
diff --git a/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap b/src/components/AnnotationPopover/__tests__/__snapshots__/AnnotationPopover-test.js.snap
@@ -469,7 +469,7 @@ exports[`components/AnnotationPopover should correctly render a view-only popove
 exports[`components/AnnotationPopover should correctly render an annotation with a annotator label and no comments 1`] = `
 <Internationalize>
   <div
-    className="ba-popover ba-inline"
+    className="ba-popover ba-inline-popover"
   >
     <span
       className="ba-popover-caret"
@@ -536,7 +536,7 @@ exports[`components/AnnotationPopover should correctly render an annotation with
 exports[`components/AnnotationPopover should render a view-only annotation with a annotator label and no comments 1`] = `
 <Internationalize>
   <div
-    className="ba-popover ba-inline"
+    className="ba-popover ba-inline-popover"
   >
     <span
       className="ba-popover-caret"

diff --git a/src/components/CommentList/CommentList.js b/src/components/CommentList/CommentList.js
@@ -5,15 +5,18 @@ import Comment from '../Comment';
 
 import './CommentList.scss';
 
+const CLASS_COMMENT_LIST = 'ba-comment-list';
+const CLASS_COMMENT_LIST_ITEM = 'ba-comment-list-item';
+
 type Props = {
     comments: Comments,
     onDelete: Function
 };
 
 const CommentList = ({ comments, onDelete }: Props) => (
-    <ul className='ba-comment-list'>
+    <ul className={CLASS_COMMENT_LIST}>
         {comments.map(({ id, ...rest }) => (
-            <li className='ba-comment-list-item' key={`annotation_${id}`}>
+            <li className={CLASS_COMMENT_LIST_ITEM} key={`annotation_${id}`}>
                 <Comment id={id} onDelete={onDelete} {...rest} />
             </li>
         ))}