chore(compass): remove global tag selector styles from bootstrap, update styles to account (#2907)

Anemy · web-flow · commit d21da720c2ef · 2022-03-22T13:08:30.000-04:00
diff --git a/packages/compass-aggregations/src/components/settings/settings.jsx b/packages/compass-aggregations/src/components/settings/settings.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Label, Description } from '@mongodb-js/compass-components';
 
 import { TextButton } from 'hadron-react-buttons';
 import {
@@ -76,11 +77,11 @@ class Settings extends PureComponent {
       return (
         <div className={classnames(styles['input-group'])}>
           <div className={classnames(styles['input-meta'])}>
-            <label htmlFor='aggregation-limit'>Limit</label>
-            <p id="aggregation-limit-description">
+            <Label htmlFor='aggregation-limit'>Limit</Label>
+            <Description id="aggregation-limit-description">
               Limits input documents before $group, $bucket, and $bucketAuto
               stages. Set a limit to make the collection run faster.
-            </p>
+            </Description>
           </div>
           <div className={classnames(styles['input-control'])}>
             <input
@@ -112,11 +113,11 @@ class Settings extends PureComponent {
       <div className={classnames(styles.body)}>
         <div className={classnames(styles['input-group'])}>
           <div className={classnames(styles['input-meta'])}>
-            <label htmlFor="aggregation-comment-mode">Comment Mode</label>
-            <p id="aggregation-comment-mode-description">
+            <Label htmlFor="aggregation-comment-mode">Comment Mode</Label>
+            <Description id="aggregation-comment-mode-description">
               When enabled, adds helper comments to each stage. Only applies to
               new stages.
-            </p>
+            </Description>
           </div>
           <div className={classnames(styles['input-control'])}>
             <input
@@ -130,8 +131,8 @@ class Settings extends PureComponent {
         </div>
         <div className={classnames(styles['input-group'])}>
           <div className={classnames(styles['input-meta'])}>
-            <label htmlFor="aggregation-sample-size">Number of Preview Documents</label>
-            <p id="aggregation-sample-size-description">Specify the number of documents to show in the preview.</p>
+            <Label htmlFor="aggregation-sample-size">Number of Preview Documents</Label>
+            <Description id="aggregation-sample-size-description">Specify the number of documents to show in the preview.</Description>
           </div>
           <div className={classnames(styles['input-control'])}>
             <input
@@ -147,11 +148,11 @@ class Settings extends PureComponent {
         </div>
         <div className={classnames(styles['input-group'])}>
           <div className={classnames(styles['input-meta'])}>
-            <label htmlFor="aggregation-max-time-ms">Max Time</label>
-            <p id="aggregation-max-time-ms-description">
+            <Label htmlFor="aggregation-max-time-ms">Max Time</Label>
+            <Description id="aggregation-max-time-ms-description">
               Specifies a cumulative time limit in milliseconds for processing
               operations on a cursor. Max timeout prevents long hang times.
-            </p>
+            </Description>
           </div>
           <div className={classnames(styles['input-control'])}>
             <input
diff --git a/packages/compass-aggregations/src/components/settings/settings.module.less b/packages/compass-aggregations/src/components/settings/settings.module.less
@@ -48,8 +48,8 @@
 }
 
 .input-group {
-  margin: 10px;
-  padding: 4px 10px 4px 10px;
+  margin: 8px;
+  padding: 8px 16px;
   background-color: #FFFFFF;
   display: flex;
   align-items: center;
@@ -83,12 +83,7 @@
 .input-meta {
   flex-grow: 1;
 
-  label {
-    font-size: 13px;
-    color: #464C4F;
-  }
   p {
-    font-size: 12px;
-    color: #777A7F;
+    margin-top: 8px;
   }
 }
diff --git a/packages/compass-collection/src/components/collection-header/collection-header.module.less b/packages/compass-collection/src/components/collection-header/collection-header.module.less
@@ -27,6 +27,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
+      text-decoration: none;
+      &:hover,&:focus {
+        text-decoration: underline;
+      }
     }
 
     &-collection {
diff --git a/packages/compass-components/src/components/resize-handle.tsx b/packages/compass-components/src/components/resize-handle.tsx
@@ -45,6 +45,7 @@ const verticalResizerStyle = css({
 });
 
 const horizontalResizerStyle = css({
+  width: '100%',
   height: '4px !important',
   top: '-2px',
   right: 0,
diff --git a/packages/compass-import-export/src/components/export-modal/export-modal.module.less b/packages/compass-import-export/src/components/export-modal/export-modal.module.less
@@ -1,6 +1,11 @@
 @import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 .export-modal {
+  &-radio {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
   &-radio input[type="radio"] {
     margin-right: 10px;
   }
diff --git a/packages/compass-import-export/src/components/export-select-fields/export-select-fields.module.less b/packages/compass-import-export/src/components/export-select-fields/export-select-fields.module.less
@@ -78,6 +78,7 @@
     th, td {
       padding: 3px 5px !important;
       border: 1px solid @gray6;
+      text-align: left;
     }
   }
 }
diff --git a/packages/compass-import-export/src/components/export-select-output/export-select-output.jsx b/packages/compass-import-export/src/components/export-select-output/export-select-output.jsx
@@ -7,13 +7,11 @@ import { FILETYPE } from '../../constants/export-step';
 import styles from './export-select-output.module.less';
 import React, { PureComponent } from 'react';
 import createStyler from '../../utils/styler.js';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import {
   FormGroup,
   InputGroup,
-  FormControl,
-  ControlLabel
+  FormControl
 } from 'react-bootstrap';
 import {
   STARTED,
@@ -23,6 +21,7 @@ import {
   UNSPECIFIED,
   COMPLETED_WITH_ERRORS
 } from '../../constants/process-status';
+import { Label } from '@mongodb-js/compass-components';
 
 const style = createStyler(styles, 'export-select-output');
 
@@ -95,14 +94,17 @@ class ExportSelectOutput extends PureComponent {
             label="Select Export File Type"
             onSelected={this.props.selectExportFileType}/>
           <FormGroup controlId="export-file">
-            <ControlLabel>Output</ControlLabel>
+            <Label
+              htmlFor="select-export-file-output"
+            >Output</Label>
             <InputGroup bsClass={style('browse-group')}>
               <FormControl type="text" value={this.props.fileName} readOnly />
               <IconTextButton
                 text="Browse"
+                id="select-export-file-output"
                 iconClassName="fa fa-folder-open-o"
                 clickHandler={this.handleChooseFile}
-                className={classnames('btn btn-default btn-sm')}/>
+                className={'btn btn-default btn-sm'}/>
             </InputGroup>
           </FormGroup>
         </form>
diff --git a/packages/compass-import-export/src/components/select-file-type/select-file-type.jsx b/packages/compass-import-export/src/components/select-file-type/select-file-type.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, ControlLabel } from 'react-bootstrap';
+import { Button, FormGroup } from 'react-bootstrap';
+import { Label } from '@mongodb-js/compass-components';
 
 import classnames from 'classnames';
 import FILE_TYPES from '../../constants/file-types';
@@ -19,7 +20,7 @@ class SelectFileType extends PureComponent {
     const { fileType, onSelected, label } = this.props;
     return (
       <FormGroup>
-        <ControlLabel>{label}</ControlLabel>
+        <Label>{label}</Label>
         <div className={style()}>
           <Button
             data-test-id="select-file-type-json"
diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.module.less b/packages/compass-indexes/src/components/create-index-modal/create-index-modal.module.less
@@ -46,15 +46,15 @@
 
   &-options {
     &-checkbox {
-      margin-top: 0px;
+      margin-top: 8px;
       cursor: pointer;
       display: inline-block;
       font-weight: normal;
       margin-bottom: 4px;
       margin-left: 10px;
     }
     &-param {
-      margin-top: 0px;
+      margin-top: 8px;
       cursor: pointer;
       display: inline-block;
       font-weight: normal;
diff --git a/packages/compass-indexes/src/components/index-header/index-header.module.less b/packages/compass-indexes/src/components/index-header/index-header.module.less
@@ -1,4 +1,6 @@
 .index-header {
+  text-align: left;
+
   th {
     padding: 12px 24px;
   }
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
@@ -58,6 +58,7 @@
     transition: all 150ms ease;
 
     &:hover {
+      cursor: pointer;
       background: @compass-sidebar-hover-background-color;
       color: @pw;
     }
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.module.less b/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
@@ -127,6 +127,7 @@
     transition: all 180ms ease;
     text-align: center;
     padding: 0;
+    cursor: pointer;
 
     .plus-button {
       opacity: 0;
diff --git a/packages/compass/src/app/styles/deprecated-bootstrap-styles/dropdowns.less b/packages/compass/src/app/styles/deprecated-bootstrap-styles/dropdowns.less
@@ -26,6 +26,7 @@
   &-menu {
     > li > a {
       padding: 3px 8px;
+      text-decoration: none;
 
       &:focus, &:hover, &:active {
         background: #E7EEEC;
diff --git a/packages/compass/src/app/styles/deprecated-bootstrap-styles/globals.less b/packages/compass/src/app/styles/deprecated-bootstrap-styles/globals.less
@@ -5,86 +5,6 @@
   line-height: 1.428571429; // 20/14
   font-size: 14px;
 
-  p {
-    margin: 1em 0;
-  }
-  a {
-    color: #337ab7;
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus {
-    color: #23527c;
-    text-decoration: underline;
-  }
-  a:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-  label {
-    display: inline-block;
-    max-width: 100%;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-  th {
-    font-weight: bold;
-    text-align: left;
-  }
-  tr {
-    border-spacing: 0 3px;
-  }
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    min-width: 0;
-  }
-  textarea {
-    overflow: auto;
-  }
-  button,
-  html input[type="button"],
-  input[type="reset"],
-  input[type="submit"] {
-    -webkit-appearance: button;
-    cursor: pointer;
-  }
-  button[disabled],
-  html input[disabled] {
-    cursor: default;
-  }
-  input[type="radio"],
-  input[type="checkbox"] {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 4px 0 0;
-    margin-top: 1px \\9;
-    line-height: normal;
-  }
-  input[type="file"] {
-    display: block;
-  }
-  input[type="range"] {
-    display: block;
-    width: 100%;
-  }
-  select[multiple],
-  select[size] {
-    height: auto;
-  }
-  input[type="file"]:focus,
-  input[type="radio"]:focus,
-  input[type="checkbox"]:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
   code,
   pre {
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,7 @@`
`78`	`78`	`th, td {`
`79`	`79`	`padding: 3px 5px !important;`
`80`	`80`	`border: 1px solid @gray6;`
	`81`	`+ text-align: left;`
`81`	`82`	`}`
`82`	`83`	`}`
`83`	`84`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`.index-header {`
	`2`	`+ text-align: left;`
	`3`	`+`
`2`	`4`	`th {`
`3`	`5`	`padding: 12px 24px;`
`4`	`6`	`}`