rename fill attribute

Summary:
We were using `fill={true}` as an attribute to make flexbox containers fill the entire available space.

However, `fill` is an HTML attribute (see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill) This caused warnings printed to the console.

This diff renames the attribute to `grow` with is also more in line with the Flexbox terminology.

Reviewed By: priteshrnandgaonkar

Differential Revision: D10488389

fbshipit-source-id: ed8553c6203cdf6df94d26c731164ecec4c9fbd2

src/ui/components/ErrorBoundary.js

@@ -66,7 +66,7 @@ export default class ErrorBoundary extends Component<
       }
 
       return (
-        <ErrorBoundaryContainer fill={true}>
+        <ErrorBoundaryContainer grow={true}>
           <Heading>{heading}</Heading>
           {this.props.showStack !== false && (
             <ErrorBoundaryStack error={error} />

src/ui/components/Interactive.js

@@ -48,7 +48,7 @@ type InteractiveProps = {|
   movable?: boolean,
   hidden?: boolean,
   moving?: boolean,
-  fill?: boolean,
+  grow?: boolean,
   siblings?: $Shape<{[key: string]: $Shape<Rect>}>,
   updateCursor?: (cursor: ?string) => void,
   zIndex?: number,
@@ -650,7 +650,7 @@ export default class Interactive extends React.Component<
   };
 
   render() {
-    const {fill, height, left, movable, top, width, zIndex} = this.props;
+    const {grow, height, left, movable, top, width, zIndex} = this.props;
 
     const style: Object = {
       cursor: this.state.cursor,
@@ -658,7 +658,7 @@ export default class Interactive extends React.Component<
     };
 
     if (movable === true || top != null || left != null) {
-      if (fill === true) {
+      if (grow === true) {
         style.left = left || 0;
         style.top = top || 0;
       } else {
@@ -666,7 +666,7 @@ export default class Interactive extends React.Component<
       }
     }
 
-    if (fill === true) {
+    if (grow === true) {
       style.right = 0;
       style.bottom = 0;
       style.width = '100%';

src/ui/components/Panel.js

@@ -40,7 +40,7 @@ export default class Panel extends React.Component<
      *  height: 100%;
      *  width: 100%;
      */
-    fill?: boolean,
+    grow?: boolean,
     /**
      * Heading for this panel. If this is anything other than a string then no
      * padding is applied to the heading.
@@ -74,10 +74,10 @@ export default class Panel extends React.Component<
 > {
   static defaultProps: {|
     floating: boolean,
-    fill: boolean,
+    grow: boolean,
     collapsable: boolean,
   |} = {
-    fill: false,
+    grow: false,
     floating: true,
     collapsable: true,
   };
@@ -124,7 +124,7 @@ export default class Panel extends React.Component<
       padded,
       children,
       className,
-      fill,
+      grow,
       floating,
       heading,
       collapsable,
@@ -135,7 +135,7 @@ export default class Panel extends React.Component<
       <Panel.PanelContainer
         className={className}
         floating={floating}
-        fill={fill}
+        grow={grow}
         collapsed={collapsed}>
         <Panel.PanelHeader
           floating={floating}
@@ -156,7 +156,7 @@ export default class Panel extends React.Component<
 
         {children == null || (collapsable && collapsed) ? null : (
           <Panel.PanelBody
-            fill={fill}
+            grow={grow}
             padded={padded == null ? true : padded}
             floating={floating}>
             {children}

src/ui/components/Tabs.js

@@ -251,7 +251,7 @@ export default function Tabs(props: {|
   }
 
   return (
-    <FlexColumn fill={true}>
+    <FlexColumn grow={true}>
       <TabList>
         {before}
         {tabList}

src/ui/components/View.js

@@ -8,10 +8,10 @@
 import styled from '../styled/index.js';
 
 const View = styled('div')(props => ({
-  height: props.fill ? '100%' : 'auto',
+  height: props.grow ? '100%' : 'auto',
   overflow: props.scrollable ? 'auto' : 'visible',
   position: 'relative',
-  width: props.fill ? '100%' : 'auto',
+  width: props.grow ? '100%' : 'auto',
 }));
 
 export default View;

src/ui/components/VirtualList.js

@@ -126,7 +126,7 @@ export default class VirtualList extends Component<
 
     return (
       <View
-        fill={true}
+        grow={true}
         onScroll={this.handleScroll}
         innerRef={this.setRef}
         scrollable={true}>

src/ui/components/console.js

@@ -197,7 +197,7 @@ export class Console extends Component<Props, State> {
   render() {
     return (
       <Console.Window>
-        <View fill>{this.renderPreviousCommands()}</View>
+        <View grow={true}>{this.renderPreviousCommands()}</View>
         <form onSubmit={this.onSubmit}>
           <Console.Input
             onChange={this.onInputChange}

src/ui/components/elements-inspector/ElementsInspector.js

@@ -84,7 +84,7 @@ export default class ElementsInspector extends Component<{
     } = this.props;
 
     return (
-      <FlexRow fill={true}>
+      <FlexRow grow={true}>
         <Elements
           onElementExpanded={onElementExpanded}
           onElementSelected={onElementSelected}

src/ui/components/elements-inspector/sidebar.js

@@ -59,7 +59,7 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
   render() {
     const {id} = this.props;
     return (
-      <Panel heading={id} floating={false} fill={false}>
+      <Panel heading={id} floating={false} grow={false}>
         <ManagedDataInspector
           data={this.props.data}
           setValue={this.props.onValueChanged ? this.setValue : undefined}
@@ -137,7 +137,7 @@ export class InspectorSidebar extends Component<Props, State> {
 
     if (GK.get('sonar_show_console_plugin') && this.state.isConsoleEnabled) {
       sections.push(
-        <Panel heading="JS Console" floating={false} fill={false}>
+        <Panel heading="JS Console" floating={false} grow={false}>
           <Console client={this.props.client} getContext={() => element.id} />
         </Panel>,
       );

src/ui/components/intro/intro.js

@@ -87,7 +87,7 @@ export default class Intro extends PureComponent<Props> {
   render() {
     const {icon, children, title, onDismiss, screenshot} = this.props;
     return (
-      <FlexRow fill={true}>
+      <FlexRow grow={true}>
         <Containter>
           <TitleRow>
             {icon != null && (

src/ui/components/table/TableHead.js

@@ -164,7 +164,7 @@ class TableHeadColumn extends PureComponent<{
     if (isResizable) {
       children = (
         <TableHeaderColumnInteractive
-          fill={true}
+          grow={true}
           resizable={RIGHT_RESIZABLE}
           onResize={this.onResize}>
           {children}