fix(nc-gui): Wrong chevron Icon in grouping UI

packages/nc-gui/assets/nc-icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/nc-gui/components/cell/RichText.vue

@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, IsFormInj } from '#imports'
+import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -201,7 +201,8 @@ watch(editorDom, () => {
         'mt-2.5 flex-grow': fullMode,
         'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
         'flex-grow': isExpandedFormOpen,
-        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]:
+          !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
       }"
     />
   </div>

packages/nc-gui/components/cell/TextArea.vue

@@ -271,7 +271,7 @@ watch(inputWrapperRef, () => {
         v-if="!isVisible"
         placement="bottom"
         class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
-        :class=" isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
+        :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -241,20 +241,10 @@ const shouldRenderCell = (column) =>
                 <div class="flex !sticky left-[15px]">
                   <div class="flex items-center">
                     <span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow">
-                      <svg
+                      <GeneralIcon
-                        focusable="false"
+                        icon="chevronDown"
-                        data-icon="right"
+                        :style="`${activeGroups.includes(i) ? 'transform: rotate(360deg)' : 'transform: rotate(270deg)'}`"
-                        width="1em"
+                      ></GeneralIcon>
-                        height="1em"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        viewBox="64 64 896 896"
-                        :style="`${activeGroups.includes(i) ? 'transform: rotate(90deg)' : ''}`"
-                      >
-                        <path
-                          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                        ></path>
-                      </svg>
                     </span>
                   </div>
                   <div class="flex items-center">

packages/nc-gui/utils/iconUtils.ts

@@ -111,6 +111,7 @@ import NcNotification from '~icons/material-symbols/notifications-outline'
 import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
 import NcDatabaseIcon from '~icons/nc-icons/database'
+import NcChevronDown from '~icons/nc-icons/chevron-down'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -462,6 +463,7 @@ export const iconMap = {
   commentHere: NcCommentHere,
   fileImage: FileImageIcon,
   paste: h('span', { class: 'material-symbols' }, 'content_paste'),
+  chevronDown: NcChevronDown,
 }
 
 export const getMdiIcon = (type: string): any => {