fix: fix FSortFilterDataset clear button alignment (fixes SFKUI-7538)

Author: NicklasWei

packages/design/src/components/sort-filter-dataset/_sort-filter-dataset.scss

@@ -29,41 +29,5 @@ $sortfilter-header-padding-top: size.$padding-025 !default;
                 width: 160px;
             }
         }
-
-        &__magnify-icon {
-            position: absolute;
-            left: size.$margin-175;
-            height: var(--f-height-large);
-
-            /* same as textfield */
-            z-index: 1;
-
-            /* In front of input field */
-            width: 1.2rem;
-            color: $sort-filter-dateset-color-icon-search;
-
-            @include core.breakpoint-down(sm) {
-                top: size.$margin-150;
-                left: size.$margin-075;
-            }
-        }
-
-        &__close-icon.button--discrete {
-            position: absolute;
-            top: calc(-1 * size.$margin-075);
-            right: 0;
-            color: $sort-filter-dateset-color-icon-clear;
-            cursor: pointer;
-            padding: 1rem;
-
-            @include core.breakpoint-down(sm) {
-                top: size.$margin-100;
-            }
-        }
-
-        &__close-icon.button--discrete:hover {
-            box-shadow: none;
-            background-color: transparent;
-        }
     }
 }

packages/vue/src/components/FSortFilterDataset/FSortFilterDataset.cy.ts

@@ -265,16 +265,6 @@ describe("filter", () => {
         sortFilterDataset.textField.input().type("20");
         assertTable([], COLUMN_TEXT);
     });
-
-    it("when clear button is clicked, should focus search field", () => {
-        cy.mount(TestComponent, { props: { filterAttributes: [] } });
-        sortFilterDataset.textField.input().type("foo");
-        sortFilterDataset
-            .el()
-            .get(".sort-filter-dataset__search__close-icon")
-            .click();
-        sortFilterDataset.textField.input().should("have.focus");
-    });
 });
 
 describe("sort & filter in combination", () => {

packages/vue/src/components/FSortFilterDataset/FSortFilterDataset.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts" generic="T">
-import { type Ref, nextTick, onMounted, provide, useTemplateRef, watch } from "vue";
+import { type Ref, computed, nextTick, onMounted, provide, watch } from "vue";
 import { TranslationService, alertScreenReader, debounce } from "@fkui/logic";
 import { IFlex, IFlexItem } from "../../internal-components/IFlex";
 import { useTranslate } from "../../plugins";
-import { getHTMLElementFromVueRef } from "../../utils";
-import { FIcon } from "../FIcon";
 import { FSelectField } from "../FSelectField";
-import { FTextField } from "../FTextField";
+import { FSearchTextField } from "../FTextField";
 import {
     type FSortFilterDatasetMountCallback,
     type FSortFilterDatasetSortCallback,
@@ -37,7 +35,10 @@ export interface FSortFilterDatasetProps<T> {
      */
     showFilter?: boolean;
     /**
-     * Set placeholder text in filter input field.
+     * Set text in filter input field label.
+     *
+     * Previously set placeholder text in filter input field, but this is deprecated.
+     *
      * Default is textkey "fkui.sort-filter-dataset.placeholder.filter"
      */
     placeholderFilter?: string;
@@ -83,12 +84,10 @@ const emit = defineEmits<{
 }>();
 
 const $t = useTranslate();
-const searchField = useTemplateRef("search-field");
 const {
     searchString,
     sortAttribute,
     sortFilterResult,
-    showClearButton,
     defaultSortValue,
     sortableKeys,
     sortOrders,
@@ -103,8 +102,6 @@ const {
 );
 
 function filterResultset(): void {
-    searchString.value = searchField.value?.$el.querySelector("input").value;
-
     if (searchString.value === "") {
         alertScreenReader($t("fkui.sort-filter-dataset.aria-live.empty", "Sök redigera Sök tom"));
     } else {
@@ -151,15 +148,6 @@ function onSearchInput(): void {
     debouncedFilterResultset();
 }
 
-function onClickClearSearch(): void {
-    searchString.value = "";
-
-    const input = getHTMLElementFromVueRef(searchField.value).querySelector("input");
-    if (input) {
-        input.focus();
-    }
-}
-
 watch(sortAttribute, () => {
     emit("usedSortAttributes", sortAttribute.value);
 });
@@ -180,6 +168,9 @@ watch(
     },
     { immediate: true },
 );
+
+const clearableScreenReaderText = computed(() => $t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält"));
+const filterLabel = computed(() => placeholderFilter);
 </script>
 
 <template>
@@ -197,32 +188,15 @@ watch(
                 <i-flex collapse float="right">
                     <i-flex-item v-if="showFilter" shrink align="center">
                         <div class="sort-filter-dataset__search">
-                            <f-icon name="search" class="sort-filter-dataset__search__magnify-icon" />
-
-                            <f-text-field
-                                ref="search-field"
+                            <f-search-text-field
                                 v-model="searchString"
-                                inline
-                                :placeholder="placeholderFilter"
                                 maxlength="64"
+                                :clearable-screen-reader-text
+                                inline
                                 @input="onSearchInput"
                             >
-                                <span class="sr-only">{{ placeholderFilter }}</span>
-                            </f-text-field>
-
-                            <!-- [html-validate-disable-next fkui/class-deprecated -- technical debt] -->
-                            <button
-                                v-if="showClearButton"
-                                type="button"
-                                class="button button--discrete sort-filter-dataset__search__close-icon"
-                                :title="$t('fkui.sort-filter-dataset.clear.filter', 'Rensa sökfält')"
-                                @click="onClickClearSearch"
-                            >
-                                <f-icon name="close" />
-                                <span class="sr-only">{{
-                                    $t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält")
-                                }}</span>
-                            </button>
+                                {{ filterLabel }}
+                            </f-search-text-field>
                         </div>
                     </i-flex-item>
 

packages/vue/src/components/FSortFilterDataset/__snapshots__/FSortFilterDataset.spec.ts.snap

@@ -29,23 +29,22 @@ exports[`snapshots should match snapshot with a dropdown with attributes 1`] = `
           <div
             class="sort-filter-dataset__search"
           >
-            <f-icon-stub
-              class="sort-filter-dataset__search__magnify-icon"
-              library="f"
-              name="search"
-            />
-            <f-text-field-stub
-              disabled="false"
-              id="fkui-vue-element-0001"
-              inline="true"
-              inputwidth="sm-12"
-              labelwidth="sm-12"
+            <div
+              inline=""
               maxlength="64"
-              modelvalue=""
-              placeholder="Sök"
-              type="text"
-            />
-            <!--v-if-->
+            >
+              <f-text-field-stub
+                class="text-field--search"
+                disabled="false"
+                id="fkui-vue-element-0001"
+                inline="true"
+                inputwidth="sm-12"
+                labelwidth="sm-12"
+                maxlength="64"
+                modelvalue=""
+                type="search"
+              />
+            </div>
           </div>
           
         </div>

packages/vue/src/components/FTextField/extendedTextFields/FSearchTextField/FSearchTextField.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     ],
     data() {
         return {
-            defaultText: this.$t("fkui.search-text-field.label", "Sök"),
+            defaultText: TranslationService.provider.translate("fkui.search-text-field.label", "Sök"),
         };
     },
     computed: {