feat: add StudioSearch component

frontend/app-development/features/textEditor/TextEditor.test.tsx

@@ -55,7 +55,7 @@ describe('TextEditor', () => {
     renderTextEditor();
 
     const search = '1';
-    const searchInput = screen.getByTestId('text-editor-search-default');
+    const searchInput = screen.getByPlaceholderText(textMock('text_editor.search_for_text'));
     await user.type(searchInput, search);
 
     expect(mockSetSearchParams).toHaveBeenCalledWith({ search });

frontend/dashboard/pages/Dashboard/Dashboard.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import classes from './Dashboard.module.css';
 import type { ChangeEvent, KeyboardEvent } from 'react';
-import { Textfield, Link } from '@digdir/designsystemet-react';
-import { StudioButton } from '@studio/components';
-import { XMarkIcon, PlusCircleIcon, PlusCircleFillIcon } from '@studio/icons';
+import { Link } from '@digdir/designsystemet-react';
+import { StudioSearch } from '@studio/components';
+import { PlusCircleIcon, PlusCircleFillIcon } from '@studio/icons';
 import { useDebounce } from '@studio/hooks';
 import { CenterContainer } from '../../components/CenterContainer';
 import { DataModelsReposList } from '../../components/DataModelsRepoList';
@@ -49,21 +49,13 @@ export const Dashboard = ({ user, organizations, disableDebounce }: DashboardPro
         <div className={classes.createServiceContainer}>
           <div className={classes.topBar}>
             <div className={classes.searchFieldContainer}>
-              <Textfield
-                label={t('dashboard.search')}
+              <StudioSearch
+                placeholder={t('dashboard.search')}
                 value={searchText}
                 onChange={handleChangeSearch}
                 onKeyDown={handleKeyDown}
+                onClear={handleClearSearch}
               />
-              {searchText && (
-                <StudioButton
-                  className={classes.clearSearchButton}
-                  aria-label={t('dashboard.clear_search')}
-                  onClick={handleClearSearch}
-                  icon={<XMarkIcon />}
-                  variant='tertiary'
-                />
-              )}
             </div>
             <Link href={'/dashboard/' + selectedContext + '/new'} className={classes.newLink}>
               <span>{t('dashboard.new_service')}</span>

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx

@@ -0,0 +1,35 @@
+import React, { type ForwardedRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import type { StudioSearchProps } from './StudioSearch';
+import { StudioSearch } from './StudioSearch';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
+
+describe('StudioSearch', () => {
+  it('should support forwarding the ref', () => {
+    testRefForwarding<HTMLInputElement>((ref) => renderTestSearch({}, ref), getSearchBox);
+  });
+
+  it('should append classname to root', () => {
+    testRootClassNameAppending((className) => renderTestSearch({ className }));
+  });
+
+  it('should allow custom attributes', () => {
+    testCustomAttributes(
+      (customAttributes) => renderTestSearch({ ...customAttributes }),
+      getSearchBox,
+    );
+  });
+});
+
+const renderTestSearch = (
+  props: Partial<StudioSearchProps> = {},
+  ref?: ForwardedRef<HTMLInputElement>,
+) => {
+  return render(<StudioSearch {...props} ref={ref} />);
+};
+
+function getSearchBox(): HTMLInputElement {
+  return screen.getByRole('searchbox');
+}

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { Search, type SearchProps } from '@digdir/designsystemet-react';
+import type { WithoutAsChild } from '../../types/WithoutAsChild';
+
+export type StudioSearchProps = WithoutAsChild<SearchProps>;
+
+const StudioSearch = forwardRef<HTMLInputElement, StudioSearchProps>(
+  ({ size = 'sm', ...rest }, ref) => {
+    return <Search {...rest} size={size} ref={ref} />;
+  },
+);
+
+StudioSearch.displayName = 'StudioSearch';
+
+export { StudioSearch };

frontend/libs/studio-components/src/components/StudioSearch/index.ts

@@ -0,0 +1 @@
+export { StudioSearch } from './StudioSearch';

frontend/libs/studio-components/src/components/index.ts

@@ -49,6 +49,7 @@ export * from './StudioProperty';
 export * from './StudioRecommendedNextAction';
 export * from './StudioRedirectBox';
 export * from './StudioResizableLayout';
+export * from './StudioSearch';
 export * from './StudioSectionHeader';
 export * from './StudioSpinner';
 export * from './StudioSwitch';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Search } from '@digdir/designsystemet-react';
-import { StudioFileUploader } from '@studio/components';
+import { StudioFileUploader, StudioSearch } from '@studio/components';
 import classes from './CodeListsActionsBar.module.css';
 import { useTranslation } from 'react-i18next';
 import type { CodeListWithMetadata } from '../CodeListPage';
@@ -36,9 +35,8 @@ export function CodeListsActionsBar({
 
   return (
     <div className={classes.actionsBar}>
-      <Search
+      <StudioSearch
         className={classes.searchField}
-        size='sm'
         placeholder={t('app_content_library.code_lists.search_placeholder')}
       />
       <CreateNewCodeListModal onUpdateCodeList={onUpdateCodeList} codeListNames={codeListNames} />

frontend/packages/text-editor/src/TextEditor.module.css

@@ -24,7 +24,7 @@
 .filterAndSearch {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   gap: 1rem;
 }
 

frontend/packages/text-editor/src/TextEditor.test.tsx

@@ -153,13 +153,13 @@ describe('TextEditor', () => {
     renderTextEditor({});
 
     const textEntries = screen.getAllByRole('textbox');
-    expect(textEntries[1]).toHaveValue(textValue1);
+    expect(textEntries[0]).toHaveValue(textValue1);
 
     const sortAlphabeticallyButton = screen.getByText(textMock('text_editor.sort_alphabetically'));
     await user.click(sortAlphabeticallyButton);
 
     const sortedTranslations = screen.getAllByRole('textbox');
-    expect(sortedTranslations[1]).toHaveValue(textValue2);
+    expect(sortedTranslations[0]).toHaveValue(textValue2);
   });
 
   it('signals correctly when a translation is changed', async () => {

frontend/packages/text-editor/src/TextEditor.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classes from './TextEditor.module.css';
 import type { LangCode, TextResourceEntryDeletion, TextResourceIdMutation } from './types';
 import type { UpsertTextResourceMutation } from 'app-shared/hooks/mutations/useUpsertTextResourceMutation';
-import { SearchField } from '@altinn/altinn-design-system';
 import { Chip } from '@digdir/designsystemet-react';
 import { ArrowsUpDownIcon } from '@studio/icons';
-import { StudioButton } from '@studio/components';
+import { StudioButton, StudioSearch } from '@studio/components';
 import { RightMenu } from './RightMenu';
 import { getRandNumber, mapResourceFilesToTableRows } from './utils';
 import { defaultLangCode } from './constants';
@@ -108,9 +107,8 @@ export const TextEditor = ({
               }
             </Chip.Toggle>
             <div>
-              <SearchField
-                id='text-editor-search'
-                label={t('text_editor.search_for_text')}
+              <StudioSearch
+                placeholder={t('text_editor.search_for_text')}
                 value={searchQuery}
                 onChange={handleSearchChange}
               />

frontend/testing/playwright/pages/DashboardPage.ts

@@ -93,7 +93,7 @@ export class DashboardPage extends BasePage {
   }
 
   public async typeInSearchField(word: string): Promise<void> {
-    await this.page.getByLabel(this.textMock('dashboard.search')).fill(word);
+    await this.page.getByPlaceholder(this.textMock('dashboard.search')).fill(word);
   }
 
   public async clickOnTestAppGiteaButton(appName: string): Promise<void> {