From 81c79d8355e5533bb85081d58f82f37202ff812c Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Fri, 25 Oct 2024 14:52:16 +0200 Subject: [PATCH 001/101] Combo filteredoptions offset fix (#3269) * Combobox: :bug: only apply the offset when it's needed * Combobox: changeset --- .changeset/silver-dingos-mate.md | 6 ++++++ @navikt/core/css/form/combobox.css | 5 ++++- .../src/form/combobox/FilteredOptions/FilteredOptions.tsx | 4 +++- 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 .changeset/silver-dingos-mate.md diff --git a/.changeset/silver-dingos-mate.md b/.changeset/silver-dingos-mate.md new file mode 100644 index 0000000000..e25c1583f2 --- /dev/null +++ b/.changeset/silver-dingos-mate.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +Combobox: only apply filteredOptions scroll offset when max options is rendered diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css index 2441dc8d1a..c170408e5e 100644 --- a/@navikt/core/css/form/combobox.css +++ b/@navikt/core/css/form/combobox.css @@ -291,7 +291,6 @@ padding-inline: var(--__ac-combobox-list-item-padding-inline); width: 100%; background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default)); - scroll-margin-top: 50px; } .navds-combobox__list-item--loading { @@ -306,6 +305,10 @@ border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info)); } +.navds-combobox__list--max-selected .navds-combobox__list-item { + scroll-margin-top: 50px; +} + .navds-combobox__list_non-selectables:hover { cursor: default; } diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx index 4db73fb21f..21b34a09bd 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx @@ -58,7 +58,9 @@ const FilteredOptions = () => { diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index fb916f2b69..b271dcf8d0 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -45,4 +45,8 @@ export default { Loader: { title: "Waiting…", }, + Pagination: { + previous: "Previous", + next: "Next", + }, } 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 206ccea224..4ab6c852ab 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -52,4 +52,8 @@ export default { Loader: { title: "Venter…", }, + Pagination: { + previous: "Forrige", + next: "Neste", + }, } 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 4cb3c005b2..a6090505ae 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -45,4 +45,8 @@ export default { Loader: { title: "Ventar…", }, + Pagination: { + previous: "Førre", + next: "Neste", + }, } satisfies Translations; From 9dade96849a54ac720c14f716d85369ea992108f Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:25:08 +0100 Subject: [PATCH 010/101] [Translations] Modal: i18n support (#3273) --- @navikt/core/react/src/modal/ModalHeader.tsx | 4 +++- @navikt/core/react/src/util/i18n/locales/en.ts | 3 +++ @navikt/core/react/src/util/i18n/locales/nb.ts | 3 +++ @navikt/core/react/src/util/i18n/locales/nn.ts | 3 +++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/modal/ModalHeader.tsx b/@navikt/core/react/src/modal/ModalHeader.tsx index edde91e053..06bc20b6c7 100644 --- a/@navikt/core/react/src/modal/ModalHeader.tsx +++ b/@navikt/core/react/src/modal/ModalHeader.tsx @@ -2,6 +2,7 @@ import cl from "clsx"; import React, { forwardRef } from "react"; import { XMarkIcon } from "@navikt/aksel-icons"; import { Button } from "../button"; +import { useI18n } from "../util/i18n/i18n.context"; import { useModalContext } from "./Modal.context"; export interface ModalHeaderProps extends React.HTMLAttributes { @@ -16,6 +17,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes { const ModalHeader = forwardRef( ({ children, className, closeButton = true, ...rest }, ref) => { const context = useModalContext(); + const translate = useI18n("Modal"); return (
@@ -32,7 +34,7 @@ const ModalHeader = forwardRef( } }} onClick={context.closeHandler} - icon={} + icon={} /> )} {children} diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index b271dcf8d0..6463a621fc 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -45,6 +45,9 @@ export default { Loader: { title: "Waiting…", }, + Modal: { + close: "Close", + }, Pagination: { previous: "Previous", next: "Next", diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 4ab6c852ab..e4a1b8bf89 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -52,6 +52,9 @@ export default { Loader: { title: "Venter…", }, + Modal: { + close: "Lukk", + }, Pagination: { previous: "Forrige", next: "Neste", diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts index a6090505ae..38f2a620b4 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -45,6 +45,9 @@ export default { Loader: { title: "Ventar…", }, + Modal: { + close: "Lukk", + }, Pagination: { previous: "Førre", next: "Neste", From 92b39de2139b1b790aead205b1841296ac1b3792 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:35:10 +0100 Subject: [PATCH 011/101] [Translations] ProgressBar: i18n support (#3277) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> --- .../src/progress-bar/ProgressBar.stories.tsx | 2 +- .../react/src/progress-bar/ProgressBar.tsx | 35 +++++++++++-------- .../core/react/src/util/i18n/locales/en.ts | 5 +++ .../core/react/src/util/i18n/locales/nb.ts | 5 +++ .../core/react/src/util/i18n/locales/nn.ts | 5 +++ 5 files changed, 37 insertions(+), 15 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index e65326f80c..f11dc54a44 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -100,7 +100,7 @@ Sizes.args = { export const IndeterminateState: Story = { render: () => { - const values = [0, 5, 10, 20]; + const values = [0, 5.7, 10, 20]; return ( <> {values.map((value) => ( diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 671affee3c..f0ed27a308 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,5 +1,6 @@ import cl from "clsx"; -import React, { HTMLAttributes, forwardRef, useRef } from "react"; +import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react"; +import { useI18n } from "../util/i18n/i18n.context"; interface ProgressBarPropsBase extends Omit, "role"> { @@ -92,11 +93,12 @@ export const ProgressBar = forwardRef( }, ref, ) => { - const translate = 100 - (Math.round(value) / valueMax) * 100; + const translateX = 100 - (Math.round(value) / valueMax) * 100; const onTimeoutRef = useRef<() => void>(); onTimeoutRef.current = simulated?.onTimeout; + const translate = useI18n("ProgressBar"); - React.useEffect(() => { + useEffect(() => { if (simulated?.seconds && onTimeoutRef.current) { const timeout = setTimeout( onTimeoutRef.current, @@ -119,8 +121,15 @@ export const ProgressBar = forwardRef( aria-valuenow={simulated?.seconds ? 0 : Math.round(value)} aria-valuetext={ simulated?.seconds - ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder` - : `${Math.round(value)} av ${Math.round(valueMax)}` + ? translate("progressUnknown", { + replacements: { seconds: Math.round(simulated?.seconds) }, + }) + : translate("progress", { + replacements: { + current: Math.round(value), + max: Math.round(valueMax), + }, + }) } // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed role="progressbar" @@ -130,17 +139,15 @@ export const ProgressBar = forwardRef( >
diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index 6463a621fc..583ac9b790 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -52,4 +52,9 @@ export default { previous: "Previous", next: "Next", }, + ProgressBar: { + progress: "{current} of {max}", + progressUnknown: + "Progress is unknown, estimated time is {seconds} seconds.", + }, } 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 e4a1b8bf89..81939d7857 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -59,4 +59,9 @@ export default { previous: "Forrige", next: "Neste", }, + ProgressBar: { + progress: "{current} av {max}", + progressUnknown: + "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.", + }, } 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 38f2a620b4..c5ca1dd0ae 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -52,4 +52,9 @@ export default { previous: "Førre", next: "Neste", }, + ProgressBar: { + progress: "{current} av {max}", + progressUnknown: + "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.", + }, } satisfies Translations; From 7799416096976d18581dbf45b38ca86f26df3d91 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:48:28 +0100 Subject: [PATCH 012/101] Search: i18n + remove role (#3280) --- .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 | 4 ++ .../core/react/src/util/i18n/locales/nb.ts | 4 ++ .../core/react/src/util/i18n/locales/nn.ts | 4 ++ 6 files changed, 42 insertions(+), 37 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 0000000000..5b056089b2 --- /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 6fd179210a..5144da0d6f 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 e21ddf07b2..82c87f74ed 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 583ac9b790..bc674b0855 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -57,4 +57,8 @@ export default { progressUnknown: "Progress is unknown, estimated time is {seconds} seconds.", }, + Search: { + clear: "Clear", + 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 81939d7857..1e9675ce8b 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -64,4 +64,8 @@ export default { progressUnknown: "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.", }, + Search: { + clear: "Tøm", + 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 c5ca1dd0ae..9b2ce5ff34 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -57,4 +57,8 @@ export default { progressUnknown: "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.", }, + Search: { + clear: "Tøm", + search: "Søk", + }, } satisfies Translations; From 0afbef50a99cab5a5c1fdab6aeeb269981ce5ed6 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 13:17:39 +0100 Subject: [PATCH 013/101] [Darkside] Allow old spacing tokens in darkside to avoid editing react-code in production --- .../core/css/darkside/primitives/index.css | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/@navikt/core/css/darkside/primitives/index.css b/@navikt/core/css/darkside/primitives/index.css index 94315f4a1e..d91ec8ea6a 100644 --- a/@navikt/core/css/darkside/primitives/index.css +++ b/@navikt/core/css/darkside/primitives/index.css @@ -1,3 +1,4 @@ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ @layer aksel.layout.component, aksel.layout.base; @import "./base.darkside.css" layer(aksel.layout.base); @@ -7,3 +8,30 @@ @import "./hgrid.darkside.css" layer(aksel.layout.component); @import "./stack.darkside.css" layer(aksel.layout.component); @import "./responsive.darkside.css" layer(aksel.layout.component); + +/* Custom override to avoid hacing to edit react-syntax in Primtives */ +@layer aksel.layout { + :root { + --a-spacing-1-alt: var(--ax-spacing-1-alt); + --a-spacing-05: var(--ax-spacing-05); + --a-spacing-32: var(--ax-spacing-32); + --a-spacing-24: var(--ax-spacing-24); + --a-spacing-20: var(--ax-spacing-20); + --a-spacing-18: var(--ax-spacing-18); + --a-spacing-16: var(--ax-spacing-16); + --a-spacing-14: var(--ax-spacing-14); + --a-spacing-12: var(--ax-spacing-12); + --a-spacing-11: var(--ax-spacing-11); + --a-spacing-10: var(--ax-spacing-10); + --a-spacing-9: var(--ax-spacing-9); + --a-spacing-8: var(--ax-spacing-8); + --a-spacing-7: var(--ax-spacing-7); + --a-spacing-6: var(--ax-spacing-6); + --a-spacing-5: var(--ax-spacing-5); + --a-spacing-4: var(--ax-spacing-4); + --a-spacing-3: var(--ax-spacing-3); + --a-spacing-2: var(--ax-spacing-2); + --a-spacing-1: var(--ax-spacing-1); + --a-spacing-0: var(--ax-spacing-0); + } +} From c2365712ca26c7d1f8f94e789bc7a00875d56654 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:28:36 +0100 Subject: [PATCH 014/101] [Translations] Table: i18n support (#3281) --- .../expansion-card/ExpansionCardHeader.tsx | 4 +-- .../core/react/src/table/ExpandableRow.tsx | 25 +++++++++---------- .../core/react/src/util/i18n/locales/en.ts | 10 ++++---- .../core/react/src/util/i18n/locales/nb.ts | 10 ++++---- .../core/react/src/util/i18n/locales/nn.ts | 10 ++++---- 5 files changed, 29 insertions(+), 30 deletions(-) diff --git a/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx b/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx index 826a9b7e8e..c36f878685 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx +++ b/@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx @@ -14,7 +14,7 @@ const ExpansionCardHeader = forwardRef< ExpansionCardHeaderProps >(({ children, className, ...rest }, ref) => { const panelContext = useContext(ExpansionCardContext); - const translate = useI18n("ExpansionCard"); + const translate = useI18n("global"); if (panelContext === null) { console.error( @@ -39,7 +39,7 @@ const ExpansionCardHeader = forwardRef< >
diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx index 109b2f0733..086e771f15 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -4,6 +4,7 @@ import { ChevronDownIcon } from "@navikt/aksel-icons"; import { composeEventHandlers } from "../util/composeEventHandlers"; import { useId } from "../util/hooks"; import { useControllableState } from "../util/hooks/useControllableState"; +import { useI18n } from "../util/i18n/i18n.context"; import AnimateHeight from "./AnimateHeight"; import DataCell from "./DataCell"; import Row, { RowProps } from "./Row"; @@ -20,7 +21,7 @@ export interface ExpandableRowProps extends Omit { togglePlacement?: "left" | "right"; /** * Opens component if 'true', closes if 'false' - * Using this props removes automatic control of open-state + * Using this prop removes automatic control of open-state */ open?: boolean; /** @@ -76,21 +77,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef( value: open, onChange: onOpenChange, }); - + const translate = useI18n("global"); const id = useId(); - const expansionHandler = (e) => { - _setOpen((x) => !x); - e.stopPropagation(); + const expansionHandler = (event: React.MouseEvent) => { + _setOpen((oldOpen) => !oldOpen); + event.stopPropagation(); }; - const onRowClick = (e) => - !isInteractiveTarget(e.target) && expansionHandler(e); - - const handleRowClick = ( - e: React.MouseEvent, - ) => { - !expansionDisabled && expandOnRowClick && onRowClick(e); + const handleRowClick = (event: React.MouseEvent) => { + expandOnRowClick && + !expansionDisabled && + !isInteractiveTarget(event.target as HTMLElement) && + expansionHandler(event); }; return ( @@ -123,7 +122,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef( > )} diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index bc674b0855..50818290f2 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -1,6 +1,11 @@ import type { Translations } from "../i18n.types"; export default { + global: { + showMore: "Show more", + showLess: "Show less", + }, + FileUpload: { dropzone: { button: "Choose file", @@ -37,11 +42,6 @@ export default { labelSuffix: "delete", }, }, - ExpansionCard: { - Header: { - buttonTitle: "Show more", - }, - }, Loader: { title: "Waiting…", }, diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 1e9675ce8b..4108f80b45 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -7,6 +7,11 @@ interface TranslationMap { } export default { + global: { + showMore: "Vis mer", + showLess: "Vis mindre", + }, + FileUpload: { dropzone: { button: "Velg fil", @@ -44,11 +49,6 @@ export default { labelSuffix: "slett", }, }, - ExpansionCard: { - Header: { - buttonTitle: "Vis mer", - }, - }, Loader: { title: "Venter…", }, diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts index 9b2ce5ff34..992ed2666c 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -1,6 +1,11 @@ import type { Translations } from "../i18n.types"; export default { + global: { + showMore: "Vis meir", + showLess: "Vis mindre", + }, + FileUpload: { dropzone: { button: "Vel fil", @@ -37,11 +42,6 @@ export default { labelSuffix: "slett", }, }, - ExpansionCard: { - Header: { - buttonTitle: "Vis meir", - }, - }, Loader: { title: "Ventar…", }, From 4cdeeacaefa774e74b892dcd42d637c53b243c3d Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Tue, 29 Oct 2024 15:39:07 +0100 Subject: [PATCH 015/101] Add "Decision Records" to PR template (#3289) --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 2f93cb8564..c62ca00113 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -6,7 +6,7 @@ - [ ] JSDoc - [ ] Examples -- [ ] Documentation +- [ ] Documentation / Decision Records - [ ] Storybook - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`) - [ ] Component tokens (`@navikt/core/css/tokens.json`) From 1e2b1d885fef5b721263b3bf6c070570d75e1190 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Wed, 30 Oct 2024 10:03:09 +0100 Subject: [PATCH 016/101] [Darkside] Updated Typo CSS (#3295) * [Darkside] Migrated typo to new CSS * memo: Added comments --- .storybook/preview.jsx | 2 +- .../css/darkside/baseline/theme.darkside.css | 6 +- .../core/css/darkside/typography.darkside.css | 138 +++++++++--------- 3 files changed, 71 insertions(+), 75 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 88cb8ca018..f84af9305d 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -50,7 +50,7 @@ const ModeDecorator = ({ children, mode }) => { document.head.appendChild(style); if (mode === "darkside") { - document.body.style.setProperty("background", "var(--a-bg-default)"); + document.body.style.setProperty("background", "var(--ax-bg-default)"); } return () => { diff --git a/@navikt/core/css/darkside/baseline/theme.darkside.css b/@navikt/core/css/darkside/baseline/theme.darkside.css index d752dfb905..8dfe05a2d0 100644 --- a/@navikt/core/css/darkside/baseline/theme.darkside.css +++ b/@navikt/core/css/darkside/baseline/theme.darkside.css @@ -1,10 +1,12 @@ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ + /* To support nested theming, we want to declare color on each scoped elements */ :root, :host, .light { - color: var(--a-text-default); + color: var(--ax-text-default); } .dark { - color: var(--a-text-default); + color: var(--ax-text-default); } diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css index 9d8ae5ecf4..eeeeeb82fe 100644 --- a/@navikt/core/css/darkside/typography.darkside.css +++ b/@navikt/core/css/darkside/typography.darkside.css @@ -1,4 +1,6 @@ -/* New in darkside */ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ + +/* ------------------------- Global typo-definitions ------------------------ */ body, :host { font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; @@ -6,207 +8,198 @@ body, font-size: 1.125rem; } -/* Start old CSS (pre darkside) */ -[data-theme="dark"] { - --__ac-typo-error-text: var(--a-red-300); - --__ac-typo-text-subtle: var(--a-gray-300); -} - -[data-theme="light"] { - --__ac-typo-error-text: initial; - --__ac-typo-text-subtle: initial; -} +/* ----------------------------- Typo-components ---------------------------- */ /* Heading */ .navds-heading { - font-weight: var(--a-font-weight-bold); + font-weight: var(--ax-font-weight-bold); margin: 0; } .navds-heading--xlarge { - font-size: var(--a-font-size-heading-2xlarge); + font-size: var(--ax-font-size-heading-2xlarge); letter-spacing: -0.01em; - line-height: var(--a-font-line-height-heading-2xlarge); + line-height: var(--ax-font-line-height-heading-2xlarge); } .navds-heading--xlarge.navds-typo--spacing { - margin-bottom: var(--a-spacing-5); + margin-bottom: var(--ax-spacing-5); } .navds-heading--large { - font-size: var(--a-font-size-heading-xlarge); + font-size: var(--ax-font-size-heading-xlarge); letter-spacing: -0.008em; - line-height: var(--a-font-line-height-heading-xlarge); + line-height: var(--ax-font-line-height-heading-xlarge); } .navds-heading--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } /* Mobile scale */ @media (max-width: 480px) { .navds-heading--xlarge { - font-size: var(--a-font-size-heading-xlarge); + font-size: var(--ax-font-size-heading-xlarge); letter-spacing: -0.008em; - line-height: var(--a-font-line-height-heading-xlarge); + line-height: var(--ax-font-line-height-heading-xlarge); } .navds-heading--xlarge.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } .navds-heading--large { - font-size: var(--a-font-size-heading-large); + font-size: var(--ax-font-size-heading-large); letter-spacing: -0.004em; - line-height: var(--a-font-line-height-heading-large); + line-height: var(--ax-font-line-height-heading-large); } .navds-heading--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } } .navds-heading--medium { - font-size: var(--a-font-size-heading-medium); + font-size: var(--ax-font-size-heading-medium); letter-spacing: -0.002em; - line-height: var(--a-font-line-height-heading-medium); + line-height: var(--ax-font-line-height-heading-medium); } .navds-heading--medium.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-heading--small { - font-size: var(--a-font-size-heading-small); + font-size: var(--ax-font-size-heading-small); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-heading-small); + line-height: var(--ax-font-line-height-heading-small); } .navds-heading--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-heading--xsmall { - font-size: var(--a-font-size-heading-xsmall); + font-size: var(--ax-font-size-heading-xsmall); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-heading-xsmall); + line-height: var(--ax-font-line-height-heading-xsmall); } .navds-heading--xsmall.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } /* Ingress */ .navds-ingress { - font-size: var(--a-font-size-xlarge); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-xlarge); + font-weight: var(--ax-font-weight-regular); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); margin: 0; } .navds-ingress.navds-typo--spacing { - margin-bottom: var(--a-spacing-10); + margin-bottom: var(--ax-spacing-10); } /* Body */ .navds-body-long { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-regular); letter-spacing: 0; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); margin: 0; } .navds-body-long.navds-typo--spacing { - margin-bottom: var(--a-spacing-7); + margin-bottom: var(--ax-spacing-7); } .navds-body-long--large { - font-size: var(--a-font-size-xlarge); + font-size: var(--ax-font-size-xlarge); letter-spacing: -0.0013em; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); } .navds-body-long--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-10); + margin-bottom: var(--ax-spacing-10); } .navds-body-long--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); } .navds-body-long--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-6); + margin-bottom: var(--ax-spacing-6); } .navds-body-short { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-regular); letter-spacing: 0; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); margin: 0; } .navds-body-short.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-body-short--large { - font-size: var(--a-font-size-xlarge); + font-size: var(--ax-font-size-xlarge); letter-spacing: -0.0013em; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); } .navds-body-short--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } .navds-body-short--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); } .navds-body-short--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } /* Label */ .navds-label { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-bold); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-bold); letter-spacing: 0; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); margin: 0; } .navds-label.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-label--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); } .navds-label--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } /* Small text */ .navds-detail { - font-size: var(--a-font-size-small); + font-size: var(--ax-font-size-small); letter-spacing: 0.004em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); margin: 0; } .navds-detail.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } .navds-detail.navds-typo--uppercase { @@ -214,17 +207,18 @@ body, } .navds-detail--small { - font-weight: var(--a-font-weight-regular); + font-weight: var(--ax-font-weight-regular); } .navds-detail--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } .navds-error-message { - color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger))); + color: var(--ax-text-danger); } +/* -------------------------------- Utilities ------------------------------- */ .navds-typo--truncate { overflow: hidden; white-space: nowrap; @@ -232,7 +226,7 @@ body, } .navds-typo--semibold { - font-weight: var(--a-font-weight-bold); + font-weight: var(--ax-font-weight-bold); } .navds-typo--align-start { @@ -261,5 +255,5 @@ body, } .navds-typo--color-subtle { - color: var(--__ac-typo-text-subtle, var(--a-text-subtle)); + color: var(--ax-text-subtle); } From e88d328e8bf7d3889d38910dde1d7f204e4b8567 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Wed, 30 Oct 2024 10:05:16 +0100 Subject: [PATCH 017/101] Add darkside tokens to stylelint rule value-no-unknown-custom-properties (#3297) --- @navikt/core/css/darkside/primitives/index.css | 3 +-- package.json | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/@navikt/core/css/darkside/primitives/index.css b/@navikt/core/css/darkside/primitives/index.css index d91ec8ea6a..5df024328e 100644 --- a/@navikt/core/css/darkside/primitives/index.css +++ b/@navikt/core/css/darkside/primitives/index.css @@ -1,4 +1,3 @@ -/* stylelint-disable csstools/value-no-unknown-custom-properties */ @layer aksel.layout.component, aksel.layout.base; @import "./base.darkside.css" layer(aksel.layout.base); @@ -9,7 +8,7 @@ @import "./stack.darkside.css" layer(aksel.layout.component); @import "./responsive.darkside.css" layer(aksel.layout.component); -/* Custom override to avoid hacing to edit react-syntax in Primtives */ +/* Custom override to avoid having to edit react-syntax in Primtives */ @layer aksel.layout { :root { --a-spacing-1-alt: var(--ax-spacing-1-alt); diff --git a/package.json b/package.json index 6bc45e90b5..47f4b58bbf 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,8 @@ true, { "importFrom": [ - "@navikt/core/tokens/dist/tokens.css" + "@navikt/core/tokens/dist/tokens.css", + "@navikt/core/tokens/dist/darkside/tokens.css" ] } ] From 1ac9ec2f5692ac9ffcc405c80ff6d235651c8d40 Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Wed, 30 Oct 2024 10:06:31 +0100 Subject: [PATCH 018/101] Remove some excludes in axe.e2e.ts (#3291) --- aksel.nav.no/website/e2e/axe.e2e.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/aksel.nav.no/website/e2e/axe.e2e.ts b/aksel.nav.no/website/e2e/axe.e2e.ts index a287d7b5b3..1f01ea8afc 100644 --- a/aksel.nav.no/website/e2e/axe.e2e.ts +++ b/aksel.nav.no/website/e2e/axe.e2e.ts @@ -9,14 +9,11 @@ test.describe("Axe a11y", () => { await page.waitForLoadState("domcontentloaded"); const accessibilityScanResults = await new AxeBuilder({ page }) .disableRules([ - "definition-list", "scrollable-region-focusable", - "landmark-complementary-is-top-level", + "landmark-complementary-is-top-level", // https://github.com/navikt/team-aksel/issues/643 ]) .exclude("iframe") .exclude("#aksel-expansioncard") - .exclude("#toc-scroll") - .exclude("#toc-scroll") .exclude(".aksel-codesnippet") .analyze(); expect(accessibilityScanResults.violations).toEqual([]); @@ -26,8 +23,6 @@ test.describe("Axe a11y", () => { /* Disabled rules: -- definition-list: 'div' as a direct child of 'dl' should be valid. Ignoring failed test. -- scrollable-region-focusable: Up for discussion. Should code-block be focusable fot easier access and allowing scroll with keyboard? -- aksel-expansioncard: Errors with duplicate label-text -- toc-scroll: Axe does not wait for fadein animation to finish before scanning. This causes false positives for low contrast. +- scrollable-region-focusable: Up for discussion. Should code-block be focusable for easier access and allowing scroll with keyboard? +- aksel-expansioncard / aksel-codesnippet: Errors with duplicate label-text (landmark-unique) */ From 76937a0a2b12f11fc147c02e527040f5b60ae4ff Mon Sep 17 00:00:00 2001 From: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Date: Wed, 30 Oct 2024 12:20:56 +0100 Subject: [PATCH 019/101] Combobox: :bug: Fix scroll issue when using arrow keys in list (#3299) --- .changeset/silver-dingos-mate.md | 2 +- @navikt/core/css/darkside/form/combobox.darkside.css | 4 ---- @navikt/core/css/form/combobox.css | 4 ---- .../src/form/combobox/FilteredOptions/FilteredOptions.tsx | 4 +--- .../src/form/combobox/FilteredOptions/useVirtualFocus.ts | 2 +- 5 files changed, 3 insertions(+), 13 deletions(-) diff --git a/.changeset/silver-dingos-mate.md b/.changeset/silver-dingos-mate.md index e25c1583f2..ea0eed4fd4 100644 --- a/.changeset/silver-dingos-mate.md +++ b/.changeset/silver-dingos-mate.md @@ -3,4 +3,4 @@ "@navikt/ds-css": patch --- -Combobox: only apply filteredOptions scroll offset when max options is rendered +Combobox: :bug: Fix scroll issue when using arrow keys to navigate list diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css index c170408e5e..a6fcae859e 100644 --- a/@navikt/core/css/darkside/form/combobox.darkside.css +++ b/@navikt/core/css/darkside/form/combobox.darkside.css @@ -305,10 +305,6 @@ border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info)); } -.navds-combobox__list--max-selected .navds-combobox__list-item { - scroll-margin-top: 50px; -} - .navds-combobox__list_non-selectables:hover { cursor: default; } diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css index c170408e5e..a6fcae859e 100644 --- a/@navikt/core/css/form/combobox.css +++ b/@navikt/core/css/form/combobox.css @@ -305,10 +305,6 @@ border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info)); } -.navds-combobox__list--max-selected .navds-combobox__list-item { - scroll-margin-top: 50px; -} - .navds-combobox__list_non-selectables:hover { cursor: default; } diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx index 21b34a09bd..4db73fb21f 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx @@ -58,9 +58,7 @@ const FilteredOptions = () => {
    {isValueNew && !maxSelected?.isLimitReached && allowNewValues && ( diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts b/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts index 2f97eadeae..9512e69a04 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts @@ -45,7 +45,7 @@ const useVirtualFocus = ( const setActiveAndScrollToElement = (element?: HTMLElement) => { setActiveElement(element); - element?.scrollIntoView?.({ block: "nearest" }); + element?.scrollIntoView?.({ block: "center" }); }; const moveFocusUp = () => { From 1e9983c65b36ce7b61db7a49ef6c2e9178ea5c6a Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Wed, 30 Oct 2024 12:56:04 +0100 Subject: [PATCH 020/101] Button: :sparkles: new tokens (darkside.css) (#3237) * Button: :sparkles: new tokens (darkside.css) * Button: :truck: copy over the primitives CSS * Button: temporary missing placeholder tokens (shadow) * Button: use new tokens * Button: remove temporary duplicate code, remove box-shadow focus * Button: :art: use new token prefix * Button: :bug: erroneous token conversion from old * Button: :bug: erroneous precedence of some CSS rules * Button: :art: do not use CSS nesting (...yet!) * Button: :art: use alpha tokens for hover on secondary and tertiary * Button: :art: * Button: :rotating_light: ignore outdated stylelint rule * Button: :art: use bg token for storybook preview darkmode * Button: :fire: :art: remove unused CSS, better scope for var def * Button: :lipstick: use correct tokens, prettier css rules * Button: :lipstick: remove unused CSS --- @navikt/core/css/darkside/button.darkside.css | 360 ++++-------------- @navikt/core/css/darkside/index.css | 1 + 2 files changed, 71 insertions(+), 290 deletions(-) diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css index fc8811fdfe..f54804ff0b 100644 --- a/@navikt/core/css/darkside/button.darkside.css +++ b/@navikt/core/css/darkside/button.darkside.css @@ -1,131 +1,82 @@ -[data-theme="dark"] { - --__ac-button-primary-text: var(--a-gray-900); - --__ac-button-primary-bg: var(--a-blue-200); - --__ac-button-primary-focus-border: var(--a-gray-900); - --__ac-button-primary-hover-bg: var(--a-blue-300); - --__ac-button-primary-active-bg: var(--a-blue-400); - --__ac-button-secondary-text: var(--a-white); - --__ac-button-secondary-hover-text: var(--a-white); - --__ac-button-secondary-active-text: var(--a-white); - --__ac-button-secondary-active-focus-border: var(--a-gray-900); - --__ac-button-secondary-bg: var(--a-gray-900); - --__ac-button-secondary-border: var(--a-blue-200); - --__ac-button-secondary-hover-bg: var(--a-gray-800); - --__ac-button-secondary-focus-border: var(--a-blue-200); - --__ac-button-secondary-active-bg: var(--a-gray-700); -} - -[data-theme="light"] { - --__ac-button-primary-text: initial; - --__ac-button-primary-bg: initial; - --__ac-button-primary-focus-border: initial; - --__ac-button-primary-hover-bg: initial; - --__ac-button-primary-active-bg: initial; - --__ac-button-secondary-text: initial; - --__ac-button-secondary-hover-text: initial; - --__ac-button-secondary-active-text: initial; - --__ac-button-secondary-active-focus-border: initial; - --__ac-button-secondary-bg: initial; - --__ac-button-secondary-border: initial; - --__ac-button-secondary-hover-bg: initial; - --__ac-button-secondary-focus-border: initial; - --__ac-button-secondary-active-bg: initial; -} - .navds-button { - --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5); - + padding: var(--ax-spacing-3) var(--ax-spacing-5); + border-radius: var(--ax-border-radius-medium); display: inline-flex; cursor: pointer; - margin: 0; text-decoration: none; border: none; background: none; - border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium)); - padding: var(--ac-button-padding, var(--__ac-button-padding)); align-items: center; justify-content: center; - gap: var(--a-spacing-2); + gap: var(--ax-spacing-2); } .navds-button--small { - --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3); - - padding: var(--ac-button-padding-small, var(--__ac-button-padding)); + padding: var(--ax-spacing-1) var(--ax-spacing-3); min-height: 2rem; min-width: 2rem; } .navds-button--xsmall { - --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2); - - padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding)); - gap: var(--a-spacing-1); + padding: var(--ax-spacing-05) var(--ax-spacing-2); + gap: var(--ax-spacing-1); } .navds-button--icon-only { - --__ac-button-padding: var(--a-spacing-3); - - padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding)); + padding: var(--ax-spacing-3); } .navds-button--small.navds-button--icon-only { - --__ac-button-padding: var(--a-spacing-1); - - padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding)); + padding: var(--ax-spacing-1); } .navds-button--xsmall.navds-button--icon-only { - --__ac-button-padding: var(--a-spacing-05); - - padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding)); + padding: var(--ax-spacing-05); } .navds-button:focus-visible { - outline: 2px solid transparent; + outline: 4px solid var(--ax-border-focus); outline-offset: 2px; - box-shadow: var(--a-shadow-focus); } @supports not selector(:focus-visible) { .navds-button:focus { - outline: none; - box-shadow: var(--a-shadow-focus); + outline: 4px solid var(--ax-border-focus); } } .navds-button__icon { - --ac-button-icon-margin: -4px; - font-size: 1.5rem; display: flex; + + --__axc-button-icon-margin: -4px; } .navds-button__icon:first-child { - margin-left: var(--ac-button-icon-margin); + margin-left: var(--__axc-button-icon-margin); } .navds-button__icon:last-child { - margin-right: var(--ac-button-icon-margin); -} - -.navds-button__icon:only-child { - margin: 0; + margin-right: var(--__axc-button-icon-margin); } :where(.navds-button--xsmall, .navds-button--small) .navds-button__icon { - --ac-button-icon-margin: -2px; + --__axc-button-icon-margin: -2px; font-size: 1.25rem; } +.navds-button__icon:only-child { + margin: 0; +} + /************************* * .navds-button--primary * *************************/ .navds-button--primary { - background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action))); - color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action))); + background-color: var(--ax-bg-accent-strong); + color: var(--ax-text-accent-contrast); } @media (forced-colors: active) { @@ -140,38 +91,16 @@ } .navds-button--primary:hover { - background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover))); + background-color: var(--ax-bg-accent-strong-hover); } .navds-button--primary:active { - background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active))); -} - -.navds-button--primary:focus-visible { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))), - var(--a-shadow-focus); -} - -@media (forced-colors: active) { - .navds-button--primary:focus-visible { - box-shadow: none; - } -} - -@supports not selector(:focus-visible) { - .navds-button--primary:focus { - box-shadow: - inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-accent-strong-pressed); } .navds-button--primary:hover:where(:disabled, .navds-button--disabled), .navds-button--primary:active:where(:disabled, .navds-button--disabled) { - background-color: var(--ac-button-primary-bg, var(--a-surface-action)); + background-color: var(--ax-bg-accent-strong); } /************************* @@ -179,35 +108,21 @@ *************************/ .navds-button--primary-neutral { - background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral)); - color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral)); + background-color: var(--ax-bg-neutral-strong); + color: var(--ax-text-neutral-contrast); } .navds-button--primary-neutral:hover { - background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover)); + background-color: var(--ax-bg-neutral-strong-hover); } .navds-button--primary-neutral:active { - background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active)); -} - -.navds-button--primary-neutral:focus-visible { - box-shadow: - inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--primary-neutral:focus { - box-shadow: - inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-neutral-strong-pressed); } .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled), .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) { - background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral)); + background-color: var(--ax-bg-neutral-strong); } /************************** @@ -215,61 +130,27 @@ **************************/ .navds-button--secondary { - color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action))); - background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent))); - box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action))); + background-color: transparent; + color: var(--ax-text-accent); + box-shadow: inset 0 0 0 2px var(--ax-border-accent); } .navds-button--secondary:hover { - color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle))); - background-color: var( - --ac-button-secondary-hover-bg, - var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover)) - ); - box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover)); -} - -.navds-button--secondary:focus-visible { - box-shadow: - inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--secondary:focus { - box-shadow: - inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-accent-moderate-hoverA); + color: var(--ax-bg-accent-strong-hover); + box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover); } .navds-button--secondary:active { - color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action))); - background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active))); + background-color: var(--ax-bg-accent-strong-pressed); + color: var(--ax-text-accent-contrast); box-shadow: none; } -.navds-button--secondary:focus-visible:active { - box-shadow: - inset 0 0 0 1px - var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--secondary:focus:active { - box-shadow: - inset 0 0 0 1px - var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))), - var(--a-shadow-focus); - } -} - .navds-button--secondary:where(:disabled, .navds-button--disabled), .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) { - color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action))); - background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent))); - box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action))); + background-color: transparent; + color: var(--ax-text-accent); } /************************** @@ -277,56 +158,26 @@ **************************/ .navds-button--secondary-neutral { - color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); - background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent)); - box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong)); + background-color: transparent; + color: var(--ax-text-default); + box-shadow: inset 0 0 0 2px var(--ax-border-neutral); } .navds-button--secondary-neutral:hover { - background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)); -} - -.navds-button--secondary-neutral:focus-visible { - color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); - box-shadow: - inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--secondary-neutral:focus { - color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); - box-shadow: - inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-neutral-moderate-hoverA); } .navds-button--secondary-neutral:active { - color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral)); - background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active)); + color: var(--ax-text-neutral-contrast); + background-color: var(--ax-bg-neutral-strong-pressed); box-shadow: none; } -.navds-button--secondary-neutral:focus-visible:active { - box-shadow: - inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--secondary-neutral:focus:active { - box-shadow: - inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)), - var(--a-shadow-focus); - } -} - .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled), .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) { - color: var(--ac-button-secondary-neutral-text, var(--a-text-default)); - background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent)); - box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong)); + color: var(--ax-text-default); + background-color: transparent; + box-shadow: inset 0 0 0 2px var(--ax-border-strong); } /**************************** @@ -334,57 +185,29 @@ ****************************/ .navds-button--tertiary { - color: var(--ac-button-tertiary-text, var(--a-text-action)); - background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent)); + background-color: transparent; + color: var(--ax-text-accent); } .navds-button--tertiary:hover { - color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle)); - background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover)); -} - -.navds-button--tertiary:focus-visible { - box-shadow: - inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--tertiary:focus { - box-shadow: - inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-accent-hoverA); + color: var(--ax-text-accent); } .navds-button--tertiary:active { - color: var(--ac-button-tertiary-active-text, var(--a-text-on-action)); - background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active)); + background-color: var(--ax-bg-accent-strong-pressed); + color: var(--ax-text-accent-contrast); } .navds-button--tertiary:active:hover { - background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active)); -} - -.navds-button--tertiary:focus-visible:active { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--tertiary:focus:active { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-accent-strong-pressed); } .navds-button--tertiary:where(:disabled, .navds-button--disabled), .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled), .navds-button--tertiary:active:where(:disabled, .navds-button--disabled), .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) { - color: var(--ac-button-tertiary-text, var(--a-text-action)); + color: var(--ax-text-accent); background: none; box-shadow: none; } @@ -394,56 +217,27 @@ ****************************/ .navds-button--tertiary-neutral { - color: var(--ac-button-tertiary-neutral-text, var(--a-text-default)); + color: var(--ax-text-default); } .navds-button--tertiary-neutral:hover { - color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default)); - background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)); -} - -.navds-button--tertiary-neutral:focus-visible { - box-shadow: - inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--tertiary-neutral:focus { - box-shadow: - inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-neutral-hoverA); } .navds-button--tertiary-neutral:active { - color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral)); - background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active)); + background-color: var(--ax-bg-neutral-strong-pressed); + color: var(--ax-text-neutral-contrast); } .navds-button--tertiary-neutral:active:hover { - background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active)); -} - -.navds-button--tertiary-neutral:focus-visible:active { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--tertiary-neutral:focus:active { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-neutral-strong-pressed); } .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled), .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled), .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled), .navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) { - color: var(--ac-button-tertiary-neutral-text, var(--a-text-default)); + color: var(--ax-text-default); background: none; box-shadow: none; } @@ -453,35 +247,21 @@ *************************/ .navds-button--danger { - background-color: var(--ac-button-danger-bg, var(--a-surface-danger)); - color: var(--ac-button-danger-text, var(--a-text-on-danger)); + background-color: var(--ax-bg-danger-strong); + color: var(--ax-text-danger-contrast); } .navds-button--danger:hover { - background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover)); + background-color: var(--ax-bg-danger-strong-hover); } .navds-button--danger:active { - background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active)); -} - -.navds-button--danger:focus-visible { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-button--danger:focus { - box-shadow: - inset 0 0 0 1px var(--a-surface-default), - var(--a-shadow-focus); - } + background-color: var(--ax-bg-danger-strong-pressed); } .navds-button--danger:active:where(:disabled, .navds-button--disabled), .navds-button--danger:hover:where(:disabled, .navds-button--disabled) { - background-color: var(--ac-button-danger-bg, var(--a-surface-danger)); + background-color: var(--ax-bg-danger-strong); } /************************** @@ -498,12 +278,12 @@ /* Loader overrides */ .navds-button .navds-loader .navds-loader__foreground { - stroke: var(--ac-button-loader-stroke, currentColor); + stroke: currentColor; } .navds-button--primary .navds-loader .navds-loader__background, .navds-button--danger .navds-loader .navds-loader__background { - stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3)); + stroke: rgb(255 255 255 / 0.3); } @media (forced-colors: active) { diff --git a/@navikt/core/css/darkside/index.css b/@navikt/core/css/darkside/index.css index 05343558bb..51fb9426ee 100644 --- a/@navikt/core/css/darkside/index.css +++ b/@navikt/core/css/darkside/index.css @@ -18,6 +18,7 @@ @import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme); /* Components */ +@import "../primitives/stack.css" layer(aksel.components); @import "./accordion.darkside.css" layer(aksel.components); @import "./button.darkside.css" layer(aksel.components); @import "./alert.darkside.css" layer(aksel.components); From 561dd2e3c00e2fb24e3eb27adc7fa5836cfd8dce Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Wed, 30 Oct 2024 13:47:41 +0100 Subject: [PATCH 021/101] Introside: :memo: update confirmation text (#3300) * Introside: :memo: update confirmation text * Introside: :memo: update confirmation text (+ meta.json) --- .../website/pages/eksempler/confirmationpanel/demo.tsx | 2 +- .../website/pages/eksempler/confirmationpanel/error.tsx | 2 +- .../website/pages/eksempler/confirmationpanel/small.tsx | 2 +- .../soknad-introside-real-examples/soknad-introside-aap.tsx | 4 ++-- .../soknad-introside-alderspensjon.tsx | 4 ++-- .../soknad-introside-foreldrepenger.tsx | 4 ++-- .../soknad-introside-pass-av-barn.tsx | 4 ++-- .../pages/templates/soknad-introside/intro-med-alert.tsx | 4 ++-- .../soknad-introside/intro-med-alternativ-soknad.tsx | 4 ++-- .../website/pages/templates/soknad-introside/intro.tsx | 4 ++-- .../website/pages/templates/soknad-introside/meta.json | 5 +++++ 11 files changed, 22 insertions(+), 17 deletions(-) diff --git a/aksel.nav.no/website/pages/eksempler/confirmationpanel/demo.tsx b/aksel.nav.no/website/pages/eksempler/confirmationpanel/demo.tsx index 3123b1c87e..323595bbf5 100644 --- a/aksel.nav.no/website/pages/eksempler/confirmationpanel/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/confirmationpanel/demo.tsx @@ -7,7 +7,7 @@ const Example = () => { return ( setState((x) => !x)} > diff --git a/aksel.nav.no/website/pages/eksempler/confirmationpanel/error.tsx b/aksel.nav.no/website/pages/eksempler/confirmationpanel/error.tsx index a5c48ea3b2..e5039fd6c9 100644 --- a/aksel.nav.no/website/pages/eksempler/confirmationpanel/error.tsx +++ b/aksel.nav.no/website/pages/eksempler/confirmationpanel/error.tsx @@ -7,7 +7,7 @@ const Example = () => { return ( setState((x) => !x)} error={!state && "Du må bekrefte før du kan fortsette."} > diff --git a/aksel.nav.no/website/pages/eksempler/confirmationpanel/small.tsx b/aksel.nav.no/website/pages/eksempler/confirmationpanel/small.tsx index 5bd7e910bf..9664130d4f 100644 --- a/aksel.nav.no/website/pages/eksempler/confirmationpanel/small.tsx +++ b/aksel.nav.no/website/pages/eksempler/confirmationpanel/small.tsx @@ -7,7 +7,7 @@ const Example = () => { return ( setState((x) => !x)} size="small" > diff --git a/aksel.nav.no/website/pages/templates/soknad-introside-real-examples/soknad-introside-aap.tsx b/aksel.nav.no/website/pages/templates/soknad-introside-real-examples/soknad-introside-aap.tsx index 6d230af254..38f8e29791 100644 --- a/aksel.nav.no/website/pages/templates/soknad-introside-real-examples/soknad-introside-aap.tsx +++ b/aksel.nav.no/website/pages/templates/soknad-introside-real-examples/soknad-introside-aap.tsx @@ -34,7 +34,7 @@ function Example() { - Jeg vil svare så godt jeg kan på spørsmålene i søknaden. + Jeg bekrefter at jeg vil svare så riktig som jeg kan.