feat: Update button component (#10362)

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue

@@ -61,9 +61,9 @@ const agentList = computed(() => {
         label: name,
         value: id,
         thumbnail: { name, src: thumbnail },
-        isSelected:
-          id === props.article?.author?.id ||
-          id === (selectedAuthorId.value || currentUserId.value),
+        isSelected: props.article?.author?.id
+          ? id === props.article.author.id
+          : id === (selectedAuthorId.value || currentUserId.value),
         action: 'assignAuthor',
       }))
       // Sort the list by isSelected first, then by name(label)
@@ -181,20 +181,23 @@ onMounted(() => {
     <div class="relative flex items-center gap-2">
       <OnClickOutside @trigger="openAgentsList = false">
         <Button
-          :label="authorName"
           variant="ghost"
-          class="!px-0 font-normal"
+          class="!px-0 font-normal hover:!bg-transparent"
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
         >
-          <template #leftPrefix>
-            <Thumbnail
-              :author="author"
-              :name="authorName"
-              :size="20"
-              :src="authorThumbnailSrc"
-            />
-          </template>
+          <Thumbnail
+            :author="author"
+            :name="authorName"
+            :size="20"
+            :src="authorThumbnailSrc"
+          />
+          <span
+            v-if="author"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{ author.available_name }}
+          </span>
         </Button>
         <DropdownMenu
           v-if="openAgentsList && hasAgentList"
@@ -212,13 +215,20 @@ onMounted(() => {
             selectedCategory?.name ||
             t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
           "
-          :emoji="selectedCategory?.icon || ''"
-          :icon="!selectedCategory?.icon ? 'play-shape' : ''"
+          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
-          class="!px-2 font-normal"
-          text-variant="info"
+          class="!px-2 font-normal hover:!bg-transparent"
           @click="openCategoryList = !openCategoryList"
-        />
+        >
+          <span
+            v-if="selectedCategory"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{
+              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
+            }}
+          </span>
+        </Button>
         <DropdownMenu
           v-if="openCategoryList && hasCategoryMenuItems"
           :menu-items="categoryList"
@@ -235,11 +245,10 @@ onMounted(() => {
           :label="
             t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
           "
-          icon="add"
+          icon="i-lucide-plus"
           variant="ghost"
           :disabled="isNewArticle"
-          text-variant="info"
-          class="!px-2 font-normal"
+          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
           @click="openProperties = !openProperties"
         />
         <ArticleEditorProperties

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue

@@ -118,11 +118,11 @@ const updateArticleStatus = async ({ value }) => {
   <div class="flex items-center justify-between h-20">
     <Button
       :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
-      icon="chevron-lucide-left"
-      icon-lib="lucide"
+      icon="i-lucide-chevron-left"
       variant="link"
-      text-variant="info"
+      color="slate"
       size="sm"
+      class="ltr:pl-3 rtl:pr-3"
       @click="onClickGoBack"
     />
     <div class="flex items-center gap-4">
@@ -135,7 +135,7 @@ const updateArticleStatus = async ({ value }) => {
       <div class="flex items-center gap-2">
         <Button
           :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
-          variant="secondary"
+          color="slate"
           size="sm"
           :disabled="!articleId"
           @click="previewArticle"
@@ -156,8 +156,7 @@ const updateArticleStatus = async ({ value }) => {
           <div class="relative">
             <OnClickOutside @trigger="showArticleActionMenu = false">
               <Button
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
+                icon="i-lucide-chevron-down"
                 size="sm"
                 :disabled="!articleId"
                 class="ltr:rounded-l-none rtl:rounded-r-none"

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue

@@ -63,10 +63,10 @@ onMounted(() => {
         }}
       </h3>
       <Button
-        icon="dismiss"
+        icon="i-lucide-x"
         size="sm"
         variant="ghost"
-        class="w-8 hover:text-n-slate-11"
+        class="hover:text-n-slate-11"
         @click="emit('close')"
       />
     </div>
@@ -89,7 +89,7 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
               )
             "
-            class="w-[224px]"
+            class="w-[220px]"
             custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
             custom-text-area-class="max-h-[150px]"
             auto-height