Select: Make portalling the menu opt-in, but opt-in *everywhere* (#37501)

* Select: Don't portal by default

* Select: Portal all the Selects

* Fix indendentation in this comment

* Select: Remove @example docs until formatting is correct

* Docs: Add some documentation for the Select changes

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Select/types.ts

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Docs: Variants instead of varients

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

public/app/features/expressions/ExpressionQueryEditor.tsx

@@ -45,7 +45,13 @@ export class ExpressionQueryEditor extends PureComponent<Props> {
     return (
       <div>
         <InlineField label="Operation" labelWidth={labelWidth}>
-          <Select options={gelTypes} value={selected} onChange={this.onSelectExpressionType} width={25} />
+          <Select
+            menuShouldPortal
+            options={gelTypes}
+            value={selected}
+            onChange={this.onSelectExpressionType}
+            width={25}
+          />
         </InlineField>
         {this.renderExpressionType()}
       </div>

public/app/features/expressions/components/Condition.tsx

@@ -79,6 +79,7 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
         />
       )}
       <Select
+        menuShouldPortal
         options={reducerFunctions}
         onChange={onReducerFunctionChange}
         width={20}
@@ -86,6 +87,7 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
       />
       <div className={styles.button}>OF</div>
       <Select
+        menuShouldPortal
         onChange={onRefIdChange}
         options={refIds}
         width={15}

public/app/features/expressions/components/Reduce.tsx

@@ -24,10 +24,10 @@ export const Reduce: FC<Props> = ({ labelWidth, onChange, refIds, query }) => {
   return (
     <InlineFieldRow>
       <InlineField label="Function" labelWidth={labelWidth}>
-        <Select options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
+        <Select menuShouldPortal options={reducerTypes} value={reducer} onChange={onSelectReducer} width={25} />
       </InlineField>
       <InlineField label="Input" labelWidth={labelWidth}>
-        <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
+        <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
       </InlineField>
     </InlineFieldRow>
   );

public/app/features/expressions/components/Resample.tsx

@@ -34,7 +34,7 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
     <>
       <InlineFieldRow>
         <InlineField label="Input" labelWidth={labelWidth}>
-          <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
+          <Select menuShouldPortal onChange={onRefIdChange} options={refIds} value={query.expression} width={20} />
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
@@ -42,10 +42,22 @@ export const Resample: FC<Props> = ({ labelWidth, onChange, refIds, query }) =>
           <Input onChange={onWindowChange} value={query.window} width={15} />
         </InlineField>
         <InlineField label="Downsample">
-          <Select options={downsamplingTypes} value={downsampler} onChange={onSelectDownsampler} width={25} />
+          <Select
+            menuShouldPortal
+            options={downsamplingTypes}
+            value={downsampler}
+            onChange={onSelectDownsampler}
+            width={25}
+          />
         </InlineField>
         <InlineField label="Upsample">
-          <Select options={upsamplingTypes} value={upsampler} onChange={onSelectUpsampler} width={25} />
+          <Select
+            menuShouldPortal
+            options={upsamplingTypes}
+            value={upsampler}
+            onChange={onSelectUpsampler}
+            width={25}
+          />
         </InlineField>
       </InlineFieldRow>
     </>