Skip to content
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
4f2f048
Use UIButton.Configuration on CustomerNote cell
iamgabrielma Nov 11, 2022
2e3a9e8
Update applyLinkButtonStyle() with UIButton.Configuration
iamgabrielma Nov 11, 2022
13ebacd
Update edgeInsets SurveySubmittedViewController
iamgabrielma Nov 11, 2022
f5f359b
Update edgeInsets applySecondaryButtonStyle
iamgabrielma Nov 11, 2022
4a66349
Update paymentsModalCancelButtonStyle edgeInsets
iamgabrielma Nov 11, 2022
3635604
Comment-out calls to pinSubviewToAllEdgeMargins
iamgabrielma Nov 11, 2022
3fb5e8f
Use Button Configuration on applying button style
iamgabrielma Nov 15, 2022
84eba80
Revert testing button backgrounds
iamgabrielma Nov 15, 2022
5450244
Add Configuration to applyLinkButtonStyle
iamgabrielma Nov 15, 2022
028beb1
revert testing button configuration
iamgabrielma Nov 15, 2022
fa02ba8
Add Button Configuration to VerticalButton
iamgabrielma Nov 15, 2022
ad6678a
Add ButtonConfiguration to EmptyStateViewController
iamgabrielma Nov 15, 2022
bc3c27e
Add ButtonConfiguration to CustomerNoteTableViewCell
iamgabrielma Nov 15, 2022
7490c9f
Add ButtonConfiguration to FilteredOrdersHeaderBar
iamgabrielma Nov 15, 2022
1a40698
Add Configuration to SurveySubmittedViewController
iamgabrielma Nov 15, 2022
dba89ac
Add label as subview to UIButton
iamgabrielma Nov 15, 2022
cf68aa2
Remove unnecessary var
iamgabrielma Nov 15, 2022
87d67d8
Add label as subview on UIActivityIndicatorView
iamgabrielma Nov 16, 2022
3fb678b
Change CustomerNote button configuration to plain
iamgabrielma Nov 16, 2022
a6df43f
Rename constants for readability
iamgabrielma Nov 18, 2022
db0bd1d
Removed custom init from ButtonActivityIndicator
iamgabrielma Nov 23, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 40 additions & 6 deletions WooCommerce/Classes/Extensions/UIButton+Helpers.swift
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@ extension UIButton {
/// Applies the Primary Button Style: Solid BG!
///
func applyPrimaryButtonStyle() {
contentEdgeInsets = Style.defaultEdgeInsets
var configuration = UIButton.Configuration.filled()
configuration.contentInsets = .init(
top: Style.defaultVerticalInsets,
leading: Style.defaultHorizontalInsets,
bottom: Style.defaultVerticalInsets,
trailing: Style.defaultHorizontalInsets
)
layer.borderColor = UIColor.primaryButtonBorder.cgColor
layer.borderWidth = Style.defaultBorderWidth
layer.cornerRadius = Style.defaultCornerRadius
Expand Down Expand Up @@ -39,8 +45,14 @@ extension UIButton {
/// Applies the Secondary Button Style: Clear BG / Bordered Outline
///
func applySecondaryButtonStyle() {
var configuration = UIButton.Configuration.filled()
configuration.contentInsets = .init(
top: Style.defaultVerticalInsets,
leading: Style.defaultHorizontalInsets,
bottom: Style.defaultVerticalInsets,
trailing: Style.defaultHorizontalInsets
)
backgroundColor = .secondaryButtonBackground
contentEdgeInsets = Style.defaultEdgeInsets
layer.borderColor = UIColor.secondaryButtonBorder.cgColor
layer.borderWidth = Style.defaultBorderWidth
layer.cornerRadius = Style.defaultCornerRadius
Expand Down Expand Up @@ -71,8 +83,14 @@ extension UIButton {
/// Applies the Link Button Style: Clear BG / Brand Text Color
///
func applyLinkButtonStyle(enableMultipleLines: Bool = false) {
var configuration = UIButton.Configuration.plain()
configuration.contentInsets = .init(
top: Style.defaultVerticalInsets,
leading: Style.defaultHorizontalInsets,
bottom: Style.defaultVerticalInsets,
trailing: Style.defaultHorizontalInsets
)
backgroundColor = .clear
contentEdgeInsets = Style.defaultEdgeInsets
tintColor = .accent
titleLabel?.applyBodyStyle()
titleLabel?.textAlignment = .natural
Expand All @@ -95,8 +113,14 @@ extension UIButton {
}

func applyPaymentsModalCancelButtonStyle() {
var configuration = UIButton.Configuration.plain()
configuration.contentInsets = .init(
top: Style.defaultVerticalInsets,
leading: Style.defaultHorizontalInsets,
bottom: Style.defaultVerticalInsets,
trailing: Style.defaultHorizontalInsets
)
backgroundColor = .tertiarySystemBackground
contentEdgeInsets = Style.defaultEdgeInsets
layer.borderColor = UIColor.secondaryButtonBorder.cgColor
layer.borderWidth = Style.defaultBorderWidth
layer.cornerRadius = Style.defaultCornerRadius
Expand Down Expand Up @@ -147,7 +171,16 @@ extension UIButton {
private func enableMultipleLines() {
titleLabel?.lineBreakMode = .byWordWrapping
if let label = titleLabel {
pinSubviewToAllEdgeMargins(label)
if self.subviews.contains(where: { $0 == label }) {
pinSubviewToAllEdgeMargins(label)
} else {
DDLogWarn("""
Failed attempt to pin button's title to the edges.
This is likely because the custom button title label was not added to its view hierarchy
See ButtonActivityIndicator as an example
"""
)
}
}
}
}
Expand All @@ -160,6 +193,7 @@ private extension UIButton {
struct Style {
static let defaultCornerRadius = CGFloat(8.0)
static let defaultBorderWidth = CGFloat(1.0)
static let defaultEdgeInsets = UIEdgeInsets(top: 12, left: 22, bottom: 12, right: 22)
static let defaultVerticalInsets = CGFloat(12)
static let defaultHorizontalInsets = CGFloat(22)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: since now it's a single value instead of UIEdgeInsets type, should we rename both constants to something like Inset or Padding?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely! That reads much better. Changed on a6df43f along with the other nits 🙇

}
}
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,9 @@ private extension CustomerNoteTableViewCell {
addButton.setImage(.plusImage, for: .normal)
addButton.contentHorizontalAlignment = .leading
addButton.contentVerticalAlignment = .bottom
addButton.contentEdgeInsets = .zero
var configuration = UIButton.Configuration.plain()
configuration.contentInsets = .init(.zero)
addButton.configuration = configuration
addButton.distributeTitleAndImage(spacing: Constants.buttonTitleAndImageSpacing)
addButton.addTarget(self, action: #selector(addButtonTapped), for: .touchUpInside)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ private extension FilteredOrdersHeaderBar {
String.localizedStringWithFormat(Localization.buttonWithActiveFilters, numberOfFilters)

filterButton.setTitle(title, for: .normal)
filterButton.contentEdgeInsets = .zero
var configuration = UIButton.Configuration.filled()
configuration.contentInsets = .init(.zero)
filterButton.accessibilityIdentifier = "orders-filter-button"
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,24 @@ final class ButtonActivityIndicator: UIButton {

private let indicator: UIActivityIndicatorView = UIActivityIndicatorView(style: .medium)

// We're adding the UILabel as subview in order to avoid a crash when
// using large system fonts for accessibility. Trying to adapt the label
// to its container will fail as these do not share ancestor
// https://github.com/woocommerce/woocommerce-ios/pull/8094
override init(frame: CGRect) {
super.init(frame: frame)
if let titleLabel {
addSubview(titleLabel)
}
}

required init?(coder: NSCoder) {
super.init(coder: coder)
if let titleLabel {
addSubview(titleLabel)
}
}

override func layoutSubviews() {
super.layoutSubviews()

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,8 @@ private extension EmptyStateViewController {
case .withSupportRequest(_, _, _, let buttonTitle, _):
actionButton.isHidden = false
actionButton.applyLinkButtonStyle()
actionButton.contentEdgeInsets = .zero
var configuration = UIButton.Configuration.filled()
configuration.contentInsets = .init(.zero)
actionButton.setTitle(buttonTitle, for: .normal)
}
}
Expand Down
19 changes: 14 additions & 5 deletions WooCommerce/Classes/ViewRelated/ReusableViews/VerticalButton.swift
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@ class VerticalButton: UIButton {

override func awakeFromNib() {
super.awakeFromNib()

contentEdgeInsets = Settings.edgeInsets
layer.cornerRadius = Settings.cornerRadius
titleLabel?.font = UIFont.footnote
configureButton()
}

override func layoutSubviews() {
Expand Down Expand Up @@ -42,6 +39,18 @@ class VerticalButton: UIButton {
width: titleSize.width,
height: titleSize.height).integral
}

private func configureButton() {
var configuration = UIButton.Configuration.filled()
configuration.contentInsets = .init(
top: .zero,
leading: Settings.horizontalEdgeInsets,
bottom: .zero,
trailing: Settings.horizontalEdgeInsets
)
layer.cornerRadius = Settings.cornerRadius
titleLabel?.font = UIFont.footnote
}
}


Expand All @@ -51,7 +60,7 @@ private extension VerticalButton {

enum Settings {
static let cornerRadius = CGFloat(10)
static let edgeInsets = UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0)
static let horizontalEdgeInsets = CGFloat(5)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: same as above, renaming single value to Inset or Padding can improve readability

static let labelPaddingTop = CGFloat(2)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ private extension SurveySubmittedViewController {

contactUsButton.applyLinkButtonStyle()
contactUsButton.titleLabel?.applyCalloutStyle()
contactUsButton.contentEdgeInsets = .zero
var contactUsconfiguration = UIButton.Configuration.plain()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
var contactUsconfiguration = UIButton.Configuration.plain()
var contactUsConfiguration = UIButton.Configuration.plain()

contactUsconfiguration.contentInsets = .init(.zero)
contactUsButton.configuration = contactUsconfiguration
}

/// Apply the correspondent localized texts to each component
Expand Down