Merge pull request #7250 from nixocio/ui_issue_6810

Remove style overrides from Lookup component

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-06-23 20:39:58 +00:00
committed by GitHub
2 changed files with 24 additions and 31 deletions

View File

@@ -14,7 +14,7 @@ import {
Button,
ButtonVariant,
Chip,
InputGroup as PFInputGroup,
InputGroup,
Modal,
} from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
@@ -25,31 +25,9 @@ import ChipGroup from '../ChipGroup';
import reducer, { initReducer } from './shared/reducer';
import { QSConfig } from '../../types';
const SearchButton = styled(Button)`
::after {
border: var(--pf-c-button--BorderWidth) solid
var(--pf-global--BorderColor--200);
}
`;
SearchButton.displayName = 'SearchButton';
const InputGroup = styled(PFInputGroup)`
${props =>
props.multiple &&
`
--pf-c-form-control--Height: 90px;
overflow-y: auto;
`}
`;
const ChipHolder = styled.div`
--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--Height: auto;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
`;
function Lookup(props) {
const {
id,
@@ -120,15 +98,15 @@ function Lookup(props) {
return (
<Fragment>
<InputGroup onBlur={onBlur}>
<SearchButton
<Button
aria-label="Search"
id={id}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.tertiary}
variant={ButtonVariant.control}
isDisabled={isLoading}
>
<SearchIcon />
</SearchButton>
</Button>
<ChipHolder className="pf-c-form-control">
<ChipGroup numChips={5} totalChips={items.length}>
{items.map(item =>

View File

@@ -104,7 +104,10 @@ describe('<MultiCredentialsLookup />', () => {
/>
);
});
const searchButton = await waitForElement(wrapper, 'SearchButton');
const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => {
searchButton.invoke('onClick')();
});
@@ -140,7 +143,10 @@ describe('<MultiCredentialsLookup />', () => {
/>
);
});
const searchButton = await waitForElement(wrapper, 'SearchButton');
const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => {
searchButton.invoke('onClick')();
});
@@ -180,7 +186,10 @@ describe('<MultiCredentialsLookup />', () => {
/>
);
});
const searchButton = await waitForElement(wrapper, 'SearchButton');
const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => {
searchButton.invoke('onClick')();
});
@@ -226,7 +235,10 @@ describe('<MultiCredentialsLookup />', () => {
/>
);
});
const searchButton = await waitForElement(wrapper, 'SearchButton');
const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => {
searchButton.invoke('onClick')();
});
@@ -279,7 +291,10 @@ describe('<MultiCredentialsLookup />', () => {
/>
);
});
const searchButton = await waitForElement(wrapper, 'SearchButton');
const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => {
searchButton.invoke('onClick')();
});