fix: rtl support in field layouts

src/common-elements/fields-layout.ts

@@ -11,15 +11,16 @@ export const PropertiesTableCaption = styled.caption`
 `;
 
 export const PropertyCell = styled.td<{ kind?: string }>`
-  border-left: 1px solid ${props => props.theme.schema.linesColor};
+  border-left: ${({ theme }) => (theme.typography.direction === 'rtl') ? 0 : '1px solid ' } ${props => props.theme.schema.linesColor};
+  border-right: ${({ theme }) => (theme.typography.direction === 'rtl') ? '1px solid ' : 0 } ${props => props.theme.schema.linesColor};
   box-sizing: border-box;
   position: relative;
-  padding: 10px 10px 10px 0;
+  padding: ${({ theme }) => (theme.typography.direction === 'rtl') ? '10px 0 10px 10px' : '10px 10px 10px 0' }
 
   tr:first-of-type > &,
   tr.last > & {
-    border-left-width: 0;
+    border-width: 0;
-    background-position: top left;
+    background-position: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'top right' : 'top left' };
     background-repeat: no-repeat;
     background-size: 1px 100%;
   }
@@ -79,6 +80,7 @@ export const PropertyDetailsCell = styled.td`
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};
   box-sizing: border-box;
+  direction: ltr;
 
   tr.expanded & {
     border-bottom: none;
@@ -88,7 +90,7 @@ export const PropertyDetailsCell = styled.td`
 export const PropertyBullet = styled.span`
   color: ${props => props.theme.schema.linesColor};
   font-family: ${props => props.theme.typography.code.fontFamily};
-  margin-right: 10px;
+  margin: ${({ theme }) => (theme.typography.direction === 'rtl') ? '0 0 0 10px ' : '0 10px 0 0' }
 
   &::before {
     content: '';
@@ -108,7 +110,10 @@ export const PropertyBullet = styled.span`
     height: 7px;
   }
 `;
-
+export const WrappedShelfIcon = styled.i`
+  transform: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'rotateY(180deg)' : 'none'};
+  display: inline-block
+`;
 export const InnerPropertiesWrap = styled.div`
   padding: ${({ theme }) => theme.schema.nestingSpacing};
 `;

src/common-elements/panels.ts

@@ -4,6 +4,7 @@ import styled, { media } from '../styled-components';
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
+  text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
 
   ${media.lessThan('medium', true)`
     width: 100%;

src/components/Fields/Field.tsx

@@ -10,6 +10,7 @@ import {
   PropertyCellWithInner,
   PropertyDetailsCell,
   PropertyNameCell,
+  WrappedShelfIcon,
 } from '../../common-elements/fields-layout';
 
 import { ShelfIcon } from '../../common-elements/';
@@ -46,7 +47,9 @@ export class Field extends React.Component<FieldProps> {
       >
         <PropertyBullet />
         {name}
+        <WrappedShelfIcon>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
+        </WrappedShelfIcon>
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (

src/components/SideMenu/MenuItem.tsx

@@ -5,7 +5,7 @@ import { ShelfIcon } from '../../common-elements/shelfs';
 import { IMenuItem, OperationModel } from '../../services';
 import { shortenHTTPVerb } from '../../utils/openapi';
 import { MenuItems } from './MenuItems';
-import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
+import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge, WrappedShelfIcon } from './styled.elements';
 
 export interface MenuItemProps {
   item: IMenuItem;
@@ -58,7 +58,9 @@ export class MenuItem extends React.Component<MenuItemProps> {
               {this.props.children}
             </MenuItemTitle>
             {(item.depth > 0 && item.items.length > 0 && (
+              <WrappedShelfIcon>
                 <ShelfIcon float={'right'} direction={item.expanded ? 'down' : 'right'} />
+              </WrappedShelfIcon>
             )) ||
               null}
           </MenuItemLabel>

src/components/SideMenu/styled.elements.ts

@@ -131,8 +131,11 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
     (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
+  direction: ${({ type, theme}) =>
+  (((['section', 'group', 'tag'].indexOf(type || '') > -1) && (theme.typography.direction === 'rtl')) ? 'rtl' : 'ltr')};
   display: flex;
   justify-content: space-between;
+  text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
   font-family: ${props => props.theme.typography.headings.fontFamily};
   ${props => menuItemDepth[props.depth]};
   background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
@@ -144,7 +147,6 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   }
 
   ${ShelfIcon} {
-    transform: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'rotate(0deg)' : 'none'};
     height: ${({ theme }) => theme.menu.arrow.size};
     width: ${({ theme }) => theme.menu.arrow.size};
     polygon {
@@ -180,3 +182,6 @@ export const RedocAttribution = styled.div`
   }
 `};
 `;
+export const WrappedShelfIcon = styled.i`
+  transform: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'rotateY(180deg)' : 'none'};
+`;