ux: Add an optional className to the UserPicker and TeamPicker #10676

public/app/core/components/Permissions/AddPermissions.tsx

@@ -103,13 +103,23 @@ class AddPermissions extends Component<IProps, any> {
 
 
             {newItem.type === 'User' ? (
             {newItem.type === 'User' ? (
               <div className="gf-form">
               <div className="gf-form">
-                <UserPicker backendSrv={backendSrv} handlePicked={this.userPicked} value={newItem.userId} />
+                <UserPicker
+                  backendSrv={backendSrv}
+                  handlePicked={this.userPicked}
+                  value={newItem.userId}
+                  className="width-8"
+                />
               </div>
               </div>
             ) : null}
             ) : null}
 
 
             {newItem.type === 'Group' ? (
             {newItem.type === 'Group' ? (
               <div className="gf-form">
               <div className="gf-form">
-                <TeamPicker backendSrv={backendSrv} handlePicked={this.teamPicked} value={newItem.teamId} />
+                <TeamPicker
+                  backendSrv={backendSrv}
+                  handlePicked={this.teamPicked}
+                  value={newItem.teamId}
+                  className="width-8"
+                />
               </div>
               </div>
             ) : null}
             ) : null}
 
 

public/app/core/components/Picker/TeamPicker.tsx

@@ -10,6 +10,7 @@ export interface IProps {
   toggleLoading: any;
   toggleLoading: any;
   handlePicked: (user) => void;
   handlePicked: (user) => void;
   value?: string;
   value?: string;
+  className?: string;
 }
 }
 
 
 export interface Team {
 export interface Team {
@@ -55,7 +56,7 @@ class TeamPicker extends Component<IProps, any> {
 
 
   render() {
   render() {
     const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
     const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
-    const { isLoading, handlePicked, value } = this.props;
+    const { isLoading, handlePicked, value, className } = this.props;
 
 
     return (
     return (
       <div className="user-picker">
       <div className="user-picker">
@@ -69,7 +70,7 @@ class TeamPicker extends Component<IProps, any> {
           loadingPlaceholder="Loading..."
           loadingPlaceholder="Loading..."
           noResultsText="No teams found"
           noResultsText="No teams found"
           onChange={handlePicked}
           onChange={handlePicked}
-          className="width-12 gf-form-input gf-form-input--form-dropdown"
+          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
           optionComponent={PickerOption}
           optionComponent={PickerOption}
           placeholder="Choose"
           placeholder="Choose"
           value={value}
           value={value}

public/app/core/components/Picker/UserPicker.tsx

@@ -10,6 +10,7 @@ export interface IProps {
   toggleLoading: any;
   toggleLoading: any;
   handlePicked: (user) => void;
   handlePicked: (user) => void;
   value?: string;
   value?: string;
+  className?: string;
 }
 }
 
 
 export interface User {
 export interface User {
@@ -54,7 +55,7 @@ class UserPicker extends Component<IProps, any> {
 
 
   render() {
   render() {
     const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
     const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
-    const { isLoading, handlePicked, value } = this.props;
+    const { isLoading, handlePicked, value, className } = this.props;
     return (
     return (
       <div className="user-picker">
       <div className="user-picker">
         <AsyncComponent
         <AsyncComponent
@@ -67,7 +68,7 @@ class UserPicker extends Component<IProps, any> {
           loadingPlaceholder="Loading..."
           loadingPlaceholder="Loading..."
           noResultsText="No users found"
           noResultsText="No users found"
           onChange={handlePicked}
           onChange={handlePicked}
-          className="width-12 gf-form-input gf-form-input--form-dropdown"
+          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
           optionComponent={PickerOption}
           optionComponent={PickerOption}
           placeholder="Choose"
           placeholder="Choose"
           value={value}
           value={value}

public/app/core/components/Picker/withPicker.tsx

@@ -4,6 +4,7 @@ export interface IProps {
   backendSrv: any;
   backendSrv: any;
   handlePicked: (data) => void;
   handlePicked: (data) => void;
   value?: string;
   value?: string;
+  className?: string;
 }
 }
 
 
 export default function withPicker(WrappedComponent) {
 export default function withPicker(WrappedComponent) {