Skip to content

Commit 7e5efea

Browse files
joannaquujoannaquu
authored
[WIP] Add CommandBarItemGroup labels (#2143)
* add labels * update podspec
1 parent ab4ccb0 commit 7e5efea

8 files changed

Lines changed: 97 additions & 31 deletions

File tree

‎Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/CommandBarDemoController.swift‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -339,10 +339,8 @@ class CommandBarDemoController: DemoController {
339339
]
340340
]
341341

342-
let itemGroups: [CommandBarItemGroup] = commandGroups.map { commandGroup in
343-
commandGroup.map { command in
344-
newItem(for: command)
345-
}
342+
let itemGroups: [CommandBarItemGroup] = commandGroups.map {
343+
CommandBarItemGroup($0.map { newItem(for: $0) })
346344
}
347345

348346
itemGroups[0][1].isEnabled = false

‎Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/MultilineCommandBarDemoController.swift‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,26 +42,22 @@ class MultilineCommandBarDemoController: DemoController {
4242
)
4343
}
4444
}
45+
let fontsGroup = CommandBarItemGroup(commandBarItems[0...3])
46+
let textStylesGroup = CommandBarItemGroup(commandBarItems[4...7])
47+
let listsGroup = CommandBarItemGroup(commandBarItems[8...11])
48+
let editGroup = CommandBarItemGroup(commandBarItems[12...13])
49+
let addGroup = CommandBarItemGroup([commandBarItems[14]])
50+
4551
let compactRows: [MultilineCommandBarRow] = [
46-
MultilineCommandBarRow(itemGroups: [[commandBarItems[0]],
47-
[commandBarItems[1]],
48-
[commandBarItems[2]],
49-
[commandBarItems[3]]], isScrollable: true),
50-
MultilineCommandBarRow(itemGroups: [Array(commandBarItems[4...7])]),
51-
MultilineCommandBarRow(itemGroups: [Array(commandBarItems[8...11])]),
52-
MultilineCommandBarRow(itemGroups: [Array(commandBarItems[12...13]),
53-
[commandBarItems[14]]])
52+
MultilineCommandBarRow(itemGroups: [fontsGroup], isScrollable: true),
53+
MultilineCommandBarRow(itemGroups: [textStylesGroup]),
54+
MultilineCommandBarRow(itemGroups: [listsGroup]),
55+
MultilineCommandBarRow(itemGroups: [editGroup, addGroup])
5456
]
5557

5658
let regularRows: [MultilineCommandBarRow] = [
57-
MultilineCommandBarRow(itemGroups: [[commandBarItems[0]],
58-
[commandBarItems[1]],
59-
[commandBarItems[2]],
60-
[commandBarItems[3]]], isScrollable: true),
61-
MultilineCommandBarRow(itemGroups: [Array(commandBarItems[4...7]),
62-
Array(commandBarItems[8...11]),
63-
Array(commandBarItems[12...13]),
64-
[commandBarItems[14]]])
59+
MultilineCommandBarRow(itemGroups: [fontsGroup], isScrollable: true),
60+
MultilineCommandBarRow(itemGroups: [textStylesGroup, listsGroup, editGroup, addGroup])
6561
]
6662

6763
return MultilineCommandBar(compactRows: compactRows, regularRows: regularRows)

‎MicrosoftFluentUI.podspec‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ Pod::Spec.new do |s|
106106
s.subspec 'CommandBar_ios' do |commandbar_ios|
107107
commandbar_ios.platform = :ios
108108
commandbar_ios.dependency "#{s.name}/Core_ios"
109+
commandbar_ios.dependency "#{s.name}/Label_ios"
109110
commandbar_ios.source_files = ["#{ios_root}/#{components_dir}/Command Bar/**/*.{swift,h}"]
110111
end
111112

