Issue 567 - Add border-radius support

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+[#567](https://github.com/plotly/dash-table/issues/567)
+- Add support for missing `border-radius` in style_** props
+- Fix table's inner vs. outer container styling 
+
 ## [4.2.0] - 2019-08-27
 ### Added
 [#317](https://github.com/plotly/dash-table/issues/317)

generator/cssPropertiesGenerator.js

@@ -38,6 +38,7 @@ const props = [
     'borderLeftColor',
     'borderLeftStyle',
     'borderLeftWidth',
+    'borderRadius',
     'borderRight',
     'borderRightColor',
     'borderRightStyle',
@@ -282,52 +283,27 @@ const props = [
     'zoom'
 ];
 
-function toSnakeCase(name) {
-    return name.replace(/[A-Z]/g, v => `_${v.toLowerCase()}`);
-}
-
-function toKebabCase(name) {
-    return name.replace(/[A-Z]/g, v => `-${v.toLowerCase()}`);
-}
-
-const snakes = props.map(prop => [toSnakeCase(prop), prop]);
-const kebabs = props.map(prop => [toKebabCase(prop), prop]);
-const camels = props.map(prop => [prop, prop]);
-
-const map = new Map();
-
-snakes.forEach(([snake, camel]) => map.set(snake, camel));
-kebabs.forEach(([kebab, camel]) => map.set(kebab, camel));
-camels.forEach(([camel]) => map.set(camel, camel));
-
 const fs = require('fs');
 
-var stream1 = fs.createWriteStream('src/dash-table/derived/style/py2jsCssProperties.ts');
-stream1.once('open', () => {
-    stream1.write('export type StyleProperty = string | number;\n');
-    stream1.write('\n');
-    stream1.write('export default new Map<string, string>([\n');
-
-    let first = true;
-    map.forEach((value, key) => {
-        if (!first) {
-            stream1.write(',\n');
-        }
+const propFragments = props.map(prop => {
+    let matches = prop.match(/[a-zA-Z][a-z]*/g);
+    matches = matches.map(m => `'${m.toLowerCase()}'`);
 
-        first = false;
-        stream1.write(`    ['${key}', '${value}']`);
-    });
-    stream1.write('\n]);');
+    return `[${matches.join(', ')}]`;
+});
 
+var stream1 = fs.createWriteStream('src/dash-table/derived/style/cssProperties.ts');
+stream1.once('open', () => {
+    stream1.write(`export default [\n    ${propFragments.join(',\n    ')}\n];`);
     stream1.end();
 });
 
 var stream2 = fs.createWriteStream('src/dash-table/derived/style/IStyle.ts');
 stream2.once('open', () => {
-    stream2.write(`import { StyleProperty } from './ py2jsCssProperties';\n`);
+    stream2.write(`import { StyleProperty } from './py2jsCssProperties';\n`);
     stream2.write('\n');
     stream2.write('export default interface IStyle {\n');
-    camels.forEach(([key]) => {
+    props.forEach(key => {
         stream2.write(`    ${key}: StyleProperty;\n`);
     });
     stream2.write('}');
@@ -338,7 +314,7 @@ stream2.once('open', () => {
 var stream3 = fs.createWriteStream('proptypes.js');
 stream3.once('open', () => {
     let first = true;
-    map.forEach((value, key) => {
+    props.forEach(key => {
         if (!first) {
             stream3.write(',\n');
         }

src/dash-table/components/ControlledTable/index.tsx

@@ -39,6 +39,11 @@ const DEFAULT_STYLE = {
     width: '100%'
 };
 
+const INNER_STYLE = {
+    minHeight: '100%',
+    minWidth: '100%'
+};
+
 export default class ControlledTable extends PureComponent<ControlledTableProps> {
     private readonly menuRef = React.createRef<HTMLDivElement>();
     private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
@@ -817,7 +822,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                 <div
                     ref='table'
                     className={innerClasses.join(' ')}
-                    style={tableStyle}
+                    style={INNER_STYLE}
                 >
                     {grid.map((row, rowIndex) => (<div
                         key={`r${rowIndex}`}

src/dash-table/derived/edges/type.ts

@@ -2,7 +2,7 @@ import * as R from 'ramda';
 import { CSSProperties } from 'react';
 
 import { OptionalMap, OptionalProp, PropOf } from 'core/type';
-import py2jsCssProperties from '../style/py2jsCssProperties';
+import { KnownCssProperties } from '../style/py2jsCssProperties';
 import { shallowClone } from 'core/math/matrixZipMap';
 
 export type Edge = any;
@@ -26,11 +26,9 @@ export const BORDER_PROPERTIES: BorderProp[] = [
     'borderTop'
 ];
 
-export const BORDER_PROPERTIES_AND_FRAGMENTS: string[] = R.uniq(
-    R.filter(
-        p => p.indexOf('border') === 0,
-        Array.from(py2jsCssProperties.values())
-    )
+export const BORDER_PROPERTIES_AND_FRAGMENTS: string[] = R.filter(
+    p => p.indexOf('border') === 0,
+    KnownCssProperties
 );
 
 export interface IEdgesMatrix {

src/dash-table/derived/style/IStyle.ts

@@ -40,6 +40,7 @@ export default interface IStyle {
     borderLeftColor: StyleProperty;
     borderLeftStyle: StyleProperty;
     borderLeftWidth: StyleProperty;
+    borderRadius: StyleProperty;
     borderRight: StyleProperty;
     borderRightColor: StyleProperty;
     borderRightStyle: StyleProperty;