fix(Dialog): reverse the order of buttons

Author: tenphi

.changeset/selfish-numbers-prove.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Reverse the order of buttons in dialogs.

src/components/overlays/AlertDialog/AlertDialog.tsx

@@ -85,15 +85,13 @@ function AlertDialog(props: CubeAlertDialogProps, ref) {
       {!noActions && (confirmProps || secondaryProps || cancelProps) ? (
         <Footer>
           <ButtonGroup align="end">
-            {confirmProps && (
+            {cancelProps && (
               <Button
-                autoFocus
-                theme={danger ? 'danger' : undefined}
-                {...confirmProps}
+                {...cancelProps}
                 onPress={(e) =>
                   chain(
-                    (confirmProps as CubeButtonProps)?.onPress?.(e),
-                    onClose?.('confirm'),
+                    (cancelProps as CubeButtonProps)?.onPress?.(e),
+                    onClose?.('cancel'),
                   )
                 }
               />
@@ -106,13 +104,15 @@ function AlertDialog(props: CubeAlertDialogProps, ref) {
                 }
               />
             )}
-            {cancelProps && (
+            {confirmProps && (
               <Button
-                {...cancelProps}
+                autoFocus
+                theme={danger ? 'danger' : undefined}
+                {...confirmProps}
                 onPress={(e) =>
                   chain(
-                    (cancelProps as CubeButtonProps)?.onPress?.(e),
-                    onClose?.('cancel'),
+                    (confirmProps as CubeButtonProps)?.onPress?.(e),
+                    onClose?.('confirm'),
                   )
                 }
               />

src/components/overlays/Dialog/Dialog.stories.tsx

@@ -115,12 +115,12 @@ const Template: StoryFn<
             <Paragraph>Test content</Paragraph>
           </Content>
           <Footer>
-            <Button.Group>
+            <Button.Group align="end">
+              <Button onPress={close}>Cancel</Button>
+              <Button onPress={close}>Sec</Button>
               <Button type="primary" onPress={close}>
                 Action
               </Button>
-              <Button onPress={close}>Sec</Button>
-              <Button onPress={close}>Cancel</Button>
             </Button.Group>
             <Text>Footer</Text>
           </Footer>
@@ -146,12 +146,12 @@ const TemplateWithInput: StoryFn<
             <TextInput autoFocus label="Text input" />
           </Content>
           <Footer>
-            <Button.Group>
+            <Button.Group align="end">
+              <Button onPress={close}>Cancel</Button>
+              <Button onPress={close}>Sec</Button>
               <Button type="primary" onPress={close}>
                 Action
               </Button>
-              <Button onPress={close}>Sec</Button>
-              <Button onPress={close}>Cancel</Button>
             </Button.Group>
             <Text>Footer</Text>
           </Footer>

src/components/overlays/Dialog/DialogForm.tsx

@@ -134,19 +134,19 @@ export function DialogForm<T extends FieldTypes = FieldTypes>(
           {typeof children === 'function' ? children(onLocalDismiss) : children}
 
           {!noActions ? (
-            <ButtonGroup>
-              <SubmitButton
-                qa={`${qa || ''}SubmitButton`}
-                theme={danger ? 'danger' : undefined}
-                label="Submit"
-                {...(submitProps || {})}
-              />
+            <ButtonGroup align="end">
               <Button
                 qa={`${qa || ''}CancelButton`}
                 label="Cancel"
                 onPress={onLocalDismiss}
                 {...(cancelProps || {})}
               />
+              <SubmitButton
+                qa={`${qa || ''}SubmitButton`}
+                theme={danger ? 'danger' : undefined}
+                label="Submit"
+                {...(submitProps || {})}
+              />
             </ButtonGroup>
           ) : undefined}
         </Form>