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

* Select: Changes default menuPlacement from auto to bottom

* Tests: Fixes snapshot
This commit is contained in:
Hugo Häggmark
2020-12-15 12:46:31 +01:00
committed by GitHub
parent b1a57c6f77
commit 5f4b528122
13 changed files with 26 additions and 51 deletions

View File

@@ -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}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">

View File

@@ -1,20 +1,20 @@
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>
)}

View File

@@ -1,10 +1,10 @@
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>

View File

@@ -1,15 +1,15 @@
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>

View File

@@ -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>
);