Native Editor - Input view design + icon work

Components/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarButton.swift

@@ -5,10 +5,8 @@ class WKEditorToolbarButton: WKComponentView {
 
     // MARK: - Properties
 
-    private lazy var button: UIButton = {
-        let button = UIButton(type: .custom)
-        return button
-    }()
+    private var button: UIButton?
+    private var image: UIImage?
 
     // MARK: - Lifecycle
 
@@ -23,6 +21,13 @@ class WKEditorToolbarButton: WKComponentView {
     }
 
     private func setup() {
+
+        button = createButton()
+
+        guard let button else {
+            return
+        }
+
         layer.cornerRadius = 4
         clipsToBounds = true
 
@@ -39,8 +44,6 @@ class WKEditorToolbarButton: WKComponentView {
             button.topAnchor.constraint(equalTo: topAnchor),
             button.bottomAnchor.constraint(equalTo: bottomAnchor)
         ])
-
-        updateColors()
     }
 
     // MARK: - Overrides
@@ -52,49 +55,87 @@ class WKEditorToolbarButton: WKComponentView {
     }
 
     override func appEnvironmentDidChange() {
-        updateColors()
+
+        guard let button else {
+            return
+        }
+
+        let buttonConfig = createButtonConfig(image: image)
+        button.configuration = buttonConfig
+        button.configurationUpdateHandler = buttonConfigurationUpdateHandler(button:)
     }
 
     // MARK: - Button passthrough methods
 
     var isSelected: Bool {
         get {
-            return button.isSelected
+            return button?.isSelected ?? false
         }
         set {
-            button.isSelected = newValue
-            updateColors()
-            accessibilityTraits = button.accessibilityTraits
+            button?.isSelected = newValue
+            accessibilityTraits = button?.accessibilityTraits ?? []
         }
     }
 
     var isEnabled: Bool {
         get {
-            return button.isEnabled
+            return button?.isEnabled ?? true
         }
         set {
-            button.isEnabled = newValue
-            updateColors()
-            accessibilityTraits = button.accessibilityTraits
+            button?.isEnabled = newValue
+            accessibilityTraits = button?.accessibilityTraits ?? []
         }
     }
 
