Modals: design update (#33368)

* Modals: Style update draft

* Modal.ButtonRow to control spacing better in a centralised way

* Remove header border if no tabs

* Added border and made buttons right aligned and changed order of buttons

* Updating the overlay

* Tweaks to paddings

* Updated share modals

public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Button, ConfirmModal, HorizontalGroup, Modal, stylesFactory, useTheme } from '@grafana/ui';
+import { Button, ConfirmModal, Modal, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from '@emotion/css';
 import { DashboardModel } from 'app/features/dashboard/state';
@@ -89,7 +89,7 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
             Use <strong>Save As</strong> to create custom version.
           </small>
         </div>
-        <HorizontalGroup justify="center">
+        <Modal.ButtonRow>
           <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
           <Button
             variant="destructive"
@@ -103,7 +103,7 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
           <Button variant="secondary" onClick={onDismiss}>
             Cancel
           </Button>
-        </HorizontalGroup>
+        </Modal.ButtonRow>
       </div>
     </Modal>
   );

public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, HorizontalGroup, Modal, VerticalGroup } from '@grafana/ui';
+import { Button, Modal } from '@grafana/ui';
 import { SaveDashboardButton } from './SaveDashboardButton';
 import { DashboardModel } from '../../state';
 import { css } from '@emotion/css';
@@ -27,24 +27,22 @@ export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
         width: 500px;
       `}
     >
-      <VerticalGroup align={'center'} spacing={'md'}>
-        <h4>Do you want to save your changes?</h4>
-        <HorizontalGroup justify="center">
-          <SaveDashboardButton dashboard={dashboard} onSaveSuccess={onSaveSuccess} />
-          <Button
-            variant="destructive"
-            onClick={() => {
-              onDiscard();
-              onDismiss();
-            }}
-          >
-            Discard
-          </Button>
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
-          </Button>
-        </HorizontalGroup>
-      </VerticalGroup>
+      <h5>Do you want to save your changes?</h5>
+      <Modal.ButtonRow>
+        <Button variant="secondary" onClick={onDismiss}>
+          Cancel
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            onDiscard();
+            onDismiss();
+          }}
+        >
+          Discard
+        </Button>
+        <SaveDashboardButton dashboard={dashboard} onSaveSuccess={onSaveSuccess} />
+      </Modal.ButtonRow>
     </Modal>
   );
 };

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, HorizontalGroup, Input, Switch, Form, Field, InputControl } from '@grafana/ui';
+import { Button, Input, Switch, Form, Field, InputControl, Modal } from '@grafana/ui';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { SaveDashboardFormProps } from '../types';
@@ -114,14 +114,14 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
           <Field label="Copy tags">
             <Switch name="copyTags" ref={register} />
           </Field>
-          <HorizontalGroup>
-            <Button type="submit" aria-label="Save dashboard button">
-              Save
-            </Button>
+          <Modal.ButtonRow>
             <Button variant="secondary" onClick={onCancel}>
               Cancel
             </Button>
-          </HorizontalGroup>
+            <Button type="submit" aria-label="Save dashboard button">
+              Save
+            </Button>
+          </Modal.ButtonRow>
         </>
       )}
     </Form>

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { Button, Checkbox, Form, HorizontalGroup, TextArea } from '@grafana/ui';
+import { Button, Checkbox, Form, Modal, TextArea } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { SaveDashboardFormProps } from '../types';
@@ -36,7 +36,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
     >
       {({ register, errors }) => (
         <>
-          <div className="gf-form-group">
+          <div>
             {hasTimeChanged && (
               <Checkbox
                 label="Save current time range as dashboard default"
@@ -58,14 +58,14 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
             <TextArea name="message" ref={register} placeholder="Add a note to describe your changes." autoFocus />
           </div>
 
-          <HorizontalGroup>
-            <Button type="submit" aria-label={selectors.pages.SaveDashboardModal.save}>
-              Save
-            </Button>
+          <Modal.ButtonRow>
             <Button variant="secondary" onClick={onCancel}>
               Cancel
             </Button>
-          </HorizontalGroup>
+            <Button type="submit" aria-label={selectors.pages.SaveDashboardModal.save}>
+              Save
+            </Button>
+          </Modal.ButtonRow>
         </>
       )}
     </Form>

public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/css';
 import { saveAs } from 'file-saver';
-import { Button, HorizontalGroup, stylesFactory, TextArea, useTheme, VerticalGroup } from '@grafana/ui';
+import { Button, Modal, stylesFactory, TextArea, useTheme } from '@grafana/ui';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
 import { SaveDashboardFormProps } from '../types';
 import { AppEvents, GrafanaTheme } from '@grafana/data';
@@ -29,8 +29,8 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
   const styles = getStyles(theme);
   return (
     <>
-      <VerticalGroup spacing="lg">
-        <small>
+      <div>
+        <div>
           This dashboard cannot be saved from the Grafana UI because it has been provisioned from another source. Copy
           the JSON or save it to a file below, then you can update your dashboard in the provisioning source.
           <br />
@@ -46,8 +46,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
             </a>{' '}
             for more information about provisioning.
           </i>
-        </small>
-        <div>
+          <br /> <br />
           <strong>File path: </strong> {dashboard.meta.provisionedExternalId}
         </div>
         <TextArea
@@ -58,16 +57,16 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
           }}
           className={styles.json}
         />
-        <HorizontalGroup>
+        <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
           <CopyToClipboard text={() => dashboardJSON} elType={Button} onSuccess={onCopyToClipboardSuccess}>
             Copy JSON to clipboard
           </CopyToClipboard>
           <Button onClick={saveToFile}>Save JSON to file</Button>
-          <Button variant="secondary" onClick={onCancel}>
-            Cancel
-          </Button>
-        </HorizontalGroup>
-      </VerticalGroup>
+        </Modal.ButtonRow>
+      </div>
     </>
   );
 };