Commit 5f4b5281 by Hugo Häggmark Committed by GitHub

Select: Changes default menu placement for Select from auto to bottom (#29837)

* Select: Changes default menuPlacement from auto to bottom

* Tests: Fixes snapshot
parent b1a57c6f
......@@ -116,7 +116,7 @@ export function SelectBase<T>({
maxMenuHeight = 300,
minMenuHeight,
maxVisibleValues,
menuPlacement = 'auto',
menuPlacement = 'bottom',
menuPosition,
noOptionsMessage = 'No options found',
onBlur,
......
......@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
// Components
import { HorizontalGroup, Select } from '@grafana/ui';
import { SelectableValue, DataSourceInstanceSettings } from '@grafana/data';
import { DataSourceInstanceSettings, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { isUnsignedPluginSignature, PluginSignatureBadge } from '../../../features/plugins/PluginSignatureBadge';
import { getDataSourceSrv } from '@grafana/runtime';
......@@ -130,7 +130,6 @@ export class DataSourcePicker extends PureComponent<Props, State> {
onBlur={onBlur}
openMenuOnFocus={openMenuOnFocus}
maxMenuHeight={500}
menuPlacement="bottom"
placeholder={placeholder}
noOptionsMessage="No datasources found"
value={value}
......
......@@ -226,7 +226,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
stats={[options.reducer]}
onChange={this.onStatsChange}
defaultStat={ReducerID.sum}
menuPlacement="bottom"
/>
</div>
</div>
......@@ -305,14 +304,12 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
className="min-width-18 gf-form-spacing"
value={options?.left}
onChange={this.onBinaryLeftChanged}
menuPlacement="bottom"
/>
<Select
className="width-8 gf-form-spacing"
options={ops}
value={options.operator ?? ops[0].value}
onChange={this.onBinaryOperationChanged}
menuPlacement="bottom"
/>
<Select
allowCustomValue={true}
......@@ -321,7 +318,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={rightNames}
value={options?.right}
onChange={this.onBinaryRightChanged}
menuPlacement="bottom"
/>
</div>
</div>
......@@ -347,7 +343,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={calculationModes}
value={calculationModes.find(v => v.value === mode)}
onChange={this.onModeChanged}
menuPlacement="bottom"
/>
</div>
</div>
......
......@@ -8,8 +8,8 @@ import {
} from '@grafana/data';
import { Input, Select } from '@grafana/ui';
import {
ConcatenateTransformerOptions,
ConcatenateFrameNameMode,
ConcatenateTransformerOptions,
} from '@grafana/data/src/transformations/transformers/concat';
interface ConcatenateTransformerEditorProps extends TransformerUIProps<ConcatenateTransformerOptions> {}
......@@ -61,7 +61,6 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
options={nameModes}
value={nameModes.find(v => v.value === frameNameMode)}
onChange={this.onModeChanged}
menuPlacement="bottom"
/>
</div>
</div>
......
......@@ -87,7 +87,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
options={fieldsAsOptions}
value={filter.fieldName}
onChange={onChangeField}
menuPlacement="bottom"
/>
</div>
<div className="gf-form gf-form-spacing">
......@@ -98,7 +97,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
options={matcherOptions}
value={matcherId}
onChange={onChangeMatcher}
menuPlacement="bottom"
/>
</div>
<div className="gf-form gf-form--grow gf-form-spacing">
......
import React, { useMemo, useCallback } from 'react';
import React, { useCallback, useMemo } from 'react';
import { css, cx } from 'emotion';
import {
DataTransformerID,
ReducerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
ReducerID,
SelectableValue,
} from '@grafana/data';
import { getAllFieldNamesFromDataFrames } from './OrganizeFieldsTransformerEditor';
import { Select, StatsPicker, stylesFactory } from '@grafana/ui';
import {
GroupByTransformerOptions,
GroupByOperationID,
GroupByFieldOptions,
GroupByOperationID,
GroupByTransformerOptions,
} from '@grafana/data/src/transformations/transformers/groupBy';
interface FieldProps {
......@@ -90,7 +90,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
placeholder="Ignored"
onChange={onChange}
isClearable
menuPlacement="bottom"
/>
</div>
</div>
......@@ -105,7 +104,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
onChange={stats => {
onConfigChange({ ...config, aggregations: stats as ReducerID[] });
}}
menuPlacement="bottom"
/>
</div>
)}
......
import React from 'react';
import {
DataTransformerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
SelectableValue,
} from '@grafana/data';
import { Select } from '@grafana/ui';
......@@ -49,7 +49,6 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
className="min-width-18 gf-form-spacing"
value={options?.valueLabel}
onChange={onValueLabelChange}
menuPlacement="bottom"
/>
</div>
</div>
......
import React, { useCallback } from 'react';
import { StatsPicker, Select, LegacyForms } from '@grafana/ui';
import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
import {
DataTransformerID,
ReducerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
SelectableValue,
} from '@grafana/data';
import { ReduceTransformerOptions, ReduceTransformerMode } from '@grafana/data/src/transformations/transformers/reduce';
import { ReduceTransformerMode, ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
import { selectors } from '@grafana/e2e-selectors';
// TODO: Minimal implementation, needs some <3
......@@ -60,7 +60,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
options={modes}
value={modes.find(v => v.value === options.mode) || modes[0]}
onChange={onSelectMode}
menuPlacement="bottom"
className="flex-grow-1"
/>
</div>
......@@ -81,7 +80,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
reducers: stats as ReducerID[],
});
}}
menuPlacement="bottom"
/>
</div>
</div>
......
......@@ -33,13 +33,7 @@ export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<Series
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Field name</div>
<Select
options={fieldNameOptions}
value={options.byField}
onChange={onSelectField}
isClearable
menuPlacement="bottom"
/>
<Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
</div>
</div>
);
......
......@@ -159,7 +159,6 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
options={availableTransformers}
onChange={this.onTransformationAdd}
isFullWidth={false}
menuPlacement="bottom"
/>
</div>
);
......
......@@ -5,24 +5,24 @@ import debounce from 'lodash/debounce';
import unionBy from 'lodash/unionBy';
import {
BracesPlugin,
LegacyForms,
MultiSelect,
QueryField,
Select,
SlatePrism,
LegacyForms,
TypeaheadInput,
TypeaheadOutput,
BracesPlugin,
Select,
MultiSelect,
} from '@grafana/ui';
// Utils & Services
// dom also includes Element polyfills
import { Plugin, Node, Editor } from 'slate';
import { Editor, Node, Plugin } from 'slate';
import syntax from '../syntax';
// Types
import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, AppEvents } from '@grafana/data';
import { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
import { AbsoluteTimeRange, AppEvents, ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
import { CloudWatchLogsQuery, CloudWatchQuery } from '../types';
import { CloudWatchDatasource } from '../datasource';
import { LanguageMap, languages as prismLanguages } from 'prismjs';
import { CloudWatchLanguageProvider } from '../language_provider';
......@@ -321,7 +321,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
onChange={v => this.setSelectedRegion(v)}
width={18}
placeholder="Choose Region"
menuPlacement="bottom"
maxMenuHeight={500}
/>
}
......@@ -349,7 +348,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
isOptionDisabled={() => selectedLogGroups.length >= MAX_LOG_GROUPS}
placeholder="Choose Log Groups"
maxVisibleValues={4}
menuPlacement="bottom"
noOptionsMessage="No log groups available"
isLoading={loadingLogGroups}
onOpenMenu={this.onOpenLogGroupMenu}
......
......@@ -3,15 +3,15 @@ import React, { PureComponent } from 'react';
// Types
import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import { SelectableValue, QueryEditorProps } from '@grafana/data';
const { Switch } = LegacyForms;
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { PrometheusDatasource } from '../datasource';
import { PromQuery, PromOptions } from '../types';
import { PromOptions, PromQuery } from '../types';
import PromQueryField from './PromQueryField';
import PromLink from './PromLink';
const { Switch } = LegacyForms;
export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
......@@ -157,7 +157,6 @@ export class PromQueryEditor extends PureComponent<Props, State> {
<div className="gf-form-label">Resolution</div>
<Select
isSearchable={false}
menuPlacement="bottom"
options={INTERVAL_FACTOR_OPTIONS}
onChange={this.onIntervalFactorChange}
value={intervalFactorOption}
......
......@@ -82,7 +82,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
</div>
<Select
isSearchable={false}
menuPlacement="bottom"
onChange={[Function]}
options={
Array [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment