Update to latest Prettier and reformat

UNRELEASED.md

@@ -18,6 +18,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Dependency upgrades
 
+- Updated Prettier to v1.18.2 ([#2070](https://github.com/Shopify/polaris-react/pull/2070))
+
 ### Code quality
 
 ### Deprecations

scripts/readme-update-version.js

@@ -9,12 +9,14 @@ const {semverRegExp, readmes} = require('./utilities');
 const root = resolve(__dirname, '..');
 
 console.log(`🆕 Updating version in ${readmes.join(', ')}...`);
-readmes.map((readme) => resolve(root, readme)).forEach((file) => {
-  writeFileSync(
-    file,
-    readFileSync(file, 'utf8').replace(semverRegExp, newVersion),
-  );
-});
+readmes
+  .map((readme) => resolve(root, readme))
+  .forEach((file) => {
+    writeFileSync(
+      file,
+      readFileSync(file, 'utf8').replace(semverRegExp, newVersion),
+    );
+  });
 
 console.log(`🏃‍♂️ Running \`git add -A ${readmes.join(' ')}\`...`);
 const execOpts = {stdio: 'inherit'};

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -184,15 +184,13 @@ export class ComboBox extends React.PureComponent<ComboBoxProps, State> {
     } = this.props;
     const {comboBoxId, navigableOptions, selectedOptions} = this.state;
 
-    const actionsBeforeMarkup = actionsBefore &&
-      actionsBefore.length > 0 && (
-        <ActionList actionRole="option" items={actionsBefore} />
-      );
+    const actionsBeforeMarkup = actionsBefore && actionsBefore.length > 0 && (
+      <ActionList actionRole="option" items={actionsBefore} />
+    );
 
-    const actionsAfterMarkup = actionsAfter &&
-      actionsAfter.length > 0 && (
-        <ActionList actionRole="option" items={actionsAfter} />
-      );
+    const actionsAfterMarkup = actionsAfter && actionsAfter.length > 0 && (
+      <ActionList actionRole="option" items={actionsAfter} />
+    );
 
     const optionsMarkup = options.length > 0 && (
       <OptionList

src/components/Choice/Choice.tsx

@@ -54,12 +54,11 @@ export function Choice({
     </div>
   ) : null;
 
-  const errorMarkup = error &&
-    typeof error !== 'boolean' && (
-      <div className={styles.Error}>
-        <InlineError message={error} fieldID={id} />
-      </div>
-    );
+  const errorMarkup = error && typeof error !== 'boolean' && (
+    <div className={styles.Error}>
+      <InlineError message={error} fieldID={id} />
+    </div>
+  );
 
   const descriptionMarkup =
     helpTextMarkup || errorMarkup ? (

src/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -18,30 +18,24 @@ export const ContextualSaveBar = React.memo(function ContextualSaveBar({
 }: ContextualSaveBarProps) {
   const {setContextualSaveBar, removeContextualSaveBar} = useFrame();
 
-  React.useEffect(
-    () => {
-      setContextualSaveBar({
-        message,
-        saveAction,
-        discardAction,
-        alignContentFlush,
-      });
-    },
-    [
+  React.useEffect(() => {
+    setContextualSaveBar({
       message,
       saveAction,
       discardAction,
       alignContentFlush,
-      setContextualSaveBar,
-    ],
-  );
+    });
+  }, [
+    message,
+    saveAction,
+    discardAction,
+    alignContentFlush,
+    setContextualSaveBar,
+  ]);
 
-  React.useEffect(
-    () => {
-      return removeContextualSaveBar;
-    },
-    [removeContextualSaveBar],
-  );
+  React.useEffect(() => {
+    return removeContextualSaveBar;
+  }, [removeContextualSaveBar]);
 
   return null;
 });

src/components/DropZone/README.md

@@ -178,9 +178,7 @@ class DropZoneExample extends React.Component {
         <List type="bullet">
           {rejectedFiles.map((file, index) => (
             <List.Item key={index}>
-              {`"${
-                file.name
-              }" is not supported. File type must be .gif, .jpg, .png or .svg.`}
+              {`"${file.name}" is not supported. File type must be .gif, .jpg, .png or .svg.`}
             </List.Item>
           ))}
         </List>

src/components/Frame/components/CSSAnimation/CSSAnimation.tsx

@@ -33,23 +33,17 @@ export function CSSAnimation({
   const isMounted = useRef(false);
   const node = useRef<HTMLDivElement>(null);
 
-  useEffect(
-    () => {
-      if (!isMounted.current) return;
-      transitionStatus === TransitionStatus.Entering &&
-        changeTransitionStatus(TransitionStatus.Entered);
-    },
-    [transitionStatus],
-  );
+  useEffect(() => {
+    if (!isMounted.current) return;
+    transitionStatus === TransitionStatus.Entering &&
+      changeTransitionStatus(TransitionStatus.Entered);
+  }, [transitionStatus]);
 
-  useEffect(
-    () => {
-      if (!isMounted.current) return;
-      inProp && changeTransitionStatus(TransitionStatus.Entering);
-      !inProp && changeTransitionStatus(TransitionStatus.Exiting);
-    },
-    [inProp],
-  );
+  useEffect(() => {
+    if (!isMounted.current) return;
+    inProp && changeTransitionStatus(TransitionStatus.Entering);
+    !inProp && changeTransitionStatus(TransitionStatus.Exiting);
+  }, [inProp]);
 
   useEffect(() => {
     isMounted.current = true;

src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -25,32 +25,26 @@ export const ToastManager = memo(function ToastManager({
 }: ToastManagerProps) {
   const toastNodes: React.RefObject<HTMLDivElement>[] = [];
 
-  const updateToasts = useDeepCallback(
-    () => {
-      let targetInPos = 0;
-      toastMessages.forEach((_, index) => {
-        const currentToast = toastNodes[index];
-        if (!currentToast.current) return;
-        targetInPos += currentToast.current.clientHeight;
-        currentToast.current.style.setProperty(
-          '--toast-translate-y-in',
-          `-${targetInPos}px`,
-        );
-        currentToast.current.style.setProperty(
-          '--toast-translate-y-out',
-          `${-targetInPos + 150}px`,
-        );
-      });
-    },
-    [toastMessages, toastNodes],
-  );
+  const updateToasts = useDeepCallback(() => {
+    let targetInPos = 0;
+    toastMessages.forEach((_, index) => {
+      const currentToast = toastNodes[index];
+      if (!currentToast.current) return;
+      targetInPos += currentToast.current.clientHeight;
+      currentToast.current.style.setProperty(
+        '--toast-translate-y-in',
+        `-${targetInPos}px`,
+      );
+      currentToast.current.style.setProperty(
+        '--toast-translate-y-out',
+        `${-targetInPos + 150}px`,
+      );
+    });
+  }, [toastMessages, toastNodes]);
 
-  useDeepEffect(
-    () => {
-      updateToasts();
-    },
-    [toastMessages],
-  );
+  useDeepEffect(() => {
+    updateToasts();
+  }, [toastMessages]);
 
   const toastsMarkup = toastMessages.map((toast, index) => {
     const toastNode = createRef<HTMLDivElement>();

src/components/Labelled/Labelled.tsx

@@ -50,12 +50,11 @@ export function Labelled({
     </div>
   ) : null;
 
-  const errorMarkup = error &&
-    typeof error !== 'boolean' && (
-      <div className={styles.Error}>
-        <InlineError message={error} fieldID={id} />
-      </div>
-    );
+  const errorMarkup = error && typeof error !== 'boolean' && (
+    <div className={styles.Error}>
+      <InlineError message={error} fieldID={id} />
+    </div>
+  );
 
   const labelMarkup = label ? (
     <div className={styles.LabelWrapper}>

src/components/Loading/Loading.tsx

@@ -13,31 +13,28 @@ export const Loading = React.memo(function Loading() {
   const appBridge = useAppBridge();
   const {startLoading, stopLoading} = useFrame();
 
-  useEffect(
-    () => {
+  useEffect(() => {
+    if (appBridge == null) {
+      startLoading();
+    } else {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading',
+      );
+
+      appBridgeLoading.current = AppBridgeLoading.create(appBridge);
+      appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START);
+    }
+
+    return () => {
       if (appBridge == null) {
-        startLoading();
+        stopLoading();
       } else {
-        // eslint-disable-next-line no-console
-        console.warn(
-          'Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading',
-        );
-
-        appBridgeLoading.current = AppBridgeLoading.create(appBridge);
-        appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START);
+        appBridgeLoading.current &&
+          appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP);
       }
-
-      return () => {
-        if (appBridge == null) {
-          stopLoading();
-        } else {
-          appBridgeLoading.current &&
-            appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP);
-        }
-      };
-    },
-    [appBridge, startLoading, stopLoading],
-  );
+    };
+  }, [appBridge, startLoading, stopLoading]);
 
   return null;
 });

src/components/Navigation/components/Item/Item.tsx

@@ -88,24 +88,18 @@ export function Item({
   const {location, onNavigationDismiss} = useContext(NavigationContext);
   const [expanded, setExpanded] = useState(false);
 
-  const handleResize = useCallback(
-    () => {
-      if (!navigationBarCollapsed().matches && expanded) {
-        setExpanded(false);
-      }
-    },
-    [expanded],
-  );
-
-  useEffect(
-    () => {
-      navigationBarCollapsed().addListener(handleResize);
-      return () => {
-        navigationBarCollapsed().removeListener(handleResize);
-      };
-    },
-    [handleResize],
-  );
+  const handleResize = useCallback(() => {
+    if (!navigationBarCollapsed().matches && expanded) {
+      setExpanded(false);
+    }
+  }, [expanded]);
+
+  useEffect(() => {
+    navigationBarCollapsed().addListener(handleResize);
+    return () => {
+      navigationBarCollapsed().removeListener(handleResize);
+    };
+  }, [handleResize]);
 
   const tabIndex = disabled ? -1 : 0;
 

src/components/Navigation/components/Section/Section.tsx

@@ -97,22 +97,21 @@ export class Section extends React.Component<SectionProps, State> {
     const toggleClassName = classNames(styles.Item, styles.RollupToggle);
     const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
 
-    const toggleRollup = rollup &&
-      items.length > rollup.after && (
-        <div className={styles.ListItem} key="List Item">
-          <button
-            type="button"
-            className={toggleClassName}
-            onClick={this.toggleViewAll}
-            aria-label={ariaLabel}
-            testID="ToggleViewAll"
-          >
-            <span className={styles.Icon}>
-              <Icon source={HorizontalDotsMinor} />
-            </span>
-          </button>
-        </div>
-      );
+    const toggleRollup = rollup && items.length > rollup.after && (
+      <div className={styles.ListItem} key="List Item">
+        <button
+          type="button"
+          className={toggleClassName}
+          onClick={this.toggleViewAll}
+          aria-label={ariaLabel}
+          testID="ToggleViewAll"
+        >
+          <span className={styles.Icon}>
+            <Icon source={HorizontalDotsMinor} />
+          </span>
+        </button>
+      </div>
+    );
 
     const activeItemIndex = items.findIndex((item: ItemProps) => {
       if (!rollup) {
@@ -148,15 +147,14 @@ export class Section extends React.Component<SectionProps, State> {
 
     const additionalItemsId = createAdditionalItemsId();
 
-    const activeItemsMarkup = rollup &&
-      additionalItems.length > 0 && (
-        <li className={styles.RollupSection}>
-          <Collapsible id={additionalItemsId} open={expanded}>
-            <ul className={styles.List}>{additionalItems}</ul>
-          </Collapsible>
-          {toggleRollup}
-        </li>
-      );
+    const activeItemsMarkup = rollup && additionalItems.length > 0 && (
+      <li className={styles.RollupSection}>
+        <Collapsible id={additionalItemsId} open={expanded}>
+          <ul className={styles.List}>{additionalItems}</ul>
+        </Collapsible>
+        {toggleRollup}
+      </li>
+    );
 
     return (
       <ul className={className}>