SegmentSelect: Migration from legacy select to default Select component (#33344)

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}