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.

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

[l10n] Add Arabic (ar) locale #15693

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
100 changes: 100 additions & 0 deletions packages/x-date-pickers/src/locales/ar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { PickersLocaleText } from './utils/pickersLocaleTextApi';
import { getPickersLocalization } from './utils/getPickersLocalization';
import { TimeViewWithMeridiem } from '../internals/models';

//maps TimeView to its translation
const views: Record<TimeViewWithMeridiem, string> = {
hours: 'ساعات',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are used below, and instruct the user to choose the unit.
it's better to have them singular instead (ex. "اختر الساعة")

Suggested change
hours: 'ساعات',
hours: 'الساعة',

minutes: 'دقائق',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
minutes: 'دقائق',
minutes: 'الدقيقة',

seconds: 'ثواني',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
seconds: 'ثواني',
seconds: 'الثانية',

meridiem: 'ميريديم',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
meridiem: 'ميريديم',
meridiem: 'صباحًا/مساءً',

};

const arPickers: Partial<PickersLocaleText> = {
//Calender navigation
previousMonth: 'الشهر السابق',
nextMonth: 'الشهر المقبل',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's more common to the ear to hear السابق/التالي.

Suggested change
nextMonth: 'الشهر المقبل',
nextMonth: 'الشهر التالي',


//View navigation
openPreviousView: 'افتح العرض السابق',
openNextView: 'افتح العرض التالي',
calendarViewSwitchingButtonAriaLabel: (view) =>
view === 'year'
? 'عرض السنة مفتوح، قم بالتبديل إلى عرض التقويم'

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"year view" actually shows years, not a year, so it's better to name it in the plural form: عرض السنوات
the word "قم" is generally a weak form, we better say "بدِّل" (using the basic imperative mood)

Suggested change
? 'عرض السنة مفتوح، قم بالتبديل إلى عرض التقويم'
? 'عرض السنوات مفتوح، بدِّل إلى عرض التقويم'

: 'عرض التقويم مفتوح، قم بالتبديل إلى عرض السنة',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
: 'عرض التقويم مفتوح، قم بالتبديل إلى عرض السنة',
: 'عرض التقويم مفتوح، بدِّل إلى عرض السنوات',


//DateRange labels
start: 'يبدأ',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as this is very generic, we can use the more generic from...to form instead

Suggested change
start: 'يبدأ',
start: 'من',

end: 'نهاية',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
end: 'نهاية',
end: 'إلى',

startDate: 'تاريخ البدء',
startTime: 'وقت البدء',
endDate: 'تاريخ الانتهاء',
endTime: 'وقت الانتهاء',

//Action bar
cancelButtonLabel: 'يلغي',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in imperative form

Suggested change
cancelButtonLabel: 'يلغي',
cancelButtonLabel: 'إلغاء',

clearButtonLabel: 'واضح',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not "clear" as "I hear your voice clearly", but clear as in "remove the current selected thing"

Suggested change
clearButtonLabel: 'واضح',
clearButtonLabel: 'مسح الاختيار',

okButtonLabel: 'نعم',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot say "Yes" for "ok", because it's usually used in Yes/No confirmations.

Suggested change
okButtonLabel: 'نعم',
okButtonLabel: 'تم',

todayButtonLabel: 'اليوم',

//Toolbar titles
datePickerToolbarTitle: 'اختر التاريخ',
dateTimePickerToolbarTitle: 'حدد التاريخ والوقت',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we better stay consistent

Suggested change
dateTimePickerToolbarTitle: 'حدد التاريخ والوقت',
dateTimePickerToolbarTitle: 'اختر التاريخ والوقت',

timePickerToolbarTitle: 'حدد الوقت',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
timePickerToolbarTitle: 'حدد الوقت',
timePickerToolbarTitle: 'اختر الوقت',

dateRangePickerToolbarTitle: 'حدد النطاق الزمني',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need the "range" naming here, we can pluralize "date"

Suggested change
dateRangePickerToolbarTitle: 'حدد النطاق الزمني',
dateRangePickerToolbarTitle: 'اختر التواريخ',


//Clock labels
clockLabelText: (view, formattedTime) =>
`يختار ${views[view]}. ${
!formattedTime ? 'لم يتم تحديد الوقت' : `الوقت المختار هو ${formattedTime}`
}`,
hoursClockNumberText: (hours) => `${hours} ساعات`,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the aria-labels of the selections in the date selection dropdown.
We normally say "الساعة الخامسة", so we can say here "ساعة 5"
It's weird to say (when you select ex. 12:30):
12 ساعات - 30 دقائق
it's better to keep it more direct

Suggested change
hoursClockNumberText: (hours) => `${hours} ساعات`,
hoursClockNumberText: (hours) => `ساعة ${hours}`,

minutesClockNumberText: (minutes) => `${minutes} دقائق`,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
minutesClockNumberText: (minutes) => `${minutes} دقائق`,
minutesClockNumberText: (minutes) => `دقيقة ${minutes}`,

secondsClockNumberText: (seconds) => `${seconds} ثواني`,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
secondsClockNumberText: (seconds) => `${seconds} ثواني`,
secondsClockNumberText: (seconds) => `ثانية ${seconds}`,


// Digital clock labels
selectViewText: (view) => `يختار ${views[view]}`,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is as above, we better use imperative form

Suggested change
selectViewText: (view) => `يختار ${views[view]}`,
selectViewText: (view) => `اختر ${views[view]}`,


// Calendar labels
calendarWeekNumberHeaderLabel: 'رقم الاسبوع',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo

Suggested change
calendarWeekNumberHeaderLabel: 'رقم الاسبوع',
calendarWeekNumberHeaderLabel: 'رقم الأسبوع',

calendarWeekNumberHeaderText: '#',
calendarWeekNumberAriaLabelText: (weekNumber) => `أسبوع ${weekNumber}`,
calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

// Open picker labels
openDatePickerDialogue: (formattedDate) =>
formattedDate ? `اختر التاريخ، التاريخ المحدد هو ${formattedDate}` : 'اختر التاريخ',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as above

Suggested change
formattedDate ? `اختر التاريخ، التاريخ المحدد هو ${formattedDate}` : 'اختر التاريخ',
formattedDate ? `اختر التاريخ، اخترت التاريخ: ${formattedDate}` : 'اختر التاريخ',

openTimePickerDialogue: (formattedTime) =>
formattedTime ? `اختر الوقت، الوقت المحدد هو ${formattedTime}` : 'اختر الوقت',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as above

Suggested change
formattedTime ? `اختر الوقت، الوقت المحدد هو ${formattedTime}` : 'اختر الوقت',
formattedTime ? `اختر الوقت، اخترت الوقت: ${formattedTime}` : 'اختر الوقت',


fieldClearLabel: 'واضح',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as above

Suggested change
fieldClearLabel: 'واضح',
fieldClearLabel: 'مسح الاختيار',


// Table labels
timeTableLabel: 'اختيار الوقت',
dateTableLabel: 'تاريخ الاختيار',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not "the date of selection", it's "please choose a date"

Suggested change
dateTableLabel: 'تاريخ الاختيار',
dateTableLabel: 'اختر التاريخ',


// Field section placeholders
fieldYearPlaceholder: (params) => 'س'.repeat(params.digitAmount),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we don't need to use repetition here, as it's much less common in Arabic.
Plus it will appear as سسسس which is extremely weird (we can do it so it appear like so س‌س‌س‌س but it's still weird)
it's better to just use a normal word for all of these

Suggested change
fieldYearPlaceholder: (params) => 'س'.repeat(params.digitAmount),
fieldYearPlaceholder: () => 'سنة',

fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'),
fieldMonthPlaceholder: () => 'شهر',

fieldDayPlaceholder: () => 'اليوم',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldDayPlaceholder: () => 'اليوم',
fieldDayPlaceholder: () => 'يوم',

fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'),
fieldWeekDayPlaceholder: () => 'يوم-الأسبوع',

fieldHoursPlaceholder: () => 'hh',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldHoursPlaceholder: () => 'hh',
fieldHoursPlaceholder: () => 'ساعة',

fieldMinutesPlaceholder: () => 'mm',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldMinutesPlaceholder: () => 'mm',
fieldMinutesPlaceholder: () => 'دقيقة',

fieldSecondsPlaceholder: () => 'ss',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldSecondsPlaceholder: () => 'ss',
fieldSecondsPlaceholder: () => 'ثانية',

fieldMeridiemPlaceholder: () => 'aa',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fieldMeridiemPlaceholder: () => 'aa',
fieldMeridiemPlaceholder: () => 'ص/م',


// View names
year: 'سنة',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as above, it's better to use the plural form

Suggested change
year: 'سنة',
year: 'السنوات',

month: 'شهر',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
month: 'شهر',
month: 'الأشهر',

day: 'يوم',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
day: 'يوم',
day: 'الأيام',

weekDay: 'أيام الأسبوع',
hours: 'ساعات',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
hours: 'ساعات',
hours: 'الساعات',

minutes: 'دقائق',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
minutes: 'دقائق',
minutes: 'الدقائق',

seconds: 'ثواني',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
seconds: 'ثواني',
seconds: 'الثواني',

meridiem: 'ميريديم',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this makes no sense in Arabic, we better use something like "pm/am"

Suggested change
meridiem: 'ميريديم',
meridiem: 'صباحًا/مساءً',


// Common
empty: 'فارغ',
};

export const ar = getPickersLocalization(arPickers);
1 change: 1 addition & 0 deletions packages/x-date-pickers/src/locales/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,5 @@ export * from './urPK';
export * from './viVN';
export * from './zhCN';
export * from './zhHK';
export * from './ar';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on other languages, it is recommended to specify the country of the language, such as arMR or arEG

Copy link
Author

@0xenn 0xenn Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ET-TOUNANI As arabic is spoken in many countries they have many dialects just like eu. So i have taken that consideration and named it. Kindly suggest! ☺️

export * from './utils/pickersLocaleTextApi';