Remove the fixed widths and make it possible to pass it in as a prop instead #13425

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

@@ -8,10 +8,10 @@ interface ExtendedOptionProps extends OptionProps<any> {
 }
 }
 
 
 export const Option = (props: ExtendedOptionProps) => {
 export const Option = (props: ExtendedOptionProps) => {
-  const { children, isSelected, data } = props;
+  const { children, isSelected, data, className } = props;
   return (
   return (
     <components.Option {...props}>
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link width-19`}>
+      <div className={`description-picker-option__button btn btn-link ${className}`}>
         {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
         {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
         <div className="gf-form">{children}</div>
         <div className="gf-form">{children}</div>
         <div className="gf-form">
         <div className="gf-form">

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

@@ -7,10 +7,10 @@ export interface Props {
 }
 }
 
 
 export const PickerOption = (props: OptionProps<any>) => {
 export const PickerOption = (props: OptionProps<any>) => {
-  const { children } = props;
+  const { children, className } = props;
   return (
   return (
     <components.Option {...props}>
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link width-19`}>{children}</div>
+      <div className={`description-picker-option__button btn btn-link ${className}`}>{children}</div>
     </components.Option>
     </components.Option>
   );
   );
 };
 };

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

@@ -8,10 +8,10 @@ interface ExtendedOptionProps extends OptionProps<any> {
 }
 }
 
 
 export const PickerOption = (props: ExtendedOptionProps) => {
 export const PickerOption = (props: ExtendedOptionProps) => {
-  const { children, data } = props;
+  const { children, data, className } = props;
   return (
   return (
     <components.Option {...props}>
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link width-19`}>
+      <div className={`description-picker-option__button btn btn-link ${className}`}>
         {data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
         {data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
         {children}
         {children}
       </div>
       </div>

public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PickerOption renders correctly 1`] = `
 exports[`PickerOption renders correctly 1`] = `
 <div>
 <div>
   <div
   <div
-    className="description-picker-option__button btn btn-link width-19"
+    className="description-picker-option__button btn btn-link"
   >
   >
     <img
     <img
       alt="User picker label"
       alt="User picker label"