Skip to content

Commit 6c6e2ac

Browse files
authored
Move close button label translations inside the Dialog component (#2871)
* Move all close label translations inside the Dialog component * Cleanup components' props interfaces * add changelog entry for components refactoring
1 parent 49ab488 commit 6c6e2ac

File tree

136 files changed

+45
-226
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+45
-226
lines changed

.changeset/spicy-avocados-provide.md

+5

packages/circuit-ui/components/DateInput/DateInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
488488
animationDuration={isMobile ? animationDuration : 0}
489489
aria-labelledby={headlineId}
490490
style={dialogStyles}
491+
locale={locale}
491492
closeButtonLabel={closeCalendarButtonLabel}
492493
>
493494
{() => (

packages/circuit-ui/components/DateInput/translations/bg-BG.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Месец",
44
"dayInputLabel": "Ден",
55
"openCalendarButtonLabel": "Промяна на дата",
6-
"closeCalendarButtonLabel": "Затваряне на календар",
76
"applyDateButtonLabel": "Прилагане на дата",
87
"clearDateButtonLabel": "Изчистване на дата"
98
}

packages/circuit-ui/components/DateInput/translations/cs-CZ.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Měsíc",
44
"dayInputLabel": "Den",
55
"openCalendarButtonLabel": "Změnit datum",
6-
"closeCalendarButtonLabel": "Zavřít kalendář",
76
"applyDateButtonLabel": "Použít datum",
87
"clearDateButtonLabel": "Vymazat datum"
98
}

packages/circuit-ui/components/DateInput/translations/da-DK.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Måned",
44
"dayInputLabel": "Dag",
55
"openCalendarButtonLabel": "Skift dato",
6-
"closeCalendarButtonLabel": "Luk kalender",
76
"applyDateButtonLabel": "Anvend dato",
87
"clearDateButtonLabel": "Slet dato"
98
}

packages/circuit-ui/components/DateInput/translations/de-AT.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Monat",
44
"dayInputLabel": "Tag",
55
"openCalendarButtonLabel": "Datum ändern",
6-
"closeCalendarButtonLabel": "Kalender schließen",
76
"applyDateButtonLabel": "Datum anwenden",
87
"clearDateButtonLabel": "Datum löschen"
98
}

packages/circuit-ui/components/DateInput/translations/de-CH.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Monat",
44
"dayInputLabel": "Tag",
55
"openCalendarButtonLabel": "Datum ändern",
6-
"closeCalendarButtonLabel": "Kalender schließen",
76
"applyDateButtonLabel": "Datum anwenden",
87
"clearDateButtonLabel": "Datum löschen"
98
}

packages/circuit-ui/components/DateInput/translations/de-DE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Monat",
44
"dayInputLabel": "Tag",
55
"openCalendarButtonLabel": "Datum ändern",
6-
"closeCalendarButtonLabel": "Kalender schließen",
76
"applyDateButtonLabel": "Datum anwenden",
87
"clearDateButtonLabel": "Datum löschen"
98
}

packages/circuit-ui/components/DateInput/translations/de-LU.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Monat",
44
"dayInputLabel": "Tag",
55
"openCalendarButtonLabel": "Datum ändern",
6-
"closeCalendarButtonLabel": "Kalender schließen",
76
"applyDateButtonLabel": "Datum anwenden",
87
"clearDateButtonLabel": "Datum löschen"
98
}

packages/circuit-ui/components/DateInput/translations/el-CY.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Μήνας",
44
"dayInputLabel": "Ημέρα",
55
"openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
6-
"closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
76
"applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
87
"clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
98
}

packages/circuit-ui/components/DateInput/translations/el-GR.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Μήνας",
44
"dayInputLabel": "Ημέρα",
55
"openCalendarButtonLabel": "Αλλαγή ημερομηνίας",
6-
"closeCalendarButtonLabel": "Κλείσιμο ημερολογίου",
76
"applyDateButtonLabel": "Εφαρμογή ημερομηνίας",
87
"clearDateButtonLabel": "Εκκαθάριση ημερομηνίας"
98
}

packages/circuit-ui/components/DateInput/translations/en-AU.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Month",
44
"dayInputLabel": "Day",
55
"openCalendarButtonLabel": "Change date",
6-
"closeCalendarButtonLabel": "Close calendar",
76
"applyDateButtonLabel": "Apply date",
87
"clearDateButtonLabel": "Clear date"
98
}

