Modals: Be more consistent with Modal cancel button styling (#68302)

* Modals: Be more consistent with Modal cancel button styling

* Update docs

* Fix tests

* fixing tests

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -97,7 +97,7 @@ export const ConfirmModal = ({
         ) : null}
       </div>
       <Modal.ButtonRow>
-        <Button variant={dismissVariant} onClick={onDismiss}>
+        <Button variant={dismissVariant} onClick={onDismiss} fill="outline">
           {dismissText}
         </Button>
         <Button

packages/grafana-ui/src/components/Modal/Modal.mdx

@@ -6,7 +6,26 @@ import { ModalTabsHeader } from './ModalTabsHeader';
 
 # Modal
 
-Generic Modal component
+Generic Modal component.
+
+Example usage:
+
+```tsx
+<Modal title="title" isOpen={true}>
+  <div>Some body</div>
+  <Modal.ButtonRow>
+    <Button variant="secondary" fill="outline">
+      Cancel
+    </Button>
+    <Button>Save</Button>
+  </Modal.ButtonRow>
+</Modal>
+```
+
+For buttons at the bottom of the modal you should always use:
+
+- Modal.ButtonRow - this makes sure the Buttons are right aligned
+- If you have a Cancel button use fill="outline" and variant="secondary" and place it on the left side of any other button.
 
 <ArgTypes of={Modal} />