Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox: Overgang til Chip-komponent #4291

Merged
merged 2 commits into from
Nov 20, 2024
Merged

Combobox: Overgang til Chip-komponent #4291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b72fdc6
refactor: fjern dismissableAction property
kristianulv23 Nov 20, 2024
c0e98f4
refactor: opprettet ny chip komponent og refaktorert combobox
kristianulv23 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions packages/chip-react/src/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CheckIcon, CloseIcon } from "@fremtind/jkl-icons-react";
import cl from "classnames";
import React, { FC, HTMLAttributes } from "react";
import React, { forwardRef, HTMLAttributes } from "react";

type Size = "small" | "large";

Expand All @@ -18,25 +18,25 @@ export type ChipVariant =

export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;

export const Chip: FC<ChipProps> = ({
className,
variant,
onClick,
children,
selected,
size = "small",
...rest
}) => {
export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
{
className,
variant,
onClick,
children,
selected,
size = "small",
...rest
},
ref,
) {
return (
<button
ref={ref}
className={cl(
"jkl-chip",
{
"jkl-chip--input": variant === "input",
"jkl-chip--filter": variant === "filter",
"jkl-chip--small": size === "small",
"jkl-chip--large": size === "large",
},
`jkl-chip--${size}`,
`jkl-chip--${variant}`,
className,
)}
onClick={onClick}
Expand All @@ -53,11 +53,11 @@ export const Chip: FC<ChipProps> = ({
)}
{variant === "input" && (
<CloseIcon
className="jkl-chip__icon lol"
className="jkl-chip__icon"
variant="small"
data-testid="jkl-close-icon"
/>
)}
</button>
);
};
});
2 changes: 1 addition & 1 deletion packages/combobox-react/documentation/Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
comboboxExampleKnobs,
} from "./ComboboxExample";
import "../../combobox/combobox.scss";
import "../../tag/tag.scss";
import "../../chip/chip.scss";
import "../../icon-button/icon-button.scss";
import "../../icons/icons.scss";

Expand Down
1 change: 1 addition & 0 deletions packages/combobox-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"dev": "run-p dev:*"
},
"dependencies": {
"@fremtind/jkl-chip-react": "^1.0.0",
"@fremtind/jkl-combobox": "^2.2.27",
"@fremtind/jkl-core": "^14.8.6",
"@fremtind/jkl-icon-button-react": "^5.0.26",
Expand Down
8 changes: 4 additions & 4 deletions packages/combobox-react/src/Combobox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,10 @@ describe("Combobox", () => {
await userEvent.click(selectOption2Element);
});

const selectedTags = getAllByTestId("jkl-tag__content");
expect(selectedTags).toHaveLength(2);
expect(selectedTags[0]).toHaveTextContent("Item 1");
expect(selectedTags[1]).toHaveTextContent("Item 2");
const selectedChips = getAllByTestId("jkl-chip");
expect(selectedChips).toHaveLength(2);
expect(selectedChips[0]).toHaveTextContent("Item 1");
expect(selectedChips[1]).toHaveTextContent("Item 2");

expect(onChangeSpy).toHaveBeenCalledTimes(2);
expect(onChangeSpy).toHaveBeenLastCalledWith(
Expand Down
105 changes: 49 additions & 56 deletions packages/combobox-react/src/Combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Chip } from "@fremtind/jkl-chip-react";
import { ValuePair, Density } from "@fremtind/jkl-core";
import { IconButton } from "@fremtind/jkl-icon-button-react";
import { ArrowVerticalAnimated, CheckIcon } from "@fremtind/jkl-icons-react";
Expand All @@ -11,7 +12,6 @@ import {
useAnimatedHeight,
useListNavigation,
} from "@fremtind/jkl-react-hooks";
import { Tag } from "@fremtind/jkl-tag-react";
import {
Tooltip,
TooltipContent,
Expand Down Expand Up @@ -42,7 +42,7 @@ export function getComboboxValuePair(
return typeof item === "string" ? { value: item, label: item } : item;
}

interface PartialChangeEvent
export interface ComboboxPartialChangeEvent
extends Partial<Omit<ChangeEvent<HTMLElement>, "target">> {
type: "change" | "blur";
target: {
Expand All @@ -52,9 +52,11 @@ interface PartialChangeEvent
};
}

type ChangeEventHandler = (event: PartialChangeEvent) => void;
export type ComboboxChangeEventHandler = (
event: ComboboxPartialChangeEvent,
) => void;

interface ComboboxProps extends InputGroupProps {
export interface ComboboxProps extends InputGroupProps {
id?: string;
placeholder?: string;
labelProps?: Omit<
Expand All @@ -73,9 +75,9 @@ interface ComboboxProps extends InputGroupProps {
className?: string;
invalid?: boolean;
hasTagHover?: boolean;
onChange: ChangeEventHandler;
onBlur?: ChangeEventHandler;
onFocus?: ChangeEventHandler;
onChange: ComboboxChangeEventHandler;
onBlur?: ComboboxChangeEventHandler;
onFocus?: ComboboxChangeEventHandler;
}

export const Combobox: FC<ComboboxProps> = ({
Expand Down Expand Up @@ -409,6 +411,30 @@ export const Combobox: FC<ComboboxProps> = ({

const hasSelection = selectedValue.length >= 1;

const renderSelectedOption = useCallback(
(option: ComboboxValuePair) => (
<Chip
key={option.value}
data-testid="jkl-chip"
aria-label={`Fjern ${option.tagLabel}`}
className={`jkl-combobox__selected-option ${
marked && "jkl-combobox__selected-option--marked"
}`}
variant="input"
onClick={(e) => {
if (searchRef.current) {
searchRef.current.focus();
}
onTagRemove(e, option.value);
}}
onBlur={handleBlur}
>
{option.tagLabel ? option.tagLabel : option.label}
</Chip>
),
[handleBlur, onTagRemove, marked],
);

return (
<InputGroup
label={label}
Expand Down Expand Up @@ -438,58 +464,25 @@ export const Combobox: FC<ComboboxProps> = ({
onBlur={handleBlur}
>
<div
className="jkl-combobox__tags"
data-testid="jkl-combobox__tags"
className="jkl-combobox__chips"
data-testid="jkl-combobox__chips"
>
{selectedValue
.map(getComboboxValuePair)
.map((option) => (
<Tag
key={option.value}
className={`jkl-tag ${
marked && "jkl-tag__marked"
}`}
data-testid="jkl-tag"
dismissAction={{
onClick: (e) => {
if (searchRef.current) {
searchRef.current.focus();
}
onTagRemove(e, option.value);
},
onBlur: handleBlur,
label: `Fjern ${option.value}`,
}}
>
{hasTagHover ? (
<Tooltip key={option.value}>
<TooltipTrigger>
{" "}
<span
aria-hidden="true"
data-testid="jkl-tag__content"
>
{option.tagLabel
? option.tagLabel
: option.label}
</span>
</TooltipTrigger>
<TooltipContent>
{option.label}
</TooltipContent>
</Tooltip>
) : (
<span
aria-hidden="true"
data-testid="jkl-tag__content"
>
{option.tagLabel
? option.tagLabel
: option.label}
</span>
)}
</Tag>
))}
.map((option) => {
return hasTagHover ? (
<Tooltip key={option.value}>
<TooltipTrigger>
{renderSelectedOption(option)}
</TooltipTrigger>
<TooltipContent>
{option.label}
</TooltipContent>
</Tooltip>
) : (
renderSelectedOption(option)
);
})}
<input
{...inputProps}
className="jkl-combobox__search-input"
Expand Down
18 changes: 6 additions & 12 deletions packages/combobox/combobox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ $_combobox-search-input-selection-color--inverted: color.scale(
--jkl-combobox-marked-value-shadow: #{jkl.$color-granitt};
}

@include jkl.comfortable-density-variables {
@include jkl.comfortable-density(".jkl-combobox") {
@include jkl.declare-font-variables("jkl-combobox", "body");

--jkl-combobox-button-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8}
Expand All @@ -68,15 +68,13 @@ $_combobox-search-input-selection-color--inverted: color.scale(
--jkl-combobox-option-line-height: 2rem;
--jkl-combobox-input-padding: #{jkl.rem(60px)};
--jkl-combobox-search-input-height: #{jkl.rem(28px)};
--jkl-combobox-tag-padding: #{jkl.rem(2px)};
--jkl-combobox-tag-height: #{jkl.rem(24px)};

@include jkl.small-device {
--jkl-combobox-input-height: #{jkl.rem(44px)};
}
}

@include jkl.compact-density-variables {
@include jkl.compact-density(".jkl-combobox") {
@include jkl.declare-font-variables("jkl-combobox", "small");

--jkl-combobox-button-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4}
Expand All @@ -93,15 +91,13 @@ $_combobox-search-input-selection-color--inverted: color.scale(
--jkl-combobox-option-line-height: 1.5rem;
--jkl-combobox-input-padding: #{jkl.$spacing-12};
--jkl-combobox-search-input-height: #{jkl.rem(20px)};
--jkl-combobox-tag-padding: 0 0.25rem;
--jkl-combobox-tag-height: #{jkl.rem(20px)};
}

.jkl-combobox {
position: relative;
@include jkl.reset-outline;

& *:focus {
& .jkl-combobox__option:focus {
outline: none;
}

Expand Down Expand Up @@ -252,25 +248,23 @@ $_combobox-search-input-selection-color--inverted: color.scale(
top: var(--jkl-combobox-actions-top);
}

&__tags {
&__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: -4px;

.jkl-tag {
.jkl-chip {
margin: 1px 4px;
z-index: 1;
padding: var(--jkl-combobox-tag-padding);
height: var(--jkl-combobox-tag-height);

&__marked {
border-radius: 6px;
box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow)
inset;
box-sizing: border-box;
border: 1px solid var(--jkl-combobox-marked-value-border);
margin: 0 4px;
margin: 4px;
}

.jkl-tooltip-trigger {
Expand Down
3 changes: 2 additions & 1 deletion packages/jokul/src/components/autosuggest/Autosuggest.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { fireEvent, render } from "@testing-library/react";
import React from "react";
import { describe, expect, it, vi } from "vitest";
import { Autosuggest, AutosuggestProps } from "./Autosuggest.js";

const renderMount = (props?: Partial<AutosuggestProps>) =>
Expand Down Expand Up @@ -42,7 +43,7 @@ describe("Autosuggest", () => {
});

it("is possible to search and select a item", () => {
const onChange = jest.fn();
const onChange = vi.fn();
const { getByTestId, queryAllByTestId } = renderMount({ onChange });

const input = getByTestId("autosuggest__input");
Expand Down
3 changes: 2 additions & 1 deletion packages/jokul/src/components/chip/Chip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { render, screen, fireEvent } from "@testing-library/react";
import React from "react";
import { describe, expect, it, vi } from "vitest";
import { Chip } from "./Chip.js";

describe("Chip-komponenten", () => {
Expand Down Expand Up @@ -34,7 +35,7 @@ describe("Chip-komponenten", () => {
});

it("håndterer onClick-hendelsen", () => {
const handleClick = jest.fn();
const handleClick = vi.fn();
render(
<Chip variant="input" onClick={handleClick}>
Input
Expand Down
Loading
Loading