packages/circuit-ui/components/DateInput/translations/en-GB.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Month",
44
"dayInputLabel": "Day",
55
"openCalendarButtonLabel": "Change date",
6-
"closeCalendarButtonLabel": "Close calendar",
76
"applyDateButtonLabel": "Apply date",
87
"clearDateButtonLabel": "Clear date"
98
}

packages/circuit-ui/components/DateInput/translations/en-IE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Month",
44
"dayInputLabel": "Day",
55
"openCalendarButtonLabel": "Change date",
6-
"closeCalendarButtonLabel": "Close calendar",
76
"applyDateButtonLabel": "Apply date",
87
"clearDateButtonLabel": "Clear date"
98
}

packages/circuit-ui/components/DateInput/translations/en-MT.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Month",
44
"dayInputLabel": "Day",
55
"openCalendarButtonLabel": "Change date",
6-
"closeCalendarButtonLabel": "Close calendar",
76
"applyDateButtonLabel": "Apply date",
87
"clearDateButtonLabel": "Clear date"
98
}

packages/circuit-ui/components/DateInput/translations/en-US.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Month",
44
"dayInputLabel": "Day",
55
"openCalendarButtonLabel": "Change date",
6-
"closeCalendarButtonLabel": "Close calendar",
76
"applyDateButtonLabel": "Apply date",
87
"clearDateButtonLabel": "Clear date"
98
}

packages/circuit-ui/components/DateInput/translations/es-CL.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar la fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/es-CO.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/es-ES.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/es-MX.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/es-PE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/es-US.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mes",
44
"dayInputLabel": "Día",
55
"openCalendarButtonLabel": "Cambiar fecha",
6-
"closeCalendarButtonLabel": "Cerrar calendario",
76
"applyDateButtonLabel": "Aplicar fecha",
87
"clearDateButtonLabel": "Borrar fecha"
98
}

packages/circuit-ui/components/DateInput/translations/et-EE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Kuu",
44
"dayInputLabel": "Päev",
55
"openCalendarButtonLabel": "Kuupäeva muutmine",
6-
"closeCalendarButtonLabel": "Sulge kalender",
76
"applyDateButtonLabel": "Rakenda kuupäev",
87
"clearDateButtonLabel": "Tühjenda kuupäev"
98
}

packages/circuit-ui/components/DateInput/translations/fi-FI.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Kuukausi",
44
"dayInputLabel": "Päivä",
55
"openCalendarButtonLabel": "Vaihda päivämäärä",
6-
"closeCalendarButtonLabel": "Sulje kalenteri",
76
"applyDateButtonLabel": "Käytä päivämäärää",
87
"clearDateButtonLabel": "Tyhjennä päivämäärä"
98
}

packages/circuit-ui/components/DateInput/translations/fr-BE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mois",
44
"dayInputLabel": "Jour",
55
"openCalendarButtonLabel": "Modifier la date",
6-
"closeCalendarButtonLabel": "Fermer le calendrier",
76
"applyDateButtonLabel": "Appliquer la date",
87
"clearDateButtonLabel": "Supprimer la date"
98
}

packages/circuit-ui/components/DateInput/translations/fr-CH.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mois",
44
"dayInputLabel": "Jour",
55
"openCalendarButtonLabel": "Modifier la date",
6-
"closeCalendarButtonLabel": "Fermer le calendrier",
76
"applyDateButtonLabel": "Appliquer la date",
87
"clearDateButtonLabel": "Supprimer la date"
98
}

packages/circuit-ui/components/DateInput/translations/fr-FR.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mois",
44
"dayInputLabel": "Jour",
55
"openCalendarButtonLabel": "Modifier la date",
6-
"closeCalendarButtonLabel": "Fermer le calendrier",
76
"applyDateButtonLabel": "Appliquer la date",
87
"clearDateButtonLabel": "Supprimer la date"
98
}

packages/circuit-ui/components/DateInput/translations/fr-LU.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mois",
44
"dayInputLabel": "Jour",
55
"openCalendarButtonLabel": "Modifier la date",
6-
"closeCalendarButtonLabel": "Fermer le calendrier",
76
"applyDateButtonLabel": "Appliquer la date",
87
"clearDateButtonLabel": "Supprimer la date"
98
}

