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
2018-10-22 09:52:19 -07:00
parent 2a179b9d3c
commit 086ab0188b
23 changed files with 41 additions and 43 deletions
--- a/src/App.js
+++ b/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} />
--- a/src/tests/snapshots/App.electron.js.snap
+++ b/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"
--- a/src/chrome/BugReporterDialog.js
+++ b/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}
--- a/src/chrome/PluginManager.js
+++ b/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>
    );
--- a/src/createTablePlugin.js
+++ b/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}
--- a/src/plugins/cpu/index.js
+++ b/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">
--- a/src/plugins/layout/index.js
+++ b/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>
          )}
--- a/src/plugins/leak_canary/index.js
+++ b/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 fill={true} scrollable={true}>
+        <FlexColumn grow={true}>
+          <FlexColumn grow={true} scrollable={true}>
            {this.state.leaks.map((leak: Leak, idx: number) => {
              const elements = showFullClassPaths
                ? leak.elements
--- a/src/plugins/logs/LogWatcher.js
+++ b/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}
--- a/src/plugins/network/index.js
+++ b/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 || {}}
--- a/src/plugins/sandbox/index.js
+++ b/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)"
--- a/src/plugins/shared_preferences/index.js
+++ b/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
--- a/src/ui/components/ErrorBoundary.js
+++ b/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} />
--- a/src/ui/components/Interactive.js
+++ b/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%';
--- a/src/ui/components/Panel.js
+++ b/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}
--- a/src/ui/components/Tabs.js
+++ b/src/ui/components/Tabs.js
@@ -251,7 +251,7 @@ export default function Tabs(props: {|
  }

  return (
-    <FlexColumn fill={true}>
+    <FlexColumn grow={true}>
      <TabList>
        {before}
        {tabList}
--- a/src/ui/components/View.js
+++ b/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;
--- a/src/ui/components/VirtualList.js
+++ b/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}>
--- a/src/ui/components/console.js
+++ b/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}
--- a/src/ui/components/elements-inspector/ElementsInspector.js
+++ b/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}
--- a/src/ui/components/elements-inspector/sidebar.js
+++ b/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>,
      );
--- a/src/ui/components/intro/intro.js
+++ b/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 && (
--- a/src/ui/components/table/TableHead.js
+++ b/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}