` | Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`. |
+| `.pf-c-empty-state__secondary` | `
` | Container secondary actions. |
| `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width |
| `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width |
diff --git a/src/patternfly/components/EmptyState/empty-state-icon.hbs b/src/patternfly/components/EmptyState/empty-state-icon.hbs
index 2a6857f256..00014f4745 100644
--- a/src/patternfly/components/EmptyState/empty-state-icon.hbs
+++ b/src/patternfly/components/EmptyState/empty-state-icon.hbs
@@ -1,5 +1,14 @@
+{{#if @partial-block}}
+
+ {{> @partial-block}}
+
+{{else}}
+{{/if}}
diff --git a/src/patternfly/components/EmptyState/empty-state-primary.hbs b/src/patternfly/components/EmptyState/empty-state-primary.hbs
new file mode 100644
index 0000000000..8ab9e38849
--- /dev/null
+++ b/src/patternfly/components/EmptyState/empty-state-primary.hbs
@@ -0,0 +1,6 @@
+
+ {{> @partial-block}}
+
diff --git a/src/patternfly/components/EmptyState/empty-state.scss b/src/patternfly/components/EmptyState/empty-state.scss
index 1e4714d375..5d527ce712 100644
--- a/src/patternfly/components/EmptyState/empty-state.scss
+++ b/src/patternfly/components/EmptyState/empty-state.scss
@@ -18,7 +18,8 @@
padding: var(--pf-c-empty-state--Padding);
text-align: center;
- > .pf-c-button.pf-m-primary {
+ > .pf-c-button.pf-m-primary,
+ .pf-c-empty-state__primary {
margin-top: var(--pf-c-empty-state--c-button--MarginTop);
+ .pf-c-empty-state__secondary {
diff --git a/src/patternfly/components/EmptyState/examples/empty-state-primary-example.hbs b/src/patternfly/components/EmptyState/examples/empty-state-primary-example.hbs
new file mode 100644
index 0000000000..5d9f2ee61c
--- /dev/null
+++ b/src/patternfly/components/EmptyState/examples/empty-state-primary-example.hbs
@@ -0,0 +1,14 @@
+{{#> empty-state}}
+ {{#> empty-state-icon}}{{/empty-state-icon}}
+ {{#> title titleType="h1" title--modifier="pf-m-lg"}}
+ Empty State
+ {{/title}}
+ {{#> empty-state-body}}
+ This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
+ {{/empty-state-body}}
+ {{#> empty-state-primary}}
+ {{#> button button--modifier="pf-m-link"}}
+ Action buttons
+ {{/button}}
+ {{/empty-state-primary}}
+{{/empty-state}}
diff --git a/src/patternfly/components/EmptyState/examples/index.js b/src/patternfly/components/EmptyState/examples/index.js
index 3bb1e2a80b..3404353925 100644
--- a/src/patternfly/components/EmptyState/examples/index.js
+++ b/src/patternfly/components/EmptyState/examples/index.js
@@ -4,17 +4,21 @@ import Example from '@siteComponents/Example';
import emptyStateSimpleExampleRaw from '!raw!./empty-state-simple-example.hbs';
import emptyStateSmallExampleRaw from '!raw!./empty-state-small-example.hbs';
import emptyStateLargeExampleRaw from '!raw!./empty-state-large-example.hbs';
-import EmptystateSimpleExample from './empty-state-simple-example.hbs';
-import EmptystateSmallExample from './empty-state-small-example.hbs';
-import EmptystateLargeExample from './empty-state-large-example.hbs';
+import emptyStatePrimaryExampleRaw from '!raw!./empty-state-primary-example.hbs';
+
+import EmptyStateSimpleExample from './empty-state-simple-example.hbs';
+import EmptyStateSmallExample from './empty-state-small-example.hbs';
+import EmptyStateLargeExample from './empty-state-large-example.hbs';
+import EmptyStatePrimaryExample from './empty-state-primary-example.hbs';
import docs from '../docs/code.md';
export const Docs = docs;
-export default (props) => {
- const emptyStateSimpleExample = EmptystateSimpleExample();
- const emptyStateSmallExample = EmptystateSmallExample();
- const emptyStateLargeExample = EmptystateLargeExample();
+export default props => {
+ const emptyStateSimpleExample = EmptyStateSimpleExample();
+ const emptyStateSmallExample = EmptyStateSmallExample();
+ const emptyStateLargeExample = EmptyStateLargeExample();
+ const emptyStatePrimaryExample = EmptyStatePrimaryExample();
const headingText = 'Empty state';
const variablesRoot = 'pf-c-empty-state';
@@ -29,6 +33,9 @@ export default (props) => {
{emptyStateLargeExample}
+
+ {emptyStatePrimaryExample}
+
);
};
diff --git a/src/patternfly/components/Table/docs/table-simple.md b/src/patternfly/components/Table/docs/table-simple.md
index b5c7b7b2a9..8fce80740f 100644
--- a/src/patternfly/components/Table/docs/table-simple.md
+++ b/src/patternfly/components/Table/docs/table-simple.md
@@ -10,5 +10,6 @@
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-c-table` | `
` | Initiates a table element. **Required** |
-| `.pf-m-center` | ``, ` | ` | Modifies cell to center its contents. |
| `.pf-c-table__caption` | `` | Initiates a table caption. |
+| `.pf-m-height-auto` | ` | ` | Modifies a `
` to have `height: auto`, which undoes the `height` declaration currently on `
` elements. |
+| `.pf-m-center` | ``, ` | ` | Modifies cell to center its contents. |
diff --git a/src/patternfly/components/Table/table-tr.hbs b/src/patternfly/components/Table/table-tr.hbs
index 260b3952e7..dbf409a618 100644
--- a/src/patternfly/components/Table/table-tr.hbs
+++ b/src/patternfly/components/Table/table-tr.hbs
@@ -1,4 +1,4 @@
- |
diff --git a/src/patternfly/components/Table/table.scss b/src/patternfly/components/Table/table.scss
index be220999f4..e525abf4e4 100644
--- a/src/patternfly/components/Table/table.scss
+++ b/src/patternfly/components/Table/table.scss
@@ -157,6 +157,11 @@
// for button height: 100% to work
height: 1px;
border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor);
+
+ /* stylelint-disable-next-line */
+ &.pf-m-height-auto {
+ height: auto;
+ }
}
// Table row
diff --git a/src/patternfly/demos/Table/examples/index.js b/src/patternfly/demos/Table/examples/index.js
index d0bc137203..558bce6680 100644
--- a/src/patternfly/demos/Table/examples/index.js
+++ b/src/patternfly/demos/Table/examples/index.js
@@ -6,11 +6,16 @@ import TableSortableDemoRaw from '!raw!./table-sortable-demo.hbs';
import TableExpandableDemoRaw from '!raw!./table-expandable-demo.hbs';
import TableCompactDemoRaw from '!raw!./table-compact-demo.hbs';
import TableCompoundExpansionDemoRaw from '!raw!./table-compound-expansion-demo.hbs';
+import TableLoadingDemoRaw from '!raw!./table-loading-demo.hbs';
+import TableEmptyStateDemoRaw from '!raw!./table-empty-state-demo.hbs';
+
import TableSimpleDemo from './table-simple-demo.hbs';
import TableSortableDemo from './table-sortable-demo.hbs';
import TableExpandableDemo from './table-expandable-demo.hbs';
import TableCompactDemo from './table-compact-demo.hbs';
import TableCompoundExpansionDemo from './table-compound-expansion-demo.hbs';
+import TableLoadingDemo from './table-loading-demo.hbs';
+import TableEmptyStateDemo from './table-empty-state-demo.hbs';
import docs from '../docs/code.md';
export const Docs = docs;
@@ -21,6 +26,8 @@ export default props => {
const tableExpandableDemo = TableExpandableDemo();
const tableCompactDemo = TableCompactDemo();
const tableCompoundExpansionDemo = TableCompoundExpansionDemo();
+ const tableLoadingDemo = TableLoadingDemo();
+ const tableEmptyStateDemo = TableEmptyStateDemo();
const headingText = 'Table demo';
@@ -41,6 +48,12 @@ export default props => {
{tableCompoundExpansionDemo}
+
+ {tableLoadingDemo}
+
+
+ {tableEmptyStateDemo}
+
);
};
diff --git a/src/patternfly/demos/Table/examples/table-empty-state-demo.hbs b/src/patternfly/demos/Table/examples/table-empty-state-demo.hbs
new file mode 100644
index 0000000000..c16d6a5b00
--- /dev/null
+++ b/src/patternfly/demos/Table/examples/table-empty-state-demo.hbs
@@ -0,0 +1,26 @@
+{{#> page page--id="table-empty-state-demo"}}
+ {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}}
+ Skip to content
+ {{/skip-to-content}}
+ {{#> page-header}}
+ {{> table-page-header}}
+ {{/page-header}}
+ {{#> page-sidebar page-sidebar--modifier="pf-m-dark"}}
+ {{> table-page-nav}}
+ {{/page-sidebar}}
+ {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}}
+ {{#> page-main-nav}}
+ {{> table-main-section-nav}}
+ {{/page-main-nav}}
+ {{#> page-main-section page-main-section--modifier="pf-m-light"}}
+ {{> table-main-section-content}}
+ {{/page-main-section}}
+ {{#> page-main-section page-main-section--modifier="pf-m-no-padding-mobile"}}
+ {{#> card}}
+ {{> table-toolbar}}
+ {{> table-empty-state-table}}
+ {{> table-pagination}}
+ {{/card}}
+ {{/page-main-section}}
+ {{/page-main}}
+{{/page}}
diff --git a/src/patternfly/demos/Table/examples/table-loading-demo.hbs b/src/patternfly/demos/Table/examples/table-loading-demo.hbs
new file mode 100644
index 0000000000..fe593b696d
--- /dev/null
+++ b/src/patternfly/demos/Table/examples/table-loading-demo.hbs
@@ -0,0 +1,26 @@
+{{#> page page--id="table-loading-demo"}}
+ {{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}}
+ Skip to content
+ {{/skip-to-content}}
+ {{#> page-header}}
+ {{> table-page-header}}
+ {{/page-header}}
+ {{#> page-sidebar page-sidebar--modifier="pf-m-dark"}}
+ {{> table-page-nav}}
+ {{/page-sidebar}}
+ {{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}}
+ {{#> page-main-nav}}
+ {{> table-main-section-nav}}
+ {{/page-main-nav}}
+ {{#> page-main-section page-main-section--modifier="pf-m-light"}}
+ {{> table-main-section-content}}
+ {{/page-main-section}}
+ {{#> page-main-section page-main-section--modifier="pf-m-no-padding-mobile"}}
+ {{#> card}}
+ {{> table-toolbar}}
+ {{> table-loading-table}}
+ {{> table-pagination}}
+ {{/card}}
+ {{/page-main-section}}
+ {{/page-main}}
+{{/page}}
diff --git a/src/patternfly/demos/Table/table-empty-state-table.hbs b/src/patternfly/demos/Table/table-empty-state-table.hbs
new file mode 100644
index 0000000000..95e989d4ee
--- /dev/null
+++ b/src/patternfly/demos/Table/table-empty-state-table.hbs
@@ -0,0 +1,49 @@
+{{#> table table--id="empty-state-table-demo" table--grid="true" table--modifier="pf-m-grid-xl" table--attribute='aria-label="This is a table showing an empty state"'}}
+ {{#> table-thead}}
+ {{#> table-tr}}
+ {{#> table-td table-td--check="true"}}
+
+ {{/table-td}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Repositories
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Branches
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Pull requests
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Workspaces
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Last commit
+ {{/table-th}}
+ {{#> table-td}}{{/table-td}}
+ {{#> table-td}}{{/table-td}}
+ {{/table-tr}}
+ {{/table-thead}}
+
+ {{#> table-tbody}}
+ {{#> table-tr table-tr--modifier="pf-m-height-auto"}}
+ {{#> table-td table-td--attribute='colspan="8"'}}
+ {{#> bullseye}}
+ {{#> empty-state empty-state--modifier="pf-m-sm"}}
+ {{#> empty-state-icon empty-state-icon--type="search"}}{{/empty-state-icon}}
+ {{#> title titleType="h2" title--modifier="pf-m-lg"}}
+ No results found
+ {{/title}}
+ {{#> empty-state-body}}
+ No results match the filter criteria. Remove all filters or clear all filters to show results.
+ {{/empty-state-body}}
+ {{#> empty-state-primary}}
+ {{#> button button--modifier="pf-m-link"}}
+ Clear all filters
+ {{/button}}
+ {{/empty-state-primary}}
+ {{/empty-state}}
+ {{/bullseye}}
+ {{/table-td}}
+ {{/table-tr}}
+ {{/table-tbody}}
+{{/table}}
diff --git a/src/patternfly/demos/Table/table-loading-table.hbs b/src/patternfly/demos/Table/table-loading-table.hbs
new file mode 100644
index 0000000000..e98c5452bc
--- /dev/null
+++ b/src/patternfly/demos/Table/table-loading-table.hbs
@@ -0,0 +1,43 @@
+{{#> table table--id="table-loading-table" table--grid="true" table--modifier="pf-m-grid-xl" table--attribute='aria-label="This is a table showing a loading state"'}}
+ {{#> table-thead}}
+ {{#> table-tr}}
+ {{#> table-td table-td--check="true"}}
+
+ {{/table-td}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Repositories
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Branches
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Pull requests
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Workspaces
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Last commit
+ {{/table-th}}
+ {{#> table-td}}{{/table-td}}
+ {{#> table-td}}{{/table-td}}
+ {{/table-tr}}
+ {{/table-thead}}
+
+ {{#> table-tbody}}
+ {{#> table-tr table-tr--modifier="pf-m-height-auto"}}
+ {{#> table-td table-td--attribute='colspan="8"'}}
+ {{#> bullseye}}
+ {{#> empty-state empty-state--modifier="pf-m-sm"}}
+ {{#> empty-state-icon}}
+ {{#> spinner}}Loading...{{/spinner}}
+ {{/empty-state-icon}}
+ {{#> title titleType="h2" title--modifier="pf-m-lg"}}
+ No results found
+ {{/title}}
+ {{/empty-state}}
+ {{/bullseye}}
+ {{/table-td}}
+ {{/table-tr}}
+ {{/table-tbody}}
+{{/table}}