‎Sources/FluentUI_iOS/Components/Command Bar/CommandBarButton.swift‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ class CommandBarButton: UIButton {
5555
buttonConfiguration.background.cornerRadius = 0
5656
configuration = buttonConfiguration
5757

58+
setContentHuggingPriority(.required, for: .horizontal)
59+
setContentCompressionResistancePriority(.required, for: .horizontal)
60+
5861
let accessibilityDescription = item.accessibilityLabel
5962
accessibilityLabel = (accessibilityDescription != nil) ? accessibilityDescription : item.title
6063
accessibilityHint = item.accessibilityHint

‎Sources/FluentUI_iOS/Components/Command Bar/CommandBarButtonGroupView.swift‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,16 @@ import UIKit
77

88
class CommandBarButtonGroupView: UIView {
99
let buttons: [CommandBarButton]
10+
let title: String?
1011

11-
init(buttons: [CommandBarButton], tokenSet: CommandBarTokenSet) {
12+
init(buttons: [CommandBarButton], title: String?, tokenSet: CommandBarTokenSet) {
1213
self.buttons = buttons
14+
self.title = title
1315
self.tokenSet = tokenSet
1416

1517
super.init(frame: .zero)
1618
translatesAutoresizingMaskIntoConstraints = false
1719

18-
clipsToBounds = true
19-
layer.cornerRadius = tokenSet[.groupBorderRadius].float
20-
layer.cornerCurve = .continuous
21-
2220
configureHierarchy()
2321
applyInsets()
2422
hideGroupIfNeeded()
@@ -32,7 +30,7 @@ class CommandBarButtonGroupView: UIView {
3230
/// Hides the group view if all the views inside the `stackView` are hidden
3331
func hideGroupIfNeeded() {
3432
var allViewsHidden = true
35-
for view in stackView.arrangedSubviews {
33+
for view in buttonStackView.arrangedSubviews {
3634
if !view.isHidden {
3735
allViewsHidden = false
3836
break
@@ -44,21 +42,42 @@ class CommandBarButtonGroupView: UIView {
4442

4543
var equalWidthButtons: Bool = false {
4644
didSet {
47-
stackView.distribution = equalWidthButtons ? .fillEqually : .fill
45+
buttonStackView.distribution = equalWidthButtons ? .fillEqually : .fill
4846
}
4947
}
5048

51-
private lazy var stackView: UIStackView = {
49+
private lazy var buttonStackView: UIStackView = {
5250
let stackView = UIStackView(arrangedSubviews: buttons)
5351
stackView.translatesAutoresizingMaskIntoConstraints = false
5452
stackView.axis = .horizontal
5553
stackView.spacing = CommandBarTokenSet.itemInterspace
5654

55+
stackView.clipsToBounds = true
56+
stackView.layer.cornerRadius = tokenSet[.groupBorderRadius].float
57+
stackView.layer.cornerCurve = .continuous
5758
return stackView
5859
}()
5960

61+
private lazy var groupLabel: Label = {
62+
let label = Label(textStyle: .caption2, colorStyle: .regular)
63+
label.text = title
64+
label.translatesAutoresizingMaskIntoConstraints = false
65+
label.setContentHuggingPriority(.required, for: .vertical)
66+
label.lineBreakMode = .byClipping
67+
return label
68+
}()
69+
6070
private func configureHierarchy() {
71+
let stackView = UIStackView()
72+
stackView.translatesAutoresizingMaskIntoConstraints = false
73+
stackView.axis = .vertical
74+
75+
stackView.addArrangedSubview(buttonStackView)
76+
if title != nil {
77+
stackView.addArrangedSubview(groupLabel)
78+
}
6179
addSubview(stackView)
80+
6281
NSLayoutConstraint.activate([
6382
stackView.topAnchor.constraint(equalTo: topAnchor),
6483
stackView.leadingAnchor.constraint(equalTo: leadingAnchor),

‎Sources/FluentUI_iOS/Components/Command Bar/CommandBarCommandGroupsView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ class CommandBarCommandGroupsView: UIView {
6767
return button
6868
}
6969

70-
let group = CommandBarButtonGroupView(buttons: buttons, tokenSet: tokenSet)
70+
let group = CommandBarButtonGroupView(buttons: buttons, title: items.label, tokenSet: tokenSet)
7171

7272
for item in items {
7373
if let button = itemsToButtonsMap[item] {

‎Sources/FluentUI_iOS/Components/Command Bar/CommandBarItem.swift‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55

66
import UIKit
77

8-
public typealias CommandBarItemGroup = [CommandBarItem]
9-
108
@objc(MSFCommandBarItem)
119
open class CommandBarItem: NSObject {
1210
public typealias ItemTappedHandler = ((UIView, CommandBarItem) -> Void)

‎Sources/FluentUI_iOS/Components/Command Bar/CommandBarItemGroup.swift‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
//
2+
// Copyright (c) Microsoft Corporation. All rights reserved.
3+
// Licensed under the MIT License.
4+
//
5+
6+
import UIKit
7+
8+
@objc(MSFCommandBarItemGroup)
9+
public class CommandBarItemGroup: NSObject, ExpressibleByArrayLiteral, Sequence {
10+
public let items: [CommandBarItem]
11+
public let label: String?
12+
13+
/// Initializer for `CommandBarItemGroup`
14+
/// - Parameters:
15+
/// - items: List of `CommandBarItem`s.
16+
/// - label: Label to be shown under the `CommandBarItem`s.
17+
/// - Note: CommandBarItemGroup labels are currently **experimental**.
18+
@objc public init(_ items: [CommandBarItem], label: String? = nil) {
19+
self.items = items
20+
self.label = label
21+
}
22+
23+
/// Convenience initializer for `CommandBarItemGroup`
24+
/// - Parameters:
25+
/// - items: List of `CommandBarItem`s.
26+
/// - label: Label to be shown under the `CommandBarItem`s.
27+
/// - Note: CommandBarItemGroup labels are currently **experimental**.
28+
/// - Example:
29+
/// ```
30+
/// CommandBarItemGroup(commandBarItems[0...3])
31+
/// ```
32+
public convenience init(_ items: ArraySlice<CommandBarItem>, label: String? = nil) {
33+
self.init(Array(items), label: label)
34+
}
35+
36+
/// Initializer for `CommandBarItemGroup` using array literal syntax.
37+
required public init(arrayLiteral elements: CommandBarItem...) {
38+
self.items = elements
39+
self.label = nil
40+
}
41+
42+
/// Sequence protocol conformance. This allows `CommandBarItemGroup` to be used in a for-in loop.
43+
public func makeIterator() -> IndexingIterator<[CommandBarItem]> {
44+
return items.makeIterator()
45+
}
46+
47+
/// Subscript operator for `CommandBarItemGroup`. This allows you to access `CommandBarItem`s with [].
48+
public subscript(index: Int) -> CommandBarItem {
49+
return items[index]
50+
}
51+
}

0 commit comments

Comments
 (0)