action_button: Rename type to attention to describe the attention level of the action button.

Currently, we are using type to describe the attention level of the
action button. We want to rename the type parameter to attention
as we need the type parameter separately for describing the type of
button.

web/src/banners.ts

@@ -6,7 +6,7 @@ import render_banner from "../templates/components/banner.hbs";
 type ComponentIntent = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
 
 type ActionButton = {
-    type: "primary" | "quiet" | "borderless";
+    attention: "primary" | "quiet" | "borderless";
     intent?: ComponentIntent;
     label: string;
     icon?: string;

web/src/navbar_alerts.ts

@@ -185,17 +185,17 @@ const DESKTOP_NOTIFICATIONS_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "primary",
+            attention: "primary",
             label: $t({defaultMessage: "Enable notifications"}),
             custom_classes: "request-desktop-notifications",
         },
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Customize notifications"}),
             custom_classes: "customize-desktop-notifications",
         },
         {
-            type: "borderless",
+            attention: "borderless",
             label: $t({defaultMessage: "Never ask on this computer"}),
             custom_classes: "reject-desktop-notifications",
         },
@@ -213,7 +213,7 @@ const CONFIGURE_OUTGOING_MAIL_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Configuration instructions"}),
             custom_classes: "configure-outgoing-mail-instructions",
         },
@@ -231,7 +231,7 @@ const INSECURE_DESKTOP_APP_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Download the latest version"}),
             custom_classes: "download-latest-zulip-version",
         },
@@ -246,7 +246,7 @@ const PROFILE_MISSING_REQUIRED_FIELDS_BANNER: AlertBanner = {
     label: $t({defaultMessage: "Your profile is missing required fields."}),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Edit your profile"}),
             custom_classes: "edit-profile-required-fields",
         },
@@ -264,7 +264,7 @@ const ORGANIZATION_PROFILE_INCOMPLETE_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({
                 defaultMessage: "Edit profile",
             }),
@@ -283,12 +283,12 @@ const SERVER_NEEDS_UPGRADE_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Learn more"}),
             custom_classes: "server-upgrade-learn-more",
         },
         {
-            type: "borderless",
+            attention: "borderless",
             label: $t({defaultMessage: "Dismiss for a week"}),
             custom_classes: "server-upgrade-nag-dismiss",
         },
@@ -328,12 +328,12 @@ const bankruptcy_banner = (): AlertBanner => {
         label,
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 label: $t({defaultMessage: "Yes, please!"}),
                 custom_classes: "accept-bankruptcy",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 label: $t({defaultMessage: "No, I'll catch up."}),
                 custom_classes: "banner-close-action",
             },
@@ -385,12 +385,12 @@ const time_zone_update_offer_banner = (): AlertBanner => {
         ),
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 label: $t({defaultMessage: "Yes, please!"}),
                 custom_classes: "accept-update-time-zone",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 label: $t({defaultMessage: "No, don't ask again."}),
                 custom_classes: "decline-time-zone-update",
             },

web/src/popup_banners.ts

@@ -12,7 +12,7 @@ const CONNECTION_ERROR_POPUP_BANNER: Banner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Try now"}),
             custom_classes: "retry-connection",
         },

web/src/portico/showroom.ts

@@ -7,7 +7,7 @@ import {$t, $t_html} from "../i18n.ts";
 type ComponentIntent = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
 
 type ActionButton = {
-    type: "primary" | "quiet" | "borderless";
+    attention: "primary" | "quiet" | "borderless";
     intent: ComponentIntent;
     label: string;
     icon?: string | undefined;
@@ -41,7 +41,7 @@ const custom_normal_banner: Banner = {
     label: "This is a normal banner. Use the controls below to modify this banner.",
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             intent: "neutral",
             label: "Quiet Button",
         },
@@ -56,7 +56,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "This is a navbar alerts banner. Use the controls below to modify this banner.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "neutral",
                 label: "Quiet Button",
             },
@@ -70,12 +70,12 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Welcome back! You have 12 unread messages. Do you want to mark them all as read?",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "info",
                 label: "Yes, please!",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "info",
                 label: "No, I'll catch up.",
             },
@@ -89,7 +89,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Zulip needs to send email to confirm users' addresses and send notifications.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "warning",
                 label: "Configuration instructions",
             },
