Merged PR 253071: MSActivityIndicatorView demo and updated activity view sizes

Adds a demo for MSActivityIndicatorView and updates MSActivityIndicatorViewSize to include the sizes included in toolkit. Small refactor of MSAvatarView demo due to reused code.

Related work items: #705398

OfficeUIFabric.Demo/OfficeUIFabric.Demo/DemoController.swift

@@ -33,6 +33,26 @@ class DemoController: UIViewController {
         container.addArrangedSubview(titleLabel)
     }
 
+    func addRow(text: String, items: [UIView]) {
+        let itemsContainer = UIStackView()
+        itemsContainer.axis = .vertical
+        itemsContainer.alignment = .leading
+
+        let itemRow = UIStackView()
+        itemRow.axis = .horizontal
+        itemRow.alignment = .center
+        itemRow.spacing = 40
+
+        let label = MSLabel(style: .subhead, colorStyle: .regular)
+        label.text = text
+        label.widthAnchor.constraint(equalToConstant: 65).isActive = true
+
+        itemRow.addArrangedSubview(label)
+        items.forEach { itemRow.addArrangedSubview($0) }
+        itemsContainer.addArrangedSubview(itemRow)
+        container.addArrangedSubview(itemsContainer)
+    }
+
     override func viewDidLoad() {
         super.viewDidLoad()
         view.backgroundColor = MSColors.background

OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos.swift

@@ -7,6 +7,7 @@ import UIKit
 
 // Register your control demos here
 let demos: [(title: String, controllerClass: UIViewController.Type)] = [
+    ("MSActivityIndicatorView", MSActivityIndicatorViewDemoController.self),
     ("MSAvatarView", MSAvatarViewDemoController.self),
     ("MSBadgeField", MSBadgeFieldDemoController.self),
     ("MSBadgeView", MSBadgeViewDemoController.self),

OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSActivityIndicatorViewDemoController.swift

@@ -0,0 +1,36 @@
+//
+//  Copyright (c) Microsoft Corporation. All rights reserved.
+//  Licensed under the MIT License.
+//
+
+import OfficeUIFabric
+import UIKit
+
+class MSActivityIndicatorViewDemoController: DemoController {
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        for size in MSActivityIndicatorViewSize.allCases {
+            let activityIndicatorView = MSActivityIndicatorView(size: size)
+            activityIndicatorView.startAnimating()
+            addRow(text: size.description, items: [activityIndicatorView])
+        }
+    }
+}
+
+extension MSActivityIndicatorViewSize {
+    var description: String {
+        switch self {
+        case .xSmall:
+            return "XSmall"
+        case .small:
+            return "Small"
+        case .medium:
+            return "Medium"
+        case .large:
+            return "Large"
+        case .xLarge:
+            return "XLarge"
+        }
+    }
+}

OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSAvatarViewDemoController.swift

@@ -14,42 +14,22 @@ class MSAvatarViewDemoController: DemoController {
         let siteImage = UIImage(named: "site")
         addTitle(text: "Avatar with Image")
         for size in MSAvatarSize.allCases {
-            setupAvatarDetails(size: size, circleImage: personaImage, squareImage: siteImage, circleName: "Kat Larrson", squareName: "NorthWind Traders")
+            let circleAvatar = createAvatarView(size: size, name: "Kat Larrson", image: personaImage)
+            let squareAvatar = createAvatarView(size: size, name: "NorthWind Traders", image: siteImage, style: .square)
+            addRow(text: size.description, items: [circleAvatar, squareAvatar])
         }
         container.addArrangedSubview(UIView())
 
         addTitle(text: "Avatar with Initials")
         for size in MSAvatarSize.allCases {
-            setupAvatarDetails(size: size, circleName: "Kat Larrson", squareName: "NorthWind Traders")
+            let circleAvatar = createAvatarView(size: size, name: "Kat Larrson")
+            let squareAvatar = createAvatarView(size: size, name: "NorthWind Traders", style: .square)
+            addRow(text: size.description, items: [circleAvatar, squareAvatar])
         }
         container.addArrangedSubview(UIView())
     }
 
-    func setupAvatarDetails(size: MSAvatarSize, circleImage: UIImage? = nil, squareImage: UIImage? = nil, circleName: String = "", squareName: String = "") {
+    private func createAvatarView(size: MSAvatarSize, name: String, image: UIImage? = nil, style: MSAvatarStyle = .circle) -> UIView {
-        let avatarContainerView = UIStackView()
-        avatarContainerView.axis = .vertical
-        avatarContainerView.alignment = .leading
-
-        let avatarHorizontalDescriptionView = UIStackView()
-        avatarHorizontalDescriptionView.axis = .horizontal
-        avatarHorizontalDescriptionView.alignment = .center
-        avatarHorizontalDescriptionView.spacing = 40
-
-        let label = MSLabel(style: .subhead, colorStyle: .regular)
-        label.text = size.description
-        label.widthAnchor.constraint(equalToConstant: 65).isActive = true
-
-        let circleAvatar = createAvatarView(size: size, name: circleName, image: circleImage)
-        let squareAvatar = createAvatarView(size: size, name: squareName, image: squareImage, style: .square)
-
-        avatarHorizontalDescriptionView.addArrangedSubview(label)
-        avatarHorizontalDescriptionView.addArrangedSubview(circleAvatar)
-        avatarHorizontalDescriptionView.addArrangedSubview(squareAvatar)
-        avatarContainerView.addArrangedSubview(avatarHorizontalDescriptionView)
-        container.addArrangedSubview(avatarContainerView)
-    }
-
-    private func createAvatarView(size: MSAvatarSize, name: String, image: UIImage?, style: MSAvatarStyle = .circle) -> UIView {
         let avatarView = MSAvatarView(avatarSize: size, withBorder: true, style: style)
         avatarView.setup(primaryText: name, secondaryText: "", image: image)
 

OfficeUIFabric/Controls/MSActivityIndicatorView.swift

@@ -10,41 +10,40 @@ import UIKit
 /**
  * `MSActivityIndicatorViewSize` defines the side size of the loader and the thickness of the loader stroke.
  */
-
+@objc public enum MSActivityIndicatorViewSize: Int, CaseIterable {
-@objc public enum MSActivityIndicatorViewSize: Int {
+    case xSmall
     case small
-    case regular
     case medium
     case large
     case xLarge
 
     public var sideSize: CGFloat {
         switch self {
+        case .xSmall:
+            return 12
         case .small:
-            return 14.0
+            return 17
-        case .regular:
-            return 18.0
         case .medium:
-            return 22.0
+            return 26
         case .large:
-            return 32.0
+            return 35
         case .xLarge:
-            return 40.0
+            return 40
         }
     }
 
     public var strokeThickness: MSActivityIndicatorStrokeThickness {
         switch self {
+        case .xSmall:
+            return .small
         case .small:
-            return .fine
+            return .small
-        case .regular:
-            return .fine
         case .medium:
-            return .regular
+            return .medium
         case .large:
-            return .fine
+            return .large
         case .xLarge:
-            return .xThick
+            return .xLarge
         }
     }
 }
@@ -52,11 +51,10 @@ import UIKit
 // MARK: - MSActivityIndicatorStrokeThickness
 
 public enum MSActivityIndicatorStrokeThickness: CGFloat {
-    case xFine = 1
+    case small = 1
-    case fine = 2
+    case medium = 2
-    case regular = 2.5
+    case large = 3
-    case thick = 3
+    case xLarge = 4
-    case xThick = 3.6
 }
 
 // MARK: - MSActivityIndicatorView
@@ -115,14 +113,10 @@ open class MSActivityIndicatorView: UIView {
     private var strokeThickness: CGFloat
 
     @objc public convenience init(size: MSActivityIndicatorViewSize) {
-        self.init(size: size, strokeThickness: size.strokeThickness)
+        self.init(sideSize: size.sideSize, strokeThickness: size.strokeThickness.rawValue)
     }
 
-    public convenience init(size: MSActivityIndicatorViewSize, strokeThickness: MSActivityIndicatorStrokeThickness) {
+    @objc public init(sideSize: CGFloat, strokeThickness: CGFloat) {
-        self.init(sideSize: size.sideSize, strokeThickness: strokeThickness.rawValue)
-    }
-
-    public init(sideSize: CGFloat, strokeThickness: CGFloat) {
         self.sideSize = sideSize
         self.strokeThickness = strokeThickness
 

OfficeUIFabric/Core/Colors.swift

@@ -78,7 +78,7 @@ public final class MSColors: NSObject {
 
     // TODO: Add semantic colors describing colors used for particular control elements (must reference physical colors)
 
-    public static let activityIndicator: UIColor = gray
+    public static let activityIndicator: UIColor = lightGray
     public static let background: UIColor = white
     public static let buttonImage: UIColor = gray
     public static let centeredLabelText: UIColor = primary

OfficeUIFabric/Table View/MSActivityIndicatorCell.swift

@@ -12,7 +12,7 @@ open class MSActivityIndicatorCell: UITableViewCell {
     public static let defaultHeight: CGFloat = 45
 
     private let activityIndicatorView: MSActivityIndicatorView = {
-        let activityIndicatorView = MSActivityIndicatorView(size: .regular)
+        let activityIndicatorView = MSActivityIndicatorView(size: .small)
         activityIndicatorView.startAnimating()
         return activityIndicatorView
     }()