fix(Dialog): reverse the order of buttons (#850)

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/other/Calendar/Calendar.tsx

@@ -15,6 +15,7 @@ import { useProviderProps } from '../../../provider';
 import { tasty } from '../../../tasty';
 import { Button } from '../../actions';
 import { Title } from '../../content/Title';
+import { Space } from '../../layout/Space';
 
 import { CalendarGrid } from './CalendarGrid';
 
@@ -70,10 +71,10 @@ function Calendar(props: CubeCalendarProps, ref: FocusableRef<HTMLElement>) {
         <Title level={6} preset="h6">
           {title}
         </Title>
-        <Button.Group gap=".5x">
+        <Space gap=".5x">
           <Button size="xsmall" {...prevButtonProps} icon={<LeftIcon />} />
           <Button size="xsmall" {...nextButtonProps} icon={<RightIcon />} />
-        </Button.Group>
+        </Space>
       </CalendarHeaderElement>
       <CalendarGrid state={state} selectedRange={props.selectedRange} />
     </CalendarElement>

src/components/other/Calendar/RangeCalendar.tsx

@@ -15,6 +15,7 @@ import { useProviderProps } from '../../../provider';
 import { tasty } from '../../../tasty';
 import { Button } from '../../actions';
 import { Title } from '../../content/Title';
+import { Space } from '../../layout/Space';
 
 import { CalendarGrid } from './CalendarGrid';
 
@@ -64,10 +65,10 @@ function RangeCalendar<T extends DateValue>(
         <Title level={6} preset="h6">
           {title}
         </Title>
-        <Button.Group gap=".5x">
+        <Space gap=".5x">
           <Button size="small" {...prevButtonProps} icon={<LeftIcon />} />
           <Button size="small" {...nextButtonProps} icon={<RightIcon />} />
-        </Button.Group>
+        </Space>
       </CalendarHeaderElement>
       <CalendarGrid state={state} />
     </CalendarElement>

src/components/overlays/AlertDialog/AlertDialog.tsx

@@ -84,7 +84,7 @@ function AlertDialog(props: CubeAlertDialogProps, ref) {
       ) : null}
       {!noActions && (confirmProps || secondaryProps || cancelProps) ? (
         <Footer>
-          <ButtonGroup align="end">
+          <ButtonGroup>
             {confirmProps && (
               <Button
                 autoFocus

src/components/overlays/Dialog/Dialog.tsx

@@ -264,12 +264,17 @@ const DialogContent = forwardRef(function DialogContent(
       styles: {
         display: 'flex',
         gap: '1x',
-        flow: 'row',
+        flow: 'row-reverse',
         placeItems: 'baseline stretch',
         placeContent: 'space-between',
         padding: '$dialog-footer-v $dialog-padding-h',
       },
     },
+    buttonGroup: {
+      styles: {
+        flow: 'row-reverse',
+      },
+    },
   };
 
   return (