From 4203778f57f03eb4e005b422c89a88b1803163e7 Mon Sep 17 00:00:00 2001
From: Lucas Homer <33523751+lucas-homer@users.noreply.github.com>
Date: Sun, 8 Jan 2023 12:55:52 -0800
Subject: [PATCH] feat: publish button disabled UX (#886)

---
 components/publish/PublishWidget.vue | 38 +++++++++++++++++++++++-----
 locales/en-GB.json                   |  2 ++
 locales/en-US.json                   |  1 +
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index e6dfd154..e13cdb1d 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -184,6 +184,13 @@ defineExpose({
     editor.value?.commands?.focus?.()
   },
 })
+
+const isPublishDisabled = computed(() => {
+  if (isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status))
+    return true
+
+  return false
+})
 </script>
 
 <template>
@@ -348,14 +355,31 @@ defineExpose({
           </template>
         </PublishVisibilityPicker>
 
-        <button
-          btn-solid rounded-3 text-sm w-full md:w-fit
-          :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status) || characterCount > characterLimit"
-          @click="publish"
-        >
-          {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
-        </button>
+        <CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
+          <button
+            btn-solid rounded-3 text-sm w-full
+            md:w-fit
+            class="publish-button"
+            :aria-disabled="isPublishDisabled"
+            aria-describedby="publish-tooltip"
+            @click="publish"
+          >
+            {{ !draft.editingStatus ? $t('action.publish') : $t('action.save_changes') }}
+          </button>
+        </CommonTooltip>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+  .publish-button[aria-disabled=true] {
+    cursor: not-allowed;
+    background-color: var(--c-bg-btn-disabled);
+    color: var(--c-text-btn-disabled);
+  }
+  .publish-button[aria-disabled=true]:hover {
+    background-color: var(--c-bg-btn-disabled);
+    color: var(--c-text-btn-disabled);
+  }
+</style>
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 1a52196a..63bfdfa5 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -362,6 +362,8 @@
   "tooltip": {
     "add_content_warning": "Add content warning",
     "add_media": "Add images, a video or an audio file",
+    "add_publishable_content": "Add content to publish",
+
     "change_content_visibility": "Change content visibility",
     "change_language": "Change language",
     "emoji": "Emoji",
diff --git a/locales/en-US.json b/locales/en-US.json
index 8b2e81a5..684d672e 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -432,6 +432,7 @@
   "tooltip": {
     "add_content_warning": "Add content warning",
     "add_media": "Add images, a video or an audio file",
+    "add_publishable_content": "Add content to publish",
     "change_content_visibility": "Change content visibility",
     "change_language": "Change language",
     "emoji": "Emoji",