From 50018f37f2fca9f074fd16258d5801509011b3b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Sat, 24 Apr 2021 14:26:58 +0200
Subject: [PATCH] SegmentSelect: Migration from legacy select to default Select
 component (#33344)

---
 .../src/components/Segment/SegmentSelect.tsx  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index 560fde7be52..e3efc8d15f1 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
@@ -1,9 +1,10 @@
 import React, { HTMLProps, useRef } from 'react';
-import { css, cx } from '@emotion/css';
 import useClickAway from 'react-use/lib/useClickAway';
 import { SelectableValue } from '@grafana/data';
-import { Select } from '../Forms/Legacy/Select/Select';
+import { Select } from '../Select/Select';
+import { useTheme2 } from '../../themes/ThemeContext';
 
+/** @internal */
 export interface Props<T> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: SelectableValue<T>;
   options: Array<SelectableValue<T>>;
@@ -14,17 +15,19 @@ export interface Props<T> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onC
   allowCustomValue?: boolean;
 }
 
+/** @internal */
 export function SegmentSelect<T>({
   value,
   options = [],
   onChange,
   onClickOutside,
-  width,
+  width: widthPixels,
   noOptionsMessage = '',
   allowCustomValue = false,
   ...rest
 }: React.PropsWithChildren<Props<T>>) {
   const ref = useRef<HTMLDivElement>(null);
+  const theme = useTheme2();
 
   useClickAway(ref, () => {
     if (ref && ref.current) {
@@ -39,15 +42,13 @@ export function SegmentSelect<T>({
     }
   });
 
+  let width = widthPixels > 0 ? widthPixels / theme.spacing.gridSize : undefined;
+
   return (
     <div {...rest} ref={ref}>
       <Select
-        className={cx(
-          css`
-            width: ${width > 120 ? width : 120}px;
-          `
-        )}
-        noOptionsMessage={() => noOptionsMessage}
+        width={width}
+        noOptionsMessage={noOptionsMessage}
         placeholder=""
         autoFocus={true}
         isOpen={true}