BPKRating right-to-left fix (#1639)

* SONIC-1385: update uikit BPKRating to show 10/4.5 in right to left * SONIC-1385: update swift ui BPKRating to show 10/4.5 in right to left
Skyscanner · Apr 13, 2023 · 66ea754 · 66ea754
1 parent 8e6e776
commit 66ea754
Show file tree

Hide file tree

Showing 21 changed files with 17 additions and 1 deletion.
diff --git a/Backpack-Common/BPKCommonRatingScale.swift b/Backpack-Common/BPKCommonRatingScale.swift
@@ -45,6 +45,6 @@ public enum BPKCommonRatingScale {
     }
 
     public func displayedScale() -> String {
-        return String(format: "/%.0f", range.upperBound)
+        return String(format: "%.0f", range.upperBound)
     }
 }
diff --git a/Backpack-SwiftUI/Rating/Classes/BPKRating.swift b/Backpack-SwiftUI/Rating/Classes/BPKRating.swift
@@ -35,6 +35,11 @@ public struct BPKRating<Content: View>: View {
                     style: size.fontStyle.ratingValueLabelFontStyle
                 ).layoutPriority(4)
                 if showScale {
+                    BPKText(
+                        "/",
+                        style: size.fontStyle.ratingScaleLabelFontStyle
+                    ).foregroundColor(.textSecondaryColor)
+                        .layoutPriority(3)
                     BPKText(
                         ratingScale.displayedScale(),
                         style: size.fontStyle.ratingScaleLabelFontStyle

diff --git a/.../Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.dark-mode.png b/.../Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.dark-mode.png
diff --git a/...Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.light-mode.png b/...Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.light-mode.png
diff --git a/...wiftUI/Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.rtl.png b/...wiftUI/Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithString.rtl.png
diff --git a/...sts/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.dark-mode.png b/...sts/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.dark-mode.png
diff --git a/...ts/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.light-mode.png b/...ts/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.light-mode.png
diff --git a/...tUI/Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.rtl.png b/...tUI/Tests/Rating/__Snapshots__/BPKRatingTests/test_ratingsWithTitleView.rtl.png
diff --git a/Backpack/Rating/Classes/BPKRating.swift b/Backpack/Rating/Classes/BPKRating.swift
@@ -95,6 +95,13 @@ public class BPKRating: UIView {
         return label
     }()
 
+    private let ratingScaleSlashLabel: BPKLabel = {
+        let label = BPKLabel(fontStyle: .textCaption)
+        label.textColor = BPKColor.textSecondaryColor
+        label.text = "/"
+        return label
+    }()
+
     private let titleLabel: BPKLabel = {
         let label = BPKLabel(fontStyle: .textLabel1)
         label.textColor = BPKColor.textPrimaryColor
@@ -168,6 +175,7 @@ public class BPKRating: UIView {
         ].forEach(horizontalStackView.addArrangedSubview(_:))
         [
             ratingValueLabel,
+            ratingScaleSlashLabel,
             ratingScaleLabel
         ].forEach(ratingValueAndScaleStackView.addArrangedSubview(_:))
 
@@ -196,6 +204,7 @@ public class BPKRating: UIView {
 
     private func updateLookAndFeel() {
         ratingScaleLabel.isHidden = !showScale
+        ratingScaleSlashLabel.isHidden = !showScale
         if showScale {
             ratingScaleLabel.text = ratingScale.displayedScale()
         }
@@ -211,6 +220,7 @@ public class BPKRating: UIView {
         switch size {
         case .default:
             ratingValueLabel.fontStyle = .textLabel1
+            ratingScaleSlashLabel.fontStyle = .textCaption
             ratingScaleLabel.fontStyle = .textCaption
             titleLabel.fontStyle = .textLabel1
             subtitleLabel.fontStyle = .textCaption
@@ -220,6 +230,7 @@ public class BPKRating: UIView {
             titleSubtitleStackView.alignment = .lastBaseline
         case .large:
             ratingValueLabel.fontStyle = .textHero5
+            ratingScaleSlashLabel.fontStyle = .textBodyDefault
             ratingScaleLabel.fontStyle = .textBodyDefault
             titleLabel.fontStyle = .textHeading5
             subtitleLabel.fontStyle = .textBodyDefault

diff --git a/...otTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.dark-mode.png b/...otTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.dark-mode.png
diff --git a/...tTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.light-mode.png b/...tTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.light-mode.png
diff --git a/...SnapshotTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.rtl.png b/...SnapshotTests/__Snapshots__/BPKRatingSnapshotTest/testBPKRatingSnapshot.rtl.png
diff --git a/...otTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.dark-mode.png b/...otTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.dark-mode.png
diff --git a/...tTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.light-mode.png b/...tTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.light-mode.png
diff --git a/...SnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.rtl.png b/...SnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetASecondTitleView.rtl.png
diff --git a/...atingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.dark-mode.png b/...atingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.dark-mode.png
diff --git a/...tingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.light-mode.png b/...tingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.light-mode.png
diff --git a/..._/BPKRatingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.rtl.png b/..._/BPKRatingSnapshotTest/testBPKRatingTitleConstraintUpdateAfterSetTitle.rtl.png
diff --git a/...pshotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.dark-mode.png b/...pshotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.dark-mode.png
diff --git a/...shotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.light-mode.png b/...shotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.light-mode.png
diff --git a/...ingSnapshotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.rtl.png b/...ingSnapshotTest/testBPKRatingTitleViewConstraintUpdateAfterSetTitleView.rtl.png