feat(workflows): upgrade CC dialogs to md3
This CL upgrades the dialogs shown in the Community Console to use the
Material Design 3 variants. The dialog in the workflow manager hasn't
yet been upgraded.
Bug: twpowertools:74
Change-Id: I870707b287d35fc82f8a4852eb493e7b3156d363
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
index b219b75..ece9a75 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -1,4 +1,4 @@
-import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/dialog/dialog.js';
import '@material/web/button/filled-button.js';
import '@material/web/button/text-button.js';
@@ -34,26 +34,26 @@
render() {
return html`
- <mwc-dialog
+ <md-dialog
?open=${this.open}
- @opening=${this._openingDialog}
- @closing=${this._closingDialog}>
- <p>
+ @open=${this._openingDialog}
+ @close=${this._closingDialog}>
+ <div slot="content">
Are you sure you want to run workflow
<span class="workflow">${this.workflow?.getName?.()}</span> for all
the selected threads?
- </p>
- <md-filled-button
- slot="primaryAction"
- @click=${this._dispatchConfirmEvent}>
- Run workflow
- </md-filled-button>
- <md-text-button
- slot="secondaryAction"
- dialogAction="cancel">
- Cancel
- </md-text-button>
- </mwc-dialog>
+ </div>
+ <div slot="actions">
+ <md-filled-button
+ @click=${this._dispatchConfirmEvent}>
+ Run workflow
+ </md-filled-button>
+ <md-text-button
+ @click=${() => this.open = false}>
+ Cancel
+ </md-text-button>
+ </div>
+ </md-dialog>
`;
}
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
index 1d38707..8a48649 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowDialog.js
@@ -1,4 +1,4 @@
-import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/dialog/dialog.js';
import '@material/web/button/text-button.js';
import './TwptWorkflowProgress.js';
@@ -38,26 +38,32 @@
render() {
return html`
- <mwc-dialog
+ <md-dialog
?open=${this.open}
- @opening=${this._openingDialog}
- @closing=${this._closingDialog}
- heading=${'Running ' + this.workflow?.getName?.() + '...'}>
- <twpt-workflow-progress ${ref(this.progressRef)}
- .workflow=${this.workflow}
- currentThread=${this._runner?.currentThreadIndex}
- numThreads=${this._runner?.numThreads}
- currentAction=${this._runner?.currentActionIndex}
- status=${this._runner?.status}>
- </twpt-workflow-progress>
+ @open=${this._openingDialog}
+ @close=${this._closingDialog}>
+ <div slot="headline">
+ ${'Running ' + this.workflow?.getName?.() + '...'}
+ </div>
+ <div slot="content">
+ <twpt-workflow-progress ${ref(this.progressRef)}
+ .workflow=${this.workflow}
+ currentThread=${this._runner?.currentThreadIndex}
+ numThreads=${this._runner?.numThreads}
+ currentAction=${this._runner?.currentActionIndex}
+ status=${this._runner?.status}>
+ </twpt-workflow-progress>
+ </div>
- <md-text-button
- ?disabled=${this._runner?.status !== 'finished'}
- slot="primaryAction"
- dialogAction="cancel">
- Close
- </md-text-button>
- </mwc-dialog>
+ <div slot="actions">
+ <md-text-button
+ ?disabled=${this._runner?.status !== 'finished'}
+ slot="primaryAction"
+ @click=${() => this.open = false}>
+ Close
+ </md-text-button>
+ </div>
+ </md-dialog>
`;
}