started on options and groups

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import DescriptionOption from './DescriptionOption';
 import kbn from '../../utils/kbn';
 import kbn from '../../utils/kbn';
 
 
 interface Props {
 interface Props {
-  width: number;
-  className?: string;
   onSelected: (item: any) => {} | void;
   onSelected: (item: any) => {} | void;
-  placeholder?: string;
 }
 }
 
 
 export class UnitPicker extends PureComponent<Props> {
 export class UnitPicker extends PureComponent<Props> {
   formatGroupLabel = data => {
   formatGroupLabel = data => {
-    console.log('format', data);
-
     const groupStyles = {
     const groupStyles = {
+      margin: '0 15px',
+      fontSize: '16px',
+      fontWeight: 700,
       display: 'flex',
       display: 'flex',
       alignItems: 'center',
       alignItems: 'center',
       justifyContent: 'space-between',
       justifyContent: 'space-between',
-    };
+    } as React.CSSProperties;
 
 
     const groupBadgeStyles = {
     const groupBadgeStyles = {
       backgroundColor: '#EBECF0',
       backgroundColor: '#EBECF0',
@@ -37,29 +34,39 @@ export class UnitPicker extends PureComponent<Props> {
     return (
     return (
       <div style={groupStyles}>
       <div style={groupStyles}>
         <span>{data.label}</span>
         <span>{data.label}</span>
-        <span style={groupBadgeStyles}>{data.submenu.length}</span>
+        <span style={groupBadgeStyles}>{data.options.length}</span>
       </div>
       </div>
     );
     );
   };
   };
 
 
-  render() {
-    const { className, onSelected, placeholder, width } = this.props;
+  renderOption = props => {
+    return (
+      <components.Option {...props}>
+        <div className="description-picker-option__button btn btn-link">
+          <div className="gf-form">{props.children}</div>
+        </div>
+      </components.Option>
+    );
+  };
 
 
+  renderGroup = props => {
+    return <components.Group {...props} />;
+  };
+
+  render() {
     const options = kbn.getUnitFormats();
     const options = kbn.getUnitFormats();
 
 
     return (
     return (
       <Select
       <Select
         classNamePrefix="gf-form-select-box"
         classNamePrefix="gf-form-select-box"
-        className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-        components={{
-          Option: DescriptionOption,
-        }}
-        getOptionLabel={i => i.text}
-        getOptionValue={i => i.value}
+        className="width-20 gf-form-input"
         isSearchable={false}
         isSearchable={false}
-        onChange={onSelected}
         options={options}
         options={options}
-        placeholder={placeholder || 'Choose'}
+        placeholder="Choose"
+        components={{
+          Option: this.renderOption,
+          Group: this.renderGroup,
+        }}
         styles={ResetStyles}
         styles={ResetStyles}
         formatGroupLabel={this.formatGroupLabel}
         formatGroupLabel={this.formatGroupLabel}
       />
       />

public/app/plugins/panel/gauge/module.tsx

@@ -27,7 +27,7 @@ export class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
       <div>
       <div>
         <div className="section gf-form-group">
         <div className="section gf-form-group">
           <h5 className="page-heading">Units</h5>
           <h5 className="page-heading">Units</h5>
-          <UnitPicker width={20} onSelected={() => {}} />
+          <UnitPicker onSelected={() => {}} />
         </div>
         </div>
       </div>
       </div>
     );
     );