fix(demo): add empty and loading state table demos

src/patternfly/components/EmptyState/docs/code.md

@@ -10,10 +10,11 @@
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-empty-state` | `<div>` |  Initiates an empty state component. **Required** |
-| `.pf-c-empty-state__icon` | `<i>` |  Creates the empty state icon. |
+| `.pf-c-empty-state__icon` | `<i>`, `<div>` |  Creates the empty state icon or icon container when used as a `<div>`. |
 | `.pf-c-title` | `<h1>, <h2>, <h3>, <h4>, <h5>, <h6>` |  Creates the empty state title. **Required** |
 | `.pf-c-empty-state__body` | `<div>` |  Creates the empty state body content. You can have more than one `.pf-c-empty-state__body` elements. |
 | `.pf-c-button.pf-m-primary` | `<button>` |  Creates the primary action button. |
-| `.pf-c-empty-state__secondary` | `<div>` |  Creates area for secondary actions. |
+| `.pf-c-empty-state__primary` | `<div>` |  Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`. |
+| `.pf-c-empty-state__secondary` | `<div>` |  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 |

src/patternfly/components/EmptyState/empty-state-icon.hbs

@@ -1,5 +1,14 @@
+{{#if @partial-block}}
+  <div class="pf-c-empty-state__icon{{#if empty-state-icon--modifier}} {{empty-state-icon--modifier}}{{/if}}"
+    {{#if empty-state-icon--attribute}}
+      {{{empty-state-icon--attribute}}}
+    {{/if}}>
+    {{> @partial-block}}
+  </div>
+{{else}}
 <i class="fas fa-{{#if empty-state-icon--type}} fa-{{empty-state-icon--type}}{{else}}cubes{{/if}} pf-c-empty-state__icon{{#if empty-state-icon--modifier}} {{empty-state-icon--modifier}}{{/if}}"
   aria-hidden="true"
   {{#if empty-state-icon--attribute}}
     {{{empty-state-icon--attribute}}}
   {{/if}}></i>
+{{/if}}

src/patternfly/components/EmptyState/empty-state-primary.hbs

@@ -0,0 +1,6 @@
+<div class="pf-c-empty-state__primary{{#if empty-state-primary--modifier}} {{empty-state-primary--modifier}}{{/if}}"
+  {{#if empty-state-primary--attribute}}
+    {{{empty-state-primary--attribute}}}
+  {{/if}}>
+  {{> @partial-block}}
+</div>

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 {

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}}

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) => {
       <Example heading="Empty state large" handlebars={emptyStateLargeExampleRaw}>
         {emptyStateLargeExample}
       </Example>
+      <Example heading="Empty state w/ primary element" handlebars={emptyStatePrimaryExampleRaw}>
+        {emptyStatePrimaryExample}
+      </Example>
     </Documentation>
   );
 };

src/patternfly/components/Table/docs/table-simple.md

@@ -10,5 +10,6 @@
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-table` | `<table>` | Initiates a table element. **Required** |
-| `.pf-m-center` | `<th>`, `<td>` | Modifies cell to center its contents. |
 | `.pf-c-table__caption` | `<caption>` | Initiates a table caption. |
+| `.pf-m-height-auto` | `<tr>` | Modifies a `<tr>` to have `height: auto`, which undoes the `height` declaration currently on `<tr>` elements. |
+| `.pf-m-center` | `<th>`, `<td>` | Modifies cell to center its contents. |

src/patternfly/components/Table/table-tr.hbs

@@ -1,4 +1,4 @@
-<tr{{#if table-tr--expandable}} class="pf-c-table__expandable-row{{#if table-tr--IsExpanded}} pf-m-expanded{{/if}}{{#if table-tr--modifier}} {{table-tr--modifier}}{{/if}}"{{/if}}
+<tr class="{{#if table-tr--expandable}}pf-c-table__expandable-row{{/if}}{{#if table-tr--IsExpanded}} pf-m-expanded{{/if}}{{#if table-tr--modifier}} {{table-tr--modifier}}{{/if}}"
   {{#if table-tr--attribute}}
     {{{table-tr--attribute}}}
   {{/if}}>

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

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 => {
       <Example heading="Table - compound expansion demo" fullPageOnly="true" handlebars={TableCompoundExpansionDemoRaw}>
         {tableCompoundExpansionDemo}
       </Example>
+      <Example heading="Table - loading state demo" fullPageOnly="true" handlebars={TableLoadingDemoRaw}>
+        {tableLoadingDemo}
+      </Example>
+      <Example heading="Table - empty state demo" fullPageOnly="true" handlebars={TableEmptyStateDemoRaw}>
+        {tableEmptyStateDemo}
+      </Example>
     </Documentation>
   );
 };

src/patternfly/demos/Table/examples/table-empty-state-demo.hbs

@@ -0,0 +1,26 @@
+{{#> page page--id="page-layout-table-simple"}}
+  {{#> 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}}

src/patternfly/demos/Table/examples/table-loading-demo.hbs

@@ -0,0 +1,26 @@
+{{#> page page--id="page-layout-table-simple"}}
+  {{#> 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}}

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"}}
+        <input type="checkbox" name="check-all" aria-label="Select all rows">
+      {{/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}}

src/patternfly/demos/Table/table-loading-table.hbs

@@ -0,0 +1,43 @@
+{{#> table table--id="empty-loading-demo" 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"}}
+        <input type="checkbox" name="check-all" aria-label="Select all rows">
+      {{/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}}{{/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}}