fix: (backport) nps & rating rtl UI (#7154) (#7162)

packages/survey-ui/src/components/elements/nps.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ElementError } from "@/components/general/element-error";
 import { ElementHeader } from "@/components/general/element-header";
 import { Label } from "@/components/general/label";
-import { cn } from "@/lib/utils";
+import { cn, getRTLScaleOptionClasses } from "@/lib/utils";
 
 interface NPSProps {
   /** Unique identifier for the element container */
@@ -97,18 +97,9 @@ function NPS({
     const isLast = number === 10; // Last option is 10
     const isFirst = number === 0; // First option is 0
 
-    // Determine border radius and border classes
-    // Use right border for all items to create separators, left border only on first item
-    let borderRadiusClasses = "";
-    let borderClasses = "border-t border-b border-r";
-
-    if (isFirst) {
-      borderRadiusClasses = dir === "rtl" ? "rounded-r-input" : "rounded-l-input";
-      borderClasses = "border-t border-b border-l border-r";
-    } else if (isLast) {
-      borderRadiusClasses = dir === "rtl" ? "rounded-l-input" : "rounded-r-input";
-      // Last item keeps right border for rounded corner
-    }
+    // Use CSS logical properties for RTL-aware borders and border radius
+    // The fieldset's dir attribute automatically handles direction
+    const { borderRadiusClasses, borderClasses } = getRTLScaleOptionClasses(isFirst, isLast);
 
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
@@ -183,7 +174,7 @@ function NPS({
       {/* NPS Options */}
       <div className="relative">
         <ElementError errorMessage={errorMessage} dir={dir} />
-        <fieldset className="w-full px-[2px]">
+        <fieldset className="w-full px-[2px]" dir={dir}>
           <legend className="sr-only">NPS rating options</legend>
           <div className="flex w-full">{npsOptions.map((number) => renderNPSOption(number))}</div>
 

packages/survey-ui/src/components/elements/rating.tsx

@@ -15,7 +15,7 @@ import {
   TiredFace,
   WearyFace,
 } from "@/components/general/smileys";
-import { cn } from "@/lib/utils";
+import { cn, getRTLScaleOptionClasses } from "@/lib/utils";
 
 /**
  * Get smiley color class based on range and index
@@ -220,18 +220,9 @@ function Rating({
     const isLast = totalLength === number;
     const isFirst = number === 1;
 
-    // Determine border radius and border classes
-    // Use right border for all items to create separators, left border only on first item
-    let borderRadiusClasses = "";
-    let borderClasses = "border-t border-b border-r";
-
-    if (isFirst) {
-      borderRadiusClasses = dir === "rtl" ? "rounded-r-input" : "rounded-l-input";
-      borderClasses = "border-t border-b border-l border-r";
-    } else if (isLast) {
-      borderRadiusClasses = dir === "rtl" ? "rounded-l-input" : "rounded-r-input";
-      // Last item keeps right border for rounded corner
-    }
+    // Use CSS logical properties for RTL-aware borders and border radius
+    // The parent div's dir attribute automatically handles direction
+    const { borderRadiusClasses, borderClasses } = getRTLScaleOptionClasses(isFirst, isLast);
 
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
@@ -418,7 +409,7 @@ function Rating({
       {/* Rating Options */}
       <div className="relative">
         <ElementError errorMessage={errorMessage} dir={dir} />
-        <fieldset className="w-full">
+        <fieldset className="w-full" dir={dir}>
           <legend className="sr-only">Rating options</legend>
           <div className="flex w-full px-[2px]">
             {ratingOptions.map((number, index) => {

packages/survey-ui/src/lib/utils.ts

@@ -35,3 +35,29 @@ export const stripInlineStyles = (html: string): string => {
     KEEP_CONTENT: true,
   });
 };
+
+/**
+ * Generate RTL-aware border radius and border classes for rating/NPS scale options
+ * Uses CSS logical properties that automatically adapt to text direction
+ * @param isFirst - Whether this is the first item in the scale
+ * @param isLast - Whether this is the last item in the scale
+ * @returns Object containing borderRadiusClasses and borderClasses
+ */
+export const getRTLScaleOptionClasses = (
+  isFirst: boolean,
+  isLast: boolean
+): { borderRadiusClasses: string; borderClasses: string } => {
+  const borderRadiusClasses = cn(
+    isFirst &&
+      "[border-start-start-radius:var(--fb-input-border-radius)] [border-end-start-radius:var(--fb-input-border-radius)]",
+    isLast &&
+      "[border-start-end-radius:var(--fb-input-border-radius)] [border-end-end-radius:var(--fb-input-border-radius)]"
+  );
+
+  const borderClasses = cn(
+    "border-t border-b border-e", // block borders (top/bottom) and inline-end border
+    isFirst && "border-s" // inline-start border for first item
+  );
+
+  return { borderRadiusClasses, borderClasses };
+};