HIG for cancelation buttons

Summary:
- Make sure it's "cancel" in all cases.
- Move cancel buttons to the left.
- Rename the callback to clarify purpose.

Reviewed By: jknoxville

Differential Revision: D17762466

fbshipit-source-id: 0f6a9d83ff0cab139f926fb5a512be4618471ee8

src/chrome/ShareSheet.tsx

@@ -170,7 +170,7 @@ export default class ShareSheet extends Component<Props, State> {
   }
 
   renderTheProgessState(
-    onHide: () => void,
+    cancelAndHide: () => void,
     statusUpdate: string | null | undefined,
   ) {
     return (
@@ -190,9 +190,13 @@ export default class ShareSheet extends Component<Props, State> {
           </Center>
           <FlexRow>
             <Spacer />
+            <Button compact padded onClick={cancelAndHide}>
+              Cancel
+            </Button>
             <Button
               compact
               padded
+              type="primary"
               onClick={() => {
                 this.setState({runInBackground: true});
                 const {statusUpdate} = this.state;
@@ -203,9 +207,6 @@ export default class ShareSheet extends Component<Props, State> {
               }}>
               Run In Background
             </Button>
-            <Button compact padded onClick={onHide}>
-              Close
-            </Button>
           </FlexRow>
         </FlexColumn>
       </Container>
@@ -213,14 +214,14 @@ export default class ShareSheet extends Component<Props, State> {
   }
 
   render() {
-    const onHide = () => {
+    const cancelAndHide = () => {
       this.context.store.dispatch(unsetShare());
       this.props.onHide();
       this.idler.cancel();
     };
     const {result, statusUpdate, errorArray} = this.state;
     if (!result || !(result as DataExportResult).flipperUrl) {
-      return this.renderTheProgessState(onHide, statusUpdate);
+      return this.renderTheProgessState(cancelAndHide, statusUpdate);
     }
 
     return (
@@ -257,7 +258,7 @@ export default class ShareSheet extends Component<Props, State> {
           </FlexColumn>
           <FlexRow>
             <Spacer />
-            <Button compact padded onClick={onHide}>
+            <Button compact padded onClick={cancelAndHide}>
               Close
             </Button>
           </FlexRow>

src/chrome/ShareSheetExportFile.tsx

@@ -165,7 +165,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         </FlexColumn>
         <FlexRow>
           <Spacer />
-          <Button compact padded onClick={() => this.onHide(context)}>
+          <Button compact padded onClick={() => this.cancelAndHide(context)}>
             Close
           </Button>
         </FlexRow>
@@ -182,7 +182,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         </ErrorMessage>
         <FlexRow>
           <Spacer />
-          <Button compact padded onClick={() => this.onHide(context)}>
+          <Button compact padded onClick={() => this.cancelAndHide(context)}>
             Close
           </Button>
         </FlexRow>
@@ -207,9 +207,13 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         </Center>
         <FlexRow>
           <Spacer />
+          <Button compact padded onClick={() => this.cancelAndHide(context)}>
+            Cancel
+          </Button>
           <Button
             compact
             padded
+            type="primary"
             onClick={() => {
               this.setState({runInBackground: true});
               const {statusUpdate} = this.state;
@@ -220,15 +224,12 @@ export default class ShareSheetExportFile extends Component<Props, State> {
             }}>
             Run In Background
           </Button>
-          <Button compact padded onClick={() => this.onHide(context)}>
-            Cancel
-          </Button>
         </FlexRow>
       </Container>
     );
   }
 
-  onHide(context: any) {
+  cancelAndHide(context: any) {
     context.store.dispatch(unsetShare());
     this.props.onHide();
     this.idler.cancel();
@@ -236,7 +237,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
 
   render() {
     if (!this.props.file) {
-      return this.renderNoFileError();
+      return this.renderNoFileError(this.context);
     }
     const {result, statusUpdate} = this.state;
     switch (result.kind) {
@@ -249,7 +250,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
     }
   }
 
-  renderNoFileError() {
+  renderNoFileError(context: any) {
     return (
       <Container>
         <Center>
@@ -257,7 +258,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         </Center>
         <FlexRow>
           <Spacer />
-          <Button compact padded onClick={this.onHide}>
+          <Button compact padded onClick={() => this.cancelAndHide(context)}>
             Close
           </Button>
         </FlexRow>