remove styling classes and add prop to customize next queries button

empathyco · Oct 31, 2024 · 69e9976 · 69e9976
1 parent 89485e4
commit 69e9976
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -390,8 +390,9 @@
 
                           <template #related-prompts-group="{ item: { relatedPrompts } }">
                             <RelatedPrompt
-                              class="x-flex x-flex-col x-pt-24"
+                              class="x-bg-neutral-10 x-flex x-flex-col x-gap-16 x-pt-24"
                               :relatedPrompt="relatedPrompts[0]"
+                              nextQueryButtonClass="x-button x-button-lead x-button-sm x-button-outlined"
                             >
                               <template #header="{ suggestionText }">
                                 <h2 class="x-title2">{{ suggestionText }}</h2>

diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
@@ -1,38 +1,26 @@
 <template>
-  <div
-    class="x-related-prompt x-bg-neutral-10 x-p-24 x-flex x-flex-col x-gap-16"
-    data-test="related-prompt"
-  >
-    <div class="x-related-prompt__info x-flex x-flex-col x-gap-16">
+  <div class="x-related-prompt" data-test="related-prompt">
+    <div class="x-related-prompt__info x-flex x-flex-col">
       <slot name="header" :suggestionText="relatedPrompt.suggestionText">
         {{ relatedPrompt.suggestionText }}
       </slot>
       <slot name="next-queries" :nextQueries="relatedPrompt.nextQueries">
         <SlidingPanel :resetOnContentChange="false">
-          <div class="x-flex x-gap-8 x-pr-8">
+          <div class="x-flex x-gap-8">
             <button
               v-for="(nextQuery, index) in relatedPrompt.nextQueries"
               :key="index"
               @click="onClick(nextQuery)"
-              class="x-button x-button-lead x-button-sm x-button-outlined x-rounded-sm x-border-lead-50 x-text-neutral-75 hover:x-text-neutral-0 selected:x-text-neutral-0 selected:hover:x-bg-lead-50"
-              :class="{ 'x-selected': selectedNextQuery === nextQuery }"
+              :class="[{ 'x-selected': selectedNextQuery === nextQuery }, nextQueryButtonClass]"
             >
-              <span
-                class="x-whitespace-nowrap"
-                :class="
-                  selectedNextQuery === nextQuery ? 'x-title3 x-title3-md' : 'x-text1 x-text1-lg'
-                "
-              >
-                {{ nextQuery }}
-              </span>
+              <span>{{ nextQuery }}</span>
               <CrossTinyIcon v-if="selectedNextQuery === nextQuery" class="x-icon" />
               <PlusIcon v-else class="x-icon" />
             </button>
           </div>
         </SlidingPanel>
       </slot>
     </div>
-
     <div class="x-related-prompt__query-preview">
       <slot name="selected-query" :selectedQuery="selectedNextQuery">
         {{ selectedNextQuery }}
@@ -56,7 +44,14 @@
     },
     xModule: relatedPromptsXModule.name,
     props: {
-      relatedPrompt: { type: Object as PropType<RelatedPrompt>, required: true }
+      relatedPrompt: {
+        type: Object as PropType<RelatedPrompt>,
+        required: true
+      },
+      nextQueryButtonClass: {
+        type: String,
+        default: 'x-button x-button-outlined'
+      }
     },
     setup(props) {
       const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);