From 1f64d855fe350472e41096c9a636734c8f6c4e22 Mon Sep 17 00:00:00 2001
From: Caroline <4971715+carolineBda@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:53:49 +0200
Subject: [PATCH] fix(suggestion): style + move feedback into RichComponent
(#6210)
---
.../code-du-travail/articleCodeDuTravail.tsx | 3 --
.../src/modules/layout/ContainerRich.tsx | 3 +-
.../src/modules/layout/header/SearchInput.tsx | 31 +++++--------------
3 files changed, 9 insertions(+), 28 deletions(-)
diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
index 2b766b21dd..3a188a21c8 100644
--- a/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
+++ b/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
@@ -1,9 +1,7 @@
import React from "react";
import { fr } from "@codegouvfr/react-dsfr";
-import { Tag } from "@codegouvfr/react-dsfr/Tag";
import Html from "../common/Html";
import { ContainerRich } from "../layout/ContainerRich";
-import { Feedback } from "../layout/feedback";
import { RelatedItem } from "../documents";
type Props = {
@@ -50,7 +48,6 @@ export function ArticleCodeDuTravail({
{notaHtml}
)}
-
);
}
diff --git a/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx b/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx
index 1a3c31136f..de7d1d6c62 100644
--- a/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx
+++ b/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx
@@ -2,6 +2,7 @@ import { fr } from "@codegouvfr/react-dsfr";
import { RelatedItems } from "../common/RelatedItems";
import { Share } from "../common/Share";
import { RelatedItem } from "../documents";
+import { Feedback } from "./feedback";
type Props = {
relatedItems: { items: RelatedItem[]; title: string }[];
@@ -27,7 +28,7 @@ export const ContainerRich = ({
>
{children}
- {/**/}
+
diff --git a/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx b/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx
index 16bf36e819..b092477711 100644
--- a/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx
+++ b/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx
@@ -19,13 +19,7 @@ export const SearchInput = (props: Props) => {
const [suggestions, setSuggestions] = useState([]);
const { emitSuggestionEvent } = useLayoutTracking();
- const {
- isOpen,
- getMenuProps,
- getInputProps,
- highlightedIndex,
- getItemProps,
- } = useCombobox({
+ const { isOpen, getMenuProps, getInputProps, getItemProps } = useCombobox({
items: suggestions,
onInputValueChange: async ({ inputValue }) => {
setQuery(inputValue);
@@ -70,7 +64,7 @@ export const SearchInput = (props: Props) => {
{...getItemProps({
item,
index,
- className: `${fr.cx("fr-p-1v")} ${suggestion} ${highlightedIndex === index ? isHighlighted : ""}`,
+ className: `${fr.cx("fr-p-3v")} ${suggestion}`,
})}
key={`${item}${index}`}
>
@@ -83,27 +77,16 @@ export const SearchInput = (props: Props) => {
};
const list = css({
- position: "absolute",
+ pos: "absolute",
top: "2.5rem",
- width: "100%",
+ w: "100%",
zIndex: 100,
- background: "var(--background-default-grey)",
+ bg: "var(--background-default-grey)",
});
const suggestion = css({
cursor: "pointer",
- lineHeight: "2rem",
- listStyleType: "none",
+ color: "var(--text-action-high-blue-france)",
textAlign: "left",
- background: "var(--background-default-grey)",
- "&:nth-child(2n + 1)": {
- background: "var(--background-default-grey-hover)",
- },
-});
-
-const isHighlighted = css({
- background: "var(--background-default-grey-active)",
- "&:nth-child(2n + 1)": {
- background: "var(--background-default-grey-active)",
- },
+ _hover: { bg: "var(--background-default-grey-hover)" },
});