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

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

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} fill="outline">
-            <Button variant="secondary" onClick={onCancel}>
               Cancel
             </Button>
+            <Button type="submit">Update</Button>
           </Modal.ButtonRow>
         </>
       )}

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>

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

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">

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}>

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}>

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}>

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 && (

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>

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>
   );
 };

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>

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
+  <LinkButton
-    onClick={[MockFunction]}
+    fill="outline"
-    type="submit"
+    href="/datasources"
-    variant="primary"
+    variant="secondary"
   >
-    Test
+    Back
-  </Button>
+  </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
+  <Button
-    fill="text"
+    onClick={[MockFunction]}
-    href="/datasources"
+    type="submit"
+    variant="primary"
   >
-    Back
+    Test
-  </LinkButton>
+  </Button>
 </div>
 `;
 
@@ -33,15 +34,13 @@ exports[`Render should render with buttons enabled 1`] = `
 <div
   className="gf-form-button-row"
 >
-  <Button
+  <LinkButton
-    aria-label="Data source settings page Save and Test button"
+    fill="outline"
-    disabled={false}
+    href="/datasources"
-    onClick={[Function]}
+    variant="secondary"
-    type="submit"
-    variant="primary"
   >
-    Save & test
+    Back
-  </Button>
+  </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
+  <Button
-    fill="text"
+    aria-label="Data source settings page Save and Test button"
-    href="/datasources"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+    variant="primary"
   >
-    Back
+    Save & test
-  </LinkButton>
+  </Button>
 </div>
 `;

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>
     </>
   );

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}>

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}>