Swap positions of ActionButtons coz UX

jxom · Nov 27, 2018 · fa90ea6 · fa90ea6
1 parent b9844bc
commit fa90ea6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/Button/ActionButtons.js b/src/Button/ActionButtons.js
@@ -40,14 +40,14 @@ const ActionButtons = ({
   ...props
 }: Props) => (
   <Set {...props}>
-    <Button isLoading={isLoading} onClick={onClickSubmit} palette={palette} type={type} {...submitProps}>
-      {/* $FlowFixMe */}
-      {submitText}
-    </Button>
     <Button onClick={onClickCancel} {...cancelProps}>
       {/* $FlowFixMe */}
       {cancelText}
     </Button>
+    <Button isLoading={isLoading} onClick={onClickSubmit} palette={palette} type={type} {...submitProps}>
+      {/* $FlowFixMe */}
+      {submitText}
+    </Button>
   </Set>
 );
 

diff --git a/src/Card/Card.mdx b/src/Card/Card.mdx
@@ -50,7 +50,7 @@ You can render a header with actions for the card using the `headerActions` prop
 You can render a footer for the card using the `footer` prop.
 
 <Playground>
-  <Card title="This is a title" footer={<ActionButtons />}>
+  <Card title="This is a title" footer={<ActionButtons justifyContent="flex-end" />}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
     eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
     augue sit amet justo.

diff --git a/src/Dialog/Dialog.mdx b/src/Dialog/Dialog.mdx
@@ -33,7 +33,7 @@ import Dialog from './index';
 You can render a footer for the dialog using the `footer` prop.
 
 <Playground>
-  <Dialog title="This is a title" footer={<ActionButtons />}>
+  <Dialog title="This is a title" footer={<ActionButtons justifyContent="flex-end" />}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
     eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
     augue sit amet justo.
@@ -45,7 +45,7 @@ You can render a footer for the dialog using the `footer` prop.
 To render a close icon on a dialog, use the `showCloseButton` prop.
 
 <Playground>
-  <Dialog onClickClose={() => console.log('close')} showCloseButton title="This is a title" footer={<ActionButtons />}>
+  <Dialog onClickClose={() => console.log('close')} showCloseButton title="This is a title" footer={<ActionButtons justifyContent="flex-end" />}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices
     eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus
     augue sit amet justo.