Merge pull request #4729 from wikimedia/native-editor-input-views

Native Editor - Input view design + icon work

Components/Sources/Components/Assets.xcassets/editor/format-text.imageset/Contents.json → Components/Sources/Components/Assets.xcassets/separator.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "format-text.pdf",
+      "filename" : "separator.pdf",
       "idiom" : "universal"
     }
   ],

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
@@ -32,5 +33,10 @@ class WKEditorToolbarView: WKComponentView {
     private func updateColors() {
         tintColor = WKAppEnvironment.current.theme.link
         backgroundColor = WKAppEnvironment.current.theme.accessoryBackground
+
+        layer.shadowOffset = CGSize(width: 0, height: -2)
+        layer.shadowRadius = 10
+        layer.shadowOpacity = 1.0
+        layer.shadowColor = theme.editorKeyboardShadow.cgColor
     }
 }

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

@@ -85,70 +85,77 @@ class WKEditorToolbarExpandingView: WKEditorToolbarView {
         expandButton.setImage(WKSFSymbolIcon.for(symbol: .chevronRightCircle), for: .normal)
         expandButton.addTarget(self, action: #selector(tappedExpand), for: .touchUpInside)
         expandButton.isAccessibilityElement = false
+        updateExpandButtonVisibility()
 
-        formatTextButton.setImage(WKIcon.formatText, for: .normal)
+        formatTextButton.setImage(WKSFSymbolIcon.for(symbol: .textFormat))
         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
 
         NotificationCenter.default.addObserver(self, selector: #selector(updateButtonSelectionState(_:)), name: Notification.WKSourceEditorSelectionState, object: nil)
     }
 
+    // MARK: - Overrides
+
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        updateExpandButtonVisibility()
+    }
+
     // MARK: - Notifications
 
     @objc private func updateButtonSelectionState(_ notification: NSNotification) {
@@ -281,5 +288,11 @@ class WKEditorToolbarExpandingView: WKEditorToolbarView {
     @objc private func tappedMedia() {
         delegate?.toolbarExpandingViewDidTapImage(toolbarView: self)
     }
+
+    // MARK: - Private Helpers
+
+    private func updateExpandButtonVisibility() {
+        expandButton.isHidden = traitCollection.horizontalSizeClass == .regular
+    }
 
 }

Components/Sources/Components/Components/Editors/Common Views/Input Accessory Views/Find and Replace/WKFindAndReplaceView.swift

@@ -54,29 +54,39 @@ class WKFindAndReplaceView: WKComponentView {
 
     override func awakeFromNib() {
         super.awakeFromNib()
+
+        maximumContentSizeCategory = .accessibilityLarge
 
         closeButton.setImage(WKSFSymbolIcon.for(symbol: .close), for: .normal)
         closeButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelFindButtonClose
         previousButton.setImage(WKSFSymbolIcon.for(symbol: .chevronUp), for: .normal)
         previousButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelFindButtonPrevious
+        previousButton.imageView?.contentMode = .center
         nextButton.setImage(WKSFSymbolIcon.for(symbol: .chevronDown), for: .normal)
         nextButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelFindButtonNext
+        nextButton.imageView?.contentMode = .center
 
         replaceButton.setImage(WKIcon.replace, for: .normal)
         replaceButton.accessibilityLabel = String.localizedStringWithFormat(WKSourceEditorLocalizedStrings.current.accessibilityLabelReplaceButtonPerformFormat, WKSourceEditorLocalizedStrings.current.accessibilityLabelReplaceTypeSingle)
+        replaceButton.imageView?.contentMode = .center
         replaceSwitchButton.setImage(WKSFSymbolIcon.for(symbol: .ellipsis), for: .normal)
         replaceSwitchButton.accessibilityLabel = String.localizedStringWithFormat(WKSourceEditorLocalizedStrings.current.accessibilityLabelReplaceButtonSwitchFormat, WKSourceEditorLocalizedStrings.current.accessibilityLabelReplaceTypeSingle)
+        replaceSwitchButton.imageView?.contentMode = .center
 
         replaceSwitchButton.showsMenuAsPrimaryAction = true
         replaceSwitchButton.menu = replaceSwitchButtonMenu()
 
         magnifyImageView.image = WKSFSymbolIcon.for(symbol: .magnifyingGlass)
-        pencilImageView.image = WKSFSymbolIcon.for(symbol: .pencil)
+        magnifyImageView.contentMode = .center
+        pencilImageView.image = WKIcon.pencil
+        pencilImageView.contentMode = .center
 
         findClearButton.setImage(WKSFSymbolIcon.for(symbol: .multiplyCircleFill), for: .normal)
         findClearButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelFindButtonClear
+        findClearButton.imageView?.contentMode = .center
         replaceClearButton.setImage(WKSFSymbolIcon.for(symbol: .multiplyCircleFill), for: .normal)
         replaceClearButton.accessibilityLabel = WKSourceEditorLocalizedStrings.current.accessibilityLabelReplaceButtonClear
+        replaceClearButton.imageView?.contentMode = .center
 
         findTextField.adjustsFontForContentSizeCategory = true
         findTextField.font = WKFont.for(.caption1, compatibleWith: appEnvironment.traitCollection)

Components/Sources/Components/Components/Editors/Common Views/Input Accessory Views/Find and Replace/WKFindAndReplaceView.xib

@@ -51,7 +51,7 @@
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1ZO-JU-1DS" userLabel="Text field container">
                                             <rect key="frame" x="70" y="4" width="294" height="30"/>
                                             <subviews>
-                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="ndR-3k-0Gf">
+                                                <imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="ndR-3k-0Gf">
                                                     <rect key="frame" x="10" y="8.5" width="13" height="13"/>
                                                     <constraints>
                                                         <constraint firstAttribute="width" constant="13" id="7a8-La-Au6"/>

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)