From deffcef7d5d5459c684ec5fc900b323ac426869e Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Fri, 3 Jan 2025 10:33:22 +0100 Subject: [PATCH 01/13] add StudioSearch component --- .../src/components/StudioSearch/index.ts | 4 ++++ frontend/libs/studio-components/src/components/index.ts | 1 + .../CodeListsActionsBar/CodeListsActionsBar.tsx | 5 ++--- frontend/packages/text-editor/src/TextEditor.module.css | 2 +- frontend/packages/text-editor/src/TextEditor.test.tsx | 4 ++-- frontend/packages/text-editor/src/TextEditor.tsx | 9 ++++----- 6 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 frontend/libs/studio-components/src/components/StudioSearch/index.ts diff --git a/frontend/libs/studio-components/src/components/StudioSearch/index.ts b/frontend/libs/studio-components/src/components/StudioSearch/index.ts new file mode 100644 index 00000000000..51fa1efe755 --- /dev/null +++ b/frontend/libs/studio-components/src/components/StudioSearch/index.ts @@ -0,0 +1,4 @@ +export { + Search as StudioSearch, + type SearchProps as StudioSearchProps, +} from '@digdir/designsystemet-react'; diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts index ab5ba6ea451..abcd246bf12 100644 --- a/frontend/libs/studio-components/src/components/index.ts +++ b/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'; diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx index b761f36de0f..1fd131d25a5 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx +++ b/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,7 +35,7 @@ export function CodeListsActionsBar({ return (
- { 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 () => { diff --git a/frontend/packages/text-editor/src/TextEditor.tsx b/frontend/packages/text-editor/src/TextEditor.tsx index 6829750b5cc..0daadd5eefb 100644 --- a/frontend/packages/text-editor/src/TextEditor.tsx +++ b/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,9 @@ export const TextEditor = ({ }
- From 1a85346f12784ae9fb0306c0eb99f549951687fb Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Fri, 3 Jan 2025 16:51:54 +0100 Subject: [PATCH 02/13] use correct pattern for fasade components --- .../StudioSearch/StudioSearch.test.tsx | 35 +++++++++++++++++++ .../components/StudioSearch/StudioSearch.tsx | 15 ++++++++ .../src/components/StudioSearch/index.ts | 5 +-- 3 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx create mode 100644 frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx new file mode 100644 index 00000000000..5a003140f35 --- /dev/null +++ b/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((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 = {}, + ref?: ForwardedRef, +) => { + return render(); +}; + +function getSearchBox(): HTMLInputElement { + return screen.getByRole('searchbox'); +} diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx new file mode 100644 index 00000000000..89eb3e93e7b --- /dev/null +++ b/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; + +const StudioSearch = forwardRef( + ({ size = 'sm', ...rest }, ref) => { + return ; + }, +); + +StudioSearch.displayName = 'StudioSearch'; + +export { StudioSearch }; diff --git a/frontend/libs/studio-components/src/components/StudioSearch/index.ts b/frontend/libs/studio-components/src/components/StudioSearch/index.ts index 51fa1efe755..6166f56d270 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/index.ts +++ b/frontend/libs/studio-components/src/components/StudioSearch/index.ts @@ -1,4 +1 @@ -export { - Search as StudioSearch, - type SearchProps as StudioSearchProps, -} from '@digdir/designsystemet-react'; +export { StudioSearch } from './StudioSearch'; From 8a9274425f4e37bc331bdd50e6d4299df4aae7c2 Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Fri, 3 Jan 2025 16:52:28 +0100 Subject: [PATCH 03/13] use new search component in dashboard --- frontend/dashboard/pages/Dashboard/Dashboard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/dashboard/pages/Dashboard/Dashboard.tsx b/frontend/dashboard/pages/Dashboard/Dashboard.tsx index 690fa4aa738..81256bf59af 100644 --- a/frontend/dashboard/pages/Dashboard/Dashboard.tsx +++ b/frontend/dashboard/pages/Dashboard/Dashboard.tsx @@ -1,8 +1,8 @@ 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 { Link } from '@digdir/designsystemet-react'; +import { StudioButton, StudioSearch } from '@studio/components'; import { XMarkIcon, PlusCircleIcon, PlusCircleFillIcon } from '@studio/icons'; import { useDebounce } from '@studio/hooks'; import { CenterContainer } from '../../components/CenterContainer'; @@ -49,8 +49,8 @@ export const Dashboard = ({ user, organizations, disableDebounce }: DashboardPro
- Date: Fri, 3 Jan 2025 16:55:43 +0100 Subject: [PATCH 04/13] remove redundant small prop --- .../CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx | 1 - frontend/packages/text-editor/src/TextEditor.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx index 1fd131d25a5..bc2dbfe3713 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx @@ -37,7 +37,6 @@ export function CodeListsActionsBar({
diff --git a/frontend/packages/text-editor/src/TextEditor.tsx b/frontend/packages/text-editor/src/TextEditor.tsx index 0daadd5eefb..537d7822c69 100644 --- a/frontend/packages/text-editor/src/TextEditor.tsx +++ b/frontend/packages/text-editor/src/TextEditor.tsx @@ -108,7 +108,6 @@ export const TextEditor = ({
Date: Mon, 6 Jan 2025 08:27:56 +0100 Subject: [PATCH 05/13] remove redundant clear button on dashboard --- frontend/dashboard/pages/Dashboard/Dashboard.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/frontend/dashboard/pages/Dashboard/Dashboard.tsx b/frontend/dashboard/pages/Dashboard/Dashboard.tsx index 81256bf59af..89441149ef4 100644 --- a/frontend/dashboard/pages/Dashboard/Dashboard.tsx +++ b/frontend/dashboard/pages/Dashboard/Dashboard.tsx @@ -2,8 +2,8 @@ import React, { useState } from 'react'; import classes from './Dashboard.module.css'; import type { ChangeEvent, KeyboardEvent } from 'react'; import { Link } from '@digdir/designsystemet-react'; -import { StudioButton, StudioSearch } from '@studio/components'; -import { XMarkIcon, PlusCircleIcon, PlusCircleFillIcon } from '@studio/icons'; +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'; @@ -54,16 +54,8 @@ export const Dashboard = ({ user, organizations, disableDebounce }: DashboardPro value={searchText} onChange={handleChangeSearch} onKeyDown={handleKeyDown} + onClear={handleClearSearch} /> - {searchText && ( - } - variant='tertiary' - /> - )}
{t('dashboard.new_service')} From be029512f1db55793460b6716d2eb881ba213b1e Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Mon, 6 Jan 2025 08:48:52 +0100 Subject: [PATCH 06/13] fix tests --- .../app-development/features/textEditor/TextEditor.test.tsx | 2 +- frontend/testing/playwright/pages/DashboardPage.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app-development/features/textEditor/TextEditor.test.tsx b/frontend/app-development/features/textEditor/TextEditor.test.tsx index 7ad9d8dd614..33e90f1a744 100644 --- a/frontend/app-development/features/textEditor/TextEditor.test.tsx +++ b/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 }); diff --git a/frontend/testing/playwright/pages/DashboardPage.ts b/frontend/testing/playwright/pages/DashboardPage.ts index 9b3fc132d3d..fdf46ca6243 100644 --- a/frontend/testing/playwright/pages/DashboardPage.ts +++ b/frontend/testing/playwright/pages/DashboardPage.ts @@ -93,7 +93,7 @@ export class DashboardPage extends BasePage { } public async typeInSearchField(word: string): Promise { - 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 { From 2679d7c1b1b0516d5567d7dccd67434fcd458f5d Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Mon, 6 Jan 2025 13:20:40 +0100 Subject: [PATCH 07/13] add label to studioSearch --- .../features/textEditor/TextEditor.test.tsx | 2 +- .../dashboard/pages/Dashboard/Dashboard.tsx | 2 +- frontend/language/src/nb.json | 2 +- .../StudioSearch/StudioSearch.test.tsx | 5 +---- .../components/StudioSearch/StudioSearch.tsx | 17 +++++++++++++---- .../CodeListsActionsBar.module.css | 2 +- .../CodeListsActionsBar.test.tsx | 8 ++++---- .../CodeListsActionsBar/CodeListsActionsBar.tsx | 2 +- .../text-editor/src/TextEditor.module.css | 9 +++++---- .../packages/text-editor/src/TextEditor.tsx | 5 ++++- .../testing/playwright/pages/DashboardPage.ts | 2 +- 11 files changed, 33 insertions(+), 23 deletions(-) diff --git a/frontend/app-development/features/textEditor/TextEditor.test.tsx b/frontend/app-development/features/textEditor/TextEditor.test.tsx index 33e90f1a744..c52a01aadb8 100644 --- a/frontend/app-development/features/textEditor/TextEditor.test.tsx +++ b/frontend/app-development/features/textEditor/TextEditor.test.tsx @@ -55,7 +55,7 @@ describe('TextEditor', () => { renderTextEditor(); const search = '1'; - const searchInput = screen.getByPlaceholderText(textMock('text_editor.search_for_text')); + const searchInput = screen.getByRole('searchbox'); await user.type(searchInput, search); expect(mockSetSearchParams).toHaveBeenCalledWith({ search }); diff --git a/frontend/dashboard/pages/Dashboard/Dashboard.tsx b/frontend/dashboard/pages/Dashboard/Dashboard.tsx index 89441149ef4..ab5c2bc1cf5 100644 --- a/frontend/dashboard/pages/Dashboard/Dashboard.tsx +++ b/frontend/dashboard/pages/Dashboard/Dashboard.tsx @@ -50,7 +50,7 @@ export const Dashboard = ({ user, organizations, disableDebounce }: DashboardPro
{ }); it('should allow custom attributes', () => { - testCustomAttributes( - (customAttributes) => renderTestSearch({ ...customAttributes }), - getSearchBox, - ); + testCustomAttributes(renderTestSearch, getSearchBox); }); }); diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index 89eb3e93e7b..a93853fbb86 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -1,12 +1,21 @@ import React, { forwardRef } from 'react'; -import { Search, type SearchProps } from '@digdir/designsystemet-react'; +import { Label, Search, type SearchProps } from '@digdir/designsystemet-react'; import type { WithoutAsChild } from '../../types/WithoutAsChild'; +import { StudioFieldset } from '../StudioFieldset'; -export type StudioSearchProps = WithoutAsChild; +export type StudioSearchProps = WithoutAsChild & { legend?: string }; const StudioSearch = forwardRef( - ({ size = 'sm', ...rest }, ref) => { - return ; + ({ size = 'sm', label, legend, ...rest }, ref) => { + const showLabel = !!label; + return showLabel ? ( + + + + + ) : ( + + ); }, ); diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.module.css index 29a20a33c21..434dcd00378 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.module.css +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.module.css @@ -1,7 +1,7 @@ .actionsBar { display: grid; grid-template-columns: auto auto auto; - align-items: center; + align-items: flex-end; gap: var(--fds-spacing-3); justify-content: flex-start; } diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx index 32b23f09182..ca82db0d693 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx @@ -13,12 +13,12 @@ const codeListName2 = 'codeListName2'; describe('CodeListsActionsBar', () => { afterEach(jest.clearAllMocks); - it('renders the search field with placeholder text', () => { + it('renders the search field with label', () => { renderCodeListsActionsBar(); - const searchFieldPlaceHolderText = screen.getByPlaceholderText( - textMock('app_content_library.code_lists.search_placeholder'), + const searchFieldLabelText = screen.getByText( + textMock('app_content_library.code_lists.search_label'), ); - expect(searchFieldPlaceHolderText).toBeInTheDocument(); + expect(searchFieldLabelText).toBeInTheDocument(); }); it('renders the file uploader button', () => { diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx index bc2dbfe3713..8c87f1004e0 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx @@ -37,7 +37,7 @@ export function CodeListsActionsBar({
setSearchQuery(event.target.value); + const handleClearSearch = () => setSearchQuery(''); + return (
@@ -108,9 +110,10 @@ export const TextEditor = ({
diff --git a/frontend/testing/playwright/pages/DashboardPage.ts b/frontend/testing/playwright/pages/DashboardPage.ts index fdf46ca6243..85af962a33d 100644 --- a/frontend/testing/playwright/pages/DashboardPage.ts +++ b/frontend/testing/playwright/pages/DashboardPage.ts @@ -93,7 +93,7 @@ export class DashboardPage extends BasePage { } public async typeInSearchField(word: string): Promise { - await this.page.getByPlaceholder(this.textMock('dashboard.search')).fill(word); + await this.page.getByRole('searchbox').fill(word); } public async clickOnTestAppGiteaButton(appName: string): Promise { From f2cc3c98425734b9252b1903a14a74306ff1db61 Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Tue, 7 Jan 2025 08:54:30 +0100 Subject: [PATCH 08/13] add htmlFor to connect Label to Search component --- .../features/textEditor/TextEditor.test.tsx | 4 +++- .../src/components/StudioSearch/StudioSearch.test.tsx | 7 +++++++ .../src/components/StudioSearch/StudioSearch.tsx | 4 ++-- .../CodeListsActionsBar/CodeListsActionsBar.test.tsx | 6 +++--- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/frontend/app-development/features/textEditor/TextEditor.test.tsx b/frontend/app-development/features/textEditor/TextEditor.test.tsx index c52a01aadb8..5e544fdf74a 100644 --- a/frontend/app-development/features/textEditor/TextEditor.test.tsx +++ b/frontend/app-development/features/textEditor/TextEditor.test.tsx @@ -55,7 +55,9 @@ describe('TextEditor', () => { renderTextEditor(); const search = '1'; - const searchInput = screen.getByRole('searchbox'); + const searchInput = screen.getByRole('searchbox', { + name: textMock('text_editor.search_for_text'), + }); await user.type(searchInput, search); expect(mockSetSearchParams).toHaveBeenCalledWith({ search }); diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx index 015db17e788..5d61efb57dc 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx @@ -18,6 +18,13 @@ describe('StudioSearch', () => { it('should allow custom attributes', () => { testCustomAttributes(renderTestSearch, getSearchBox); }); + + it('should find search component with label name', () => { + const label = 'Search for something'; + renderTestSearch({ label }); + const search = screen.getByRole('searchbox', { name: label }); + expect(search).toBeInTheDocument(); + }); }); const renderTestSearch = ( diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index a93853fbb86..b21b804d76f 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -10,8 +10,8 @@ const StudioSearch = forwardRef( const showLabel = !!label; return showLabel ? ( - - + + ) : ( diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx index ca82db0d693..a8ab7c7ee8e 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx @@ -15,9 +15,9 @@ describe('CodeListsActionsBar', () => { it('renders the search field with label', () => { renderCodeListsActionsBar(); - const searchFieldLabelText = screen.getByText( - textMock('app_content_library.code_lists.search_label'), - ); + const searchFieldLabelText = screen.getByRole('searchbox', { + name: textMock('app_content_library.code_lists.search_label'), + }); expect(searchFieldLabelText).toBeInTheDocument(); }); From 1e25e7229840e6d0b2306f8109551efb421b724a Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Wed, 8 Jan 2025 10:18:06 +0100 Subject: [PATCH 09/13] use dynamic id in StudioSearch --- .../StudioSearch/StudioSearch.test.tsx | 2 +- .../components/StudioSearch/StudioSearch.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx index 5d61efb57dc..20aedcb080f 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx @@ -19,7 +19,7 @@ describe('StudioSearch', () => { testCustomAttributes(renderTestSearch, getSearchBox); }); - it('should find search component with label name', () => { + it('should render search field with label name when provided', () => { const label = 'Search for something'; renderTestSearch({ label }); const search = screen.getByRole('searchbox', { name: label }); diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index b21b804d76f..d9da0b5cb28 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -1,18 +1,20 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useId } from 'react'; import { Label, Search, type SearchProps } from '@digdir/designsystemet-react'; import type { WithoutAsChild } from '../../types/WithoutAsChild'; -import { StudioFieldset } from '../StudioFieldset'; -export type StudioSearchProps = WithoutAsChild & { legend?: string }; +export type StudioSearchProps = WithoutAsChild; const StudioSearch = forwardRef( - ({ size = 'sm', label, legend, ...rest }, ref) => { + ({ size = 'sm', label, id, ...rest }, ref) => { + const generatedId = useId(); + const searchId = id ?? generatedId; const showLabel = !!label; + return showLabel ? ( - - - - + <> + + + ) : ( ); From b4058eb419fb475e337dadaf04ca8fbe7e8f8e97 Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Thu, 9 Jan 2025 15:44:05 +0100 Subject: [PATCH 10/13] add test with id as prop and include id when showLabel is false --- .../src/components/StudioSearch/StudioSearch.test.tsx | 8 ++++++++ .../src/components/StudioSearch/StudioSearch.tsx | 6 ++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx index 20aedcb080f..9fd48de8149 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx @@ -25,6 +25,14 @@ describe('StudioSearch', () => { const search = screen.getByRole('searchbox', { name: label }); expect(search).toBeInTheDocument(); }); + + it('should render search field with label name when ID is set through props', () => { + const label = 'Search for something'; + const id = 'searchId'; + renderTestSearch({ label, id }); + const search = screen.getByRole('searchbox', { name: label }); + expect(search).toBeInTheDocument(); + }); }); const renderTestSearch = ( diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index d9da0b5cb28..0af4ceb3ebc 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -10,13 +10,11 @@ const StudioSearch = forwardRef( const searchId = id ?? generatedId; const showLabel = !!label; - return showLabel ? ( + return ( <> - + {showLabel && } - ) : ( - ); }, ); From 3cfe28c6d225ada6556b28b89334a865b20de6ed Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Mon, 13 Jan 2025 14:55:11 +0100 Subject: [PATCH 11/13] wrap label and seacrh inside div --- .../pages/Dashboard/Dashboard.module.css | 5 ----- frontend/dashboard/pages/Dashboard/Dashboard.tsx | 16 +++++++--------- .../src/components/StudioSearch/StudioSearch.tsx | 10 +++++++--- frontend/packages/text-editor/src/TextEditor.tsx | 14 ++++++-------- 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/frontend/dashboard/pages/Dashboard/Dashboard.module.css b/frontend/dashboard/pages/Dashboard/Dashboard.module.css index f3e27b388c9..55ae8aa0846 100644 --- a/frontend/dashboard/pages/Dashboard/Dashboard.module.css +++ b/frontend/dashboard/pages/Dashboard/Dashboard.module.css @@ -51,11 +51,6 @@ display: inline; } -.searchFieldContainer { - display: flex; - align-items: flex-end; -} - .clearSearchButton { height: 32px; width: 32px; diff --git a/frontend/dashboard/pages/Dashboard/Dashboard.tsx b/frontend/dashboard/pages/Dashboard/Dashboard.tsx index ab5c2bc1cf5..ffffd59d42d 100644 --- a/frontend/dashboard/pages/Dashboard/Dashboard.tsx +++ b/frontend/dashboard/pages/Dashboard/Dashboard.tsx @@ -48,15 +48,13 @@ export const Dashboard = ({ user, organizations, disableDebounce }: DashboardPro
-
- -
+ {t('dashboard.new_service')} diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index 0af4ceb3ebc..2570f8b0fd4 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -11,10 +11,14 @@ const StudioSearch = forwardRef( const showLabel = !!label; return ( - <> - {showLabel && } +
+ {showLabel && ( + + )} - +
); }, ); diff --git a/frontend/packages/text-editor/src/TextEditor.tsx b/frontend/packages/text-editor/src/TextEditor.tsx index f622441ca16..ee82806da52 100644 --- a/frontend/packages/text-editor/src/TextEditor.tsx +++ b/frontend/packages/text-editor/src/TextEditor.tsx @@ -108,14 +108,12 @@ export const TextEditor = ({
} -
- -
+
From 7bc2dea89e1b3def2599665df07537c1d48dc870 Mon Sep 17 00:00:00 2001 From: andreastanderen Date: Mon, 13 Jan 2025 15:37:35 +0100 Subject: [PATCH 12/13] ensure classname can be appended to root --- .../src/components/StudioSearch/StudioSearch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx index 2570f8b0fd4..4277f2428e7 100644 --- a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx +++ b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx @@ -5,13 +5,13 @@ import type { WithoutAsChild } from '../../types/WithoutAsChild'; export type StudioSearchProps = WithoutAsChild; const StudioSearch = forwardRef( - ({ size = 'sm', label, id, ...rest }, ref) => { + ({ size = 'sm', label, id, className, ...rest }, ref) => { const generatedId = useId(); const searchId = id ?? generatedId; const showLabel = !!label; return ( -
+
{showLabel && (