Merge branch 'main' into copybutton-placement

navikt · Aug 17, 2023 · f6ee5fe · f6ee5fe
2 parents 4f8a3e4 + 09d41e9
commit f6ee5fe
Show file tree

Hide file tree

Showing 17 changed files with 854 additions and 469 deletions.
diff --git a/.changeset/poor-buckets-collect.md b/.changeset/poor-buckets-collect.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Combobox, SingleSelect: fix adding custom options
diff --git a/.changeset/shiny-moose-hide.md b/.changeset/shiny-moose-hide.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Removed redundant calls to Combobox.onClear when toggling values
diff --git a/.changeset/soft-buttons-hope.md b/.changeset/soft-buttons-hope.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Checkbox: Checkmark er nå SVG-ikon og ikke Base64
diff --git a/.changeset/yellow-ants-invent.md b/.changeset/yellow-ants-invent.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Combobox, single-select: lukk nedtrekksmenyen hvis man legger til ny option
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -75,7 +75,7 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: "github-actions[bot]"
-          body-includes: github-comment-finder
+          body-includes: Storybook demo
 
       - name: Create or update comment
         if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
@@ -84,7 +84,7 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
 
             [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace

diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -253,6 +253,11 @@
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
+.navds-form-field--small .navds-combobox__list-item--focus,
+.navds-form-field--small .navds-combobox__list-item:hover {
+  padding-left: calc(var(--a-spacing-2) - 4px);
+}
+
 .navds-combobox__list-item--selected {
   background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
 }

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
@@ -114,14 +114,27 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 0.375rem center;
-  background-repeat: no-repeat;
-  background-size: 0.8125rem;
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(0.375rem);
+  pointer-events: none;
+}
+
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+  height: 1.25rem;
+}
+
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 0.25rem center;
 }
@@ -283,11 +296,14 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--a-icon-subtle);
+}
+
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
   background-color: var(--a-icon-subtle);

diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -86,6 +86,23 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           }}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <span className="navds-checkbox__icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="13"
+              height="10"
+              viewBox="0 0 13 10"
+              fill="none"
+              focusable={false}
+              role="img"
+              aria-hidden
+            >
+              <path
+                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
           <span
             className={cl("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,

diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx
@@ -8,7 +8,6 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
-    clearInput,
     inputProps: { id },
     size,
     value,
@@ -51,7 +50,8 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(value, event);
-            clearInput(event);
+            if (!isMultiSelect && !selectedOptions.includes(value))
+              toggleIsListOpen(false);
           }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
@@ -92,10 +92,8 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
-            clearInput(event);
-            if (!isMultiSelect) {
+            if (!isMultiSelect && !selectedOptions.includes(option))
               toggleIsListOpen(false);
-            }
           }}
           role="option"
           aria-selected={selectedOptions.includes(option)}

diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx
@@ -22,8 +22,12 @@ interface InputProps
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ inputClassName, error, errorId, ...rest }, ref) => {
     const { clearInput, inputProps, onChange, size, value } = useInputContext();
-    const { selectedOptions, removeSelectedOption, toggleOption } =
-      useSelectedOptionsContext();
+    const {
+      selectedOptions,
+      removeSelectedOption,
+      toggleOption,
+      isMultiSelect,
+    } = useSelectedOptionsContext();
     const {
       activeDecendantId,
       allowNewValues,
@@ -47,7 +51,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          clearInput(event);
+          if (!isMultiSelect && !selectedOptions.includes(currentOption))
+            toggleIsListOpen(false);
         } else if (shouldAutocomplete && selectedOptions.includes(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
@@ -56,15 +61,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Autocompleting or adding a new value
           toggleOption(value, event);
-          clearInput(event);
+          if (!isMultiSelect && !selectedOptions.includes(value))
+            toggleIsListOpen(false);
         }
       },
       [
         allowNewValues,
         clearInput,
         currentOption,
+        isMultiSelect,
         selectedOptions,
         shouldAutocomplete,
+        toggleIsListOpen,
         toggleOption,
         value,
       ]

diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
@@ -42,8 +42,12 @@ export const SelectedOptionsProvider = ({
   >;
 }) => {
   const { clearInput, focusInput } = useInputContext();
-  const { customOptions, removeCustomOption, addCustomOption } =
-    useCustomOptionsContext();
+  const {
+    customOptions,
+    removeCustomOption,
+    addCustomOption,
+    setCustomOptions,
+  } = useCustomOptionsContext();
   const {
     allowNewValues,
     isMultiSelect,
@@ -60,28 +64,37 @@ export const SelectedOptionsProvider = ({
 
   const addSelectedOption = useCallback(
     (option: string) => {
-      const isAddedByUser = !options
+      const isCustomOption = !options
         .map((opt) => opt.toLowerCase())
         .includes(option?.toLowerCase?.());
-      if (isAddedByUser) {
+      if (isCustomOption) {
         allowNewValues && addCustomOption(option);
+        !isMultiSelect && setSelectedOptions([]);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
           ...prevSelectedOptions,
           option,
         ]);
       } else {
         setSelectedOptions([option]);
+        setCustomOptions([]);
       }
-      onToggleSelected?.(option, true, isAddedByUser);
+      onToggleSelected?.(option, true, isCustomOption);
     },
-    [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
+    [
+      addCustomOption,
+      allowNewValues,
+      isMultiSelect,
+      onToggleSelected,
+      options,
+      setCustomOptions,
+    ]
   );
 
   const removeSelectedOption = useCallback(
     (option: string) => {
-      const isAddedByUser = customOptions.includes(option);
-      if (isAddedByUser) {
+      const isCustomOption = customOptions.includes(option);
+      if (isCustomOption) {
         removeCustomOption(option);
       } else {
         setSelectedOptions((prevSelectedOptions) =>
@@ -90,7 +103,7 @@ export const SelectedOptionsProvider = ({
           )
         );
       }
-      onToggleSelected?.(option, false, isAddedByUser);
+      onToggleSelected?.(option, false, isCustomOption);
     },
     [customOptions, onToggleSelected, removeCustomOption]
   );
@@ -102,16 +115,13 @@ export const SelectedOptionsProvider = ({
       } else {
         addSelectedOption(option);
       }
-      if (!isMultiSelect) {
-        clearInput(event);
-      }
+      clearInput(event);
       focusInput();
     },
     [
       addSelectedOption,
       clearInput,
       focusInput,
-      isMultiSelect,
       removeSelectedOption,
       selectedOptions,
     ]

diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
 import { Chips, UNSAFE_Combobox, TextField } from "../../index";
-import { expect } from "@storybook/jest";
+import { expect, jest } from "@storybook/jest";
 
 export default {
   title: "ds-react/Combobox",
@@ -94,14 +94,35 @@ MultiSelect.args = {
   size: "medium",
 };
 
+export function WithAddNewOptions(props) {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        label="Komboboks med mulighet for å legge til nye verdier"
+        options={props.options}
+        allowNewValues={props.allowNewValues}
+        shouldAutocomplete={props.shouldAutoComplete}
+      />
+    </DemoContainer>
+  );
+}
+
+WithAddNewOptions.args = {
+  options,
+  allowNewValues: true,
+  shouldAutoComplete: true,
+};
+
 export function MultiSelectWithAddNewOptions(props) {
   const id = useId();
   return (
     <DemoContainer dataTheme={props.darkMode}>
       <UNSAFE_Combobox
         id={id}
         isMultiSelect={props.isMultiSelect}
-        label="Komboboks (med mulighet for å legge til nye verdier)"
+        label="Multiselect komboboks med mulighet for å legge til nye verdier"
         options={props.options}
         allowNewValues={props.allowNewValues}
       />
@@ -324,6 +345,7 @@ export const CancelInputTest = {
     userEvent.keyboard("{Escape}");
     await sleep(1000);
     userEvent.keyboard("{ArrowDown}");
+    await sleep(500);
     const banana = canvas.getByText("banana");
     userEvent.click(banana);
   },
@@ -421,3 +443,42 @@ export const AddWhenAddNewDisabledTest = {
     expect(invalidSelect).not.toBeInTheDocument();
   },
 };
+
+export const TestThatCallbacksOnlyFireWhenExpected = {
+  args: {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    onToggleSelected: jest.fn(),
+  },
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          {...props}
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onToggleSelected.mockClear();
+    args.onClear.mockClear();
+    args.onChange.mockClear();
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+    const searchWord = "tangerine";
+
+    userEvent.click(input);
+    await userEvent.type(input, searchWord, { delay: 200 });
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    expect(args.onClear.mock.calls).toHaveLength(1);
+    expect(args.onToggleSelected.mock.calls).toHaveLength(1);
+    expect(args.onChange.mock.calls).toHaveLength(searchWord.length);
+  },
+};