From 0192dece542e0118e117a09f26b60c873338e749 Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Thu, 25 Aug 2022 12:08:36 -0700 Subject: [PATCH 1/6] Renamed avatar sizes --- .../Demos/AvatarDemoController.swift | 12 ++-- .../Demos/AvatarDemoController_SwiftUI.swift | 14 ++-- .../Demos/AvatarGroupDemoController.swift | 12 ++-- .../Demos/BadgeViewDemoController.swift | 2 +- .../Demos/SideTabBarDemoController.swift | 2 +- ios/FluentUI/Avatar/AvatarTokens.swift | 72 +++++++++---------- ios/FluentUI/Avatar/MSFAvatar.swift | 2 +- .../AvatarGroup/AvatarGroupTokens.swift | 14 ++-- .../Navigation/Views/LargeTitleView.swift | 4 +- ios/FluentUI/People Picker/PersonaCell.swift | 2 +- .../PersonaButton/PersonaButtonTokens.swift | 4 +- ios/FluentUI/Tab Bar/SideTabBar.swift | 2 +- 12 files changed, 71 insertions(+), 71 deletions(-) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift index 7b7e25292d..a98234da51 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift @@ -426,17 +426,17 @@ class AvatarDemoController: DemoTableViewController { var avatarSize: MSFAvatarSize { switch self { case .xxlarge: - return .xxlarge + return .size72 case .xlarge: - return .xlarge + return .size56 case .large: - return .large + return .size40 case .medium: - return .medium + return .size32 case .small: - return .small + return .size24 case .xsmall: - return .xsmall + return .size16 case .swiftUI, .settings: preconditionFailure("Settings rows should not display an Avatar") } diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift index 5afef7acc0..570591190b 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift @@ -35,7 +35,7 @@ struct AvatarDemoView: View { @State var presence: MSFAvatarPresence = .none @State var showImage: Bool = false @State var showImageBasedRingColor: Bool = false - @State var size: MSFAvatarSize = .xxlarge + @State var size: MSFAvatarSize = .size72 @State var style: MSFAvatarStyle = .default public var body: some View { @@ -148,12 +148,12 @@ struct AvatarDemoView: View { } Picker(selection: $size, label: EmptyView()) { - Text(".xxlarge").tag(MSFAvatarSize.xxlarge) - Text(".xlarge").tag(MSFAvatarSize.xlarge) - Text(".large").tag(MSFAvatarSize.large) - Text(".medium").tag(MSFAvatarSize.medium) - Text(".small").tag(MSFAvatarSize.small) - Text(".xsmall").tag(MSFAvatarSize.xsmall) + Text(".xxlarge").tag(MSFAvatarSize.size72) + Text(".xlarge").tag(MSFAvatarSize.size56) + Text(".large").tag(MSFAvatarSize.size40) + Text(".medium").tag(MSFAvatarSize.size32) + Text(".small").tag(MSFAvatarSize.size24) + Text(".xsmall").tag(MSFAvatarSize.size16) } .labelsHidden() .frame(maxWidth: .infinity, alignment: .leading) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift index 85f09895bf..24c1845da1 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift @@ -320,17 +320,17 @@ class AvatarGroupDemoController: DemoTableViewController { var avatarSize: MSFAvatarSize { switch self { case .xxlargeGroupView: - return .xxlarge + return .size72 case .xlargeGroupView: - return .xlarge + return .size56 case .largeGroupView: - return .large + return .size40 case .mediumGroupView: - return .medium + return .size32 case .smallGroupView: - return .small + return .size24 case .xsmallGroupView: - return .xsmall + return .size16 case .xxlargeTitle, .xlargeTitle, .largeTitle, diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/BadgeViewDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/BadgeViewDemoController.swift index f7663f5f89..0674eb0277 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/BadgeViewDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/BadgeViewDemoController.swift @@ -73,7 +73,7 @@ class BadgeViewDemoController: DemoController { imageView.tintColor = .white imageView.frame.size = CGSize(width: 20, height: 20) - let avatar = MSFAvatar(style: .default, size: .xsmall) + let avatar = MSFAvatar(style: .default, size: .size16) avatar.state.image = UIImage(named: "avatar_kat_larsson") let dataSource: [(BadgeView.Size, UIView)] = [ diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift index bed058b4bf..770b736447 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/SideTabBarDemoController.swift @@ -167,7 +167,7 @@ class SideTabBarDemoController: DemoController { var avatar: MSFAvatar? if let image = UIImage(named: "avatar_kat_larsson"), show { avatar = MSFAvatar(style: .accent, - size: .medium) + size: .size32) if let avatarState = avatar?.state { avatarState.primaryText = "Kat Larson" avatarState.image = image diff --git a/ios/FluentUI/Avatar/AvatarTokens.swift b/ios/FluentUI/Avatar/AvatarTokens.swift index f2e27a5728..2f81194a6f 100644 --- a/ios/FluentUI/Avatar/AvatarTokens.swift +++ b/ios/FluentUI/Avatar/AvatarTokens.swift @@ -13,17 +13,17 @@ open class AvatarTokens: ControlTokens { /// The size of the content of the `Avatar`. open var avatarSize: CGFloat { switch size { - case .xsmall: + case .size16: return 16 - case .small: + case .size24: return 24 - case .medium: + case .size32: return 32 - case .large: + case .size40: return 40 - case .xlarge: + case .size56: return 52 - case .xxlarge: + case .size72: return 72 } } @@ -35,13 +35,13 @@ open class AvatarTokens: ControlTokens { return GlobalTokens.spacing(.none) case .group: switch size { - case .xsmall: + case .size16: return GlobalTokens.borderRadius(.small) - case .small, .medium: + case .size24, .size32: return GlobalTokens.borderRadius(.medium) - case .large, .xlarge: + case .size40, .size56: return GlobalTokens.borderRadius(.large) - case .xxlarge: + case .size72: return GlobalTokens.borderRadius(.xLarge) } } @@ -50,17 +50,17 @@ open class AvatarTokens: ControlTokens { /// The font used for text in the `Avatar` open var textFont: FontInfo { switch size { - case .xsmall: + case .size16: return .init(size: 9, weight: GlobalTokens.fontWeight(.regular)) - case .small: + case .size24: return aliasTokens.typography[.caption2] - case .medium: + case .size32: return aliasTokens.typography[.caption1] - case .large: + case .size40: return aliasTokens.typography[.body2] - case .xlarge: + case .size56: return .init(size: GlobalTokens.fontSize(.size500), weight: GlobalTokens.fontWeight(.regular)) - case .xxlarge: + case .size72: return .init(size: GlobalTokens.fontSize(.size700), weight: GlobalTokens.fontWeight(.semibold)) } } @@ -85,11 +85,11 @@ open class AvatarTokens: ControlTokens { /// The thickness of the ring around the `Avatar`. open var ringThickness: CGFloat { switch size { - case .xsmall, .small: + case .size16, .size24: return GlobalTokens.borderSize(.thin) - case .medium, .large, .xlarge: + case .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } } @@ -97,9 +97,9 @@ open class AvatarTokens: ControlTokens { /// The gap between the `Avatar` and its ring. open var ringInnerGap: CGFloat { switch size { - case .xsmall, .small, .medium, .large, .xlarge: + case .size16, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } } @@ -107,9 +107,9 @@ open class AvatarTokens: ControlTokens { /// The gap around the ring around the `Avatar`. open var ringOuterGap: CGFloat { switch size { - case .xsmall, .small, .medium, .large, .xlarge: + case .size16, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } } @@ -117,13 +117,13 @@ open class AvatarTokens: ControlTokens { /// The size of the presence icon. open var presenceIconSize: CGFloat { switch size { - case .xsmall: + case .size16: return 0 - case .small, .medium: + case .size24, .size32: return GlobalTokens.iconSize(.xxxSmall) - case .large, .xlarge: + case .size40, .size56: return GlobalTokens.iconSize(.xxSmall) - case .xxlarge: + case .size72: return GlobalTokens.iconSize(.small) } } @@ -131,9 +131,9 @@ open class AvatarTokens: ControlTokens { /// The thickness of the outline around the presence icon. open var presenceIconOutlineThickness: CGFloat { switch size { - case .xsmall: + case .size16: return GlobalTokens.borderSize(.none) - case .small, .medium, .large, .xlarge, .xxlarge: + case .size24, .size32, .size40, .size56, .size72: return GlobalTokens.borderSize(.thick) } } @@ -245,7 +245,7 @@ open class AvatarTokens: ControlTokens { public internal(set) var style: MSFAvatarStyle = .default /// Defines the size of the `Avatar`. - public internal(set) var size: MSFAvatarSize = .large + public internal(set) var size: MSFAvatarSize = .size40 } /// Pre-defined styles of the avatar @@ -260,10 +260,10 @@ open class AvatarTokens: ControlTokens { /// Pre-defined sizes of the avatar @objc public enum MSFAvatarSize: Int, CaseIterable { - case xsmall - case small - case medium - case large - case xlarge - case xxlarge + case size16 + case size24 + case size32 + case size40 + case size56 + case size72 } diff --git a/ios/FluentUI/Avatar/MSFAvatar.swift b/ios/FluentUI/Avatar/MSFAvatar.swift index 23728a2b82..b49b66265c 100644 --- a/ios/FluentUI/Avatar/MSFAvatar.swift +++ b/ios/FluentUI/Avatar/MSFAvatar.swift @@ -14,7 +14,7 @@ import SwiftUI /// - style: The MSFAvatarStyle value used by the Avatar. /// - size: The MSFAvatarSize value used by the Avatar. @objc public init(style: MSFAvatarStyle = .default, - size: MSFAvatarSize = .large) { + size: MSFAvatarSize = .size40) { let avatar = Avatar(style: style, size: size) state = avatar.state diff --git a/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift b/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift index eec5a41545..4ee5fcb653 100644 --- a/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift +++ b/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift @@ -13,7 +13,7 @@ open class AvatarGroupTokens: ControlTokens { public internal(set) var style: MSFAvatarGroupStyle = .stack /// Defines the size of the `Avatar` controls in the `AvatarGroup`. - public internal(set) var size: MSFAvatarSize = .large + public internal(set) var size: MSFAvatarSize = .size40 // MARK: - Design Tokens @@ -22,20 +22,20 @@ open class AvatarGroupTokens: ControlTokens { switch style { case .stack: switch size { - case .xsmall, .small: + case .size16, .size24: return -GlobalTokens.spacing(.xxxSmall) - case .medium: + case .size32: return -GlobalTokens.spacing(.xxSmall) - case .large: + case .size40: return -GlobalTokens.spacing(.xSmall) - case .xlarge, .xxlarge: + case .size56, .size72: return -GlobalTokens.spacing(.small) } case .pile: switch size { - case .xsmall, .small: + case .size16, .size24: return GlobalTokens.spacing(.xxSmall) - case .medium, .large, .xlarge, .xxlarge: + case .size32, .size40, .size56, .size72: return GlobalTokens.spacing(.xSmall) } } diff --git a/ios/FluentUI/Navigation/Views/LargeTitleView.swift b/ios/FluentUI/Navigation/Views/LargeTitleView.swift index 1c220ee1a8..cab5731cab 100644 --- a/ios/FluentUI/Navigation/Views/LargeTitleView.swift +++ b/ios/FluentUI/Navigation/Views/LargeTitleView.swift @@ -16,8 +16,8 @@ class LargeTitleView: UIView { private struct Constants { static let horizontalSpacing: CGFloat = 10 - static let compactAvatarSize: MSFAvatarSize = .small - static let avatarSize: MSFAvatarSize = .medium + static let compactAvatarSize: MSFAvatarSize = .size24 + static let avatarSize: MSFAvatarSize = .size32 // Once we are iOS 14 minimum, we can use Fonts.largeTitle.withSize() function instead static let compactTitleFont = UIFont.systemFont(ofSize: 26, weight: .bold) diff --git a/ios/FluentUI/People Picker/PersonaCell.swift b/ios/FluentUI/People Picker/PersonaCell.swift index 21875e2004..354b3ef627 100644 --- a/ios/FluentUI/People Picker/PersonaCell.swift +++ b/ios/FluentUI/People Picker/PersonaCell.swift @@ -10,7 +10,7 @@ import UIKit @objc(MSFPersonaCell) open class PersonaCell: TableViewCell { private struct Constants { - static let avatarSize: MSFAvatarSize = .large + static let avatarSize: MSFAvatarSize = .size40 } open override var customViewSize: MSFTableViewCellCustomViewSize { get { return .medium } set { } } diff --git a/ios/FluentUI/PersonaButton/PersonaButtonTokens.swift b/ios/FluentUI/PersonaButton/PersonaButtonTokens.swift index 68de31a3f2..8d53644cdb 100644 --- a/ios/FluentUI/PersonaButton/PersonaButtonTokens.swift +++ b/ios/FluentUI/PersonaButton/PersonaButtonTokens.swift @@ -13,9 +13,9 @@ import UIKit var avatarSize: MSFAvatarSize { switch self { case .large: - return .xxlarge + return .size72 case .small: - return .xlarge + return .size56 } } diff --git a/ios/FluentUI/Tab Bar/SideTabBar.swift b/ios/FluentUI/Tab Bar/SideTabBar.swift index 08a0e70048..4e6cb6e116 100644 --- a/ios/FluentUI/Tab Bar/SideTabBar.swift +++ b/ios/FluentUI/Tab Bar/SideTabBar.swift @@ -44,7 +44,7 @@ open class SideTabBar: UIView { didSet { if let avatar = avatar { let avatarState = avatar.state - avatarState.size = .medium + avatarState.size = .size32 avatarState.accessibilityLabel = "Accessibility.LargeTitle.ProfileView".localized avatarState.hasButtonAccessibilityTrait = delegate != nil From 4f12b522691c2546c2ac100a88e0864d0db7b416 Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Thu, 25 Aug 2022 17:10:52 -0700 Subject: [PATCH 2/6] Added avatar size 20 and size 56 --- ios/FluentUI/Avatar/AvatarTokens.swift | 19 +++++++++++-------- .../AvatarGroup/AvatarGroupTokens.swift | 4 ++-- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/ios/FluentUI/Avatar/AvatarTokens.swift b/ios/FluentUI/Avatar/AvatarTokens.swift index 2f81194a6f..67dfe6e5fc 100644 --- a/ios/FluentUI/Avatar/AvatarTokens.swift +++ b/ios/FluentUI/Avatar/AvatarTokens.swift @@ -15,6 +15,8 @@ open class AvatarTokens: ControlTokens { switch size { case .size16: return 16 + case .size20: + return 20 case .size24: return 24 case .size32: @@ -22,7 +24,7 @@ open class AvatarTokens: ControlTokens { case .size40: return 40 case .size56: - return 52 + return 56 case .size72: return 72 } @@ -35,7 +37,7 @@ open class AvatarTokens: ControlTokens { return GlobalTokens.spacing(.none) case .group: switch size { - case .size16: + case .size16, .size20: return GlobalTokens.borderRadius(.small) case .size24, .size32: return GlobalTokens.borderRadius(.medium) @@ -50,7 +52,7 @@ open class AvatarTokens: ControlTokens { /// The font used for text in the `Avatar` open var textFont: FontInfo { switch size { - case .size16: + case .size16, .size20: return .init(size: 9, weight: GlobalTokens.fontWeight(.regular)) case .size24: return aliasTokens.typography[.caption2] @@ -85,7 +87,7 @@ open class AvatarTokens: ControlTokens { /// The thickness of the ring around the `Avatar`. open var ringThickness: CGFloat { switch size { - case .size16, .size24: + case .size16, .size20, .size24: return GlobalTokens.borderSize(.thin) case .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) @@ -97,7 +99,7 @@ open class AvatarTokens: ControlTokens { /// The gap between the `Avatar` and its ring. open var ringInnerGap: CGFloat { switch size { - case .size16, .size24, .size32, .size40, .size56: + case .size16, .size20, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) case .size72: return GlobalTokens.borderSize(.thicker) @@ -107,7 +109,7 @@ open class AvatarTokens: ControlTokens { /// The gap around the ring around the `Avatar`. open var ringOuterGap: CGFloat { switch size { - case .size16, .size24, .size32, .size40, .size56: + case .size16, .size20, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) case .size72: return GlobalTokens.borderSize(.thicker) @@ -119,7 +121,7 @@ open class AvatarTokens: ControlTokens { switch size { case .size16: return 0 - case .size24, .size32: + case .size20, .size24, .size32: return GlobalTokens.iconSize(.xxxSmall) case .size40, .size56: return GlobalTokens.iconSize(.xxSmall) @@ -133,7 +135,7 @@ open class AvatarTokens: ControlTokens { switch size { case .size16: return GlobalTokens.borderSize(.none) - case .size24, .size32, .size40, .size56, .size72: + case .size20, .size24, .size32, .size40, .size56, .size72: return GlobalTokens.borderSize(.thick) } } @@ -261,6 +263,7 @@ open class AvatarTokens: ControlTokens { /// Pre-defined sizes of the avatar @objc public enum MSFAvatarSize: Int, CaseIterable { case size16 + case size20 case size24 case size32 case size40 diff --git a/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift b/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift index 4ee5fcb653..c96c34fad1 100644 --- a/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift +++ b/ios/FluentUI/AvatarGroup/AvatarGroupTokens.swift @@ -22,7 +22,7 @@ open class AvatarGroupTokens: ControlTokens { switch style { case .stack: switch size { - case .size16, .size24: + case .size16, .size20, .size24: return -GlobalTokens.spacing(.xxxSmall) case .size32: return -GlobalTokens.spacing(.xxSmall) @@ -33,7 +33,7 @@ open class AvatarGroupTokens: ControlTokens { } case .pile: switch size { - case .size16, .size24: + case .size16, .size20, .size24: return GlobalTokens.spacing(.xxSmall) case .size32, .size40, .size56, .size72: return GlobalTokens.spacing(.xSmall) From d6482ac45fe4844142405786baec3b2dc03c212f Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Thu, 25 Aug 2022 17:40:57 -0700 Subject: [PATCH 3/6] Added new sizes in demo controllers --- .../Demos/AvatarDemoController.swift | 66 +++---- .../Demos/AvatarDemoController_SwiftUI.swift | 13 +- .../Demos/AvatarGroupDemoController.swift | 170 ++++++++++-------- 3 files changed, 135 insertions(+), 114 deletions(-) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift index a98234da51..66b80a512d 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController.swift @@ -416,26 +416,29 @@ class AvatarDemoController: DemoTableViewController { private enum AvatarDemoSection: CaseIterable { case swiftUI case settings - case xxlarge - case xlarge - case large - case medium - case small - case xsmall + case size72 + case size56 + case size40 + case size32 + case size24 + case size20 + case size16 var avatarSize: MSFAvatarSize { switch self { - case .xxlarge: + case .size72: return .size72 - case .xlarge: + case .size56: return .size56 - case .large: + case .size40: return .size40 - case .medium: + case .size32: return .size32 - case .small: + case .size24: return .size24 - case .xsmall: + case .size20: + return .size20 + case .size16: return .size16 case .swiftUI, .settings: preconditionFailure("Settings rows should not display an Avatar") @@ -452,18 +455,20 @@ class AvatarDemoController: DemoTableViewController { return "SwiftUI" case .settings: return "Settings" - case .xxlarge: - return "ExtraExtraLarge" - case .xlarge: - return "ExtraLarge" - case .large: - return "Large" - case .medium: - return "Medium" - case .small: - return "Small" - case .xsmall: - return "ExtraSmall" + case .size72: + return "Size 72" + case .size56: + return "Size 56" + case .size40: + return "Size 40" + case .size32: + return "Size 32" + case .size24: + return "Size 24" + case .size20: + return "Size 20" + case .size16: + return "Size 16" } } @@ -481,12 +486,13 @@ class AvatarDemoController: DemoTableViewController { .ring, .ringInnerGap, .imageBasedRingColor] - case .xxlarge, - .xlarge, - .large, - .medium, - .small, - .xsmall: + case .size72, + .size56, + .size40, + .size32, + .size24, + .size20, + .size16: return [.defaultWithImage, .defaultWithInitials, .defaultWithFallback, diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift index 570591190b..84ef74f5f7 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarDemoController_SwiftUI.swift @@ -148,12 +148,13 @@ struct AvatarDemoView: View { } Picker(selection: $size, label: EmptyView()) { - Text(".xxlarge").tag(MSFAvatarSize.size72) - Text(".xlarge").tag(MSFAvatarSize.size56) - Text(".large").tag(MSFAvatarSize.size40) - Text(".medium").tag(MSFAvatarSize.size32) - Text(".small").tag(MSFAvatarSize.size24) - Text(".xsmall").tag(MSFAvatarSize.size16) + Text(".size72").tag(MSFAvatarSize.size72) + Text(".size56").tag(MSFAvatarSize.size56) + Text(".size40").tag(MSFAvatarSize.size40) + Text(".size32").tag(MSFAvatarSize.size32) + Text(".size24").tag(MSFAvatarSize.size24) + Text(".size20").tag(MSFAvatarSize.size20) + Text(".size16").tag(MSFAvatarSize.size16) } .labelsHidden() .frame(maxWidth: .infinity, alignment: .leading) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift index 24c1845da1..c0d6b8ef39 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift @@ -120,12 +120,13 @@ class AvatarGroupDemoController: DemoTableViewController { cell.titleNumberOfLines = 0 return cell - case .xxlargeTitle, - .xlargeTitle, - .largeTitle, - .mediumTitle, - .smallTitle, - .xsmallTitle: + case .titleSize72, + .titleSize56, + .titleSize40, + .titleSize32, + .titleSize24, + .titleSize20, + .titleSize16: guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.identifier) as? TableViewCell else { return UITableViewCell() } @@ -134,12 +135,13 @@ class AvatarGroupDemoController: DemoTableViewController { cell.titleNumberOfLines = 0 return cell - case .xxlargeGroupView, - .xlargeGroupView, - .largeGroupView, - .mediumGroupView, - .smallGroupView, - .xsmallGroupView: + case .groupViewSize72, + .groupViewSize56, + .groupViewSize40, + .groupViewSize32, + .groupViewSize24, + .groupViewSize20, + .groupViewSize16: let cell = UITableViewCell() guard let avatarGroup = demoAvatarGroupsBySection[section]?[row] else { @@ -258,18 +260,20 @@ class AvatarGroupDemoController: DemoTableViewController { .avatarPileNoBorder, .avatarPileWithBorder, .avatarPileWithMixedBorder: - return [.xxlargeTitle, - .xxlargeGroupView, - .xlargeTitle, - .xlargeGroupView, - .largeTitle, - .largeGroupView, - .mediumTitle, - .mediumGroupView, - .smallTitle, - .smallGroupView, - .xsmallTitle, - .xsmallGroupView] + return [.titleSize72, + .groupViewSize72, + .titleSize56, + .groupViewSize56, + .titleSize40, + .groupViewSize40, + .titleSize32, + .groupViewSize32, + .titleSize24, + .groupViewSize24, + .titleSize20, + .groupViewSize20, + .titleSize16, + .groupViewSize16] } } } @@ -280,34 +284,38 @@ class AvatarGroupDemoController: DemoTableViewController { case customRingColor case maxDisplayedAvatars case overflow - case xxlargeTitle - case xxlargeGroupView - case xlargeTitle - case xlargeGroupView - case largeTitle - case largeGroupView - case mediumTitle - case mediumGroupView - case smallTitle - case smallGroupView - case xsmallTitle - case xsmallGroupView + case titleSize72 + case groupViewSize72 + case titleSize56 + case groupViewSize56 + case titleSize40 + case groupViewSize40 + case titleSize32 + case groupViewSize32 + case titleSize24 + case groupViewSize24 + case titleSize20 + case groupViewSize20 + case titleSize16 + case groupViewSize16 var isDemoRow: Bool { switch self { - case .xxlargeGroupView, - .xlargeGroupView, - .largeGroupView, - .mediumGroupView, - .smallGroupView, - .xsmallGroupView: + case .groupViewSize72, + .groupViewSize56, + .groupViewSize40, + .groupViewSize32, + .groupViewSize24, + .groupViewSize20, + .groupViewSize16: return true - case .xxlargeTitle, - .xlargeTitle, - .largeTitle, - .mediumTitle, - .smallTitle, - .xsmallTitle, + case .titleSize72, + .titleSize56, + .titleSize40, + .titleSize32, + .titleSize24, + .titleSize20, + .titleSize16, .avatarCount, .alternateBackground, .customRingColor, @@ -319,24 +327,27 @@ class AvatarGroupDemoController: DemoTableViewController { var avatarSize: MSFAvatarSize { switch self { - case .xxlargeGroupView: + case .groupViewSize72: return .size72 - case .xlargeGroupView: + case .groupViewSize56: return .size56 - case .largeGroupView: + case .groupViewSize40: return .size40 - case .mediumGroupView: + case .groupViewSize32: return .size32 - case .smallGroupView: + case .groupViewSize24: return .size24 - case .xsmallGroupView: + case .groupViewSize20: + return .size20 + case .groupViewSize16: return .size16 - case .xxlargeTitle, - .xlargeTitle, - .largeTitle, - .mediumTitle, - .smallTitle, - .xsmallTitle, + case .titleSize72, + .titleSize56, + .titleSize40, + .titleSize32, + .titleSize24, + .titleSize20, + .titleSize16, .avatarCount, .alternateBackground, .customRingColor, @@ -358,24 +369,27 @@ class AvatarGroupDemoController: DemoTableViewController { return "Max displayed avatars" case .overflow: return "Overflow count" - case .xxlargeTitle: - return "ExtraExtraLarge" - case .xlargeTitle: - return "ExtraLarge" - case .largeTitle: - return "Large" - case .mediumTitle: - return "Medium" - case .smallTitle: - return "Small" - case .xsmallTitle: - return "ExtraSmall" - case .xxlargeGroupView, - .xlargeGroupView, - .largeGroupView, - .mediumGroupView, - .smallGroupView, - .xsmallGroupView: + case .titleSize72: + return "Size 72" + case .titleSize56: + return "Size 56" + case .titleSize40: + return "Size 40" + case .titleSize32: + return "Size 32" + case .titleSize24: + return "Size 24" + case .titleSize20: + return "Size 20" + case .titleSize16: + return "Size 16" + case .groupViewSize72, + .groupViewSize56, + .groupViewSize40, + .groupViewSize32, + .groupViewSize24, + .groupViewSize20, + .groupViewSize16: preconditionFailure("Row should not have title") } } From 552507af71aee5152974ac0b1bd27bac85f1e5e2 Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Thu, 25 Aug 2022 17:42:39 -0700 Subject: [PATCH 4/6] Removed unused variable in AvatarGroupDemoController --- .../FluentUI.Demo/Demos/AvatarGroupDemoController.swift | 2 -- 1 file changed, 2 deletions(-) diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift index c0d6b8ef39..5f3b01ee47 100644 --- a/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift +++ b/ios/FluentUI.Demo/FluentUI.Demo/Demos/AvatarGroupDemoController.swift @@ -167,8 +167,6 @@ class AvatarGroupDemoController: DemoTableViewController { // MARK: - Helpers - private let avatarSizes: [MSFAvatarSize] = MSFAvatarSize.allCases.reversed() - private enum AvatarGroupDemoSection: CaseIterable { case settings case avatarStackNoBorder From efb9aaa5141a6b6e1388e15e50bc7e90a3b6ecfa Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Fri, 2 Sep 2022 10:02:29 -0700 Subject: [PATCH 5/6] Moved changes to token sets --- ios/FluentUI/Avatar/AvatarTokenSet.swift | 75 ++++++++++--------- .../AvatarGroup/AvatarGroupTokenSet.swift | 12 +-- .../PersonaButton/PersonaButtonTokenSet.swift | 4 +- 3 files changed, 47 insertions(+), 44 deletions(-) diff --git a/ios/FluentUI/Avatar/AvatarTokenSet.swift b/ios/FluentUI/Avatar/AvatarTokenSet.swift index f2be1302de..ba53725a6a 100644 --- a/ios/FluentUI/Avatar/AvatarTokenSet.swift +++ b/ios/FluentUI/Avatar/AvatarTokenSet.swift @@ -58,17 +58,19 @@ public class AvatarTokenSet: ControlTokenSet { case .avatarSize: return .float({ switch size() { - case .xsmall: + case .size16: return 16 - case .small: + case .size20: + return 20 + case .size24: return 24 - case .medium: + case .size32: return 32 - case .large: + case .size40: return 40 - case .xlarge: - return 52 - case .xxlarge: + case .size56: + return 56 + case .size72: return 72 } }) @@ -80,13 +82,13 @@ public class AvatarTokenSet: ControlTokenSet { return GlobalTokens.borderRadius(.none) case .group: switch size() { - case .xsmall: + case .size16, .size20: return GlobalTokens.borderRadius(.small) - case .small, .medium: + case .size24, .size32: return GlobalTokens.borderRadius(.medium) - case .large, .xlarge: + case .size40, .size56: return GlobalTokens.borderRadius(.large) - case .xxlarge: + case .size72: return GlobalTokens.borderRadius(.xLarge) } } @@ -95,17 +97,17 @@ public class AvatarTokenSet: ControlTokenSet { case .textFont: return .fontInfo({ switch size() { - case .xsmall: + case .size16, .size20: return .init(size: 9, weight: GlobalTokens.fontWeight(.regular)) - case .small: + case .size24: return theme.aliasTokens.typography[.caption2] - case .medium: + case .size32: return theme.aliasTokens.typography[.caption1] - case .large: + case .size40: return theme.aliasTokens.typography[.body2] - case .xlarge: + case .size56: return .init(size: GlobalTokens.fontSize(.size500), weight: GlobalTokens.fontWeight(.regular)) - case .xxlarge: + case .size72: return .init(size: GlobalTokens.fontSize(.size700), weight: GlobalTokens.fontWeight(.semibold)) } }) @@ -132,11 +134,11 @@ public class AvatarTokenSet: ControlTokenSet { case .ringThickness: return .float({ switch size() { - case .xsmall, .small: + case .size16, .size20, .size24: return GlobalTokens.borderSize(.thin) - case .medium, .large, .xlarge: + case .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } }) @@ -144,9 +146,9 @@ public class AvatarTokenSet: ControlTokenSet { case .ringInnerGap: return .float({ switch size() { - case .xsmall, .small, .medium, .large, .xlarge: + case .size16, .size20, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } }) @@ -154,9 +156,9 @@ public class AvatarTokenSet: ControlTokenSet { case .ringOuterGap: return .float({ switch size() { - case .xsmall, .small, .medium, .large, .xlarge: + case .size16, .size20, .size24, .size32, .size40, .size56: return GlobalTokens.borderSize(.thick) - case .xxlarge: + case .size72: return GlobalTokens.borderSize(.thicker) } }) @@ -164,13 +166,13 @@ public class AvatarTokenSet: ControlTokenSet { case .presenceIconSize: return .float({ switch size() { - case .xsmall: + case .size16: return 0 - case .small, .medium: + case .size20, .size24, .size32: return GlobalTokens.iconSize(.xxxSmall) - case .large, .xlarge: + case .size40, .size56: return GlobalTokens.iconSize(.xxSmall) - case .xxlarge: + case .size72: return GlobalTokens.iconSize(.small) } }) @@ -178,9 +180,9 @@ public class AvatarTokenSet: ControlTokenSet { case .presenceIconOutlineThickness: return .float({ switch size() { - case .xsmall: + case .size16: return GlobalTokens.borderSize(.none) - case .small, .medium, .large, .xlarge, .xxlarge: + case .size20, .size24, .size32, .size40, .size56, .size72: return GlobalTokens.borderSize(.thick) } }) @@ -244,10 +246,11 @@ public class AvatarTokenSet: ControlTokenSet { /// Pre-defined sizes of the avatar @objc public enum MSFAvatarSize: Int, CaseIterable { - case xsmall - case small - case medium - case large - case xlarge - case xxlarge + case size16 + case size20 + case size24 + case size32 + case size40 + case size56 + case size72 } diff --git a/ios/FluentUI/AvatarGroup/AvatarGroupTokenSet.swift b/ios/FluentUI/AvatarGroup/AvatarGroupTokenSet.swift index 20170de353..6d2ec76a1c 100644 --- a/ios/FluentUI/AvatarGroup/AvatarGroupTokenSet.swift +++ b/ios/FluentUI/AvatarGroup/AvatarGroupTokenSet.swift @@ -24,21 +24,21 @@ public class AvatarGroupTokenSet: ControlTokenSet { switch style() { case .stack: switch size() { - case .xsmall, .small: + case .size16, .size20, .size24: return -GlobalTokens.spacing(.xxxSmall) - case .medium: + case .size32: return -GlobalTokens.spacing(.xxSmall) - case .large: + case .size40: return -GlobalTokens.spacing(.xSmall) - case .xlarge, .xxlarge: + case .size56, .size72: return -GlobalTokens.spacing(.small) } case .pile: switch size() { - case .xsmall, .small: + case .size16, .size20, .size24: return GlobalTokens.spacing(.xxSmall) - case .medium, .large, .xlarge, .xxlarge: + case .size32, .size40, .size56, .size72: return GlobalTokens.spacing(.xSmall) } } diff --git a/ios/FluentUI/PersonaButton/PersonaButtonTokenSet.swift b/ios/FluentUI/PersonaButton/PersonaButtonTokenSet.swift index 87efcbdd03..54939ab5e3 100644 --- a/ios/FluentUI/PersonaButton/PersonaButtonTokenSet.swift +++ b/ios/FluentUI/PersonaButton/PersonaButtonTokenSet.swift @@ -13,9 +13,9 @@ import UIKit var avatarSize: MSFAvatarSize { switch self { case .large: - return .xxlarge + return .size72 case .small: - return .xlarge + return .size56 } } From a357306ea421951caf1d22d9e32d6cbf440976be Mon Sep 17 00:00:00 2001 From: Lamine Male <106181067+laminesm@users.noreply.github.com> Date: Tue, 13 Sep 2022 13:41:17 -0700 Subject: [PATCH 6/6] Moved size tokens outside of AvatarTokenSet to fix conflicts --- ios/FluentUI/Avatar/AvatarTokenSet.swift | 58 ++++++------------------ 1 file changed, 13 insertions(+), 45 deletions(-) diff --git a/ios/FluentUI/Avatar/AvatarTokenSet.swift b/ios/FluentUI/Avatar/AvatarTokenSet.swift index b5324da64b..e5a09453bf 100644 --- a/ios/FluentUI/Avatar/AvatarTokenSet.swift +++ b/ios/FluentUI/Avatar/AvatarTokenSet.swift @@ -49,26 +49,6 @@ public class AvatarTokenSet: ControlTokenSet { self.size = size super.init { [style, size] token, theme in switch token { - case .avatarSize: - return .float({ - switch size() { - case .size16: - return 16 - case .size20: - return 20 - case .size24: - return 24 - case .size32: - return 32 - case .size40: - return 40 - case .size56: - return 56 - case .size72: - return 72 - } - }) - case .borderRadius: return .float({ switch style() { @@ -157,20 +137,6 @@ public class AvatarTokenSet: ControlTokenSet { } }) - case .presenceIconSize: - return .float({ - switch size() { - case .size16: - return 0 - case .size20, .size24, .size32: - return GlobalTokens.iconSize(.xxxSmall) - case .size40, .size56: - return GlobalTokens.iconSize(.xxSmall) - case .size72: - return GlobalTokens.iconSize(.small) - } - }) - case .presenceIconOutlineThickness: return .float({ switch size() { @@ -235,17 +201,19 @@ extension AvatarTokenSet { /// The size of the content of the `Avatar`. static func avatarSize(_ size: MSFAvatarSize) -> CGFloat { switch size { - case .xsmall: + case .size16: return 16 - case .small: + case .size20: + return 20 + case .size24: return 24 - case .medium: + case .size32: return 32 - case .large: + case .size40: return 40 - case .xlarge: - return 52 - case .xxlarge: + case .size56: + return 56 + case .size72: return 72 } } @@ -253,13 +221,13 @@ extension AvatarTokenSet { /// The size of the presence icon. static func presenceIconSize(_ size: MSFAvatarSize) -> CGFloat { switch size { - case .xsmall: + case .size16: return 0 - case .small, .medium: + case .size20, .size24, .size32: return GlobalTokens.iconSize(.xxxSmall) - case .large, .xlarge: + case .size40, .size56: return GlobalTokens.iconSize(.xxSmall) - case .xxlarge: + case .size72: return GlobalTokens.iconSize(.small) } }