feat: Add shadedHeader prop, fix Edge header border

src/Table/README.mdx

@@ -24,6 +24,16 @@ A table component with a sticky header row.
 By default, column names will be used to select a field from the data row.
 To specify a field instead, use the `cellRenderer` prop.
 
+```jsx
+<Table data={dummyData.slice(0, 4)}>
+	<Column isHeading name="Name" />
+	<Column name="Email" />
+	<Column name="Country" cellRenderer={item => item.region} />
+	<Column name="Type" />
+	<Column name="Time" />
+</Table>
+```
+
 <Playground>
 	<Table data={dummyData.slice(0, 4)}>
 		<Column isHeading name="Name" />
@@ -36,29 +46,30 @@ To specify a field instead, use the `cellRenderer` prop.
 
 ### Simple example with object column config
 
-The same example as above, but using an array of objects to define the columns.
-
-<Playground>
-	<Table
-		data={dummyData.slice(4, 8)}
-		columns={[
-			{name: 'Name', isHeading: true},
-			{name: 'Email'},
-			{name: 'Country', cellRenderer: item => item.region},
-			{name: 'Type'},
-			{name: 'Time'},
-		]}
-	/>
-</Playground>
+The table above can also be set up using an array of objects to define the columns:
+
+```jsx
+<Table
+	data={dummyData.slice(0, 4)}
+	columns={[
+		{name: 'Name', isHeading: true},
+		{name: 'Email'},
+		{name: 'Country', cellRenderer: item => item.region},
+		{name: 'Type'},
+		{name: 'Time'},
+	]}
+/>
+```
 
 ### Customisation example
 
 -   Use `cellRenderer` to easily customise the way a cell's content is rendered.
 -   Use fixed or percentage `width` values to customise column sizes.
+-   Use the `shadedHeader` prop for a shaded table header background
 -   Use the `pl` or `pr` props to specify left and right inner padding on the table, to visually align the first and last columns with the rest of the design without affecting horizontal rules
 
 <Playground>
-	<Table data={dummyData.slice(8, 12)} pl="xl" pr={20}>
+	<Table shadedHeader data={dummyData.slice(4, 8)} pl="xl" pr={20}>
 		<Column
 			name="Role"
 			width={30}
@@ -83,7 +94,7 @@ The same example as above, but using an array of objects to define the columns.
 -   **Allowing line breaks:** By default, cells have only one line of text and are truncated with an ellipsis when they're too long. Use the `allowLineBreaks` prop to let long words wrap around to a new line.
 
 <Playground>
-	<Table data={dummyData.slice(12, 16)}>
+	<Table data={dummyData.slice(8, 12)}>
 		<Column
 			name="Role"
 			width={30}

src/Table/index.js

@@ -27,7 +27,8 @@ const StyledTable = styled.table`
 	width: 100%;
 
 	tr:hover {
-		background-color: ${p => alpha(p.theme.shade, p.theme.shadeStrength)};
+		background-color: ${p =>
+			alpha(p.theme.shade, Number(p.theme.shadeStrength) / 2)};
 	}
 
 	td,
@@ -43,7 +44,30 @@ const StyledTable = styled.table`
 		top: 0;
 		z-index: ${p => p.theme.globals.z.raised};
 		background-color: ${p => p.theme.background};
-		border-bottom: ${p => borderValue(p.theme)};
+
+		/**
+		* MS Edge shows glitchy rendering when using a normal
+		* border on sticky table headers, so we're using a
+		* pseudo-element instead
+		*/
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: ${p => p.theme.globals.z.below};
+			border-bottom: ${p => borderValue(p.theme)};
+			${p =>
+				p.shadedHeader &&
+				css`
+					background-color: ${alpha(
+						p.theme.shade,
+						p.theme.shadeStrength
+					)};
+				`}
+		}
 	}
 
 	${p =>
@@ -83,6 +107,7 @@ function Table({
 	data,
 	headerRenderer = defaultHeaderRenderer,
 	rowMinHeight,
+	shadedHeader,
 	...otherProps
 }) {
 	const ref = useRef();
@@ -95,7 +120,11 @@ function Table({
 
 	return (
 		<div ref={ref}>
-			<StyledTable rowMinHeight={rowMinHeight} {...otherProps}>
+			<StyledTable
+				shadedHeader={shadedHeader}
+				rowMinHeight={rowMinHeight}
+				{...otherProps}
+			>
 				<thead>
 					<tr>
 						{columns.map(column => {
@@ -163,6 +192,7 @@ Table.propTypes = {
 	pl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	pr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	rowMinHeight: PropTypes.number,
+	shadedHeader: PropTypes.bool,
 };
 
 const columnPropsShape = {

src/theme/sections.js

@@ -8,7 +8,7 @@ const sections = {
 		shade: colors.black,
 		highlight: colors.pink,
 		textDimStrength: 0.75,
-		shadeStrength: 0.12,
+		shadeStrength: 0.08,
 		lineStrength: 0.2,
 	},
 };