From ffae3e7a582a3c5bb408ffd0b3f0c76f7680dd5a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 10 Oct 2018 13:30:09 +0200
Subject: [PATCH] Rename css class "gf-form-select2" to "gf-form-select-box"
 #13425

---
 .../PermissionList/AddPermission.tsx          |  2 +-
 .../DisabledPermissionListItem.tsx            |  2 +-
 .../PermissionList/PermissionListItem.tsx     |  2 +-
 .../components/Picker/DescriptionPicker.tsx   |  2 +-
 .../components/Picker/IndicatorsContainer.tsx |  4 ++-
 .../app/core/components/Picker/TeamPicker.tsx |  2 +-
 .../app/core/components/Picker/UserPicker.tsx |  2 +-
 .../__snapshots__/TeamPicker.test.tsx.snap    | 12 +++----
 .../__snapshots__/UserPicker.test.tsx.snap    | 12 +++----
 .../core/components/TagFilter/TagFilter.tsx   |  2 +-
 public/app/features/explore/Explore.tsx       |  2 +-
 public/sass/components/_form_select_box.scss  | 36 +++++++++----------
 12 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index daee18ea649..a60a7dd4af6 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -121,7 +121,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
                 optionsWithDesc={dashboardPermissionLevels}
                 onSelected={this.onPermissionChanged}
                 disabled={false}
-                className={'gf-form-select2__control--menu-right'}
+                className={'gf-form-select-box__control--menu-right'}
               />
             </div>
 
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index 4b9a7830775..77671396505 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -27,7 +27,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
               optionsWithDesc={dashboardPermissionLevels}
               onSelected={() => {}}
               disabled={true}
-              className={'gf-form-select2__control--menu-right'}
+              className={'gf-form-select-box__control--menu-right'}
             />
           </div>
         </td>
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index c76f3ac1848..47ab62416ae 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -78,7 +78,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
               optionsWithDesc={dashboardPermissionLevels}
               onSelected={this.onPermissionChanged}
               disabled={item.inherited}
-              className={'gf-form-select2__control--menu-right'}
+              className={'gf-form-select-box__control--menu-right'}
             />
           </div>
         </td>
diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
index cd9b4c2acbf..2c3611cca81 100644
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ b/public/app/core/components/Picker/DescriptionPicker.tsx
@@ -29,7 +29,7 @@ class DescriptionPicker extends Component<Props, any> {
       <div className="permissions-picker">
         <Select
           placeholder="Choose"
-          classNamePrefix={`gf-form-select2`}
+          classNamePrefix={`gf-form-select-box`}
           className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
           options={optionsWithDesc}
           components={{
diff --git a/public/app/core/components/Picker/IndicatorsContainer.tsx b/public/app/core/components/Picker/IndicatorsContainer.tsx
index 6659d804f19..a0998fe95b8 100644
--- a/public/app/core/components/Picker/IndicatorsContainer.tsx
+++ b/public/app/core/components/Picker/IndicatorsContainer.tsx
@@ -5,7 +5,9 @@ export const IndicatorsContainer = props => {
   const isOpen = props.selectProps.menuIsOpen;
   return (
     <components.IndicatorsContainer {...props}>
-      <span className={`gf-form-select2__select-arrow ${isOpen ? `gf-form-select2__select-arrow--reversed` : ''}`} />
+      <span
+        className={`gf-form-select-box__select-arrow ${isOpen ? `gf-form-select-box__select-arrow--reversed` : ''}`}
+      />
     </components.IndicatorsContainer>
   );
 };
diff --git a/public/app/core/components/Picker/TeamPicker.tsx b/public/app/core/components/Picker/TeamPicker.tsx
index 002ef9242a9..f44717acd28 100644
--- a/public/app/core/components/Picker/TeamPicker.tsx
+++ b/public/app/core/components/Picker/TeamPicker.tsx
@@ -62,7 +62,7 @@ export class TeamPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select2`}
+          classNamePrefix={`gf-form-select-box`}
           isMulti={false}
           isLoading={isLoading}
           defaultOptions={true}
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Picker/UserPicker.tsx
index 4a7cde91ec2..ee362c7799d 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Picker/UserPicker.tsx
@@ -57,7 +57,7 @@ export class UserPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select2`}
+          classNamePrefix={`gf-form-select-box`}
           isMulti={false}
           isLoading={isLoading}
           defaultOptions={true}
diff --git a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
index 570d6001a8c..011811f21ad 100644
--- a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
+++ b/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
@@ -9,15 +9,15 @@ exports[`TeamPicker renders correctly 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className="css-0 gf-form-select2__control"
+      className="css-0 gf-form-select-box__control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
       <div
-        className="css-0 gf-form-select2__value-container"
+        className="css-0 gf-form-select-box__value-container"
       >
         <div
-          className="css-0 gf-form-select2__placeholder"
+          className="css-0 gf-form-select-box__placeholder"
         >
           Select a team
         </div>
@@ -25,7 +25,7 @@ exports[`TeamPicker renders correctly 1`] = `
           className="css-0"
         >
           <div
-            className="gf-form-select2__input"
+            className="gf-form-select-box__input"
             style={
               Object {
                 "display": "inline-block",
@@ -108,10 +108,10 @@ exports[`TeamPicker renders correctly 1`] = `
         </div>
       </div>
       <div
-        className="css-0 gf-form-select2__indicators"
+        className="css-0 gf-form-select-box__indicators"
       >
         <span
-          className="gf-form-select2__select-arrow "
+          className="gf-form-select-box__select-arrow "
         />
       </div>
     </div>
diff --git a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
index 7b4c869c1b9..3e23bd435b1 100644
--- a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
+++ b/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
@@ -9,15 +9,15 @@ exports[`UserPicker renders correctly 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className="css-0 gf-form-select2__control"
+      className="css-0 gf-form-select-box__control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
       <div
-        className="css-0 gf-form-select2__value-container"
+        className="css-0 gf-form-select-box__value-container"
       >
         <div
-          className="css-0 gf-form-select2__placeholder"
+          className="css-0 gf-form-select-box__placeholder"
         >
           Select user
         </div>
@@ -25,7 +25,7 @@ exports[`UserPicker renders correctly 1`] = `
           className="css-0"
         >
           <div
-            className="gf-form-select2__input"
+            className="gf-form-select-box__input"
             style={
               Object {
                 "display": "inline-block",
@@ -108,10 +108,10 @@ exports[`UserPicker renders correctly 1`] = `
         </div>
       </div>
       <div
-        className="css-0 gf-form-select2__indicators"
+        className="css-0 gf-form-select-box__indicators"
       >
         <span
-          className="gf-form-select2__select-arrow "
+          className="gf-form-select-box__select-arrow "
         />
       </div>
     </div>
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 967e0312704..14b6ef4932b 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -39,7 +39,7 @@ export class TagFilter extends React.Component<Props, any> {
 
   render() {
     const selectOptions = {
-      classNamePrefix: 'gf-form-select2',
+      classNamePrefix: 'gf-form-select-box',
       isMulti: true,
       defaultOptions: true,
       loadOptions: this.searchTags,
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index bdd5ea97e72..e171a84d7fd 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -544,7 +544,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           {!datasourceMissing ? (
             <div className="navbar-buttons">
               <Select
-                classNamePrefix={`gf-form-select2`}
+                classNamePrefix={`gf-form-select-box`}
                 isMulti={false}
                 isLoading={datasourceLoading}
                 isClearable={false}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 97d0155430f..4019a4e0e30 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -15,7 +15,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   @include box-shadow($shadow);
 }
 
-.gf-form-select2__control {
+.gf-form-select-box__control {
   @include select-control();
   border: 1px solid $input-border-color;
   color: $input-color;
@@ -29,45 +29,45 @@ $select-input-bg-disabled: $input-bg-disabled;
   position: relative;
 }
 
-.gf-form-select2__control--is-focused {
+.gf-form-select-box__control--is-focused {
   background-color: $input-bg;
   @include select-control-focus();
 }
 
-.gf-form-select2__control--is-disabled {
+.gf-form-select-box__control--is-disabled {
   background-color: $select-input-bg-disabled;
 }
 
-.gf-form-select2__control--menu-right {
-  .gf-form-select2__menu {
+.gf-form-select-box__control--menu-right {
+  .gf-form-select-box__menu {
     right: 0;
     left: unset;
   }
 }
 
-.gf-form-select2__input {
+.gf-form-select-box__input {
   padding-left: 5px;
 }
 
-.gf-form-select2__menu {
+.gf-form-select-box__menu {
   background: $select-input-bg-disabled;
   position: absolute;
   z-index: 2;
 }
 
-.tag-filter .gf-form-select2__menu {
+.tag-filter .gf-form-select-box__menu {
   width: 100%;
 }
 
-.gf-form-select2__multi-value {
+.gf-form-select-box__multi-value {
   display: inline;
 }
 
-.gf-form-select2__option {
+.gf-form-select-box__option {
   border-left: 2px solid transparent;
 
-  &.gf-form-select2__option--is-focused,
-  &.gf-form-select2__option--is-selected {
+  &.gf-form-select-box__option--is-focused,
+  &.gf-form-select-box__option--is-selected {
     background-color: $dropdownLinkBackgroundHover;
     color: $dropdownLinkColorHover;
     @include left-brand-border-gradient();
@@ -77,11 +77,11 @@ $select-input-bg-disabled: $input-bg-disabled;
   }
 }
 
-.gf-form-select2__control--is-focused .gf-form-select2__placeholder {
+.gf-form-select-box__control--is-focused .gf-form-select-box__placeholder {
   display: none;
 }
 
-.gf-form-select2__value-container {
+.gf-form-select-box__value-container {
   display: table-cell;
   padding: 8px 10px;
   > div {
@@ -89,14 +89,14 @@ $select-input-bg-disabled: $input-bg-disabled;
   }
 }
 
-.gf-form-select2__indicators {
+.gf-form-select-box__indicators {
   display: table-cell;
   vertical-align: middle;
   padding-right: 5px;
   width: 25px;
 }
 
-.gf-form-select2__select-arrow {
+.gf-form-select-box__select-arrow {
   border-color: $input-color-select-arrow transparent transparent;
   border-style: solid;
   border-width: 5px 5px 2.5px;
@@ -105,7 +105,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   width: 0;
   position: relative;
 
-  &.gf-form-select2__select-arrow--reversed {
+  &.gf-form-select-box__select-arrow--reversed {
     border-color: transparent transparent $input-color-select-arrow;
     top: -2px;
     border-width: 0 5px 5px;
@@ -118,7 +118,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 }
 
 .gf-form--has-input-icon {
-  .gf-form-select2__value-container {
+  .gf-form-select-box__value-container {
     padding-left: 30px;
   }
 }