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/App.js

@@ -49,7 +49,7 @@ export class App extends React.Component<Props> {
   }
   render() {
     return (
-      <FlexColumn fill={true}>
+      <FlexColumn grow={true}>
         <TitleBar />
         {this.props.bugDialogVisible && (
           <BugReporterDialog
@@ -59,7 +59,7 @@ export class App extends React.Component<Props> {
             }}
           />
         )}
-        <FlexRow fill={true}>
+        <FlexRow grow={true}>
           {this.props.leftSidebarVisible && <MainSidebar />}
           {this.props.selectedDevice ? (
             <PluginContainer logger={this.props.logger} />

src/__tests__/__snapshots__/App.electron.js.snap

@@ -3,7 +3,6 @@
 exports[`Empty app state matches snapshot 1`] = `
 <div
   className="css-1si6n3e"
-  fill={true}
 >
   <div
     className="toolbar css-1u64wvw"
@@ -113,7 +112,6 @@ exports[`Empty app state matches snapshot 1`] = `
   </div>
   <div
     className="css-9qtipk"
-    fill={true}
   >
     <div
       className="css-1atbcdi"

src/chrome/BugReporterDialog.js

@@ -183,7 +183,7 @@ export default class BugReporterDialog extends Component<Props, State> {
 
     if (success) {
       content = (
-        <FlexCenter fill={true}>
+        <FlexCenter grow={true}>
           <FlexColumn>
             <Text>
               <Text>Bug </Text>
@@ -204,7 +204,7 @@ export default class BugReporterDialog extends Component<Props, State> {
       );
     } else {
       content = (
-        <Container fill={true}>
+        <Container grow={true}>
           <TitleInput
             placeholder="Title..."
             value={title}

src/chrome/PluginManager.js

@@ -343,7 +343,7 @@ class PluginManager extends PureComponent<Props, State> {
     );
     return (
       <Container>
-        <FlexColumn fill={true}>
+        <FlexColumn grow={true}>
           {this.state.restartRequired && (
             <RestartRequired onClick={this.relaunch}>
               <Glyph name="arrows-circle" size={12} color={colors.white} />
@@ -396,7 +396,7 @@ const SearchablePluginManager = Searchable(PluginManager);
 export default class extends PureComponent<{}> {
   render() {
     return (
-      <FlexColumn fill={true}>
+      <FlexColumn grow={true}>
         <SearchablePluginManager />
       </FlexColumn>
     );

src/createTablePlugin.js

@@ -185,7 +185,7 @@ export function createTablePlugin<T: RowData>(props: Props<T>) {
       const {rows} = this.state;
 
       return (
-        <FlexColumn fill={true}>
+        <FlexColumn grow={true}>
           <SearchableTable
             key={props.id}
             rowLineHeight={28}

src/plugins/cpu/index.js

@@ -340,7 +340,7 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<CPUState> {
   render() {
     return (
       <FlexRow>
-        <FlexColumn fill={true}>
+        <FlexColumn grow={true}>
           <Toolbar position="top">
             {this.state.monitoring ? (
               <Button onClick={this.onStopMonitor} icon="pause">

src/plugins/layout/index.js

@@ -1120,7 +1120,7 @@ export default class Layout extends FlipperPlugin<InspectorState> {
     } = this.state;
 
     return (
-      <FlexColumn fill={true}>
+      <FlexColumn grow={true}>
         <Toolbar>
           <SearchIconContainer
             onClick={this.onFindClick}
@@ -1197,7 +1197,7 @@ export default class Layout extends FlipperPlugin<InspectorState> {
               </SearchIconContainer>
             )}
         </Toolbar>
-        <FlexRow fill={true}>
+        <FlexRow grow={true}>
           {initialised ? (
             <ElementsInspector
               onElementSelected={this.onElementSelected}
@@ -1210,7 +1210,7 @@ export default class Layout extends FlipperPlugin<InspectorState> {
               elements={elements}
             />
           ) : (
-            <Center fill={true}>
+            <Center grow={true}>
               <LoadingIndicator />
             </Center>
           )}

src/plugins/leak_canary/index.js

@@ -147,14 +147,14 @@ export default class LeakCanary extends FlipperPlugin<State> {
 
     return (
       <Sidebar position="right" width={600} minWidth={300} maxWidth={900}>
-        <Panel heading={'Instance'} floating={false} fill={false}>
+        <Panel heading={'Instance'} floating={false} grow={false}>
           <ManagedDataInspector
             data={instanceFields}
             expandRoot={true}
             extractValue={this._extractValue}
           />
         </Panel>
-        <Panel heading={'Static'} floating={false} fill={false}>
+        <Panel heading={'Static'} floating={false} grow={false}>
           <ManagedDataInspector
             data={staticFields}
             expandRoot={true}
@@ -171,8 +171,8 @@ export default class LeakCanary extends FlipperPlugin<State> {
 
     return (
       <Window>
-        <FlexColumn fill={true}>
+        <FlexColumn grow={true}>
-          <FlexColumn fill={true} scrollable={true}>
+          <FlexColumn grow={true} scrollable={true}>
             {this.state.leaks.map((leak: Leak, idx: number) => {
               const elements = showFullClassPaths
                 ? leak.elements

src/plugins/logs/LogWatcher.js

@@ -188,7 +188,7 @@ export default class LogWatcher extends PureComponent<Props, State> {
 
   render() {
     return (
-      <FlexColumn fill={true} tabIndex={-1} onKeyDown={this.onKeyDown}>
+      <FlexColumn grow={true} tabIndex={-1} onKeyDown={this.onKeyDown}>
         <WatcherPanel
           heading="Expression Watcher"
           floating={false}

src/plugins/network/index.js

@@ -197,7 +197,7 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
     const {requests, responses} = this.props.persistedState;
 
     return (
-      <FlexColumn fill={true}>
+      <FlexColumn grow={true}>
         <NetworkTable
           requests={requests || {}}
           responses={responses || {}}

src/plugins/sandbox/index.js

@@ -103,7 +103,7 @@ export default class SandboxView extends FlipperPlugin<SandboxState> {
     return (
       <FlexColumn>
         <SandboxView.TextInputLayout>
-          <ButtonGroup flexGrow={1}>
+          <ButtonGroup flexgrow={true}>
             <SandboxView.TextInput
               type="text"
               placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"

src/plugins/shared_preferences/index.js

@@ -200,7 +200,7 @@ export default class extends FlipperPlugin<SharedPreferencesState> {
     }
 
     return (
-      <RootColumn fill={true}>
+      <RootColumn grow={true}>
         <Heading>
           <span style={{marginRight: '16px'}}>Preference File</span>
           <Select
@@ -214,7 +214,7 @@ export default class extends FlipperPlugin<SharedPreferencesState> {
             onChange={this.onSharedPreferencesSelected}
           />
         </Heading>
-        <FlexRow fill={true} scrollable={true}>
+        <FlexRow grow={true} scrollable={true}>
           <InspectorColumn>
             <Heading>Inspector</Heading>
             <ManagedDataInspector

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}