packages/circuit-ui/components/DateInput/translations/hr-HR.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mjesec",
44
"dayInputLabel": "Dan",
55
"openCalendarButtonLabel": "Promijeni datum",
6-
"closeCalendarButtonLabel": "Zatvori kalendar",
76
"applyDateButtonLabel": "Primijeni datum",
87
"clearDateButtonLabel": "Izbriši datum"
98
}

packages/circuit-ui/components/DateInput/translations/hu-HU.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Hónap",
44
"dayInputLabel": "Nap",
55
"openCalendarButtonLabel": "Dátum módosítása",
6-
"closeCalendarButtonLabel": "Naptár bezárása",
76
"applyDateButtonLabel": "Dátuma alkalmazása",
87
"clearDateButtonLabel": "Dátum törlése"
98
}

packages/circuit-ui/components/DateInput/translations/it-CH.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mese",
44
"dayInputLabel": "Giorno",
55
"openCalendarButtonLabel": "Modifica data",
6-
"closeCalendarButtonLabel": "Chiudi calendario",
76
"applyDateButtonLabel": "Applica data",
87
"clearDateButtonLabel": "Rimuovi data"
98
}

packages/circuit-ui/components/DateInput/translations/it-IT.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mese",
44
"dayInputLabel": "Giorno",
55
"openCalendarButtonLabel": "Modifica data",
6-
"closeCalendarButtonLabel": "Chiudi calendario",
76
"applyDateButtonLabel": "Applica data",
87
"clearDateButtonLabel": "Rimuovi data"
98
}

packages/circuit-ui/components/DateInput/translations/lt-LT.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mėnuo",
44
"dayInputLabel": "Diena",
55
"openCalendarButtonLabel": "Keisti datą",
6-
"closeCalendarButtonLabel": "Uždaryti kalendorių",
76
"applyDateButtonLabel": "Taikyti datą",
87
"clearDateButtonLabel": "Išvalyti datą"
98
}

packages/circuit-ui/components/DateInput/translations/lv-LV.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mēnesis",
44
"dayInputLabel": "Diena",
55
"openCalendarButtonLabel": "Mainīt datumu",
6-
"closeCalendarButtonLabel": "Aizvērt kalendāru",
76
"applyDateButtonLabel": "Piemērot datumu",
87
"clearDateButtonLabel": "Notīrīt datumu"
98
}

packages/circuit-ui/components/DateInput/translations/nb-NO.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Måned",
44
"dayInputLabel": "Dag",
55
"openCalendarButtonLabel": "Endre dato",
6-
"closeCalendarButtonLabel": "Lukk kalender",
76
"applyDateButtonLabel": "Bruk dato",
87
"clearDateButtonLabel": "Slett dato"
98
}

packages/circuit-ui/components/DateInput/translations/nl-BE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Maand",
44
"dayInputLabel": "Dag",
55
"openCalendarButtonLabel": "Datum wijzigen",
6-
"closeCalendarButtonLabel": "Agenda sluiten",
76
"applyDateButtonLabel": "Datum toepassen",
87
"clearDateButtonLabel": "Datum wissen"
98
}

packages/circuit-ui/components/DateInput/translations/nl-NL.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Maand",
44
"dayInputLabel": "Dag",
55
"openCalendarButtonLabel": "Datum wijzigen",
6-
"closeCalendarButtonLabel": "Agenda sluiten",
76
"applyDateButtonLabel": "Datum toepassen",
87
"clearDateButtonLabel": "Datum wissen"
98
}

packages/circuit-ui/components/DateInput/translations/pl-PL.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Miesiąc",
44
"dayInputLabel": "Dzień",
55
"openCalendarButtonLabel": "Zmień datę",
6-
"closeCalendarButtonLabel": "Zamknij kalendarz",
76
"applyDateButtonLabel": "Zastosuj datę",
87
"clearDateButtonLabel": "Usuń datę"
98
}

packages/circuit-ui/components/DateInput/translations/pt-BR.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mês",
44
"dayInputLabel": "Dia",
55
"openCalendarButtonLabel": "Alterar data",
6-
"closeCalendarButtonLabel": "Fechar agenda",
76
"applyDateButtonLabel": "Aplicar data",
87
"clearDateButtonLabel": "Limpar data"
98
}

