Skip to content

Commit

Permalink
Move close button label translations inside the Dialog component (#2871)
Browse files Browse the repository at this point in the history
* Move all close label translations inside the Dialog component

* Cleanup components' props interfaces

* add changelog entry for components refactoring
  • Loading branch information
sirineJ authored Jan 16, 2025
1 parent 49ab488 commit 6c6e2ac
Show file tree
Hide file tree
Showing 136 changed files with 45 additions and 226 deletions.
5 changes: 5 additions & 0 deletions .changeset/spicy-avocados-provide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@sumup-oss/circuit-ui": minor
---

Refactored the Modal, Popover, Toggletip, DateInput, SidePanel and SideNavigation components to leverage the internal Dialog component for improved consistency and maintainability.
1 change: 1 addition & 0 deletions packages/circuit-ui/components/DateInput/DateInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -488,6 +488,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
animationDuration={isMobile ? animationDuration : 0}
aria-labelledby={headlineId}
style={dialogStyles}
locale={locale}
closeButtonLabel={closeCalendarButtonLabel}
>
{() => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Месец",
"dayInputLabel": "Ден",
"openCalendarButtonLabel": "Промяна на дата",
"closeCalendarButtonLabel": "Затваряне на календар",
"applyDateButtonLabel": "Прилагане на дата",
"clearDateButtonLabel": "Изчистване на дата"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Měsíc",
"dayInputLabel": "Den",
"openCalendarButtonLabel": "Změnit datum",
"closeCalendarButtonLabel": "Zavřít kalendář",
"applyDateButtonLabel": "Použít datum",
"clearDateButtonLabel": "Vymazat datum"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Måned",
"dayInputLabel": "Dag",
"openCalendarButtonLabel": "Skift dato",
"closeCalendarButtonLabel": "Luk kalender",
"applyDateButtonLabel": "Anvend dato",
"clearDateButtonLabel": "Slet dato"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Monat",
"dayInputLabel": "Tag",
"openCalendarButtonLabel": "Datum ändern",
"closeCalendarButtonLabel": "Kalender schließen",
"applyDateButtonLabel": "Datum anwenden",
"clearDateButtonLabel": "Datum löschen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Monat",
"dayInputLabel": "Tag",
"openCalendarButtonLabel": "Datum ändern",
"closeCalendarButtonLabel": "Kalender schließen",
"applyDateButtonLabel": "Datum anwenden",
"clearDateButtonLabel": "Datum löschen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Monat",
"dayInputLabel": "Tag",
"openCalendarButtonLabel": "Datum ändern",
"closeCalendarButtonLabel": "Kalender schließen",
"applyDateButtonLabel": "Datum anwenden",
"clearDateButtonLabel": "Datum löschen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Monat",
"dayInputLabel": "Tag",
"openCalendarButtonLabel": "Datum ändern",
"closeCalendarButtonLabel": "Kalender schließen",
"applyDateButtonLabel": "Datum anwenden",
"clearDateButtonLabel": "Datum löschen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Μήνας",
"dayInputLabel": "Ημέρα",
"openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
"closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
"applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
"clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Μήνας",
"dayInputLabel": "Ημέρα",
"openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
"closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
"applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
"clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Month",
"dayInputLabel": "Day",
"openCalendarButtonLabel": "Change date",
"closeCalendarButtonLabel": "Close calendar",
"applyDateButtonLabel": "Apply date",
"clearDateButtonLabel": "Clear date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Month",
"dayInputLabel": "Day",
"openCalendarButtonLabel": "Change date",
"closeCalendarButtonLabel": "Close calendar",
"applyDateButtonLabel": "Apply date",
"clearDateButtonLabel": "Clear date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Month",
"dayInputLabel": "Day",
"openCalendarButtonLabel": "Change date",
"closeCalendarButtonLabel": "Close calendar",
"applyDateButtonLabel": "Apply date",
"clearDateButtonLabel": "Clear date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Month",
"dayInputLabel": "Day",
"openCalendarButtonLabel": "Change date",
"closeCalendarButtonLabel": "Close calendar",
"applyDateButtonLabel": "Apply date",
"clearDateButtonLabel": "Clear date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Month",
"dayInputLabel": "Day",
"openCalendarButtonLabel": "Change date",
"closeCalendarButtonLabel": "Close calendar",
"applyDateButtonLabel": "Apply date",
"clearDateButtonLabel": "Clear date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar la fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mes",
"dayInputLabel": "Día",
"openCalendarButtonLabel": "Cambiar fecha",
"closeCalendarButtonLabel": "Cerrar calendario",
"applyDateButtonLabel": "Aplicar fecha",
"clearDateButtonLabel": "Borrar fecha"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Kuu",
"dayInputLabel": "Päev",
"openCalendarButtonLabel": "Kuupäeva muutmine",
"closeCalendarButtonLabel": "Sulge kalender",
"applyDateButtonLabel": "Rakenda kuupäev",
"clearDateButtonLabel": "Tühjenda kuupäev"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Kuukausi",
"dayInputLabel": "Päivä",
"openCalendarButtonLabel": "Vaihda päivämäärä",
"closeCalendarButtonLabel": "Sulje kalenteri",
"applyDateButtonLabel": "Käytä päivämäärää",
"clearDateButtonLabel": "Tyhjennä päivämäärä"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mois",
"dayInputLabel": "Jour",
"openCalendarButtonLabel": "Modifier la date",
"closeCalendarButtonLabel": "Fermer le calendrier",
"applyDateButtonLabel": "Appliquer la date",
"clearDateButtonLabel": "Supprimer la date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mois",
"dayInputLabel": "Jour",
"openCalendarButtonLabel": "Modifier la date",
"closeCalendarButtonLabel": "Fermer le calendrier",
"applyDateButtonLabel": "Appliquer la date",
"clearDateButtonLabel": "Supprimer la date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mois",
"dayInputLabel": "Jour",
"openCalendarButtonLabel": "Modifier la date",
"closeCalendarButtonLabel": "Fermer le calendrier",
"applyDateButtonLabel": "Appliquer la date",
"clearDateButtonLabel": "Supprimer la date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mois",
"dayInputLabel": "Jour",
"openCalendarButtonLabel": "Modifier la date",
"closeCalendarButtonLabel": "Fermer le calendrier",
"applyDateButtonLabel": "Appliquer la date",
"clearDateButtonLabel": "Supprimer la date"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mjesec",
"dayInputLabel": "Dan",
"openCalendarButtonLabel": "Promijeni datum",
"closeCalendarButtonLabel": "Zatvori kalendar",
"applyDateButtonLabel": "Primijeni datum",
"clearDateButtonLabel": "Izbriši datum"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Hónap",
"dayInputLabel": "Nap",
"openCalendarButtonLabel": "Dátum módosítása",
"closeCalendarButtonLabel": "Naptár bezárása",
"applyDateButtonLabel": "Dátuma alkalmazása",
"clearDateButtonLabel": "Dátum törlése"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mese",
"dayInputLabel": "Giorno",
"openCalendarButtonLabel": "Modifica data",
"closeCalendarButtonLabel": "Chiudi calendario",
"applyDateButtonLabel": "Applica data",
"clearDateButtonLabel": "Rimuovi data"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mese",
"dayInputLabel": "Giorno",
"openCalendarButtonLabel": "Modifica data",
"closeCalendarButtonLabel": "Chiudi calendario",
"applyDateButtonLabel": "Applica data",
"clearDateButtonLabel": "Rimuovi data"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mėnuo",
"dayInputLabel": "Diena",
"openCalendarButtonLabel": "Keisti datą",
"closeCalendarButtonLabel": "Uždaryti kalendorių",
"applyDateButtonLabel": "Taikyti datą",
"clearDateButtonLabel": "Išvalyti datą"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mēnesis",
"dayInputLabel": "Diena",
"openCalendarButtonLabel": "Mainīt datumu",
"closeCalendarButtonLabel": "Aizvērt kalendāru",
"applyDateButtonLabel": "Piemērot datumu",
"clearDateButtonLabel": "Notīrīt datumu"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Måned",
"dayInputLabel": "Dag",
"openCalendarButtonLabel": "Endre dato",
"closeCalendarButtonLabel": "Lukk kalender",
"applyDateButtonLabel": "Bruk dato",
"clearDateButtonLabel": "Slett dato"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Maand",
"dayInputLabel": "Dag",
"openCalendarButtonLabel": "Datum wijzigen",
"closeCalendarButtonLabel": "Agenda sluiten",
"applyDateButtonLabel": "Datum toepassen",
"clearDateButtonLabel": "Datum wissen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Maand",
"dayInputLabel": "Dag",
"openCalendarButtonLabel": "Datum wijzigen",
"closeCalendarButtonLabel": "Agenda sluiten",
"applyDateButtonLabel": "Datum toepassen",
"clearDateButtonLabel": "Datum wissen"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Miesiąc",
"dayInputLabel": "Dzień",
"openCalendarButtonLabel": "Zmień datę",
"closeCalendarButtonLabel": "Zamknij kalendarz",
"applyDateButtonLabel": "Zastosuj datę",
"clearDateButtonLabel": "Usuń datę"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mês",
"dayInputLabel": "Dia",
"openCalendarButtonLabel": "Alterar data",
"closeCalendarButtonLabel": "Fechar agenda",
"applyDateButtonLabel": "Aplicar data",
"clearDateButtonLabel": "Limpar data"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mês",
"dayInputLabel": "Dia",
"openCalendarButtonLabel": "Alterar data",
"closeCalendarButtonLabel": "Fechar calendário",
"applyDateButtonLabel": "Aplicar data",
"clearDateButtonLabel": "Limpar data"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Lună",
"dayInputLabel": "Zi",
"openCalendarButtonLabel": "Modifică data",
"closeCalendarButtonLabel": "Închide calendarul",
"applyDateButtonLabel": "Aplică data",
"clearDateButtonLabel": "Șterge data"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mesiac",
"dayInputLabel": "Deň",
"openCalendarButtonLabel": "Zmeniť dátum?",
"closeCalendarButtonLabel": "Zatvoriť kalendár",
"applyDateButtonLabel": "Vybrať dátum",
"clearDateButtonLabel": "Vymazať dátum"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Mesec",
"dayInputLabel": "Dan",
"openCalendarButtonLabel": "Spremeni datum",
"closeCalendarButtonLabel": "Zapri koledar",
"applyDateButtonLabel": "Uporabi datum",
"clearDateButtonLabel": "Počisti datum"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"monthInputLabel": "Månad",
"dayInputLabel": "Dag",
"openCalendarButtonLabel": "Ändra datum",
"closeCalendarButtonLabel": "Stäng kalendern",
"applyDateButtonLabel": "Välj datum",
"clearDateButtonLabel": "Rensa datum"
}
1 change: 0 additions & 1 deletion packages/circuit-ui/components/Dialog/Dialog.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ const baseArgs: DialogProps = {
onCloseEnd: () => {},
'aria-labelledby': 'title',
'aria-describedby': 'description',
closeButtonLabel: 'Close',
children: defaultChildren,
style: dialogStyles,
};
Expand Down
6 changes: 4 additions & 2 deletions packages/circuit-ui/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ import { clsx } from '../../styles/clsx.js';
import { useClickOutside } from '../../hooks/useClickOutside/index.js';
import { useEscapeKey } from '../../hooks/useEscapeKey/index.js';
import { useLatest } from '../../hooks/useLatest/index.js';
import { useI18n } from '../../hooks/useI18n/useI18n.js';

import { getFirstFocusableElement } from './DialogService.js';
import classes from './dialog.module.css';
import { translations } from './translations/index.js';

type DataAttribute = `data-${string}`;

Expand Down Expand Up @@ -86,7 +88,7 @@ export interface DialogProps
*/
preventClose?: boolean;
/**
* Enables focusing a particular element in the dialog content and override default behavior. This will have no effect if the dialog is not modal.
* Enables focusing a particular element in the dialog content and overrides the default behavior.
* @default `false`.
*/
initialFocusRef?: RefObject<HTMLElement>;
Expand Down Expand Up @@ -119,7 +121,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
animationDuration = 0,
onCloseStart,
...rest
} = props;
} = useI18n(props, translations);
const dialogRef = useRef<HTMLDialogElement>(null);
const openRef = useLatest<boolean>(open);
const animationDurationRef = useLatest<number>(animationDuration);
Expand Down
3 changes: 0 additions & 3 deletions packages/circuit-ui/components/Modal/Modal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,7 @@ const openModal = async ({
const baseArgs: ModalProps = {
open: false,
onClose: () => {},
'aria-labelledby': 'title',
'aria-describedby': 'description',
variant: 'contextual',
closeButtonLabel: 'Close',
children: defaultModalChildren,
};

Expand Down
Loading

0 comments on commit 6c6e2ac

Please sign in to comment.