Digital ACT-191 ONEAPP-6827 story: alignment issue fix on surface change

VDS/Components/Breadcrumbs/BreadcrumbCellItem.swift

@@ -33,7 +33,9 @@ final class BreadcrumbCellItem: UICollectionViewCell {
     private var separator: Label = Label().with {
         $0.translatesAutoresizingMaskIntoConstraints = false
         $0.textAlignment = .left
-        $0.numberOfLines = 0
+        $0.numberOfLines = 1
+        $0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+        $0.setContentHuggingPriority(.defaultHigh, for: .horizontal)
         $0.text = "/"
     }
     
@@ -54,6 +56,7 @@ final class BreadcrumbCellItem: UICollectionViewCell {
     
     ///Configuring the cell with default setup
     private func setUp() {
+        separator.textColorConfiguration = textColorConfiguration.eraseToAnyColorable()
         contentView.addSubview(stackView)
         stackView.pinToSuperView()
         separator.backgroundColor = .clear
@@ -61,7 +64,8 @@ final class BreadcrumbCellItem: UICollectionViewCell {
     
     ///Updating the breadCrumbItem and UI based on the selected flag along with the surface
     func update(surface: Surface, hideSlash: Bool, breadCrumbItem: BreadcrumbItem) {
-        stackView.removeAllArrangedSubviews()
+        separator.surface = surface
+        breadCrumbItem.surface = surface
         stackView.addArrangedSubview(separator)
         stackView.addArrangedSubview(breadCrumbItem)
         stackView.setCustomSpacing(VDSLayout.Spacing.space1X.value, after: separator)
@@ -72,17 +76,24 @@ final class BreadcrumbCellItem: UICollectionViewCell {
     }
 }
 
-extension UIStackView {
+class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
-    
-    @discardableResult
-    func removeAllArrangedSubviews() -> [UIView] {
-        return arrangedSubviews.reduce([UIView]()) { $0 + [removeArrangedSubViewProperly($1)] }
-    }
 
-    func removeArrangedSubViewProperly(_ view: UIView) -> UIView {
+    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
-        removeArrangedSubview(view)
+        let attributes = super.layoutAttributesForElements(in: rect)
-        NSLayoutConstraint.deactivate(view.constraints)
+
-        view.removeFromSuperview()
+        var leftMargin = sectionInset.left
-        return view
+        var maxY: CGFloat = -1.0
+        attributes?.forEach { layoutAttribute in
+            if layoutAttribute.frame.origin.y >= maxY {
+                leftMargin = sectionInset.left
+            }
+
+            layoutAttribute.frame.origin.x = leftMargin
+
+            leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
+            maxY = max(layoutAttribute.frame.maxY , maxY)
+        }
+
+        return attributes
     }
 }

VDS/Components/Breadcrumbs/Breadcrumbs.swift

@@ -27,6 +27,7 @@ open class Breadcrumbs: View {
             breadcrumbItems.forEach { $0.isEnabled = isEnabled }
         }
     }
+    
     /// Current Surface and this is used to pass down to child objects that implement Surfacable
     override open var surface: Surface {
         didSet {
@@ -37,7 +38,7 @@ open class Breadcrumbs: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout().with {
+    let layout: UICollectionViewFlowLayout = LeftAlignedCollectionViewFlowLayout().with {
         $0.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
         $0.minimumInteritemSpacing = VDSLayout.Spacing.space1X.value
         $0.minimumLineSpacing = VDSLayout.Spacing.space1X.value
@@ -45,7 +46,7 @@ open class Breadcrumbs: View {
         $0.scrollDirection = .vertical
     }
     
-    ///Collectionview to render Breadcrumbs indexes
+    ///Collectionview to render Breadcrumb Items
     private lazy var collectionView: UICollectionView = {
         let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
         collectionView.isScrollEnabled = false
@@ -78,6 +79,9 @@ open class Breadcrumbs: View {
     /// Resets to default settings.
     open override func reset() {
         super.reset()
+        shouldUpdateView = false
+        breadcrumbItems.forEach { $0.reset() }
+        shouldUpdateView = true
         setNeedsUpdate()
     }
     
@@ -86,6 +90,15 @@ open class Breadcrumbs: View {
         super.updateView()
         collectionView.reloadData()
     }
+    
+    open override func layoutSubviews() {
+        super.layoutSubviews()
+        // Accounts for any collection size changes
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            self.collectionView.collectionViewLayout.invalidateLayout()
+        }
+    }
 }
 
 extension Breadcrumbs: UICollectionViewDelegate, UICollectionViewDataSource {
@@ -102,6 +115,7 @@ extension Breadcrumbs: UICollectionViewDelegate, UICollectionViewDataSource {
         return cell
     }
     
-    public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+    public func collectionView(_ collectionView: UICollectionView, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
+        breadcrumbItems[indexPath.row].intrinsicContentSize
     }
 }