packages/circuit-ui/components/DateInput/translations/pt-PT.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mês",
44
"dayInputLabel": "Dia",
55
"openCalendarButtonLabel": "Alterar data",
6-
"closeCalendarButtonLabel": "Fechar calendário",
76
"applyDateButtonLabel": "Aplicar data",
87
"clearDateButtonLabel": "Limpar data"
98
}

packages/circuit-ui/components/DateInput/translations/ro-RO.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Lună",
44
"dayInputLabel": "Zi",
55
"openCalendarButtonLabel": "Modifică data",
6-
"closeCalendarButtonLabel": "Închide calendarul",
76
"applyDateButtonLabel": "Aplică data",
87
"clearDateButtonLabel": "Șterge data"
98
}

packages/circuit-ui/components/DateInput/translations/sk-SK.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mesiac",
44
"dayInputLabel": "Deň",
55
"openCalendarButtonLabel": "Zmeniť dátum?",
6-
"closeCalendarButtonLabel": "Zatvoriť kalendár",
76
"applyDateButtonLabel": "Vybrať dátum",
87
"clearDateButtonLabel": "Vymazať dátum"
98
}

packages/circuit-ui/components/DateInput/translations/sl-SI.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Mesec",
44
"dayInputLabel": "Dan",
55
"openCalendarButtonLabel": "Spremeni datum",
6-
"closeCalendarButtonLabel": "Zapri koledar",
76
"applyDateButtonLabel": "Uporabi datum",
87
"clearDateButtonLabel": "Počisti datum"
98
}

packages/circuit-ui/components/DateInput/translations/sv-SE.json

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"monthInputLabel": "Månad",
44
"dayInputLabel": "Dag",
55
"openCalendarButtonLabel": "Ändra datum",
6-
"closeCalendarButtonLabel": "Stäng kalendern",
76
"applyDateButtonLabel": "Välj datum",
87
"clearDateButtonLabel": "Rensa datum"
98
}

packages/circuit-ui/components/Dialog/Dialog.stories.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ const baseArgs: DialogProps = {
8080
onCloseEnd: () => {},
8181
'aria-labelledby': 'title',
8282
'aria-describedby': 'description',
83-
closeButtonLabel: 'Close',
8483
children: defaultChildren,
8584
style: dialogStyles,
8685
};

packages/circuit-ui/components/Dialog/Dialog.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@ import { clsx } from '../../styles/clsx.js';
3636
import { useClickOutside } from '../../hooks/useClickOutside/index.js';
3737
import { useEscapeKey } from '../../hooks/useEscapeKey/index.js';
3838
import { useLatest } from '../../hooks/useLatest/index.js';
39+
import { useI18n } from '../../hooks/useI18n/useI18n.js';
3940

4041
import { getFirstFocusableElement } from './DialogService.js';
4142
import classes from './dialog.module.css';
43+
import { translations } from './translations/index.js';
4244

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

@@ -86,7 +88,7 @@ export interface DialogProps
8688
*/
8789
preventClose?: boolean;
8890
/**
89-
* Enables focusing a particular element in the dialog content and override default behavior. This will have no effect if the dialog is not modal.
91+
* Enables focusing a particular element in the dialog content and overrides the default behavior.
9092
* @default `false`.
9193
*/
9294
initialFocusRef?: RefObject<HTMLElement>;
@@ -119,7 +121,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
119121
animationDuration = 0,
120122
onCloseStart,
121123
...rest
122-
} = props;
124+
} = useI18n(props, translations);
123125
const dialogRef = useRef<HTMLDialogElement>(null);
124126
const openRef = useLatest<boolean>(open);
125127
const animationDurationRef = useLatest<number>(animationDuration);

packages/circuit-ui/components/Modal/Modal.stories.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,7 @@ const openModal = async ({
7676
const baseArgs: ModalProps = {
7777
open: false,
7878
onClose: () => {},
79-
'aria-labelledby': 'title',
80-
'aria-describedby': 'description',
8179
variant: 'contextual',
82-
closeButtonLabel: 'Close',
8380
children: defaultModalChildren,
8481
};
8582

0 commit comments

Comments
 (0)