Add matchTextDirection to directional icons

Fixes #1907

We update the icon generation script to automatically set
matchTextDirection: true for icons that imply directionality
(arrow_right, chevron_right, send).

This ensures these icons flip correctly in RTL locales.

We also update the documentation within the generation script to
instruct future contributors on how to handle new directional icons.

Author: yash-agarwa-l

assets/icons/directional_icons.json

@@ -0,0 +1,8 @@
+[
+  "arrow_right",
+  "chevron_right",
+  "send",
+  "arrow_left_right",
+  "message_feed",
+  "topics"
+]

lib/widgets/icons.dart

@@ -18,6 +18,11 @@ abstract final class ZulipIcons {
   //    or otherwise edit the SVG files there.
   //    The files' names (before ".svg") should be valid Dart identifiers.
   //
+  //  * If the icon is directional (meaning it should point
+  //    the other way in RTL layouts), add its name in
+  //    `assets/icons/directional_icons.json`. For guidance, see:
+  //    https://m3.material.io/foundations/layout/understanding-layout/bidirectionality-rtl#ad90d075-6db4-457b-a15b-51fb6653c825
+  //
   //  * Then run the command `tools/icons/build-icon-font`.
   //    That will update this file and the generated icon font,
   //    `assets/icons/ZulipIcons.ttf`.
@@ -28,10 +33,10 @@ abstract final class ZulipIcons {
   static const IconData arrow_down = IconData(0xf101, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "arrow_left_right".
-  static const IconData arrow_left_right = IconData(0xf102, fontFamily: "Zulip Icons");
+  static const IconData arrow_left_right = IconData(0xf102, fontFamily: "Zulip Icons", matchTextDirection: true);
 
   /// The Zulip custom icon "arrow_right".
-  static const IconData arrow_right = IconData(0xf103, fontFamily: "Zulip Icons");
+  static const IconData arrow_right = IconData(0xf103, fontFamily: "Zulip Icons", matchTextDirection: true);
 
   /// The Zulip custom icon "at_sign".
   static const IconData at_sign = IconData(0xf104, fontFamily: "Zulip Icons");
@@ -64,7 +69,7 @@ abstract final class ZulipIcons {
   static const IconData chevron_down = IconData(0xf10d, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "chevron_right".
-  static const IconData chevron_right = IconData(0xf10e, fontFamily: "Zulip Icons");
+  static const IconData chevron_right = IconData(0xf10e, fontFamily: "Zulip Icons", matchTextDirection: true);
 
   /// The Zulip custom icon "circle_x".
   static const IconData circle_x = IconData(0xf10f, fontFamily: "Zulip Icons");
@@ -160,7 +165,7 @@ abstract final class ZulipIcons {
   static const IconData see_who_reacted = IconData(0xf12d, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "send".
-  static const IconData send = IconData(0xf12e, fontFamily: "Zulip Icons");
+  static const IconData send = IconData(0xf12e, fontFamily: "Zulip Icons", matchTextDirection: true);
 
   /// The Zulip custom icon "settings".
   static const IconData settings = IconData(0xf12f, fontFamily: "Zulip Icons");

tools/icons/build-icon-font.js

@@ -62,12 +62,23 @@ async function main() {
   fs.copyFileSync(path.join(tmpDir, `${fontName}.ttf`), path.join(destDir, `${fontFileBaseName}.ttf`));
 
   const template = fs.readFileSync(dataTemplateFile, 'utf8');
+
+  // Icons that should flip horizontally in RTL layout.
+  const directionalIconsFile = path.join(srcDir, 'directional_icons.json');
+  const directionalIcons = fs.readFileSync(directionalIconsFile);
+
   const generated = Object.entries(codepoints).map(([name, codepoint]) => {
     const codepointHex = "0x" + codepoint.toString(16);
+
+    const namedParams = [`fontFamily: "${fontName}"`];
+    if (directionalIcons.includes(name)) {
+      namedParams.push('matchTextDirection: true');
+    }
+
     return `\
 
   /// The Zulip custom icon "${name}".
-  static const IconData ${name} = IconData(${codepointHex}, fontFamily: "${fontName}");
+  static const IconData ${name} = IconData(${codepointHex}, ${namedParams.join(', ')});
 `;
   }).join("");
   const output = template.replace(