Theme: Use outline buttons for Cancel & Back actions (#33418)

* Buttons: Use new outline button for cancel & back buttons * More buttons * More tweaks * Updated row snapshot
2024-11-29 12:14:08 -06:00 · 2021-04-27 15:36:48 +02:00 · 2021-04-27 15:36:48 +02:00 · eef4e18b62
commit eef4e18b62
parent e8faec5c19
16 changed files with 59 additions and 55 deletions
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@ -69,7 +69,7 @@ export const ConfirmModal = ({
        ) : null}
      </div>
      <Modal.ButtonRow>
-        <Button variant="secondary" onClick={onDismiss}>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
          {dismissText}
        </Button>
        <Button
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
@ -34,10 +34,10 @@ export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel })
          </Field>

          <Modal.ButtonRow>
-            <Button type="submit">Update</Button>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
              Cancel
            </Button>
+            <Button type="submit">Update</Button>
          </Modal.ButtonRow>
        </>
      )}
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
@ -90,6 +90,9 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
          </small>
        </div>
        <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
+            Cancel
+          </Button>
          <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
          <Button
            variant="destructive"
@ -100,9 +103,6 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
          >
            Overwrite
          </Button>
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
-          </Button>
        </Modal.ButtonRow>
      </div>
    </Modal>
--- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
@ -29,7 +29,7 @@ export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
    >
      <h5>Do you want to save your changes?</h5>
      <Modal.ButtonRow>
-        <Button variant="secondary" onClick={onDismiss}>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
          Cancel
        </Button>
        <Button
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@ -115,7 +115,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
            <Switch name="copyTags" ref={register} />
          </Field>
          <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
              Cancel
            </Button>
            <Button type="submit" aria-label="Save dashboard button">
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@ -59,7 +59,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
          </div>

          <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onCancel}>
+            <Button variant="secondary" onClick={onCancel} fill="outline">
              Cancel
            </Button>
            <Button type="submit" aria-label={selectors.pages.SaveDashboardModal.save}>
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@ -58,7 +58,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
          className={styles.json}
        />
        <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onCancel}>
+          <Button variant="secondary" onClick={onCancel} fill="outline">
            Cancel
          </Button>
          <CopyToClipboard text={() => dashboardJSON} elType={Button} onSuccess={onCopyToClipboardSuccess}>
--- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
@ -96,7 +96,7 @@ export class ShareExport extends PureComponent<Props, State> {
          <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
        </Field>
        <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
            Cancel
          </Button>
          <Button variant="secondary" onClick={this.onViewJson}>
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@ -234,7 +234,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
        </Field>

        <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
            Cancel
          </Button>
          {externalEnabled && (
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@ -96,7 +96,9 @@ class NewDataSourcePage extends PureComponent<Props> {
          <div className="page-action-bar">
            <FilterInput value={searchQuery} onChange={this.onSearchQueryChange} placeholder="Filter by name or type" />
            <div className="page-action-bar__spacer" />
-            <LinkButton href="datasources">Cancel</LinkButton>
+            <LinkButton href="datasources" fill="outline" variant="secondary" icon="arrow-left">
+              Cancel
+            </LinkButton>
          </div>
          {!searchQuery && (
            <PluginsErrorsInfo>
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@ -14,6 +14,18 @@ export interface Props {
 const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
  return (
    <div className="gf-form-button-row">
+      <LinkButton variant="secondary" fill="outline" href={`${config.appSubUrl}/datasources`}>
+        Back
+      </LinkButton>
+      <Button
+        type="button"
+        variant="destructive"
+        disabled={isReadOnly}
+        onClick={onDelete}
+        aria-label={selectors.pages.DataSource.delete}
+      >
+        Delete
+      </Button>
      {!isReadOnly && (
        <Button
          type="submit"
@ -30,18 +42,6 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
          Test
        </Button>
      )}
-      <Button
-        type="button"
-        variant="destructive"
-        disabled={isReadOnly}
-        onClick={onDelete}
-        aria-label={selectors.pages.DataSource.delete}
-      >
-        Delete
-      </Button>
-      <LinkButton fill="text" href={`${config.appSubUrl}/datasources`}>
-        Back
-      </LinkButton>
    </div>
  );
 };
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@ -174,7 +174,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
                  Delete
                </Button>
              )}
-              <LinkButton variant="link" href="datasources">
+              <LinkButton variant="secondary" href="datasources" fill="outline">
                Back
              </LinkButton>
            </div>
--- a/public/app/features/datasources/settings/snapshots/ButtonRow.test.tsx.snap
+++ b/public/app/features/datasources/settings/snapshots/ButtonRow.test.tsx.snap
@ -4,13 +4,13 @@ exports[`Render should render component 1`] = `
 <div
  className="gf-form-button-row"
 >
-  <Button
-    onClick={[MockFunction]}
-    type="submit"
-    variant="primary"
+  <LinkButton
+    fill="outline"
+    href="/datasources"
+    variant="secondary"
  >
-    Test
-  </Button>
+    Back
+  </LinkButton>
  <Button
    aria-label="Data source settings page Delete button"
    disabled={true}
@ -20,12 +20,13 @@ exports[`Render should render component 1`] = `
  >
    Delete
  </Button>
-  <LinkButton
-    fill="text"
-    href="/datasources"
+  <Button
+    onClick={[MockFunction]}
+    type="submit"
+    variant="primary"
  >
-    Back
-  </LinkButton>
+    Test
+  </Button>
 </div>
 `;

@ -33,15 +34,13 @@ exports[`Render should render with buttons enabled 1`] = `
 <div
  className="gf-form-button-row"
 >
-  <Button
-    aria-label="Data source settings page Save and Test button"
-    disabled={false}
-    onClick={[Function]}
-    type="submit"
-    variant="primary"
+  <LinkButton
+    fill="outline"
+    href="/datasources"
+    variant="secondary"
  >
-    Save & test
-  </Button>
+    Back
+  </LinkButton>
  <Button
    aria-label="Data source settings page Delete button"
    disabled={false}
@ -51,11 +50,14 @@ exports[`Render should render with buttons enabled 1`] = `
  >
    Delete
  </Button>
-  <LinkButton
-    fill="text"
-    href="/datasources"
+  <Button
+    aria-label="Data source settings page Save and Test button"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+    variant="primary"
  >
-    Back
-  </LinkButton>
+    Save & test
+  </Button>
 </div>
 `;
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
@ -24,6 +24,9 @@ export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: A
      </Field>

      <Modal.ButtonRow>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
+          Cancel
+        </Button>
        <Button
          onClick={() => {
            panel.title = panelTitle;
@ -32,9 +35,6 @@ export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: A
        >
          Add panel to the panel library
        </Button>
-        <Button variant="secondary" onClick={onDismiss}>
-          Cancel
-        </Button>
      </Modal.ButtonRow>
    </>
  );
--- a/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
@ -36,7 +36,7 @@ export const DeleteLibraryPanelModal: FC<Props> = ({ libraryPanel, onDismiss, on
          {!connected ? <Confirm /> : null}

          <Modal.ButtonRow>
-            <Button variant="secondary" onClick={onDismiss}>
+            <Button variant="secondary" onClick={onDismiss} fill="outline">
              Cancel
            </Button>
            <Button variant="destructive" onClick={onConfirm} disabled={connected}>
--- a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
@ -99,7 +99,7 @@ export const SaveLibraryPanelModal: React.FC<Props> = ({
          </table>
        )}
        <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss}>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
            Cancel
          </Button>
          <Button variant="destructive" onClick={discardAndClose}>