From 6b6b7404f224d01751ee4bb761fea86a98861df6 Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Thu, 24 Oct 2024 15:31:48 +0200 Subject: [PATCH 1/4] Search: i18n + remove role --- .changeset/soft-planets-peel.md | 5 ++ @navikt/core/react/src/form/search/Search.tsx | 56 +++++++------------ .../react/src/form/search/SearchButton.tsx | 6 +- .../core/react/src/util/i18n/locales/en.ts | 6 ++ .../core/react/src/util/i18n/locales/nb.ts | 12 ++-- .../core/react/src/util/i18n/locales/nn.ts | 6 ++ 6 files changed, 49 insertions(+), 42 deletions(-) create mode 100644 .changeset/soft-planets-peel.md diff --git a/.changeset/soft-planets-peel.md b/.changeset/soft-planets-peel.md new file mode 100644 index 00000000000..5b056089b24 --- /dev/null +++ b/.changeset/soft-planets-peel.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Search: Remove redundant role attribute diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx index 6fd179210a4..5144da0d6ff 100644 --- a/@navikt/core/react/src/form/search/Search.tsx +++ b/@navikt/core/react/src/form/search/Search.tsx @@ -2,7 +2,6 @@ import cl from "clsx"; import React, { InputHTMLAttributes, forwardRef, - useCallback, useRef, useState, } from "react"; @@ -10,6 +9,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons"; import { BodyShort, ErrorMessage, Label } from "../../typography"; import { omit } from "../../util"; import { useMergeRefs } from "../../util/hooks/useMergeRefs"; +import { useI18n } from "../../util/i18n/i18n.context"; import { FormFieldProps, useFormField } from "../useFormField"; import SearchButton, { SearchButtonType } from "./SearchButton"; import { SearchContext } from "./context"; @@ -68,13 +68,9 @@ export interface SearchProps */ variant?: "primary" | "secondary" | "simple"; /** - * Exposes the HTML size attribute. Specifies the width of the element, in characters. + * HTML size attribute. Specifies the width of the input, in characters. */ htmlSize?: number | string; - /* - * Exposes role attribute. - */ - role?: string; } interface SearchComponent @@ -123,31 +119,24 @@ export const Search = forwardRef( onChange, onSearchClick, htmlSize, - role, ...rest } = props; const searchRef = useRef(null); const mergedRef = useMergeRefs(searchRef, ref); - + const translate = useI18n("Search"); const [internalValue, setInternalValue] = useState(defaultValue ?? ""); - const handleChange = useCallback( - (v: string) => { - value === undefined && setInternalValue(v); - onChange?.(v); - }, - [onChange, value], - ); + const handleChange = (newValue: string) => { + value === undefined && setInternalValue(newValue); + onChange?.(newValue); + }; - const handleClear = useCallback( - (event: SearchClearEvent) => { - onClear?.(event); - handleChange(""); - searchRef.current?.focus?.(); - }, - [handleChange, onClear], - ); + const handleClear = (clearEvent: SearchClearEvent) => { + onClear?.(clearEvent); + handleChange(""); + searchRef.current?.focus?.(); + }; const handleClick = () => { onSearchClick?.(`${value ?? internalValue}`); @@ -156,26 +145,22 @@ export const Search = forwardRef( return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ - if (e.key !== "Escape") { + onKeyDown={(event) => { + if (event.key !== "Escape") { return; } - searchRef.current?.value && - searchRef.current?.value !== "" && - e.preventDefault(); - - handleClear({ trigger: "Escape", event: e }); + searchRef.current?.value && event.preventDefault(); + handleClear({ trigger: "Escape", event }); }} className={cl( className, "navds-form-field", `navds-form-field--${size}`, "navds-search", - { "navds-search--error": hasError, - "navds-search--disabled": !!inputProps.disabled, - "navds-search--with-size": !!htmlSize, + "navds-search--disabled": inputProps.disabled, + "navds-search--with-size": htmlSize, }, )} > @@ -215,7 +200,6 @@ export const Search = forwardRef( value={value ?? internalValue} onChange={(e) => handleChange(e.target.value)} type="search" - role={role ?? "searchbox"} className={cl( className, "navds-search__input", @@ -229,11 +213,11 @@ export const Search = forwardRef( {(value ?? internalValue) && clearButton && ( diff --git a/@navikt/core/react/src/form/search/SearchButton.tsx b/@navikt/core/react/src/form/search/SearchButton.tsx index e21ddf07b20..8ebb7d49805 100644 --- a/@navikt/core/react/src/form/search/SearchButton.tsx +++ b/@navikt/core/react/src/form/search/SearchButton.tsx @@ -3,6 +3,7 @@ import React, { forwardRef, useContext } from "react"; import { MagnifyingGlassIcon } from "@navikt/aksel-icons"; import { Button, ButtonProps } from "../../button"; import { composeEventHandlers } from "../../util/composeEventHandlers"; +import { useI18n } from "../../util/i18n/i18n.context"; import { SearchContext } from "./context"; export interface SearchButtonProps @@ -19,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent< const SearchButton: SearchButtonType = forwardRef( ({ className, children, disabled, onClick, ...rest }, ref) => { + const translate = useI18n("Search"); const context = useContext(SearchContext); if (context === null) { @@ -40,7 +42,9 @@ const SearchButton: SearchButtonType = forwardRef( onClick={composeEventHandlers(onClick, handleClick)} icon={ } > diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index 687db5ffee9..397e4227908 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -37,4 +37,10 @@ export default { labelSuffix: "delete", }, }, + Search: { + clear: "Clear", + Button: { + search: "Search", + }, + }, } satisfies Translations; diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 988eea2593c..89adf56b138 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -1,9 +1,5 @@ interface TranslationMap { - [component: string]: - | Record - | { - [subComponent: string]: Record; - }; + [component: string]: Record>; } export default { @@ -44,4 +40,10 @@ export default { labelSuffix: "slett", }, }, + Search: { + clear: "Tøm", + Button: { + search: "Søk", + }, + }, } satisfies TranslationMap; diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts index ac493cf2e0d..9f24c42064a 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -37,4 +37,10 @@ export default { labelSuffix: "slett", }, }, + Search: { + clear: "Tøm", + Button: { + search: "Søk", + }, + }, } satisfies Translations; From 59af715afb758243a3ab0eb1b20be4304ced6955 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Mon, 28 Oct 2024 15:18:04 +0100 Subject: [PATCH 2/4] Update @navikt/core/react/src/util/i18n/locales/nn.ts --- @navikt/core/react/src/util/i18n/locales/nn.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts index 9f24c42064a..1c067635018 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -39,8 +39,6 @@ export default { }, Search: { clear: "Tøm", - Button: { - search: "Søk", - }, + search: "Søk", }, } satisfies Translations; From 0af0f2648964ad0f50004a9aba762193697c95f9 Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Tue, 29 Oct 2024 12:34:40 +0100 Subject: [PATCH 3/4] flatten object --- @navikt/core/react/src/form/search/SearchButton.tsx | 2 +- @navikt/core/react/src/util/i18n/locales/en.ts | 4 +--- @navikt/core/react/src/util/i18n/locales/nb.ts | 4 +--- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/@navikt/core/react/src/form/search/SearchButton.tsx b/@navikt/core/react/src/form/search/SearchButton.tsx index 8ebb7d49805..82c87f74ed0 100644 --- a/@navikt/core/react/src/form/search/SearchButton.tsx +++ b/@navikt/core/react/src/form/search/SearchButton.tsx @@ -44,7 +44,7 @@ const SearchButton: SearchButtonType = forwardRef( } > diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index 397e4227908..c46dda9877d 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -39,8 +39,6 @@ export default { }, Search: { clear: "Clear", - Button: { - search: "Search", - }, + search: "Search", }, } satisfies Translations; diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 89adf56b138..a104eb052b8 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -42,8 +42,6 @@ export default { }, Search: { clear: "Tøm", - Button: { - search: "Søk", - }, + search: "Søk", }, } satisfies TranslationMap; From 6aeb9a6bba6e132714922216a917f34958b4a3fe Mon Sep 17 00:00:00 2001 From: Halvor Haugan Date: Tue, 29 Oct 2024 12:47:02 +0100 Subject: [PATCH 4/4] revert type change --- @navikt/core/react/src/util/i18n/locales/nb.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 35441cc0560..1e9675ce8b4 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -1,5 +1,9 @@ interface TranslationMap { - [component: string]: Record>; + [component: string]: + | Record + | { + [subComponent: string]: Record; + }; } export default {