Breaking: Making style naming consistent (#144)

Moving modal styles out of base styles into its own file. Migrate to Checkbox from box-react-ui Update version of Preview
box · Jan 6, 2018 · 63bd5f3 · 63bd5f3
1 parent 54ba418
commit 63bd5f3
Show file tree

Hide file tree

Showing 78 changed files with 271 additions and 323 deletions.
diff --git a/package.json b/package.json
@@ -122,7 +122,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-template": "^6.25.0",
     "babel-types": "^6.25.0",
-    "box-react-ui": "^21.1.0",
+    "box-react-ui": "^21.2.0",
     "circular-dependency-plugin": "^4.3.0",
     "classnames": "^2.2.5",
     "color": "^2.0.1",
@@ -185,7 +185,7 @@
     "webpack-dev-server": "^2.9.7"
   },
   "peerDependencies": {
-    "box-react-ui": "^21.1.0",
+    "box-react-ui": "^21.2.0",
     "classnames": "^2.2.5",
     "jsuri": "^1.3.1",
     "lodash": "^4.17.4",

diff --git a/src/components/Breadcrumbs/Breadcrumb.js b/src/components/Breadcrumbs/Breadcrumb.js
@@ -26,7 +26,7 @@ const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: Props) => {
         <span>{name}</span>
     );
     return (
-        <span className='buik-breadcrumb'>
+        <span className='be-breadcrumb'>
             {title}
             {isLast ? null : <BreadcrumbDelimiter delimiter={delimiter} />}
         </span>

diff --git a/src/components/Breadcrumbs/Breadcrumb.scss b/src/components/Breadcrumbs/Breadcrumb.scss
@@ -1,6 +1,6 @@
 @import '../variables';
 
-.buik-breadcrumb {
+.be-breadcrumb {
     align-items: center;
     display: flex;
     min-width: 20px;
@@ -18,7 +18,7 @@
     }
 }
 
-.buik-breadcrumb-seperator {
+.be-breadcrumb-seperator {
     flex-shrink: 0;
     margin: 1px 8px 0 5px;
 }
diff --git a/src/components/Breadcrumbs/BreadcrumbDelimiter.js b/src/components/Breadcrumbs/BreadcrumbDelimiter.js
@@ -15,7 +15,7 @@ type Props = {
 
 const BreadcrumbDelimiter = ({ delimiter }: Props) =>
     delimiter === DELIMITER_CARET ? (
-        <IconChevron className='buik-breadcrumb-seperator' color={COLOR_DOWNTOWN_GREY} direction='right' size='7px' />
+        <IconChevron className='be-breadcrumb-seperator' color={COLOR_DOWNTOWN_GREY} direction='right' size='7px' />
     ) : (
         <span>/</span>
     );

diff --git a/src/components/Breadcrumbs/BreadcrumbDropdown.js b/src/components/Breadcrumbs/BreadcrumbDropdown.js
@@ -21,7 +21,7 @@ type Props = {
 
 const BreadcrumbDropdown = ({ crumbs, onCrumbClick, className = '', rootElement }: Props) => (
     <DropdownMenu constrainToScrollParent bodyElement={rootElement}>
-        <PlainButton type='button' className={`buik-breadcrumbs-drop-down ${className}`}>
+        <PlainButton type='button' className={`be-breadcrumbs-drop-down ${className}`}>
             ···
         </PlainButton>
         <Menu>

diff --git a/src/components/Breadcrumbs/BreadcrumbDropdown.scss b/src/components/Breadcrumbs/BreadcrumbDropdown.scss
@@ -1,10 +1,10 @@
 @import '../variables';
 
-.btn-plain.buik-breadcrumbs-drop-down {
+.btn-plain.be-breadcrumbs-drop-down {
     color: $sevens;
     letter-spacing: 1.5px;
 
-    &.buik-breadcrumbs-condensed {
+    &.be-breadcrumbs-condensed {
         letter-spacing: inherit;
     }
 }
diff --git a/src/components/Breadcrumbs/Breadcrumbs.js b/src/components/Breadcrumbs/Breadcrumbs.js
@@ -53,12 +53,12 @@ function getBreadcrumb(
     if (Array.isArray(crumbs)) {
         const condensed = delimiter !== DELIMITER_CARET;
         return (
-            <span className='buik-breadcrumb-more'>
+            <span className='be-breadcrumb-more'>
                 <BreadcrumbDropdown
                     rootElement={rootElement}
                     onCrumbClick={onCrumbClick}
                     crumbs={crumbs}
-                    className={condensed ? 'buik-breadcrumbs-condensed' : ''}
+                    className={condensed ? 'be-breadcrumbs-condensed' : ''}
                 />
                 <BreadcrumbDelimiter delimiter={condensed ? DELIMITER_SLASH : DELIMITER_CARET} />
             </span>
@@ -98,7 +98,7 @@ const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false,
         length > 2 ? getBreadcrumb(filteredCrumbs[0], false, onCrumbClick, delimiter, rootElement) : null;
 
     return (
-        <div className='buik-breadcrumbs'>
+        <div className='be-breadcrumbs'>
             {isSmall ? null : firstBreadcrumb}
             {isSmall ? null : moreBreadcrumbs}
             {secondLastBreadcrumb}

diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -1,13 +1,13 @@
 @import '../variables';
 
-.buik-breadcrumbs {
+.be-breadcrumbs {
     align-items: center;
     display: flex;
     min-width: 0;
     padding-right: 20px;
 }
 
-.buik-breadcrumb-more {
+.be-breadcrumb-more {
     align-items: center;
     display: flex;
     min-width: 35px;

diff --git a/src/components/Breadcrumbs/InlineBreadcrumbs.js b/src/components/Breadcrumbs/InlineBreadcrumbs.js
@@ -23,7 +23,7 @@ const InlineBreadcrumbs = ({ rootId, item, onItemClick, rootElement }: Props) =>
     const { path_collection }: BoxItem = item;
     const { entries: breadcrumbs = [] } = path_collection || {};
     return (
-        <span className='buik-inline-breadcrumbs'>
+        <span className='be-inline-breadcrumbs'>
             <FormattedMessage {...messages.in} />
             &nbsp;
             <Breadcrumbs

diff --git a/src/components/Breadcrumbs/InlineBreadcrumbs.scss b/src/components/Breadcrumbs/InlineBreadcrumbs.scss
@@ -1,16 +1,16 @@
 @import '../variables';
 
-.buik-inline-breadcrumbs {
+.be-inline-breadcrumbs {
     color: $sevens;
     display: flex;
     font-size: 11px;
     min-width: 0;
 
-    .buik-breadcrumbs {
+    .be-breadcrumbs {
         padding-right: 0;
     }
 
-    .buik-breadcrumb {
+    .be-breadcrumb {
         &:first-child {
             min-width: 43px;
         }
@@ -21,7 +21,7 @@
         }
     }
 
-    .buik-breadcrumb-more {
+    .be-breadcrumb-more {
         min-width: 16px;
     }
 }
diff --git a/src/components/ContentExplorer/ContentExplorer.js b/src/components/ContentExplorer/ContentExplorer.js
@@ -64,6 +64,7 @@ import type {
 } from '../../flowTypes';
 import '../fonts.scss';
 import '../base.scss';
+import '../modal.scss';
 
 type Props = {
     rootFolderId: string,
@@ -1089,7 +1090,7 @@ class ContentExplorer extends Component<Props, State> {
 
         switch (key) {
             case '/':
-                focus(this.rootElement, '.buik-search input[type="search"]', false);
+                focus(this.rootElement, '.be-search input[type="search"]', false);
                 event.preventDefault();
                 break;
             case 'arrowdown':
@@ -1101,7 +1102,7 @@ class ContentExplorer extends Component<Props, State> {
                 break;
             case 'b':
                 if (this.globalModifier) {
-                    focus(this.rootElement, '.buik-breadcrumb button', false);
+                    focus(this.rootElement, '.be-breadcrumb button', false);
                     event.preventDefault();
                 }
                 break;
@@ -1193,7 +1194,7 @@ class ContentExplorer extends Component<Props, State> {
 
         const { id, permissions }: Collection = currentCollection;
         const { can_upload }: BoxItemPermission = permissions || {};
-        const styleClassName = classNames('buik bce', className);
+        const styleClassName = classNames('be bce', className);
         const allowUpload: boolean = canUpload && !!can_upload;
         const allowCreate: boolean = canCreateNewFolder && !!can_upload;
 
@@ -1202,7 +1203,7 @@ class ContentExplorer extends Component<Props, State> {
         return (
             <Internationalize language={language} messages={messages}>
                 <div id={this.id} className={styleClassName} ref={measureRef}>
-                    <div className='buik-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
+                    <div className='be-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
                         <Header
                             view={view}
                             isSmall={isSmall}

diff --git a/src/components/ContentExplorer/DeleteConfirmationDialog.js b/src/components/ContentExplorer/DeleteConfirmationDialog.js
@@ -47,7 +47,7 @@ const DeleteConfirmationDialog = ({
             appElement={appElement}
         >
             <FormattedMessage {...message} values={{ name: item.name }} />
-            <div className='buik-modal-btns'>
+            <div className='be-modal-btns'>
                 <PrimaryButton type='button' onClick={onDelete} isLoading={isLoading}>
                     <FormattedMessage {...messages.delete} />
                 </PrimaryButton>

diff --git a/src/components/ContentExplorer/ItemList.scss b/src/components/ContentExplorer/ItemList.scss
@@ -26,7 +26,7 @@
             margin-left: 8px;
         }
 
-        .buik-is-touch & {
+        .be-is-touch & {
             opacity: 1;
         }
     }

diff --git a/src/components/ContentExplorer/PreviewDialog.js b/src/components/ContentExplorer/PreviewDialog.js
@@ -66,7 +66,7 @@ const PreviewDialog = ({
         <Modal
             isOpen={isOpen}
             parentSelector={() => parentElement}
-            portalClassName={`${CLASS_MODAL} buik-modal-preview`}
+            portalClassName={`${CLASS_MODAL} be-modal-preview`}
             className={CLASS_MODAL_CONTENT_FULL_BLEED}
             overlayClassName={CLASS_MODAL_OVERLAY}
             contentLabel={intl.formatMessage(messages.preview)}

diff --git a/src/components/ContentExplorer/RenameDialog.js b/src/components/ContentExplorer/RenameDialog.js
@@ -103,7 +103,7 @@ const RenameDialog = ({
         <Modal
             isOpen={isOpen}
             parentSelector={() => parentElement}
-            portalClassName={`${CLASS_MODAL} buik-modal-rename`}
+            portalClassName={`${CLASS_MODAL} be-modal-rename`}
             className={CLASS_MODAL_CONTENT}
             overlayClassName={CLASS_MODAL_OVERLAY}
             onRequestClose={onCancel}
@@ -112,14 +112,14 @@ const RenameDialog = ({
         >
             <label>
                 {error ? (
-                    <div className='buik-modal-error'>
+                    <div className='be-modal-error'>
                         <FormattedMessage {...error} values={{ name: nameWithoutExt }} />
                     </div>
                 ) : null}
                 <FormattedMessage tagName='div' {...messages.renameDialogText} values={{ name: nameWithoutExt }} />
                 <input type='text' required ref={ref} defaultValue={nameWithoutExt} onKeyDown={onKeyDown} />
             </label>
-            <div className='buik-modal-btns'>
+            <div className='be-modal-btns'>
                 <PrimaryButton type='button' onClick={rename} isLoading={isLoading}>
                     <FormattedMessage {...messages.rename} />
                 </PrimaryButton>

diff --git a/src/components/ContentExplorer/ShareDialog.js b/src/components/ContentExplorer/ShareDialog.js
@@ -58,14 +58,14 @@ const ShareDialog = ({
         <Modal
             isOpen={isOpen}
             parentSelector={() => parentElement}
-            portalClassName={`${CLASS_MODAL} buik-modal-share`}
+            portalClassName={`${CLASS_MODAL} be-modal-share`}
             className={CLASS_MODAL_CONTENT}
             overlayClassName={CLASS_MODAL_OVERLAY}
             onRequestClose={onCancel}
             contentLabel={intl.formatMessage(messages.shareDialogLabel)}
             appElement={appElement}
         >
-            <div className='buik-modal-content'>
+            <div className='be-modal-content'>
                 <label>
                     <FormattedMessage tagName='div' {...messages.shareDialogText} />
                     <span>
@@ -77,13 +77,13 @@ const ShareDialog = ({
                             }}
                             value={url}
                         />
-                        <PrimaryButton type='button' className='buik-modal-button-copy' onClick={copy} autoFocus>
+                        <PrimaryButton type='button' className='be-modal-button-copy' onClick={copy} autoFocus>
                             <FormattedMessage {...messages.copy} />
                         </PrimaryButton>
                     </span>
                 </label>
             </div>
-            <div className='buik-modal-btns'>
+            <div className='be-modal-btns'>
                 <ShareAccessSelect
                     className='bce-shared-access-select'
                     canSetShareAccess={canSetShareAccess}

diff --git a/src/components/ContentExplorer/ShareDialog.scss b/src/components/ContentExplorer/ShareDialog.scss
@@ -1,11 +1,11 @@
 @import '../variables';
 
-.buik-modal.buik-modal-share {
+.be-modal.be-modal-share {
     .bce-shared-access-select {
         height: 27px;
     }
 
-    .buik-modal-content {
+    .be-modal-content {
         position: relative;
 
         input[type="text"] {
@@ -14,13 +14,13 @@
             text-overflow: ellipsis;
             width: 296px;
 
-            .buik-is-small & {
+            .be-is-small & {
                 width: 237px;
             }
         }
     }
 
-    .buik-modal-button-copy {
+    .be-modal-button-copy {
         border-radius: 0 3px 3px 0;
         font-size: 10px;
         font-weight: bold;
@@ -32,7 +32,7 @@
         text-transform: uppercase;
     }
 
-    .buik-modal-btns {
+    .be-modal-btns {
         align-items: center;
         justify-content: space-between;
     }

diff --git a/src/components/ContentPicker/ContentPicker.js b/src/components/ContentPicker/ContentPicker.js
@@ -58,6 +58,7 @@ import type {
 } from '../../flowTypes';
 import '../fonts.scss';
 import '../base.scss';
+import '../modal.scss';
 
 type BoxItemMap = { [string]: BoxItem };
 
@@ -825,7 +826,7 @@ class ContentPicker extends Component<Props, State> {
 
         switch (key) {
             case '/':
-                focus(this.rootElement, '.buik-search input[type="search"]', false);
+                focus(this.rootElement, '.be-search input[type="search"]', false);
                 event.preventDefault();
                 break;
             case 'arrowdown':
@@ -837,7 +838,7 @@ class ContentPicker extends Component<Props, State> {
                 break;
             case 'b':
                 if (this.globalModifier) {
-                    focus(this.rootElement, '.buik-breadcrumb button', false);
+                    focus(this.rootElement, '.be-breadcrumb button', false);
                     event.preventDefault();
                 }
                 break;
@@ -951,14 +952,14 @@ class ContentPicker extends Component<Props, State> {
         const hasHitSelectionLimit: boolean = selectedCount === maxSelectable && maxSelectable !== 1;
         const allowUpload: boolean = canUpload && !!can_upload;
         const allowCreate: boolean = canCreateNewFolder && !!can_upload;
-        const styleClassName = classNames('buik bcp', className);
+        const styleClassName = classNames('be bcp', className);
 
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
             <Internationalize language={language} messages={messages}>
                 <div id={this.id} className={styleClassName} ref={measureRef}>
-                    <div className='buik-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
+                    <div className='be-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
                         <Header
                             view={view}
                             isSmall={isSmall}

diff --git a/src/components/ContentPicker/Footer.scss b/src/components/ContentPicker/Footer.scss
@@ -14,7 +14,7 @@
     }
 
     .bcp-selected-max {
-        animation: buik_pulse .5s 2 linear;
+        animation: be_pulse .5s 2 linear;
         color: $red;
         display: inline-block;
         font-size: 11px;
@@ -25,7 +25,7 @@
     }
 }
 
-@keyframes buik_pulse {
+@keyframes be_pulse {
     0%,
     100% {
         transform: scale(1);