diff --git a/WooCommerce/Classes/Extensions/UIButton+Helpers.swift b/WooCommerce/Classes/Extensions/UIButton+Helpers.swift index c8118559489..8e9f83833a8 100644 --- a/WooCommerce/Classes/Extensions/UIButton+Helpers.swift +++ b/WooCommerce/Classes/Extensions/UIButton+Helpers.swift @@ -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.verticalInset, + leading: Style.horizontalInset, + bottom: Style.verticalInset, + trailing: Style.horizontalInset + ) layer.borderColor = UIColor.primaryButtonBorder.cgColor layer.borderWidth = Style.defaultBorderWidth layer.cornerRadius = Style.defaultCornerRadius @@ -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.verticalInset, + leading: Style.horizontalInset, + bottom: Style.verticalInset, + trailing: Style.horizontalInset + ) backgroundColor = .secondaryButtonBackground - contentEdgeInsets = Style.defaultEdgeInsets layer.borderColor = UIColor.secondaryButtonBorder.cgColor layer.borderWidth = Style.defaultBorderWidth layer.cornerRadius = Style.defaultCornerRadius @@ -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.verticalInset, + leading: Style.horizontalInset, + bottom: Style.verticalInset, + trailing: Style.horizontalInset + ) backgroundColor = .clear - contentEdgeInsets = Style.defaultEdgeInsets tintColor = .accent titleLabel?.applyBodyStyle() titleLabel?.textAlignment = .natural @@ -95,8 +113,14 @@ extension UIButton { } func applyPaymentsModalCancelButtonStyle() { + var configuration = UIButton.Configuration.plain() + configuration.contentInsets = .init( + top: Style.verticalInset, + leading: Style.horizontalInset, + bottom: Style.verticalInset, + trailing: Style.horizontalInset + ) backgroundColor = .tertiarySystemBackground - contentEdgeInsets = Style.defaultEdgeInsets layer.borderColor = UIColor.secondaryButtonBorder.cgColor layer.borderWidth = Style.defaultBorderWidth layer.cornerRadius = Style.defaultCornerRadius @@ -147,7 +171,15 @@ 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. + """ + ) + } } } } @@ -160,6 +192,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 verticalInset = CGFloat(12) + static let horizontalInset = CGFloat(22) } } diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerNoteTableViewCell.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerNoteTableViewCell.swift index 9b8d31df1f5..2ace3ee219e 100644 --- a/WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerNoteTableViewCell.swift +++ b/WooCommerce/Classes/ViewRelated/Orders/Order Details/Customer Section/CustomerNoteTableViewCell.swift @@ -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) } diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Filters/FilteredOrdersHeaderBar.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Filters/FilteredOrdersHeaderBar.swift index 0fac3b8ce68..3d73d05f5e2 100644 --- a/WooCommerce/Classes/ViewRelated/Orders/Order Filters/FilteredOrdersHeaderBar.swift +++ b/WooCommerce/Classes/ViewRelated/Orders/Order Filters/FilteredOrdersHeaderBar.swift @@ -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" } diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift index 541e3497e07..ff7e1dc97a6 100644 --- a/WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift +++ b/WooCommerce/Classes/ViewRelated/ReusableViews/EmptyStateViewController/EmptyStateViewController.swift @@ -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) } } diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/VerticalButton.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/VerticalButton.swift index d6b692c5ede..2ac6c9692c9 100644 --- a/WooCommerce/Classes/ViewRelated/ReusableViews/VerticalButton.swift +++ b/WooCommerce/Classes/ViewRelated/ReusableViews/VerticalButton.swift @@ -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() { @@ -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.inset, + bottom: .zero, + trailing: Settings.inset + ) + layer.cornerRadius = Settings.cornerRadius + titleLabel?.font = UIFont.footnote + } } @@ -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 inset = CGFloat(5) static let labelPaddingTop = CGFloat(2) } } diff --git a/WooCommerce/Classes/ViewRelated/Survey/SurveySubmittedViewController.swift b/WooCommerce/Classes/ViewRelated/Survey/SurveySubmittedViewController.swift index 80288f88d6d..e89d977dbdf 100644 --- a/WooCommerce/Classes/ViewRelated/Survey/SurveySubmittedViewController.swift +++ b/WooCommerce/Classes/ViewRelated/Survey/SurveySubmittedViewController.swift @@ -93,7 +93,9 @@ private extension SurveySubmittedViewController { contactUsButton.applyLinkButtonStyle() contactUsButton.titleLabel?.applyCalloutStyle() - contactUsButton.contentEdgeInsets = .zero + var contactUsConfiguration = UIButton.Configuration.plain() + contactUsConfiguration.contentInsets = .init(.zero) + contactUsButton.configuration = contactUsConfiguration } /// Apply the correspondent localized texts to each component