Fix incorrect chevron icons direction in RTL languages (#23940)

wordpress-mobile · Jan 3, 2025 · cb3816d · cb3816d
2 parents 42aea77 + 3a85553
commit cb3816d
Show file tree

Hide file tree

Showing 40 changed files with 145 additions and 287 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -9,6 +9,7 @@
 * [*] Improve transisions and interactive dismiss gestures for sheets [#23933]
 * [*] Add "Share" action to site link context menu on dashboard [#23935]
 * [*] Fix layout issues in Privacy Settings section of App Settings [#23936]
+* [*] Fix incorrect chevron icons direction in RTL languages [#23940]
 
 25.6
 -----

diff --git a/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift b/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift
@@ -1,5 +1,3 @@
-import Foundation
-import Gridicons
 import UIKit
 @preconcurrency import WebKit
 import WordPressShared
@@ -39,31 +37,31 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable {
     let analyticsSource: String?
 
     @objc lazy var backButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: UIImage.gridicon(.chevronLeft).imageFlippedForRightToLeftLayoutDirection(),
+        let button = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"),
                                style: .plain,
                                target: self,
                                action: #selector(goBack))
         button.title = NSLocalizedString("Back", comment: "Previous web page")
         return button
     }()
     @objc lazy var forwardButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: .gridicon(.chevronRight),
+        let button = UIBarButtonItem(image: UIImage(systemName: "chevron.forward"),
                                style: .plain,
                                target: self,
                                action: #selector(goForward))
         button.title = NSLocalizedString("Forward", comment: "Next web page")
         return button
     }()
     @objc lazy var shareButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: .gridicon(.shareiOS),
+        let button = UIBarButtonItem(image: UIImage(systemName: "square.and.arrow.up"),
                                style: .plain,
                                target: self,
                                action: #selector(share))
         button.title = NSLocalizedString(SharedStrings.Button.share, comment: "Button label to share a web page")
         return button
     }()
     @objc lazy var safariButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: .gridicon(.globe),
+        let button = UIBarButtonItem(image: UIImage(systemName: "safari"),
                                style: .plain,
                                target: self,
                                action: #selector(openInSafari))
@@ -72,12 +70,12 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable {
         return button
     }()
     @objc lazy var refreshButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: .gridicon(.refresh), style: .plain, target: self, action: #selector(WebKitViewController.refresh))
+        let button = UIBarButtonItem(image: UIImage(systemName: "arrow.clockwise"), style: .plain, target: self, action: #selector(WebKitViewController.refresh))
         button.title = NSLocalizedString("Refresh", comment: "Button label to refres a web page")
         return button
     }()
     @objc lazy var closeButton: UIBarButtonItem = {
-        let button = UIBarButtonItem(image: .gridicon(.cross), style: .plain, target: self, action: #selector(WebKitViewController.close))
+        let button = UIBarButtonItem(image: UIImage(systemName: "xmark"), style: .plain, target: self, action: #selector(WebKitViewController.close))
         button.title = NSLocalizedString("webKit.button.dismiss", value: "Dismiss", comment: "Verb. Dismiss the web view screen.")
         return button
     }()
@@ -178,7 +176,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable {
         let stackView = UIStackView(arrangedSubviews: [
             progressView,
             webView
-            ])
+        ])
         stackView.axis = .vertical
         stackView.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(stackView)
@@ -329,6 +327,9 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable {
             space,
             safariButton
         ]
+        for item in items {
+            item.tintColor = UIAppColor.tint
+        }
         setToolbarItems(items, animated: false)
     }
 

diff --git a/WordPress/Classes/ViewRelated/Aztec/ViewControllers/AztecPostViewController.swift b/WordPress/Classes/ViewRelated/Aztec/ViewControllers/AztecPostViewController.swift
@@ -3088,10 +3088,10 @@ extension AztecPostViewController {
     }
 
     struct Assets {
-        static let closeButtonModalImage    = UIImage.gridicon(.cross)
-        static let closeButtonRegularImage  = UIImage(named: "icon-posts-editor-chevron")
-        static let defaultMissingImage      = UIImage.gridicon(.image)
-        static let linkPlaceholderImage     = UIImage.gridicon(.pages)
+        static let closeButtonModalImage = UIImage.gridicon(.cross)
+        static let closeButtonRegularImage = UIImage(systemName: "chevron.backward")
+        static let defaultMissingImage = UIImage.gridicon(.image)
+        static let linkPlaceholderImage = UIImage.gridicon(.pages)
     }
 
     struct Constants {

diff --git a/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift b/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift
@@ -77,7 +77,7 @@ final class BlazeCampaignTableViewCell: UITableViewCell, Reusable {
     }()
 
     private lazy var chevronView: UIImageView = {
-        let image = UIImage(systemName: "chevron.right")?.imageFlippedForRightToLeftLayoutDirection()
+        let image = UIImage(systemName: "chevron.forward")
         let imageView = UIImageView(image: image)
         imageView.translatesAutoresizingMaskIntoConstraints = false
         imageView.tintColor = .separator

diff --git a/...lasses/ViewRelated/Blog/Blog Dashboard/Cards/Quick Actions/DashboardQuickActionCell.swift b/...lasses/ViewRelated/Blog/Blog Dashboard/Cards/Quick Actions/DashboardQuickActionCell.swift
@@ -1,4 +1,5 @@
 import UIKit
+import WordPressUI
 
 final class DashboardQuickActionCell: UITableViewCell {
     private let iconView = UIImageView()
@@ -42,8 +43,7 @@ final class DashboardQuickActionCell: UITableViewCell {
         stackView.isUserInteractionEnabled = false
 
         contentView.addSubview(stackView)
-        stackView.translatesAutoresizingMaskIntoConstraints = false
-        contentView.pinSubviewToAllEdges(stackView, insets: UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16))
+        stackView.pinEdges(insets: UIEdgeInsets(horizontal: 16, vertical: 12))
     }
 
     func configure(_ viewModel: DashboardQuickActionItemViewModel) {
@@ -65,7 +65,7 @@ final class DashboardQuickActionCell: UITableViewCell {
             separatorInset = UIEdgeInsets(top: 0, left: bounds.width, bottom: 0, right: 0)
         } else {
             let titleLabelFrame = contentView.convert(titleLabel.frame, from: titleLabel.superview)
-            separatorInset = UIEdgeInsets(top: 0, left: titleLabelFrame.origin.x, bottom: 0, right: 0)
+            separatorInset = UIEdgeInsets(top: 0, left: traitCollection.layoutDirection == .rightToLeft ? contentView.bounds.width - titleLabelFrame.maxX : titleLabelFrame.origin.x, bottom: 0, right: 0)
         }
     }
 }
diff --git a/...iewRelated/Blog/BloggingReminders/TimeSelector/BloggingRemindersTimeSelectionButton.swift b/...iewRelated/Blog/BloggingReminders/TimeSelector/BloggingRemindersTimeSelectionButton.swift
@@ -52,7 +52,7 @@ final class BloggingRemindersTimeSelectionButton: UIButton {
     private lazy var chevron: UIImageView = {
         let imageView = UIImageView()
         imageView.translatesAutoresizingMaskIntoConstraints = false
-        imageView.image = UIImage.gridicon(.chevronRight)
+        imageView.image = UIImage(systemName: "chevron.forward")
         imageView.tintColor = .separator
         return imageView
     }()

diff --git a/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift b/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift
@@ -59,7 +59,7 @@ struct NoSitesView: View {
                 makeGravatarIcon(size: 40)
                 accountAndSettingsStackView
                 Spacer()
-                Image(systemName: "chevron.right")
+                Image(systemName: "chevron.forward")
                     .tint(.secondary)
             }
             .padding(.horizontal, 16)

diff --git a/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift b/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift
@@ -89,7 +89,7 @@ struct SiteDomainsView: View {
                     Button(action: { showDetails(for: navigation) }) {
                         HStack(alignment: .center) {
                             AllDomainsListCardView(viewModel: row.viewModel, padding: 0)
-                            Image(systemName: "chevron.right")
+                            Image(systemName: "chevron.forward")
                                 .font(.subheadline.weight(.medium))
                                 .foregroundColor(.secondary.opacity(0.5))
                         }

diff --git a/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift b/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift
@@ -86,7 +86,7 @@ struct DebugMenuView: View {
                 HStack {
                     Text(Strings.encryptedLogging)
                     Spacer()
-                    Image(systemName: "chevron.right")
+                    Image(systemName: "chevron.forward")
                         .font(.subheadline.weight(.semibold))
                         .foregroundStyle(.secondary.opacity(0.5))
                 }

diff --git a/WordPress/Classes/ViewRelated/Post/PostEditorNavigationBarManager.swift b/WordPress/Classes/ViewRelated/Post/PostEditorNavigationBarManager.swift
@@ -54,10 +54,8 @@ class PostEditorNavigationBarManager {
     }()
 
     lazy var closeButton: UIButton = {
-        let isRTL = UIView.userInterfaceLayoutDirection(for: .unspecified) == .rightToLeft
-        let closeImage = UIImage(named: "editor-chevron-left")
         let button = UIButton(type: .system)
-        button.setImage(isRTL ? closeImage?.withHorizontallyFlippedOrientation() : closeImage, for: .normal)
+        button.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
         button.sizeToFit()
         button.translatesAutoresizingMaskIntoConstraints = false
         button.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)

diff --git a/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift b/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift
@@ -87,7 +87,7 @@ struct PublishButton: View {
     }
 
     private var chevronUpView: some View {
-        Image(systemName: "chevron.right")
+        Image(systemName: "chevron.forward")
             .font(.subheadline.weight(.semibold))
             .tint(Color.secondary)
     }

diff --git a/...Press/Classes/ViewRelated/Post/Revisions/Browser/RevisionDiffsBrowserViewController.swift b/...Press/Classes/ViewRelated/Post/Revisions/Browser/RevisionDiffsBrowserViewController.swift
@@ -1,4 +1,4 @@
-import Gridicons
+import UIKit
 
 // Revisions browser view controller
 //
@@ -29,10 +29,10 @@ class RevisionDiffsBrowserViewController: UIViewController {
     }()
 
     private lazy var moreBarButtonItem: UIBarButtonItem = {
-        let image = UIImage.gridicon(.ellipsis)
+        let image = UIImage(systemName: "ellipsis")
         let button = UIButton(type: .system)
         button.setImage(image, for: .normal)
-        button.frame = CGRect(origin: .zero, size: image.size)
+        button.frame = CGRect(origin: .zero, size: image?.size ?? .zero)
         button.accessibilityLabel = NSLocalizedString("More", comment: "Action button to display more available options")
         button.on(.touchUpInside) { [weak self] _ in
             self?.moreWasPressed()
@@ -127,14 +127,14 @@ private extension RevisionDiffsBrowserViewController {
     }
 
     private func setNextPreviousButtons() {
-        previousButton.setImage(.gridicon(.chevronLeft), for: .normal)
-        previousButton.tintColor = UIAppColor.neutral(.shade70)
+        previousButton.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
+        previousButton.tintColor = UIAppColor.tint
         previousButton.on(.touchUpInside) { [weak self] _ in
             self?.showPrevious()
         }
 
-        nextButton.setImage(.gridicon(.chevronRight), for: .normal)
-        nextButton.tintColor = UIAppColor.neutral(.shade70)
+        nextButton.setImage(UIImage(systemName: "chevron.forward"), for: .normal)
+        nextButton.tintColor = UIAppColor.tint
         nextButton.on(.touchUpInside) { [weak self] _ in
             self?.showNext()
         }

diff --git a/WordPress/Classes/ViewRelated/Post/Revisions/Browser/RevisionsNavigationController.swift b/WordPress/Classes/ViewRelated/Post/Revisions/Browser/RevisionsNavigationController.swift
@@ -1,3 +1,5 @@
+import UIKit
+
 class RevisionsNavigationController: UINavigationController {
     var revisionState: RevisionBrowserState? {
         didSet {

diff --git a/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift b/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift
@@ -79,7 +79,7 @@ struct ReaderPostMenu {
     }
 
     private var goToBlog: UIAction {
-        UIAction(Strings.goToBlog, systemImage: "chevron.right") {
+        UIAction(Strings.goToBlog, systemImage: "chevron.forward") {
             guard let viewController else { return }
             ReaderHeaderAction().execute(post: post, origin: viewController)
             track(.goToBlog)

diff --git a/WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.swift b/WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.swift
@@ -1068,8 +1068,8 @@ private extension ReaderDetailViewController {
 
     func backButtonItem() -> UIBarButtonItem {
         let config = UIImage.SymbolConfiguration(weight: .semibold)
-        let image = UIImage(systemName: "chevron.backward", withConfiguration: config) ?? .gridicon(.chevronLeft)
-        let button = barButtonItem(with: image, action: #selector(didTapBackButton(_:)))
+        let image = UIImage(systemName: "chevron.backward", withConfiguration: config)
+        let button = barButtonItem(with: image ?? UIImage(), action: #selector(didTapBackButton(_:)))
         button.accessibilityLabel = Strings.backButtonAccessibilityLabel
         return button
     }

diff --git a/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift b/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift
@@ -74,7 +74,6 @@ private struct ReaderSidebarView: View {
 
     @State private var searchText = ""
 
-    @Environment(\.layoutDirection) var layoutDirection
     @Environment(\.editMode) var editMode
 
     var isEditing: Bool { editMode?.wrappedValue.isEditing == true }
@@ -163,7 +162,7 @@ private struct ReaderSidebarView: View {
                 .lineLimit(1)
             if viewModel.isCompact {
                 Spacer()
-                Image(systemName: layoutDirection == .rightToLeft ? "chevron.left" : "chevron.right")
+                Image(systemName: "chevron.forward")
                     .font(.system(size: 14).weight(.medium))
                     .foregroundStyle(.secondary.opacity(0.8))
             }
@@ -195,8 +194,6 @@ private struct ReaderSidebarSection<Content: View>: View {
     var isCompact: Bool
     @ViewBuilder var content: () -> Content
 
-    @Environment(\.layoutDirection) var layoutDirection
-
     var body: some View {
         if isCompact {
             Button {
@@ -207,7 +204,7 @@ private struct ReaderSidebarSection<Content: View>: View {
                         .font(.subheadline.weight(.semibold))
                         .foregroundStyle(.secondary)
                     Spacer()
-                    Image(systemName: isExpanded ? "chevron.down" : (layoutDirection == .rightToLeft ? "chevron.left" : "chevron.right"))
+                    Image(systemName: isExpanded ? "chevron.down" : "chevron.forward")
                         .font(.system(size: 14).weight(.semibold))
                         .foregroundStyle(AppColor.brand)
                         .frame(width: 14)