chore(html): replace arrow icons with their rtl equivalents

telerik · May 12, 2023 · ab0d00d · ab0d00d
1 parent 90e2376
commit ab0d00d
Show file tree

Hide file tree

Showing 37 changed files with 257 additions and 143 deletions.
diff --git a/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx b/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
@@ -325,8 +325,8 @@ root.render(
                             <BreadcrumbLink root icon>
                                 <Icon icon="home" />
                             </BreadcrumbLink>
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" />
-                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-right" />
+                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-left" />
+                            <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" icon="chevron-left" />
                         </BreadcrumbItem>
                         <BreadcrumbItem hidden>
                             <BreadcrumbLink>

diff --git a/packages/html/src/calendar/calendar-header.tsx b/packages/html/src/calendar/calendar-header.tsx
@@ -12,6 +12,7 @@ export type KendoCalendarHeaderProps = {
     showToday?: boolean;
     size?: (typeof options.size)[number] | null;
     orientation?: 'vertical' | 'horizontal';
+    dir?: 'ltr' | 'rtl'
 };
 
 const defaultProps = {
@@ -30,9 +31,13 @@ export const CalendarHeader = (
         showToday = defaultProps.showToday,
         orientation = defaultProps.orientation,
         size = defaultProps.size,
+        dir,
         ...other
     } = props;
 
+    const iconPrev = dir === 'rtl' ? 'chevron-right' : 'chevron-left';
+    const iconNext = dir === 'rtl' ? 'chevron-left' : 'chevron-right';
+
     return (
         <div
             {...other}
@@ -46,9 +51,9 @@ export const CalendarHeader = (
             <Button className="k-calendar-title" text={calendarHeaderText} size={size} fillMode="flat"></Button>
             <span className="k-spacer"></span>
             <span className="k-calendar-nav">
-                <Button className="k-calendar-nav-prev" icon="chevron-left" size={size} fillMode="flat"></Button>
+                <Button className="k-calendar-nav-prev" icon={iconPrev} size={size} fillMode="flat"></Button>
                 {showToday && <Button size={size} fillMode="flat" themeColor="primary" className="k-calendar-nav-today">Today</Button>}
-                <Button className="k-calendar-nav-next" icon="chevron-right" size={size} fillMode="flat"></Button>
+                <Button className="k-calendar-nav-next" icon={iconNext} size={size} fillMode="flat"></Button>
             </span>
         </div>
     );

diff --git a/packages/html/src/calendar/calendar.spec.tsx b/packages/html/src/calendar/calendar.spec.tsx
@@ -23,6 +23,7 @@ export type KendoCalendarProps = KendoCalendarOptions & {
     showCalendarCaption?: boolean;
     showCalendarFooter?: boolean;
     selectedRange?: boolean;
+    dir?: 'ltr' | 'rtl',
 };
 
 const defaultProps = {
@@ -48,12 +49,14 @@ export const Calendar = (
         showCalendarCaption,
         showCalendarFooter,
         selectedRange,
+        dir,
         ...other
     } = props;
 
     return (
         <div
             {...other}
+            dir={dir}
             className={classNames(
                 props.className,
                 CALENDAR_CLASSNAME,
@@ -69,6 +72,7 @@ export const Calendar = (
                 calendarHeaderText={calendarHeaderText}
                 orientation={orientation}
                 size={size}
+                dir={dir}
             />
 
             <CalendarView

diff --git a/packages/html/src/datepicker/datepicker.spec.tsx b/packages/html/src/datepicker/datepicker.spec.tsx
@@ -49,6 +49,7 @@ export type KendoDatePickerProps = KendoDatePickerOptions & {
     value?: string;
     placeholder?: string;
     opened?: boolean;
+    dir?: 'ltr' | 'rtl'
 };
 
 export type KendoDatePickerState = { [K in (typeof states)[number]]?: boolean };
@@ -75,6 +76,7 @@ export const DatePicker = (
         disabled,
         readonly,
         opened,
+        dir,
         ...other
     } = props;
 
@@ -83,6 +85,7 @@ export const DatePicker = (
         <>
             <Input
                 {...other}
+                dir={dir}
                 size={size}
                 rounded={rounded}
                 fillMode={fillMode}
@@ -122,7 +125,7 @@ export const DatePicker = (
             </Input>
             { opened &&
                 <Popup className="k-datepicker-popup">
-                    <Calendar />
+                    <Calendar dir={dir} />
                 </Popup>
             }
         </>

diff --git a/packages/html/src/datepicker/tests/datepicker-opened.tsx b/packages/html/src/datepicker/tests/datepicker-opened.tsx
@@ -28,7 +28,7 @@ root.render(
                 <DatePicker value="Opened" opened />
             </div>
             <div dir="rtl">
-                <DatePicker value="Opened" opened />
+                <DatePicker value="Opened" opened dir="rtl" />
             </div>
 
         </div>

diff --git a/packages/html/src/daterangepicker/daterangepicker.spec.tsx b/packages/html/src/daterangepicker/daterangepicker.spec.tsx
@@ -28,6 +28,7 @@ export type KendoDateRangePickerOptions = {
 export type KendoDateRangePickerProps = KendoDateRangePickerOptions & {
     swapButton?: boolean;
     opened?: boolean;
+    dir?: 'ltr' | 'rtl'
 };
 
 export type KendoDateRangePickerState = { [K in (typeof states)[number]]?: boolean };
@@ -44,6 +45,7 @@ export const DateRangePicker = (
         disabled,
         swapButton,
         opened,
+        dir,
         ...other
     } = props;
 
@@ -52,6 +54,7 @@ export const DateRangePicker = (
         <>
             <span
                 {...other}
+                dir={dir}
                 className={classNames(
                     props.className,
                     DATERANGEPICKER_CLASSNAME,
@@ -86,7 +89,7 @@ export const DateRangePicker = (
             </span>
             { opened &&
                 <Popup className="k-daterangepicker-popup">
-                    <MultiViewCalendar />
+                    <MultiViewCalendar dir={dir} />
                 </Popup>
             }
         </>

diff --git a/packages/html/src/daterangepicker/tests/daterangepicker-opened.tsx b/packages/html/src/daterangepicker/tests/daterangepicker-opened.tsx
@@ -16,7 +16,7 @@ root.render(
                 <DateRangePicker opened />
             </div>
             <div dir="rtl">
-                <DateRangePicker opened />
+                <DateRangePicker opened dir="rtl" />
             </div>
         </div>
     </>

diff --git a/packages/html/src/datetime-selector/datetime-selector.spec.tsx b/packages/html/src/datetime-selector/datetime-selector.spec.tsx
@@ -12,7 +12,8 @@ const states = [];
 const options = {};
 
 export type KendoDateTimeSelectorProps = {
-    tab?: 'time' | 'date'
+    tab?: 'time' | 'date',
+    dir?: 'ltr' | 'rtl'
 };
 
 const defaultProps = {
@@ -25,6 +26,7 @@ export const DateTimeSelector = (
 ) => {
     const {
         tab = defaultProps.tab,
+        dir,
         ...other
     } = props;
 
@@ -60,7 +62,7 @@ export const DateTimeSelector = (
                     </>
                     : <>
                         <div className="k-datetime-calendar-wrap">
-                            <Calendar showOtherMonth></Calendar>
+                            <Calendar showOtherMonth dir={dir}></Calendar>
                         </div>
                         <div className="k-datetime-time-wrap"></div>
                     </>

diff --git a/packages/html/src/datetimepicker/datetimepicker.spec.tsx b/packages/html/src/datetimepicker/datetimepicker.spec.tsx
@@ -44,6 +44,7 @@ export type KendoDateTimePickerProps = KendoDateTimePickerOptions & {
     placeholder?: string;
     opened?: boolean;
     tab?: 'time' | 'date';
+    dir?: 'ltr' | 'rtl'
 };
 
 export type KendoDateTimePickerState = { [K in (typeof states)[number]]?: boolean };
@@ -78,6 +79,7 @@ export const DateTimePicker = (
         readonly,
         opened,
         tab = defaultProps.tab,
+        dir,
         ...other
     } = props;
 
@@ -86,6 +88,7 @@ export const DateTimePicker = (
         <>
             <Input
                 {...other}
+                dir={dir}
                 size={size}
                 rounded={rounded}
                 fillMode={fillMode}
@@ -124,8 +127,8 @@ export const DateTimePicker = (
                 />
             </Input>
             { opened &&
-                <Popup className="k-datetimepicker-popup">
-                    <DateTimeSelector tab={tab} />
+                <Popup className="k-datetimepicker-popup" dir={dir}>
+                    <DateTimeSelector tab={tab} dir={dir} />
                 </Popup>
             }
         </>

diff --git a/packages/html/src/datetimepicker/tests/datetimepicker-opened.tsx b/packages/html/src/datetimepicker/tests/datetimepicker-opened.tsx
@@ -22,15 +22,15 @@ root.render(
             <div>
                 <DateTimePicker value="Opened Date" opened />
             </div>
-            <div dir="rtl">
-                <DateTimePicker value="Opened Date" opened />
+            <div>
+                <DateTimePicker value="Opened Date" opened dir="rtl" />
             </div>
 
             <div>
                 <DateTimePicker value="Opened Time" opened tab="time" />
             </div>
-            <div dir="rtl">
-                <DateTimePicker value="Opened Time" opened tab="time" />
+            <div>
+                <DateTimePicker value="Opened Time" opened tab="time" dir="rtl" />
             </div>
 
         </div>

diff --git a/packages/html/src/dropdowntree/dropdowntree.spec.tsx b/packages/html/src/dropdowntree/dropdowntree.spec.tsx
@@ -45,6 +45,7 @@ export type KendoDropdownTreeProps = KendoDropdownTreeOptions & {
     showValue?: boolean;
     popup?: JSX.Element;
     opened?: boolean;
+    dir?: 'ltr' | 'rtl'
 };
 
 export type KendoDropdownTreeState = { [K in (typeof states)[number]]?: boolean };
@@ -83,6 +84,7 @@ export const DropdownTree = (
         showValue = defaultProps.showValue,
         popup,
         opened,
+        dir,
         ...other
     } = props;
 
@@ -91,6 +93,7 @@ export const DropdownTree = (
         <>
             <Picker
                 {...other}
+                dir={dir}
                 size={size}
                 rounded={rounded}
                 fillMode={fillMode}
@@ -135,7 +138,7 @@ export const DropdownTree = (
                 />
             </Picker>
             { opened && popup &&
-                <Popup className="k-dropdowntree-popup">
+                <Popup className="k-dropdowntree-popup" dir={dir}>
                     {popup}
                 </Popup>
             }

diff --git a/packages/html/src/dropdowntree/tests/dropdowntree-opened.tsx b/packages/html/src/dropdowntree/tests/dropdowntree-opened.tsx
@@ -49,8 +49,8 @@ root.render(
                     )}
                 />
             </div>
-            <div dir="rtl">
-                <DropdownTree value="Opened" opened
+            <div>
+                <DropdownTree value="Opened" opened dir="rtl"
                     popup={(
                         <>
                             <div className="k-check-all">
@@ -59,7 +59,7 @@ root.render(
                                     Check all
                                 </span>
                             </div>
-                            <Treeview>
+                            <Treeview dir="rtl">
                                 <TreeviewItem text="Root 1" />
                                 <TreeviewItem text="Root 2" expanded>
                                     <TreeviewGroup>