feat(Switch): fix rtl view (#8104)

* feat(Switch): fix rtl view

* test(Switch): add tests

* fix(Switch): fix prettier

packages/vkui/src/components/Switch/Switch.e2e-playground.tsx

@@ -9,13 +9,18 @@ export const SwitchPlayground = (props: ComponentPlaygroundProps) => {
         {
           checked: [true, false],
           disabled: [true, false],
+          dir: ['ltr', 'rtl'],
         },
         {
           $adaptivity: 'y',
         },
       ]}
     >
-      {(props: SwitchProps) => <Switch {...props} />}
+      {({ dir, ...props }: SwitchProps) => (
+        <div dir={dir}>
+          <Switch {...props} />
+        </div>
+      )}
     </ComponentPlayground>
   );
 };

packages/vkui/src/components/Switch/Switch.module.css

@@ -2,7 +2,11 @@
   /* Switch__track */
   --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
   --vkui_internal--Switch__track_outline_width: 2px;
-  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  --vkui_internal--Switch__handle_shift_x_direction: 1;
+  --vkui_internal--Switch__handle_shift_x: calc(
+    var(--vkui_internal--Switch__handle_shift_x_direction) *
+      var(--vkui_internal--Switch__track_outline_width)
+  );
   /* prettier-ignore */
   --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
   /* prettier-ignore */
@@ -16,6 +20,10 @@
   -webkit-tap-highlight-color: transparent;
 }
 
+.rtl {
+  --vkui_internal--Switch__handle_shift_x_direction: -1;
+}
+
 .disabled {
   cursor: not-allowed;
   opacity: var(--vkui_internal--Switch_disabled);
@@ -136,7 +144,7 @@
 
   /* Switch__handle */
   /* prettier-ignore */
-  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__handle_shift_x_direction) * calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width)));
   /* prettier-ignore */
   --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
   --vkui_internal--Switch__track_shadow_visibility: 0;
@@ -212,7 +220,7 @@
   border-radius: inherit;
   background-color: var(--vkui_internal--Switch__handleRipple_color);
   opacity: var(--vkui_internal--Switch__handleRipple_opacity);
-  transform: translate(-50%, -50%);
+  transform: translate(calc(-50% * var(--vkui_internal--Switch__handle_shift_x_direction)), -50%);
   transition-property: opacity, background-color;
   /* prettier-ignore */
   transition-duration:

packages/vkui/src/components/Switch/Switch.tsx

@@ -3,6 +3,8 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDirection } from '../../hooks/useDirection';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -36,6 +38,9 @@ export const Switch = ({
   onClick,
   ...restProps
 }: SwitchProps): React.ReactNode => {
+  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLLabelElement>();
+  const isRtl = textDirection === 'rtl';
+  const rootRef = useExternRef<HTMLLabelElement>(getRootRef, directionRef);
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
@@ -86,11 +91,12 @@ export const Switch = ({
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         platform === 'ios' ? styles.ios : styles.default,
         disabled && styles.disabled,
+        isRtl && styles.rtl,
         focusVisibleClassNames,
         className,
       )}
       style={style}
-      ref={getRootRef}
+      ref={rootRef}
     >
       <VisuallyHidden
         {...inputProps}