github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

use custom styles for aligning input fields

Browse source 
review changes
This commit is contained in:
Ashokaditya 2021-04-23 13:26:40 +02:00
parent 4def289022
commit 0a60598cba
1 changed files with 17 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

36
x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx
View file

@ -11,8 +11,6 @@ import { i18n } from '@kbn/i18n';
import {
EuiButtonIcon,
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiSuperSelect,
EuiSuperSelectOption,
@ -69,12 +67,18 @@ export interface ConditionEntryInputProps {
// adding a style prop on EuiFlexGroup works only partially
// and for some odd reason garbles up gridTemplateAreas entry
const StyledEuiFlexGroup = styled(EuiFlexGroup)`
const InputGroup = styled.div`
display: grid;
grid-template-columns: 25% 25% 45% 5%;
grid-template-areas: 'field operator value remove';
`;
const InputItem = styled.div`
align-self: center;
margin: 4px;
vertical-align: baseline;
`;
const operatorOptions = (Object.keys(OperatorEntryField) as OperatorEntryField[]).map((value) => ({
dropdownDisplay: OPERATOR_TITLES[value],
inputDisplay: OPERATOR_TITLES[value],
@ -153,14 +157,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
}, [entry, onVisited]);
return (
<StyledEuiFlexGroup
gutterSize="s"
alignItems="center"
direction="row"
data-test-subj={dataTestSubj}
responsive={false}
>
<EuiFlexItem style={{ gridArea: 'field' }}>
<InputGroup data-test-subj={dataTestSubj}>
<InputItem style={{ gridArea: 'field' }}>
<ConditionEntryCell showLabel={showLabels} label={ENTRY_PROPERTY_TITLES.field}>
<EuiSuperSelect
options={fieldOptions}
@ -169,8 +167,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
data-test-subj={getTestId('field')}
/>
</ConditionEntryCell>
</EuiFlexItem>
<EuiFlexItem style={{ gridArea: 'operator' }}>
</InputItem>
<InputItem style={{ gridArea: 'operator' }}>
<ConditionEntryCell showLabel={showLabels} label={ENTRY_PROPERTY_TITLES.operator}>
{entry.field === ConditionEntryField.PATH ? (
<EuiSuperSelect
@ -188,8 +186,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
/>
)}
</ConditionEntryCell>
</EuiFlexItem>
<EuiFlexItem style={{ gridArea: 'value' }}>
</InputItem>
<InputItem style={{ gridArea: 'value' }}>
<ConditionEntryCell showLabel={showLabels} label={ENTRY_PROPERTY_TITLES.value}>
<EuiFieldText
name="value"
@ -201,8 +199,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
data-test-subj={getTestId('value')}
/>
</ConditionEntryCell>
</EuiFlexItem>
<EuiFlexItem style={{ gridArea: 'remove' }}>
</InputItem>
<InputItem style={{ gridArea: 'remove' }}>
{/* Unicode `nbsp` is used below so that Remove button is property displayed */}
<ConditionEntryCell showLabel={showLabels} label={'\u00A0'}>
<EuiButtonIcon
@ -217,8 +215,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
data-test-subj={getTestId('remove')}
/>
</ConditionEntryCell>
</EuiFlexItem>
</StyledEuiFlexGroup>
</InputItem>
</InputGroup>
);
}
);