-    func setImage(_ image: UIImage?, for state: UIControl.State) {
-        button.setImage(image, for: state)
+    func setImage(_ image: UIImage?) {
+
+        guard let button else {
+            return
+        }
+
+        self.image = image
+
+        var buttonConfig = button.configuration
+        buttonConfig?.image = image
+        button.configuration = buttonConfig
     }
 
     func addTarget(_ target: Any?, action: Selector, for controlEvent: UIControl.Event) {
-        button.addTarget(target, action: action, for: controlEvent)
+        button?.addTarget(target, action: action, for: controlEvent)
     }
 
     func removeTarget(_ target: Any?, action: Selector?, for controlEvent: UIControl.Event) {
-        button.removeTarget(target, action: action, for: controlEvent)
+        button?.removeTarget(target, action: action, for: controlEvent)
     }
 
     // MARK: - Private Helpers
 
-    func updateColors() {
-        button.tintColor = isSelected ? WKAppEnvironment.current.theme.inputAccessoryButtonSelectedTint : WKAppEnvironment.current.theme.inputAccessoryButtonTint
-        backgroundColor = self.isSelected ? WKAppEnvironment.current.theme.inputAccessoryButtonSelectedBackgroundColor : .clear
+    private func createButtonConfig(image: UIImage? = nil) -> UIButton.Configuration {
+        var buttonConfig = UIButton.Configuration.plain()
+
+        buttonConfig.baseForegroundColor = (button?.isSelected ?? false) ? theme.inputAccessoryButtonSelectedTint : theme.inputAccessoryButtonTint
+        buttonConfig.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
+        buttonConfig.background.cornerRadius = 0
+        if let image {
+            buttonConfig.image = image
+        }
+
+        return buttonConfig
+    }
+
+    private func buttonConfigurationUpdateHandler(button: UIButton) {
+        var buttonConfig = button.configuration
+        buttonConfig?.baseForegroundColor = button.isSelected ? theme.inputAccessoryButtonSelectedTint : theme.inputAccessoryButtonTint
+        buttonConfig?.background.backgroundColor = button.isSelected ? theme.inputAccessoryButtonSelectedBackgroundColor : theme.accessoryBackground
+        button.configuration = buttonConfig
+    }
+
+    private func createButton() -> UIButton {
+
+        let buttonConfig = createButtonConfig()
+        let button = UIButton(configuration: buttonConfig)
+        button.configurationUpdateHandler = buttonConfigurationUpdateHandler(button:)
+
+        return button
     }
 }

Components/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarView.swift

@@ -14,6 +14,7 @@ class WKEditorToolbarView: WKComponentView {
         super.awakeFromNib()
         accessibilityElements = buttons
         updateColors()
+        maximumContentSizeCategory = .accessibilityMedium
     }
 
     // MARK: - Overrides

Components/Sources/Components/Components/Editors/Common Views/Input Accessory Views/Expanding/WKEditorToolbarExpandingView.swift

@@ -86,63 +86,63 @@ class WKEditorToolbarExpandingView: WKEditorToolbarView {
         expandButton.addTarget(self, action: #selector(tappedExpand), for: .touchUpInside)
         expandButton.isAccessibilityElement = false
 
-        formatTextButton.setImage(WKIcon.formatText, for: .normal)
+        formatTextButton.setImage(WKIcon.formatText)
         formatTextButton.addTarget(self, action: #selector(tappedFormatText), for: .touchUpInside)
         formatTextButton.accessibilityIdentifier = WKSourceEditorAccessibilityIdentifiers.current?.formatTextButton
         formatTextButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonFormatText
 
-        referenceButton.setImage(WKSFSymbolIcon.for(symbol: .quoteOpening), for: .normal)
+        referenceButton.setImage(WKSFSymbolIcon.for(symbol: .quoteOpening))
         referenceButton.addTarget(self, action: #selector(tappedReference), for: .touchUpInside)
         referenceButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonCitation
 
-        linkButton.setImage(WKSFSymbolIcon.for(symbol: .link), for: .normal)
+        linkButton.setImage(WKSFSymbolIcon.for(symbol: .link))
         linkButton.addTarget(self, action: #selector(tappedLink), for: .touchUpInside)
         linkButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonLink
 
-        templateButton.setImage(WKSFSymbolIcon.for(symbol: .curlybraces), for: .normal)
+        templateButton.setImage(WKSFSymbolIcon.for(symbol: .curlybraces))
         templateButton.addTarget(self, action: #selector(tappedTemplate), for: .touchUpInside)
         templateButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonTemplate
 
-        imageButton.setImage(WKSFSymbolIcon.for(symbol: .photo), for: .normal)
+        imageButton.setImage(WKSFSymbolIcon.for(symbol: .photo))
         imageButton.addTarget(self, action: #selector(tappedMedia), for: .touchUpInside)
         imageButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonMedia
 
-        findInPageButton.setImage(WKSFSymbolIcon.for(symbol: .docTextMagnifyingGlass), for: .normal)
+        findInPageButton.setImage(WKSFSymbolIcon.for(symbol: .docTextMagnifyingGlass))
         findInPageButton.addTarget(self, action: #selector(tappedFindInPage), for: .touchUpInside)
         findInPageButton.accessibilityIdentifier = WKSourceEditorAccessibilityIdentifiers.current?.findButton
         findInPageButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonFind
 
-        unorderedListButton.setImage(WKSFSymbolIcon.for(symbol: .listBullet), for: .normal)
+        unorderedListButton.setImage(WKSFSymbolIcon.for(symbol: .listBullet))
         unorderedListButton.addTarget(self, action: #selector(tappedUnorderedList), for: .touchUpInside)
         unorderedListButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonListUnordered
 
-        orderedListButton.setImage(WKSFSymbolIcon.for(symbol: .listNumber), for: .normal)
+        orderedListButton.setImage(WKSFSymbolIcon.for(symbol: .listNumber))
         orderedListButton.addTarget(self, action: #selector(tappedOrderedList), for: .touchUpInside)
         orderedListButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonListOrdered
 
-        decreaseIndentionButton.setImage(WKSFSymbolIcon.for(symbol: .decreaseIndent), for: .normal)
+        decreaseIndentionButton.setImage(WKSFSymbolIcon.for(symbol: .decreaseIndent))
         decreaseIndentionButton.addTarget(self, action: #selector(tappedDecreaseIndentation), for: .touchUpInside)
         decreaseIndentionButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonDecreaseIndent
         decreaseIndentionButton.isEnabled = false
 
-        increaseIndentionButton.setImage(WKSFSymbolIcon.for(symbol: .increaseIndent), for: .normal)
+        increaseIndentionButton.setImage(WKSFSymbolIcon.for(symbol: .increaseIndent))
         increaseIndentionButton.addTarget(self, action: #selector(tappedIncreaseIndentation), for: .touchUpInside)
         increaseIndentionButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonInceaseIndent
         increaseIndentionButton.isEnabled = false
 
-        cursorUpButton.setImage(WKSFSymbolIcon.for(symbol: .chevronUp), for: .normal)
+        cursorUpButton.setImage(WKSFSymbolIcon.for(symbol: .chevronUp))
         cursorUpButton.addTarget(self, action: #selector(tappedCursorUp), for: .touchUpInside)
         cursorUpButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonCursorUp
 
-        cursorDownButton.setImage(WKSFSymbolIcon.for(symbol: .chevronDown), for: .normal)
+        cursorDownButton.setImage(WKSFSymbolIcon.for(symbol: .chevronDown))
         cursorDownButton.addTarget(self, action: #selector(tappedCursorDown), for: .touchUpInside)
         cursorDownButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonCursorDown
 
-        cursorLeftButton.setImage(WKSFSymbolIcon.for(symbol: .chevronBackward), for: .normal)
+        cursorLeftButton.setImage(WKSFSymbolIcon.for(symbol: .chevronBackward))
         cursorLeftButton.addTarget(self, action: #selector(tappedCursorLeft), for: .touchUpInside)
         cursorLeftButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonCursorLeft
 
-        cursorRightButton.setImage(WKSFSymbolIcon.for(symbol: .chevronForward), for: .normal)
+        cursorRightButton.setImage(WKSFSymbolIcon.for(symbol: .chevronForward))
         cursorRightButton.addTarget(self, action: #selector(tappedCursorRight), for: .touchUpInside)
         cursorRightButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelButtonCursorRight
 

Components/Sources/Components/Components/Editors/Common Views/Input Accessory Views/Highlight/WKEditorToolbarHighlightView.swift

@@ -32,23 +32,23 @@ class WKEditorToolbarHighlightView: WKEditorToolbarView {
         stackView.isLayoutMarginsRelativeArrangement = true
         stackView.layoutMargins = UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0)
 
-        boldButton.setImage(WKSFSymbolIcon.for(symbol: .bold), for: .normal)
+        boldButton.setImage(WKSFSymbolIcon.for(symbol: .bold))
         boldButton.addTarget(self, action: #selector(tappedBold), for: .touchUpInside)
         boldButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current?.accessibilityLabelButtonBold
 
-        italicsButton.setImage(WKSFSymbolIcon.for(symbol: .italic), for: .normal)
+        italicsButton.setImage(WKSFSymbolIcon.for(symbol: .italic))
         italicsButton.addTarget(self, action: #selector(tappedItalics), for: .touchUpInside)
         italicsButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current?.accessibilityLabelButtonItalics
 
-        referenceButton.setImage(WKSFSymbolIcon.for(symbol: .quoteOpening), for: .normal)
+        referenceButton.setImage(WKSFSymbolIcon.for(symbol: .quoteOpening))
         referenceButton.addTarget(self, action: #selector(tappedReference), for: .touchUpInside)
         referenceButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current?.accessibilityLabelButtonCitation
 
-        linkButton.setImage(WKSFSymbolIcon.for(symbol: .link), for: .normal)
+        linkButton.setImage(WKSFSymbolIcon.for(symbol: .link))
         linkButton.addTarget(self, action: #selector(tappedLink), for: .touchUpInside)
         linkButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current?.accessibilityLabelButtonLink
 
-        templateButton.setImage(WKSFSymbolIcon.for(symbol: .curlybraces), for: .normal)
+        templateButton.setImage(WKSFSymbolIcon.for(symbol: .curlybraces))
         templateButton.addTarget(self, action: #selector(tappedTemplate), for: .touchUpInside)
         templateButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current?.accessibilityLabelButtonTemplate
         showMoreButton.setImage(WKSFSymbolIcon.for(symbol: .plusCircleFill), for: .normal)

Components/Sources/Components/Components/Editors/Common Views/WKEditorToolbarNavigatorButton.swift

@@ -4,11 +4,9 @@ import UIKit
 class WKEditorToolbarNavigatorButton: WKComponentView {
 
     // MARK: - Properties
-
-    private lazy var button: UIButton = {
-        let button = UIButton(type: .custom)
-        return button
-    }()
+
+    private var button: UIButton?
+    private var image: UIImage?
 
     // MARK: - Lifecycle
 
@@ -23,6 +21,12 @@ class WKEditorToolbarNavigatorButton: WKComponentView {
     }
 
     private func setup() {
+        button = createButton()
+
+        guard let button else {
+            return
+        }
+
         isAccessibilityElement = true
         accessibilityTraits = [.button]
         button.isAccessibilityElement = false
@@ -36,21 +40,69 @@ class WKEditorToolbarNavigatorButton: WKComponentView {
             button.topAnchor.constraint(equalTo: topAnchor),
             button.bottomAnchor.constraint(equalTo: bottomAnchor)
         ])
+    }
+
+    // MARK: - Overrides
+
+    override var intrinsicContentSize: CGSize {
+        // Increase touch targets & make widths more consistent
+        let superSize = super.intrinsicContentSize
+        return CGSize(width: max(superSize.width, 36), height: max(superSize.height, 36))
+    }
+
+    override func appEnvironmentDidChange() {
+
+        guard let button else {
+            return
+        }
 
-        button.imageView?.contentMode = .scaleAspectFit
+        let buttonConfig = createButtonConfig(image: image)
+        button.configuration = buttonConfig
     }
 
     // MARK: - Button passthrough methods
 
     func setImage(_ image: UIImage?, for state: UIControl.State) {
-        button.setImage(image, for: state)
+
+        guard let button else {
+            return
+        }
+
+        self.image = image
+
+        var buttonConfig = button.configuration
+        buttonConfig?.image = image
+        button.configuration = buttonConfig
     }
 
     func addTarget(_ target: Any?, action: Selector, for controlEvent: UIControl.Event) {
-        button.addTarget(target, action: action, for: controlEvent)
+        button?.addTarget(target, action: action, for: controlEvent)
     }
 
     func removeTarget(_ target: Any?, action: Selector?, for controlEvent: UIControl.Event) {
-        button.removeTarget(target, action: action, for: controlEvent)
+        button?.removeTarget(target, action: action, for: controlEvent)
+    }
+
+    // MARK: - Private Helpers
+
+    private func createButtonConfig(image: UIImage? = nil) -> UIButton.Configuration {
+        var buttonConfig = UIButton.Configuration.plain()
+
+        buttonConfig.baseForegroundColor = theme.link
+        buttonConfig.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
+        buttonConfig.background.cornerRadius = 0
+        if let image {
+            buttonConfig.image = image
+        }
+
+        return buttonConfig
+    }
+
+    private func createButton() -> UIButton {
+
+        let buttonConfig = createButtonConfig()
+        let button = UIButton(configuration: buttonConfig)
+
+        return button
     }
 }

Components/Sources/Components/Components/Onboarding/WKOnboardingView.swift

@@ -25,7 +25,7 @@ public struct WKOnboardingView: View {
             ScrollView(showsIndicators: true) {
                 VStack {
                     Text(viewModel.title)
-                        .font(Font(WKFont.for(.boldTitle)))
+                        .font(Font(WKFont.for(.boldTitle1)))
                         .foregroundColor(Color(appEnvironment.theme.text))
                         .padding([.bottom, .top], 44)
                         .multilineTextAlignment(.center)

Components/Sources/Components/Components/Shared/WKCheckmarkView.swift

@@ -23,7 +23,7 @@ struct WKCheckmarkView: View {
     private var uiImage: UIImage? {
         switch configuration.style {
         case .checkbox:
-            return isSelected ? WKSFSymbolIcon.for(symbol: .checkmarkSquareFill, font: .subheadline) : WKSFSymbolIcon.for(symbol: .square, font: .subheadline)
+            return isSelected ? WKSFSymbolIcon.for(symbol: .checkmarkSquareFill) : WKSFSymbolIcon.for(symbol: .square)
         case .`default`:
             return isSelected ? WKSFSymbolIcon.for(symbol: .checkmark, font: .boldFootnote) : nil
         }

Components/Sources/Components/Components/Shared/WKPriceTextField.swift

@@ -22,7 +22,7 @@ struct WKPriceTextField: View {
     var body: some View {
         TextField("", value: $amount, format: .currency(code: configuration.currencyCode))
             .keyboardType(.decimalPad)
-            .font(Font(WKFont.for(.boldTitle)))
+            .font(Font(WKFont.for(.boldTitle1)))
             .foregroundColor(Color(appEnvironment.theme.text))
             .padding(5)
             .background(