Merge branch 'feature/rtl-interface-direction' of github.com:ONLYOFFICE/DocSpace into feature/rtl-interface-direction

packages/client/src/pages/Profile/Section/Body/sub-components/interface-direction/index.js

@@ -6,6 +6,8 @@ import Text from "@docspace/components/text";
 import { StyledInterfaceDirection } from "./StyledInterfaceDirection";
 
 const InterfaceDirection = ({ interfaceDirection, setInterfaceDirection }) => {
+  const directionTitleText = "Interface direction";
+  const directionCheckboxLabelText = "Enable right-to-left mode";
   const onChangeDirection = (e) => {
     const isChecked = e.currentTarget.checked;
     const newDirection = isChecked ? "rtl" : "ltr";
@@ -16,13 +18,13 @@ const InterfaceDirection = ({ interfaceDirection, setInterfaceDirection }) => {
   return (
     <StyledInterfaceDirection>
       <Text className="title" fontSize="16px" fontWeight={700}>
-        Interface direction
+        {directionTitleText}
       </Text>
       <Checkbox
         value={interfaceDirection}
         isChecked={interfaceDirection === "rtl"}
         onChange={onChangeDirection}
-        label={"Enable right-to-left mode"}
+        label={directionCheckboxLabelText}
       />
     </StyledInterfaceDirection>
   );

packages/components/avatar/styled-avatar.js

@@ -9,7 +9,7 @@ const EmptyIcon = styled(CameraReactSvg)`
   ${commonIconsStyles}
   border-radius: ${(props) => props.theme.avatar.image.borderRadius};
 `;
-EmptyIcon.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
+EmptyIcon.defaultProps = { theme: Base };
 
 const EditContainer = styled.div`
   position: absolute;
@@ -61,7 +61,7 @@ const AvatarWrapper = styled.div`
     }
   }
 `;
-AvatarWrapper.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
+AvatarWrapper.defaultProps = { theme: Base };
 
 const rightStyle = (props) =>
   props.theme.avatar.roleWrapperContainer.right[props.size];
@@ -115,7 +115,7 @@ const NamedAvatar = styled.div`
 
   ${NoUserSelect}
 `;
-NamedAvatar.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
+NamedAvatar.defaultProps = { theme: Base };
 
 const StyledImage = styled.img`
   width: ${(props) => props.theme.avatar.image.width};
@@ -124,7 +124,7 @@ const StyledImage = styled.img`
   content: ${(props) => props.isDefault && props.theme.avatar.defaultImage};
   ${NoUserSelect};
 `;
-StyledImage.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
+StyledImage.defaultProps = { theme: Base };
 
 const StyledIconWrapper = styled.div`
   width: 100%;
@@ -143,7 +143,7 @@ const StyledIconWrapper = styled.div`
   }
 `;
 StyledIconWrapper.defaultProps = {
-  theme: { ...Base, interfaceDirection: "ltr" },
+  theme: Base,
 };
 
 const widthStyle = (props) => props.theme.avatar.width[props.size];
@@ -195,7 +195,7 @@ const StyledAvatar = styled.div`
     }
   }
 `;
-StyledAvatar.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
+StyledAvatar.defaultProps = { theme: Base };
 
 export {
   EmptyIcon,

packages/components/textarea/index.js

@@ -137,7 +137,7 @@ const Textarea = ({
           paddingLeftProp={paddingLeftProp}
           isJSONField={isJSONField}
           enableCopy={enableCopy}
-          placeholder={placeholder || " "}
+          placeholder={placeholder}
           onChange={(e) => onChange && onChange(e)}
           maxLength={maxLength}
           name={name}
@@ -212,7 +212,7 @@ Textarea.defaultProps = {
   isReadOnly: false,
   hasError: false,
   heightScale: false,
-  placeholder: "",
+  placeholder: " ",
   tabIndex: -1,
   value: "",
   fontSize: 13,

packages/components/textarea/styled-textarea.js

@@ -122,6 +122,13 @@ const StyledTextarea = styled(ClearTextareaAutosize).attrs(
     font-family: ${(props) => props.theme.fontFamily};
     user-select: none;
   }
+
+  ${({ theme }) =>
+    theme.interfaceDirection === "rtl" &&
+    `
+      &:placeholder-shown {
+        text-align: right;
+      }`}}
 `;
 
 StyledTextarea.defaultProps = {