@@ -135,17 +135,17 @@ const alert_banners: Record<string, AlertBanner> = {
         ),
         buttons: [
             {
-                type: "primary",
+                attention: "primary",
                 intent: "brand",
                 label: "Enable notifications",
             },
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "brand",
                 label: "Ask me later",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "brand",
                 label: "Never ask on this computer",
             },
@@ -159,7 +159,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Your profile is missing required fields.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "warning",
                 label: "Edit your profile",
             },
@@ -173,7 +173,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "You are using an old version of the Zulip desktop app with known security bugs.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "danger",
                 label: "Download the latest version",
             },
@@ -187,7 +187,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Complete your organization profile, which is displayed on your organization's registration and login pages.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "info",
                 label: "Edit profile",
             },
@@ -201,12 +201,12 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "This Zulip server is running an old version and should be upgraded.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "danger",
                 label: "Learn more",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "danger",
                 label: "Dismiss for a week",
             },
@@ -217,17 +217,17 @@ const alert_banners: Record<string, AlertBanner> = {
 };
 
 const sortButtons = (buttons: ActionButton[]): void => {
-    const sortOrder: Record<ActionButton["type"], number> = {
+    const sortOrder: Record<ActionButton["attention"], number> = {
         primary: 1,
         quiet: 2,
         borderless: 3,
     };
 
-    buttons.sort((a, b) => sortOrder[a.type] - sortOrder[b.type]);
+    buttons.sort((a, b) => sortOrder[a.attention] - sortOrder[b.attention]);
 };
 
 const update_buttons = (buttons: ActionButton[]): void => {
-    const primary_button = buttons.find((button) => button.type === "primary");
+    const primary_button = buttons.find((button) => button.attention === "primary");
     if (primary_button) {
         $("#enable_primary_button").prop("checked", true);
         $("#primary_button_text").val(primary_button.label);
@@ -242,7 +242,7 @@ const update_buttons = (buttons: ActionButton[]): void => {
         $("#primary_button_text").val("");
         $("#disable_primary_button_icon").prop("checked", true);
     }
-    const quiet_button = buttons.find((button) => button.type === "quiet");
+    const quiet_button = buttons.find((button) => button.attention === "quiet");
     if (quiet_button) {
         $("#enable_quiet_button").prop("checked", true);
         $("#quiet_button_text").val(quiet_button.label);
@@ -257,7 +257,7 @@ const update_buttons = (buttons: ActionButton[]): void => {
         $("#quiet_button_text").val("");
         $("#disable_quiet_button_icon").prop("checked", true);
     }
-    const borderless_button = buttons.find((button) => button.type === "borderless");
+    const borderless_button = buttons.find((button) => button.attention === "borderless");
     if (borderless_button) {
         $("#enable_borderless_button").prop("checked", true);
         $("#borderless_button_text").val(borderless_button.label);
@@ -400,7 +400,7 @@ $(window).on("load", () => {
 
     $("input[name='primary-button-select']").on("change", (e) => {
         if ($(e.target).attr("id") === "enable_primary_button") {
-            if (current_banner.buttons.some((button) => button.type === "primary")) {
+            if (current_banner.buttons.some((button) => button.attention === "primary")) {
                 return;
             }
             let label = $("#primary_button_text").val()?.toString();
@@ -409,7 +409,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_primary_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "primary",
+                attention: "primary",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -419,7 +419,7 @@ $(window).on("load", () => {
             $("#primary_button_text").val(label);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "primary",
+                (button) => button.attention !== "primary",
             );
         }
         sortButtons(current_banner.buttons);
@@ -431,7 +431,9 @@ $(window).on("load", () => {
     });
 
     $("input[name='primary-button-icon-select']").on("change", (e) => {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -448,7 +450,9 @@ $(window).on("load", () => {
     });
 
     $("#primary_button_select_icon").on("change", function (this: HTMLElement) {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -464,7 +468,9 @@ $(window).on("load", () => {
     });
 
     $("#primary_button_text").on("input", function (this: HTMLElement) {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -478,7 +484,7 @@ $(window).on("load", () => {
 
     $("input[name='quiet-button-select']").on("change", (e) => {
         if ($(e.target).attr("id") === "enable_quiet_button") {
-            if (current_banner.buttons.some((button) => button.type === "quiet")) {
+            if (current_banner.buttons.some((button) => button.attention === "quiet")) {
                 return;
             }
             let label = $("#quiet_button_text").val()?.toString();
@@ -487,7 +493,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_quiet_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "quiet",
+                attention: "quiet",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -498,7 +504,7 @@ $(window).on("load", () => {
             sortButtons(current_banner.buttons);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "quiet",
+                (button) => button.attention !== "quiet",
             );
         }
         $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
@@ -509,7 +515,7 @@ $(window).on("load", () => {
     });
 
     $("input[name='quiet-button-icon-select']").on("change", (e) => {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -526,7 +532,7 @@ $(window).on("load", () => {
     });
 
     $("#quiet_button_select_icon").on("change", function (this: HTMLElement) {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -542,7 +548,7 @@ $(window).on("load", () => {
     });
 
     $("#quiet_button_text").on("input", function (this: HTMLElement) {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -556,7 +562,7 @@ $(window).on("load", () => {
 
     $("input[name='borderless-button-select']").on("change", function (this: HTMLElement) {
         if ($(this).attr("id") === "enable_borderless_button") {
-            if (current_banner.buttons.some((button) => button.type === "borderless")) {
+            if (current_banner.buttons.some((button) => button.attention === "borderless")) {
                 return;
             }
             let label = $("#borderless_button_text").val()?.toString();
@@ -565,7 +571,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_borderless_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "borderless",
+                attention: "borderless",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -576,7 +582,7 @@ $(window).on("load", () => {
             sortButtons(current_banner.buttons);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "borderless",
+                (button) => button.attention !== "borderless",
             );
         }
         $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
@@ -588,7 +594,7 @@ $(window).on("load", () => {
 
     $("input[name='borderless-button-icon-select']").on("change", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;
@@ -607,7 +613,7 @@ $(window).on("load", () => {
 
     $("#borderless_button_select_icon").on("change", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;
@@ -625,7 +631,7 @@ $(window).on("load", () => {
 
     $("#borderless_button_text").on("input", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;

web/templates/components/action_button.hbs

@@ -1,4 +1,4 @@
-<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{attention}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
   {{#if disabled}}disabled{{/if}}
   >
     {{#if icon}}

web/templates/settings/account_settings.hbs

@@ -57,7 +57,7 @@
                     <div class="input-group">
                         {{> ../components/action_button
                           label=(t "Change your password")
-                          type="quiet"
+                          attention="quiet"
                           intent="brand"
                           id="change_password"
                           }}
@@ -70,7 +70,7 @@
                 <div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
                     {{> ../components/action_button
                       label=(t "Deactivate account")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       id="user_deactivate_account_button"
                       disabled=user_is_only_organization_owner
@@ -79,7 +79,7 @@
                 {{#if owner_is_only_user_in_organization}}
                     {{> ../components/action_button
                       label=(t "Deactivate organization")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       custom_classes="deactivate_realm_button inline-block"
                       }}
@@ -153,7 +153,7 @@
                 <div id="api_key_button_container" class="inline-block {{#unless user_has_email_set}}disabled_setting_tooltip{{/unless}}">
                     {{> ../components/action_button
                       label=(t "Manage your API key")
-                      type="quiet"
+                      attention="quiet"
                       intent="brand"
                       id="api_key_button"
                       disabled=(not user_has_email_set)

web/templates/settings/alert_word_settings.hbs

@@ -6,7 +6,7 @@
     </form>
     {{> ../components/action_button
       label=(t "Add alert word")
-      type="quiet"
+      attention="quiet"
       intent="brand"
       id="open-add-alert-word-modal"
       }}

web/templates/settings/bot_settings.hbs

@@ -13,7 +13,7 @@
         <div>
             {{> ../components/action_button
               label=(t "Add a new bot")
-              type="quiet"
+              attention="quiet"
               intent="brand"
               custom_classes="add-a-new-bot"
               hidden=(not can_create_new_bots)

web/templates/settings/organization_profile_admin.hbs

@@ -91,7 +91,7 @@
                 <div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}disabled_setting_tooltip{{/unless}}">
                     {{> ../components/action_button
                       label=(t "Deactivate organization")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       custom_classes="deactivate_realm_button"
                       }}

web/templates/settings/profile_settings.hbs

@@ -71,7 +71,7 @@
             </div>
             {{> ../components/action_button
               label=(t "Preview profile")
-              type="quiet"
+              attention="quiet"
               intent="brand"
               id="show_my_user_profile_modal"
               icon="external-link"

web/templates/topic_edit_form.hbs

@@ -4,7 +4,7 @@
     <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
       class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
       {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
-    {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" type="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
-    {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" type="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
+    {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" attention="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
+    {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" attention="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
     <div class="topic_edit_spinner"></div>
 </form>