diff --git a/.changeset/eleven-rocks-doubt-css.md b/.changeset/eleven-rocks-doubt-css.md new file mode 100644 index 0000000000..e7a4c54531 --- /dev/null +++ b/.changeset/eleven-rocks-doubt-css.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-css": patch +--- + +CSS: Popover har nĂ¥ 8px border-radius. Fikset padding-bug i Select-small. diff --git a/.changeset/eleven-rocks-doubt.md b/.changeset/eleven-rocks-doubt.md new file mode 100644 index 0000000000..67ce988b5e --- /dev/null +++ b/.changeset/eleven-rocks-doubt.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Combobox: Fikset bruk av `useLayoutEffect` med SSR-safe metode. diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css index 09cf3a5c8f..88ad21aad2 100644 --- a/@navikt/core/css/form/select.css +++ b/@navikt/core/css/form/select.css @@ -46,7 +46,7 @@ .navds-form-field--small .navds-select__input { min-height: 2rem; - padding: 0 2rem 0 0.25rem; + padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2); } .navds-form-field--small .navds-select__chevron { diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index f353b8aff4..d4f04e2c5b 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -9,12 +9,17 @@ margin-block: var(--a-spacing-2); } +.navds-list--small ul, +.navds-list--small ol { + margin-block: var(--a-spacing-3); +} + .navds-list li { - margin-block-end: var(--a-spacing-5); + margin-block-end: var(--a-spacing-4); } .navds-list--small li { - margin-block-end: var(--a-spacing-2); + margin-block-end: var(--a-spacing-3); } .navds-list--nested li { diff --git a/@navikt/core/css/popover.css b/@navikt/core/css/popover.css index 1ec699435b..32d215521a 100644 --- a/@navikt/core/css/popover.css +++ b/@navikt/core/css/popover.css @@ -4,7 +4,7 @@ box-shadow: var(--a-shadow-medium); border: 1px solid; border-color: var(--ac-popover-border, var(--a-border-default)); - border-radius: var(--a-border-radius-medium); + border-radius: var(--a-border-radius-large); max-width: calc(100vw - var(--a-spacing-6)); } diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx index 2e3a9a2bdc..397c4d310f 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx @@ -6,13 +6,13 @@ import React, { useContext, useCallback, useRef, - useLayoutEffect, SetStateAction, } from "react"; import cl from "clsx"; import { useCustomOptionsContext } from "../customOptionsContext"; import { useInputContext } from "../Input/inputContext"; import usePrevious from "../../../util/usePrevious"; +import { useClientLayoutEffect } from "../../../util"; const normalizeText = (text: string): string => typeof text === "string" ? `${text}`.toLowerCase().trim() : ""; @@ -90,7 +90,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => { const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = useState(false); - useLayoutEffect(() => { + useClientLayoutEffect(() => { if ( shouldAutocomplete && normalizeText(searchTerm) !== "" && diff --git a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx index 7d4701135f..8ee0080043 100644 --- a/@navikt/core/react/src/form/combobox/Input/inputContext.tsx +++ b/@navikt/core/react/src/form/combobox/Input/inputContext.tsx @@ -4,12 +4,12 @@ import React, { createContext, useCallback, useContext, - useLayoutEffect, useMemo, useRef, useState, } from "react"; import { useFormField, FormFieldType } from "../../useFormField"; +import { useClientLayoutEffect } from "../../../util"; interface InputContextType extends FormFieldType { clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void; @@ -92,7 +92,7 @@ export const InputContextProvider = ({ children, value: props }) => { inputRef.current?.focus?.(); }, []); - useLayoutEffect(() => { + useClientLayoutEffect(() => { if (shouldAutocomplete && inputRef && value !== searchTerm) { inputRef.current?.setSelectionRange?.(searchTerm.length, value.length); }