External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-18 17:37:30 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #155 from marshmalien/ux-instance-groups-lookup-height

Browse Source 
UX - Lookup static height
This commit is contained in:
Marliana Lara
2019-04-08 10:40:20 -04:00
committed by GitHub
parent 09fd8e8106 212d3d517d
commit 3d6790a419
3 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/components/Lookup.test.jsx
View File

@@ -62,7 +62,7 @@ describe('<Lookup />', () => {
).find('Lookup'); ).find('Lookup');
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected); expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected);
const searchItem = wrapper.find('.pf-c-input-group__text#search'); const searchItem = wrapper.find('button[aria-label="Search"]');
searchItem.first().simulate('click'); searchItem.first().simulate('click');
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
expect(wrapper.state('lookupSelectedItems')).toEqual([{ expect(wrapper.state('lookupSelectedItems')).toEqual([{
@@ -89,7 +89,7 @@ describe('<Lookup />', () => {
</I18nProvider> </I18nProvider>
); );
setImmediate(() => { setImmediate(() => {
const searchItem = wrapper.find('.pf-c-input-group__text#search'); const searchItem = wrapper.find('button[aria-label="Search"]');
searchItem.first().simulate('click'); searchItem.first().simulate('click');
wrapper.find('input[type="checkbox"]').simulate('change'); wrapper.find('input[type="checkbox"]').simulate('change');
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();

14
src/app.scss
View File

@@ -132,12 +132,6 @@
} }
} }
.pf-c-input-group__text {
&:hover {
cursor: pointer;
}
}
// //
// pf modal overrides // pf modal overrides
// //
@@ -220,12 +214,10 @@
// note that these should be given a consistent prefix // note that these should be given a consistent prefix
// and bem style, as well as moved into component-based scss files // and bem style, as well as moved into component-based scss files
// //
.awx-lookup {
min-height: 36px;
.pf-c-form-control { .awx-lookup .pf-c-form-control {
--pf-c-form-control--Height: auto; --pf-c-form-control--Height: 90px;
} overflow-y: auto;
} }
.awx-c-list { .awx-c-list {

34
src/components/Lookup/Lookup.jsx
View File

@@ -2,12 +2,14 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { SearchIcon, CubesIcon } from '@patternfly/react-icons'; import { SearchIcon, CubesIcon } from '@patternfly/react-icons';
import { import {
Chip,
Modal,
Button, Button,
ButtonVariant,
Chip,
EmptyState, EmptyState,
EmptyStateIcon,
EmptyStateBody, EmptyStateBody,
EmptyStateIcon,
InputGroup,
Modal,
Title Title
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
@@ -172,16 +174,20 @@ class Lookup extends React.Component {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<div className="pf-c-input-group awx-lookup"> <Fragment>
<Button <InputGroup className="awx-lookup">
className="pf-c-input-group__text" <Button
aria-label="search" aria-label="Search"
id={id} id={id}
onClick={this.handleModalToggle} onClick={this.handleModalToggle}
> variant={ButtonVariant.tertiary}
<SearchIcon /> >
</Button> <SearchIcon />
<div className="pf-c-form-control">{chips}</div> </Button>
<div className="pf-c-form-control">
{chips}
</div>
</InputGroup>
<Modal <Modal
className="awx-c-modal" className="awx-c-modal"
title={`Select ${lookupHeader}`} title={`Select ${lookupHeader}`}
@@ -245,7 +251,7 @@ class Lookup extends React.Component {
)} )}
{ error ? <div>error</div> : '' } { error ? <div>error</div> : '' }
</Modal> </Modal>
</div> </Fragment>
)} )}
</I18n> </I18n>
); );