Skip to content

Migrate <EmptyState> to PF4 #2710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-robot merged 1 commit into from
Sep 17, 2019
Merged

Migrate <EmptyState> to PF4 #2710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/integration-tests/views/catalog-page.view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ export const filterCheckboxCount = (id: string) => filterCheckboxFor(id).$('.ite
.then(text => parseInt(text.substring(1, text.indexOf(')')), 10));
export const filterTextbox = $('.co-catalog-page__filter input');
export const filterByKeyword = (filter: string) => filterTextbox.clear().then(() => filterTextbox.sendKeys(filter));
export const clearFiltersText = $('.co-catalog-page__no-filter-results').$('.blank-slate-pf-helpLink').$('button');
export const clearFiltersText = $('[data-test-id="catalog-clear-filters"]');
8 changes: 0 additions & 8 deletions frontend/public/components/catalog/_catalog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,14 +183,6 @@ $co-modal-ignore-warning-icon-width: 30px;
flex: 0 0 220px;
margin: 0 ($grid-gutter-width / 2) 0 0;
}

&__no-filter-results {
padding: 0;
&-title {
color: $color-pf-black-800;
font-size: 18px;
}
}
}

.co-catalog-tab__empty {
Expand Down
19 changes: 10 additions & 9 deletions frontend/public/components/utils/tile-view-page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import * as React from 'react';
import * as _ from 'lodash-es';
import * as PropTypes from 'prop-types';
import {FilterSidePanel, VerticalTabs} from 'patternfly-react-extensions';
import {EmptyState, FormControl} from 'patternfly-react';
import {FormControl} from 'patternfly-react';
import {Button, EmptyState, EmptyStateBody, EmptyStateSecondaryActions, EmptyStateVariant, Title} from '@patternfly/react-core';

import {history} from './router';

Expand Down Expand Up @@ -640,16 +641,16 @@ export class TileViewPage extends React.Component {
renderEmptyState() {
const { emptyStateTitle, emptyStateInfo } = this.props;
return (
<EmptyState className="co-catalog-page__no-filter-results">
<EmptyState.Title className="co-catalog-page__no-filter-results-title" aria-level="2">
<EmptyState variant={EmptyStateVariant.full}>
<Title headingLevel="h2" size="lg">
{emptyStateTitle}
</EmptyState.Title>
<EmptyState.Info className="text-secondary">
</Title>
<EmptyStateBody>
{emptyStateInfo}
</EmptyState.Info>
<EmptyState.Help>
<button type="button" className="btn btn-link" onClick={() => this.clearFilters()}>Clear All Filters</button>
</EmptyState.Help>
</EmptyStateBody>
<EmptyStateSecondaryActions>
<Button variant="link" onClick={() => this.clearFilters()} data-test-id="catalog-clear-filters">Clear All Filters</Button>
</EmptyStateSecondaryActions>
</EmptyState>
);
}
Expand Down
15 changes: 0 additions & 15 deletions frontend/public/style/_overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,6 @@
// Use this file to override styles from 3rd party dependencies
$pf-4-nav-bar-height: 76px; // Height of the PatternFly 4 masthead

.blank-slate-pf {
Copy link
Member

@spadgett spadgett Sep 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 love being able to remove these overrides

background-color: transparent;
border: none;
.blank-slate-pf-secondary-action {
a.btn {
// Patternfly assumes this is a plain link and adds extra padding, which makes the buttons too large.
padding: 2px 6px;
}
a + a.btn:before {
// Hide the separator between links when they're buttons.
display: none;
}
}
}

.breadcrumb {
margin-bottom: 0;
padding-bottom: 12px;
Expand Down
1 change: 0 additions & 1 deletion frontend/public/vendor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
@import '~patternfly/dist/sass/patternfly/hint-block';
@import '~patternfly/dist/sass/patternfly/modals';
@import '~patternfly/dist/sass/patternfly/toolbar';
@import '~patternfly/dist/sass/patternfly/blank-slate';
@import '~patternfly/dist/sass/patternfly/list-view';
@import '~patternfly/dist/sass/patternfly/popovers';
@import '~patternfly/dist/sass/patternfly/forms';
Expand Down