Rename css class "gf-form-select2" to "gf-form-select-box" #13425

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>
 

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>

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>

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={{

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>
   );
 };

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}

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}

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>

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>

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,

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}

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;
   }
 }