Merge branch 'master' into mp/fix/DCOS-60141-dropdownable-perf

d2iq · Oct 21, 2019 · 1d8deee · 1d8deee
2 parents db937bf + b1b0038
commit 1d8deee
Show file tree

Hide file tree

Showing 16 changed files with 383 additions and 107 deletions.
diff --git a/packages/appChrome/style.ts b/packages/appChrome/style.ts
@@ -35,6 +35,7 @@ export const appChromeInsetContent = (horizPadding?: SpaceSizes) => css`
 
 export const appWrapper = css`
   height: 100%;
+  overflow: auto;
 `;
 
 export const sidebar = css`

diff --git a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
   display: flex;
   min-height: 0;
   height: 100%;
+  overflow: auto;
 }
 
 .emotion-2 > div {
@@ -79,6 +80,7 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
   padding-left: 0;
   margin-left: 0;
   height: 100%;
+  overflow: auto;
 }
 
 <ThemeProvider

diff --git a/packages/index.ts b/packages/index.ts
@@ -79,6 +79,7 @@ export {
   SortableHeaderCell,
   NumberCell
 } from "./table";
+export { TableView, TableViewHeader, TableViewBody } from "./tableView";
 export { TabItem, TabTitle, Tabs } from "./tabs";
 export { TextInput, TextInputWithIcon, TextInputWithBadges } from "./textInput";
 export { Textarea } from "./textarea";

diff --git a/packages/styleUtils/layout/flexbox/components/Flex.tsx b/packages/styleUtils/layout/flexbox/components/Flex.tsx
@@ -9,23 +9,25 @@ import {
 } from "../../../../shared/styles/styleUtils/layout/flexbox";
 
 interface FlexProps extends FlexboxProperties {
+  children:
+    | Array<React.ReactElement<FlexItemProps> | null>
+    | React.ReactElement<FlexItemProps>;
+  className?: string;
   /**
    * The size of the space between each `FlexItem` child. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
    */
   gutterSize?: SpaceSize;
-  children:
-    | Array<React.ReactElement<FlexItemProps> | null>
-    | React.ReactElement<FlexItemProps>;
 }
 
 const Flex = (props: FlexProps) => {
-  const { children, gutterSize, ...flexboxProperties } = props;
+  const { children, className, gutterSize, ...flexboxProperties } = props;
 
   return (
     <div
       className={css`
         ${flex({ ...flexboxProperties })};
         ${applyFlexItemGutters(flexboxProperties.direction, gutterSize)};
+        ${className};
       `}
       data-cy="flex"
     >

diff --git a/packages/styleUtils/layout/flexbox/components/FlexItem.tsx b/packages/styleUtils/layout/flexbox/components/FlexItem.tsx
@@ -11,6 +11,7 @@ type FlexStrategy = "shrink" | "grow";
 
 export interface FlexItemProps {
   children: React.ReactNode;
+  className?: string;
   /**
    * Whether the flex item should grow or shrinkwrap to it's children. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
    */
@@ -39,6 +40,7 @@ const FlexItem = (props: FlexItemProps) => {
         ${getResponsiveFlexItemStyles(props.flex)};
         ${getResponsiveStyle("flex-grow", props.growFactor)};
         ${getResponsiveStyle("order", props.order)};
+        ${props.className};
       `}
       data-cy="flexItem"
     >

diff --git a/packages/table/README.md b/packages/table/README.md
@@ -4,12 +4,20 @@
 
 Use tables to display information in a way that’s easy to scan, so that user can look for patterns and insights. Users will use tables to troubleshoot, manage and monitor their systems.
 
-## Width
+## Layout
+
+### Width
 
 Collection tables should span the full width of the screen. In cases where there are too few columns to span the whole screen, the table should still span the whole screen.
 
 Detail tables shouldn’t span the full width of the screen.
 
+### Height
+The Table expands to fill its parent but it will not stretch the parent. This means a table's parent node must have a height in order for the table to be visible.
+
+The `TableView` component is helpful when creating layouts that include the `Table` component.
+
+
 ## Column and Rows
 
 Organize columns and rows based on the needs of the users. For collection tables, order the columns with most important columns starting at the left. For detail tables, order the columns with the most important columns starting at the top.

diff --git a/packages/table/components/Table.tsx b/packages/table/components/Table.tsx
@@ -78,7 +78,7 @@ export interface TableState {
   resizeIndex: number;
 }
 
-const ROW_HEIGHT = 35;
+export const ROW_HEIGHT = 35;
 const DEFAULT_WIDTH = 1024;
 const DEFAULT_HEIGHT = 768;
 const COL_RESIZE_MIN_WIDTH = 80;
@@ -201,7 +201,7 @@ export class Table<T> extends React.PureComponent<TableProps, TableState> {
               currentIndex,
               remainingWidth
             })
-          : scrollbarAdjustedWidth / totalColumns;
+          : Math.floor(scrollbarAdjustedWidth / totalColumns);
 
         const clampedWidth = clampWidth(
           calculatedWidth,