From 9955840debf7a7f1b5216657679d5ee587a6421a Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Wed, 26 Apr 2023 11:18:07 +0200 Subject: [PATCH] Fix datepicker --- site/package.json | 2 + .../ChiffreAffairesActivitéMixte.tsx | 6 +- site/source/components/PaySlip.tsx | 6 +- .../components/conversation/AnswerList.tsx | 6 +- .../components/conversation/Conversation.tsx | 6 +- site/source/design-system/field/DateField.tsx | 45 +- site/source/design-system/field/TextField.tsx | 2 +- .../components/DéclarationRevenu.tsx | 5 +- yarn.lock | 1404 +++++++++++++++++ 9 files changed, 1435 insertions(+), 47 deletions(-) diff --git a/site/package.json b/site/package.json index d4b8e0dce..ed109f337 100644 --- a/site/package.json +++ b/site/package.json @@ -54,6 +54,7 @@ "@axe-core/react": "^4.5.2", "@internationalized/number": "^3.2.0", "@leeoniya/ufuzzy": "^1.0.2", + "@popperjs/core": "^2.11.7", "@publicodes/api": "^1.0.0-beta.69", "@react-aria/accordion": "^3.0.0-alpha.15", "@react-aria/button": "^3.7.0", @@ -89,6 +90,7 @@ "publicodes": "^1.0.0-beta.69", "publicodes-react": "^1.0.0-beta.69", "react": "^18.2.0", + "react-aria": "^3.24.0", "react-day-picker": "^8.7.1", "react-dom": "^18.2.0", "react-easy-emoji": "^1.8.1", diff --git a/site/source/components/ChiffreAffairesActivitéMixte.tsx b/site/source/components/ChiffreAffairesActivitéMixte.tsx index f7b7b5d45..191187701 100644 --- a/site/source/components/ChiffreAffairesActivitéMixte.tsx +++ b/site/source/components/ChiffreAffairesActivitéMixte.tsx @@ -175,11 +175,7 @@ function ActivitéMixte() { Activité mixte - + ) diff --git a/site/source/components/PaySlip.tsx b/site/source/components/PaySlip.tsx index 3a84d492c..32ef471ac 100644 --- a/site/source/components/PaySlip.tsx +++ b/site/source/components/PaySlip.tsx @@ -150,11 +150,7 @@ export default function PaySlip() {
{section.title} - +
{cotisations.map((cotisation) => ( diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx index d6236168f..7296a0f48 100644 --- a/site/source/components/conversation/AnswerList.tsx +++ b/site/source/components/conversation/AnswerList.tsx @@ -313,11 +313,7 @@ function AnswerElement(rule: RuleNode) {

{evaluateQuestion(engine, engine.getRule(questionDottedName))} - +

{evaluateQuestion(engine, engine.getRule(currentQuestion))} - +

diff --git a/site/source/design-system/field/DateField.tsx b/site/source/design-system/field/DateField.tsx index d859678ef..b23fa1112 100644 --- a/site/source/design-system/field/DateField.tsx +++ b/site/source/design-system/field/DateField.tsx @@ -4,6 +4,7 @@ import { format as formatDate, isValid, parse } from 'date-fns' import { enUS, fr } from 'date-fns/locale' import FocusTrap from 'focus-trap-react' import { useCallback, useEffect, useRef, useState } from 'react' +import { useId } from 'react-aria' import { DayPicker, useInput } from 'react-day-picker' import { useTranslation } from 'react-i18next' import { usePopper } from 'react-popper' @@ -13,7 +14,6 @@ import { useOnClickOutside } from '@/hooks/useClickOutside' import { Button } from '../buttons' import { Emoji } from '../emoji' -import { Spacing } from '../layout' import { Body } from '../typography/paragraphs' import TextField from './TextField' @@ -21,7 +21,6 @@ interface DateFieldProps { defaultSelected?: Date inputValue?: string onChange?: (value?: string) => void - placeholder?: string label?: string 'aria-label'?: string @@ -49,6 +48,8 @@ export default function DateField(props: DateFieldProps) { null ) + const id = useId() + const format = 'dd/MM/y' const { inputProps, dayPickerProps } = useInput({ defaultSelected, @@ -124,7 +125,7 @@ export default function DateField(props: DateFieldProps) { }, [defaultSelected, handleDaySelect]) return ( - +
@@ -157,20 +158,16 @@ export default function DateField(props: DateFieldProps) { ref={buttonRef} onPress={handleButtonPress} type="button" + aria-haspopup="dialog" size="XXS" + aria-expanded={isPopperOpen} + aria-controls={isPopperOpen ? id : undefined} aria-label={t( - 'design-system.date-picker.choose-date', - 'Choisir une date' + 'design-system.date-picker.open-selector', + 'Ouvrir le sélecteur de date' )} > - + @@ -178,26 +175,30 @@ export default function DateField(props: DateFieldProps) { { + if (e.key === 'Escape') { + closePopper() + } + }} + aria-label="Calendrier de selection de date" > )} - +
) } @@ -221,9 +222,9 @@ const StyledBody = styled(Body)` theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]}; ` -const Container = styled.div`` - const Wrapper = styled.div` + display: flex; + align-items: center; position: relative; ` @@ -231,7 +232,7 @@ const StyledButton = styled(Button)` max-width: 55px; position: absolute; right: 0; - top: 0; + margin: 0.5rem; ` diff --git a/site/source/design-system/field/TextField.tsx b/site/source/design-system/field/TextField.tsx index c8180e438..93ff4358b 100644 --- a/site/source/design-system/field/TextField.tsx +++ b/site/source/design-system/field/TextField.tsx @@ -112,7 +112,7 @@ export const StyledDescription = styled(ExtraSmallBody)` padding: ${({ theme }) => `${theme.spacings.xxs} ${theme.spacings.sm}`}; will-change: color; transition: color 0.2s; - margin-top: 0; + margin-top: ${({ theme }) => `${theme.spacings.xs}`}; ` export const StyledErrorMessage = styled(StyledDescription)` diff --git a/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx b/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx index c9828a3fc..82fe9bd84 100644 --- a/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx +++ b/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx @@ -54,10 +54,7 @@ const RuleInputWithTitle = ({ `} > {title} - + )}