Merge pull request #4777 from jlmitch5/styleCleanupUiNext

assorted style cleanup in UI next

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2019-09-20 16:00:27 +00:00 committed by GitHub
commit fcc61a5752
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 27 deletions

View File

@ -16,6 +16,7 @@ import ErrorDetail from '@components/ErrorDetail';
const EmptyState = styled(PFEmptyState)`
width: var(--pf-c-empty-state--m-lg--MaxWidth);
max-width: 100%;
`;
async function logout() {

View File

@ -22,6 +22,13 @@ const CardBody = styled(PFCardBody)`
const Expandable = styled(PFExpandable)`
text-align: left;
& .pf-c-expandable__toggle {
padding-left: 10px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
`;
class ErrorDetail extends Component {

View File

@ -1,13 +1,18 @@
import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { FormGroup, Tooltip } from '@patternfly/react-core';
import { QuestionCircleIcon } from '@patternfly/react-icons';
import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
import { InstanceGroupsAPI } from '@api';
import Lookup from '@components/Lookup';
const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
margin-left: 10px;
`;
const getInstanceGroups = async params => InstanceGroupsAPI.read(params);
class InstanceGroupsLookup extends React.Component {
@ -21,18 +26,14 @@ class InstanceGroupsLookup extends React.Component {
return (
<div className={className}>
<FormGroup
label={
<Fragment>
{i18n._(t`Instance Groups`)}{' '}
{tooltip && (
<Tooltip position="right" content={tooltip}>
<QuestionCircleIcon />
</Tooltip>
)}
</Fragment>
}
label={i18n._(t`Instance Groups`)}
fieldId="org-instance-groups"
>
{tooltip && (
<Tooltip position="right" content={tooltip}>
<QuestionCircleIcon />
</Tooltip>
)}
<Lookup
id="org-instance-groups"
lookupHeader={i18n._(t`Instance Groups`)}

View File

@ -1,14 +1,19 @@
import React, { Fragment } from 'react';
import React from 'react';
import { string, func, bool } from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { FormGroup, Tooltip } from '@patternfly/react-core';
import { QuestionCircleIcon } from '@patternfly/react-icons';
import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
import { InventoriesAPI } from '@api';
import { Inventory } from '@types';
import Lookup from '@components/Lookup';
const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
margin-left: 10px;
`;
const getInventories = async params => InventoriesAPI.read(params);
class InventoryLookup extends React.Component {
@ -17,19 +22,15 @@ class InventoryLookup extends React.Component {
return (
<FormGroup
label={
<Fragment>
{i18n._(t`Inventory`)}{' '}
{tooltip && (
<Tooltip position="right" content={tooltip}>
<QuestionCircleIcon />
</Tooltip>
)}
</Fragment>
}
label={i18n._(t`Inventory`)}
isRequired={required}
fieldId="inventory-lookup"
>
{tooltip && (
<Tooltip position="right" content={tooltip}>
<QuestionCircleIcon />
</Tooltip>
)}
<Lookup
id="inventory-lookup"
lookupHeader={i18n._(t`Inventory`)}

View File

@ -46,6 +46,8 @@ const InputGroup = styled(PFInputGroup)`
const ChipHolder = styled.div`
--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
`;
class Lookup extends React.Component {

View File

@ -44,6 +44,8 @@ const Dropdown = styled(PFDropdown)`
::before {
border-color: var(--pf-global--BorderColor--200);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
> span {
@ -64,6 +66,8 @@ const Dropdown = styled(PFDropdown)`
const NoOptionDropdown = styled.div`
align-self: stretch;
border: 1px solid var(--pf-global--BorderColor--200);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
padding: 3px 7px;
white-space: nowrap;
`;

View File

@ -643,9 +643,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle {
"componentId": "Search__NoOptionDropdown-sc-1dwuww3-3",
"isStatic": true,
"lastClassName": "iMdtNX",
"lastClassName": "cbKaoS",
"rules": Array [
"align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);padding:3px 7px;white-space:nowrap;",
"align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);border-top-left-radius:3px;border-bottom-left-radius:3px;padding:3px 7px;white-space:nowrap;",
],
},
"displayName": "Search__NoOptionDropdown",
@ -661,7 +661,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<div
className="Search__NoOptionDropdown-sc-1dwuww3-3 iMdtNX"
className="Search__NoOptionDropdown-sc-1dwuww3-3 cbKaoS"
>
Name
</div>