use pf-c-table__action, override height for virtualized

patternfly · Jun 4, 2019 · ed51760 · ed51760
1 parent 13f5211
commit ed51760
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/...tternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css b/...tternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css
@@ -1,4 +1,4 @@
-.pf-c-table {
+.pf-c-scrollablegrid .pf-c-table {
   table-layout: fixed;
 }
 
@@ -8,27 +8,31 @@
   width: 100%;
 }
 
-.pf-c-table tbody > tr > :first-child::before {
+.pf-c-scrollablegrid .pf-c-table tr > * {
+  height: auto;
+}
+
+.pf-c-scrollablegrid .pf-c-table tbody > tr > :first-child::before {
   content: none;
   width: 0 !important;
 }
 
-.pf-c-table__check {
+.pf-c-scrollablegrid .pf-c-table .pf-c-table__check {
   width: 8.333% !important;
 }
 
 @media screen and (max-width: 768px) {
-  .pf-c-table__check {
+  .pf-c-scrollablegrid .pf-c-table .pf-c-table__check {
     width: 16.66% !important;
   }
 }
 
-.pf-col-kebab {
+.pf-c-scrollablegrid .pf-c-table .pf-c-table__action {
   width: 5% !important;
   padding-left: 0px !important;
 }
 @media screen and (max-width: 992px) {
-  .pf-col-kebab {
+  .pf-c-scrollablegrid .pf-c-table .pf-c-table__action {
     width: 10% !important;
   }
 }

diff --git a/...ternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md b/...ternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md
@@ -101,6 +101,7 @@ class VirtualizedExample extends React.Component {
       <div
         aria-label="Scrollable Table"
         role="grid"
+        className="pf-c-scrollablegrid"
         aria-rowcount={rows.length}>
         <Table
           caption="Simple Table"
@@ -243,6 +244,7 @@ class SortableExample extends React.Component {
       <div
         aria-label="Scrollable Table"
         role="grid"
+        className="pf-c-scrollablegrid"
         aria-rowcount={rows.length}>
         <Table
           caption="Sortable Virtualized Table"
@@ -396,6 +398,7 @@ class SelectableExample extends React.Component {
       <div
         aria-label="Scrollable Table"
         role="grid"
+        className="pf-c-scrollablegrid"
         aria-rowcount={rows.length}>
         <Table
           caption="Selectable Virtualized Table"
@@ -464,7 +467,7 @@ class ActionsExample extends React.Component {
         { title: 'Labels', props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md'} },
         { title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} },
         { title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl'} },
-        { title: '', props: { className: 'pf-col-kebab'}},
+        { title: '', props: { className: 'pf-c-table__action'}},
       ],
       rows,
       actions: [
@@ -550,6 +553,7 @@ class ActionsExample extends React.Component {
       <div
         aria-label="Scrollable Table"
         role="grid"
+        className="pf-c-scrollablegrid"
         aria-rowcount={rows.length}>
         <Table
           caption="Actions Virtualized Table"

diff --git a/...nfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md b/...nfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md
@@ -124,6 +124,7 @@ class WindowScrollerExample extends React.Component {
         id="content-scrollable-1"
         aria-label="Scrollable Table"
         role="grid"
+        className="pf-c-scrollablegrid"
         aria-rowcount={rows.length}
         style={{
           height: 500, /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */