Merge pull request #427 from dcos-labs/gt/feat/enable-lowercase-heade…

…rcell Enable lower case HeaderCell
d2iq · Nov 5, 2019 · 5b9d93c · 5b9d93c
2 parents 7a30ccc + 853edd1
commit 5b9d93c
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 14 deletions.
diff --git a/packages/table/components/HeaderCell.tsx b/packages/table/components/HeaderCell.tsx
@@ -1,9 +1,31 @@
-import { default as Cell } from "./Cell";
+import * as React from "react";
+
+import { default as Cell, CellProps } from "./Cell";
 import styled from "react-emotion";
-import { headerCellCss } from "../style";
+import { headerCellCss, textCapitalize } from "../style";
 import { textTruncate } from "../../shared/styles/styleUtils";
 
-export default styled(Cell)`
-  ${headerCellCss};
-  ${textTruncate};
-`;
+export interface HeaderCellProps extends CellProps {
+  /**
+   * lowerCase is indicating if we want the HeaderCell to be automatically capitalized.
+   */
+  lowerCase?: boolean;
+}
+
+export class HeaderCell extends React.PureComponent<HeaderCellProps, {}> {
+  public render() {
+    const HeaderCell = this.props.lowerCase
+      ? styled(Cell)`
+          ${headerCellCss};
+          ${textTruncate};
+        `
+      : styled(Cell)`
+          ${headerCellCss};
+          ${textCapitalize};
+          ${textTruncate};
+        `;
+    return <HeaderCell>{this.props.children}</HeaderCell>;
+  }
+}
+
+export default HeaderCell;
diff --git a/packages/table/stories/Table.stories.tsx b/packages/table/stories/Table.stories.tsx
@@ -456,4 +456,51 @@ storiesOf("Table", module)
       propTables: [Table, Column],
       propTablesExclude: [ResizableTableOnResizeDemo]
     }
-  });
+  })
+  .add("with lower-case header cells", () => (
+    <div
+      style={{
+        height: "175px",
+        width: "100%",
+        fontSize: "14px"
+      }}
+    >
+      <Table data={items}>
+        <Column
+          header={<HeaderCell lowerCase={true}>name</HeaderCell>}
+          cellRenderer={nameCellRenderer}
+          width={width}
+        />
+        <Column
+          header={<HeaderCell lowerCase={true}>role</HeaderCell>}
+          cellRenderer={roleCellRenderer}
+          width={width}
+        />
+        <Column
+          header={<HeaderCell lowerCase={true}>state</HeaderCell>}
+          cellRenderer={stateCellRenderer}
+          width={width}
+        />
+        <Column header="" cellRenderer={empty} width={width} />
+        <Column
+          header={<HeaderCell lowerCase={true}>Very Long</HeaderCell>}
+          cellRenderer={veryLongRenderer}
+          width={width}
+        />
+        <Column
+          header={
+            <HeaderCell lowerCase={true} textAlign="right">
+              zip code
+            </HeaderCell>
+          }
+          cellRenderer={zipcodeCellRenderer}
+          width={width}
+        />
+        <Column
+          header={<HeaderCell lowerCase={true}>city</HeaderCell>}
+          cellRenderer={cityCellRenderer}
+          width={width}
+        />
+      </Table>
+    </div>
+  ));
diff --git a/packages/table/style.ts b/packages/table/style.ts
@@ -29,10 +29,13 @@ export const headerHover = css`
 `;
 
 export const headerCellCss = css`
-  text-transform: capitalize;
   font-weight: bold;
 `;
 
+export const textCapitalize = css`
+  text-transform: capitalize;
+`;
+
 export const resizingHeader = css`
   cursor: col-resize;
   user-select: none;

diff --git a/packages/table/tests/__snapshots__/Cell.test.tsx.snap b/packages/table/tests/__snapshots__/Cell.test.tsx.snap
@@ -23,8 +23,8 @@ exports[`HeaderCell renders correctly 1`] = `
   padding: 7px;
   z-index: 1;
   text-align: left;
-  text-transform: capitalize;
   font-weight: bold;
+  text-transform: capitalize;
   overflow: hidden;
   overflow: -moz-hidden-unscrollable;
   text-overflow: ellipsis;

diff --git a/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap b/packages/table/tests/__snapshots__/CheckboxTable.test.tsx.snap
@@ -151,8 +151,8 @@ Array [
   padding: 7px;
   z-index: 1;
   text-align: left;
-  text-transform: capitalize;
   font-weight: bold;
+  text-transform: capitalize;
   overflow: hidden;
   overflow: -moz-hidden-unscrollable;
   text-overflow: ellipsis;
@@ -835,8 +835,8 @@ Array [
   padding: 7px;
   z-index: 1;
   text-align: left;
-  text-transform: capitalize;
   font-weight: bold;
+  text-transform: capitalize;
   overflow: hidden;
   overflow: -moz-hidden-unscrollable;
   text-overflow: ellipsis;
@@ -1615,8 +1615,8 @@ Array [
   padding: 7px;
   z-index: 1;
   text-align: left;
-  text-transform: capitalize;
   font-weight: bold;
+  text-transform: capitalize;
   overflow: hidden;
   overflow: -moz-hidden-unscrollable;
   text-overflow: ellipsis;

diff --git a/packages/table/tests/__snapshots__/SortableHeaderCell.test.tsx.snap b/packages/table/tests/__snapshots__/SortableHeaderCell.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`SortableHeaderCell renders default 1`] = `
   role="button"
   tabIndex={0}
 >
-  <Styled(Cell)
+  <HeaderCell
     aria-label="sort by column content in ascending order"
     aria-sort="descending"
     className="emotion-0"
@@ -48,6 +48,6 @@ exports[`SortableHeaderCell renders default 1`] = `
     <span>
       column content
     </span>
-  </Styled(Cell)>
+  </HeaderCell>
 </Clickable>
 `;