more docs, theming

Samples/iOS-Swift/iOS-Swift/AppDelegate.swift

@@ -204,8 +204,6 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
                     uiForm.messagePlaceholder = "Describe the nature of the jank. Its essence, if you will."
                 }
                 config.configureTheme = { theme in
-                    let fontSize: CGFloat = 25
-
                     let fontFamily: String
                     if Locale.current.languageCode == "ar" { // arabic; ar_EG
                         fontFamily = "Damascus"
@@ -218,15 +216,19 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
                     } else {
                         fontFamily = "ChalkboardSE-Regular"
                     }
-                    theme.font = UIFont(name: fontFamily, size: fontSize) ?? UIFont.systemFont(ofSize: fontSize)
+                    theme.fontFamily = fontFamily
                     theme.outlineStyle = .init(outlineColor: .purple)
                     theme.foreground = .purple
-                    theme.background = .purple.withAlphaComponent(0.1)
+                    theme.background = .init(red: 0.95, green: 0.9, blue: 0.95, alpha: 1)
+                    theme.submitBackground = .orange
+                    theme.submitForeground = .purple
+                    theme.buttonBackground = .purple
+                    theme.buttonForeground = .white
                 }
                 config.onSubmitSuccess = { info in
                     let name = info["name"] ?? "$shakespearean_insult_name"
                     let alert = UIAlertController(title: "Thanks?", message: "We have enough jank of our own, we really didn't need yours too, \(name).", preferredStyle: .alert)
-                    alert.addAction(.init(title: "Derp", style: .default))
+                    alert.addAction(.init(title: "Deal with it 🕶️", style: .default))
                     self.window?.rootViewController?.present(alert, animated: true)
                 }
                 config.onSubmitError = { error in

Sources/Swift/Integrations/UserFeedback/Configuration/SentryUserFeedbackThemeConfiguration.swift

@@ -9,30 +9,48 @@
 @available(iOS 13.0, *)
 @objcMembers
 public class SentryUserFeedbackThemeConfiguration: NSObject {
-    lazy var defaultFont = UIFont.preferredFont(forTextStyle: .callout)
-
-    lazy var defaultTitleFont = UIFont.preferredFont(forTextStyle: .title1)
+    /**
+     * The font family to use for form text elements.
+     * - note: Defaults to the system default, if this property is `nil`.
+     */
+    public lazy var fontFamily: String? = nil
 
-    lazy var defaultHeadingFont = UIFont.preferredFont(forTextStyle: .headline)
+    /**
+     * Font for form input elements.
+     * - note: Defaults to `UIFont.TextStyle.callout`.
+     */
+    lazy var font = scaledFont(style: .callout)
 
     /**
-     * The default font to use.
-     * - note: Defaults to the current system default.
+     * Font for main header title of the feedback form.
+     * - note: Defaults to `UIFont.TextStyle.title1`.
      */
-    public lazy var font = defaultFont
+    lazy var headerFont = scaledFont(style: .title1)
 
-    public lazy var titleFont = defaultTitleFont
+    /**
+     * Font for titles of text fields and buttons in the form.
+     * - note: Defaults to `UIFont.TextStyle.headline`.
+     */
+    lazy var titleFont = scaledFont(style: .headline)
 
-    public lazy var headingFont = defaultHeadingFont
+    /**
+     * Return a scaled font for the given style, using the configured font family.
+     */
+    func scaledFont(style: UIFont.TextStyle) -> UIFont {
+        guard let fontFamily = fontFamily, let font = UIFont(name: fontFamily, size: UIFont.systemFontSize) else {
+            return UIFont.preferredFont(forTextStyle: style)
+        }
+        return UIFontMetrics(forTextStyle: style).scaledFont(for: font)
+    }
 
+    /**
+     * Helps respond to dynamic font size changes when the app is in the background, and then comes back to the foreground.
+     */
     func updateDefaultFonts() {
-        defaultFont = UIFont.preferredFont(forTextStyle: .callout)
-        defaultTitleFont = UIFont.preferredFont(forTextStyle: .title1)
-        defaultHeadingFont = UIFont.preferredFont(forTextStyle: .headline)
-        font = defaultFont
-        titleFont = defaultTitleFont
-        headingFont = defaultHeadingFont
+        font = scaledFont(style: .callout)
+        headerFont = scaledFont(style: .title1)
+        titleFont = scaledFont(style: .headline)
     }
 
     /**
      * Foreground text color of the widget and form.
@@ -102,19 +120,25 @@
         public var outlineWidth: CGFloat = 0.5
 
         public init(outlineColor: UIColor = UIColor(white: 204 / 255, alpha: 1), cornerRadius: CGFloat = 5, outlineWidth: CGFloat = 0.5) {
             self.outlineColor = outlineColor
             self.cornerRadius = cornerRadius
             self.outlineWidth = outlineWidth
         }
     }
 
-    // We need to keep a reference to a default instance of this for comparison purposes later. We don't use the default to give UITextFields a default style, instead, we use `UITextField.BorderStyle.roundedRect` if `SentryUserFeedbackThemeConfiguration.outlineStyle == defaultOutlineStyle`.
+    /**
+     * - note: We need to keep a reference to a default instance of this for comparison purposes later. We don't use the default to give UITextFields a default style, instead, we use `UITextField.BorderStyle.roundedRect` if `SentryUserFeedbackThemeConfiguration.outlineStyle == defaultOutlineStyle`.
+     */
     let defaultOutlineStyle = OutlineStyle()
 
-    // Options for styling the outline of input elements and buttons in the feedback form.
+    /**
+     * Options for styling the outline of input elements and buttons in the feedback form.
+     */
     public lazy var outlineStyle: OutlineStyle = defaultOutlineStyle
 
-    // The background color to use for text inputs in the feedback form.
+    /**
+     * Background color to use for text inputs in the feedback form.
+     */
     public var inputBackground: UIColor = UIColor.secondarySystemBackground
 }
 

Sources/Swift/Integrations/UserFeedback/SentryUserFeedbackForm.swift

@@ -16,316 +16,313 @@
     weak var delegate: (any SentryUserFeedbackFormDelegate)?
 
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
-        if config.theme.font == config.theme.defaultFont {
-            config.theme.updateDefaultFonts()
-            config.recalculateScaleFactors()
-        }
-
+        config.theme.updateDefaultFonts()
+        config.recalculateScaleFactors()
         updateLayout()
     }
 
-    let formElementHeight: CGFloat = 40
-    let logoWidth: CGFloat = 47
-    lazy var messageTextViewHeightConstraint = messageTextView.heightAnchor.constraint(equalToConstant: config.theme.font.lineHeight * 5)
-    lazy var logoViewWidthConstraint = sentryLogoView.widthAnchor.constraint(equalToConstant: logoWidth * config.scaleFactor)
-    lazy var messagePlaceholderLeadingConstraint = messageTextViewPlaceholder.leadingAnchor.constraint(equalTo: messageTextView.leadingAnchor, constant: messageTextView.textContainerInset.left + 5)
-    lazy var messagePlaceholderTopConstraint = messageTextViewPlaceholder.topAnchor.constraint(equalTo: messageTextView.topAnchor, constant: messageTextView.textContainerInset.top)
-    lazy var fullNameTextFieldHeightConstraint = fullNameTextField.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-    lazy var emailTextFieldHeightConstraint = emailTextField.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-    lazy var addScreenshotButtonHeightConstraint = addScreenshotButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-    lazy var removeScreenshotButtonHeightConstraint = removeScreenshotButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-    lazy var submitButtonHeightConstraint = submitButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-    lazy var cancelButtonHeightConstraint = cancelButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
-
     init(config: SentryUserFeedbackConfiguration, delegate: any SentryUserFeedbackFormDelegate) {
         self.config = config
         self.delegate = delegate
         super.init(nibName: nil, bundle: nil)
-        view.backgroundColor = .systemBackground
-
+        view.backgroundColor = config.theme.background
 
         NSLayoutConstraint.activate([
             scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: config.margin),
             scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: config.margin),
             scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -config.margin),
             scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -config.margin),
 
             stack.topAnchor.constraint(equalTo: scrollView.topAnchor),
             stack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
             stack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
             stack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
             stack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
 
             messageTextViewHeightConstraint,
 
             logoViewWidthConstraint,
             sentryLogoView.heightAnchor.constraint(equalTo: sentryLogoView.widthAnchor, multiplier: 41 / 47),
 
             fullNameTextFieldHeightConstraint,
             emailTextFieldHeightConstraint,
             addScreenshotButtonHeightConstraint,
             removeScreenshotButtonHeightConstraint,
             submitButtonHeightConstraint,
             cancelButtonHeightConstraint,
 
             // the extra 5 pixels was observed experimentally and is invariant under changes in dynamic type sizes
             messagePlaceholderLeadingConstraint,
             messagePlaceholderTopConstraint
         ])
 
         [fullNameTextField, emailTextField].forEach {
             $0.font = config.theme.font
             $0.adjustsFontForContentSizeCategory = true
             if config.theme.outlineStyle == config.theme.defaultOutlineStyle {
                 $0.borderStyle = .roundedRect
             } else {
                 $0.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
                 $0.layer.borderWidth = config.theme.outlineStyle.outlineWidth
                 $0.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
             }
         }
 
         [fullNameTextField, emailTextField, messageTextView].forEach {
             $0.backgroundColor = config.theme.inputBackground
         }
 
         [fullNameLabel, emailLabel, messageLabel].forEach {
-            $0.font = config.theme.headingFont
+            $0.font = config.theme.titleFont
             $0.adjustsFontForContentSizeCategory = true
         }
 
         [submitButton, addScreenshotButton, removeScreenshotButton, cancelButton].forEach {
-            $0.titleLabel?.font = config.theme.headingFont
+            $0.titleLabel?.font = config.theme.titleFont
             $0.titleLabel?.adjustsFontForContentSizeCategory = true
         }
 
         [submitButton, addScreenshotButton, removeScreenshotButton, cancelButton, messageTextView].forEach {
             $0.layer.cornerRadius = config.theme.outlineStyle.cornerRadius
             $0.layer.borderWidth = config.theme.outlineStyle.outlineWidth
             $0.layer.borderColor = config.theme.outlineStyle.outlineColor.cgColor
         }
 
         [addScreenshotButton, removeScreenshotButton, cancelButton].forEach {
             $0.backgroundColor = config.theme.buttonBackground
             $0.setTitleColor(config.theme.buttonForeground, for: .normal)
         }
     }
 
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
     // MARK: Actions
 
     func addScreenshotButtonTapped() {
 
     }
 
     func removeScreenshotButtonTapped() {
 
     }
 
     func submitFeedbackButtonTapped() {
         // TODO: validate and package entries
         delegate?.confirmed()
     }
 
     func cancelButtonTapped() {
         delegate?.cancelled()
     }
 
-    // MARK: UI
+    // MARK: Layout
+
+    let formElementHeight: CGFloat = 40
+    let logoWidth: CGFloat = 47
+    lazy var messageTextViewHeightConstraint = messageTextView.heightAnchor.constraint(equalToConstant: config.theme.font.lineHeight * 5)
+    lazy var logoViewWidthConstraint = sentryLogoView.widthAnchor.constraint(equalToConstant: logoWidth * config.scaleFactor)
+    lazy var messagePlaceholderLeadingConstraint = messageTextViewPlaceholder.leadingAnchor.constraint(equalTo: messageTextView.leadingAnchor, constant: messageTextView.textContainerInset.left + 5)
+    lazy var messagePlaceholderTopConstraint = messageTextViewPlaceholder.topAnchor.constraint(equalTo: messageTextView.topAnchor, constant: messageTextView.textContainerInset.top)
+    lazy var fullNameTextFieldHeightConstraint = fullNameTextField.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
+    lazy var emailTextFieldHeightConstraint = emailTextField.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
+    lazy var addScreenshotButtonHeightConstraint = addScreenshotButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
+    lazy var removeScreenshotButtonHeightConstraint = removeScreenshotButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
+    lazy var submitButtonHeightConstraint = submitButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
+    lazy var cancelButtonHeightConstraint = cancelButton.heightAnchor.constraint(equalToConstant: formElementHeight * config.scaleFactor)
 
     func updateLayout() {
         let verticalPadding: CGFloat = 8
         messageTextView.textContainerInset = .init(top: verticalPadding * config.scaleFactor, left: 2 * config.scaleFactor, bottom: verticalPadding * config.scaleFactor, right: 2 * config.scaleFactor)
 
         messageTextViewHeightConstraint.constant = config.theme.font.lineHeight * 5
         logoViewWidthConstraint.constant = logoWidth * config.scaleFactor
         messagePlaceholderLeadingConstraint.constant = messageTextView.textContainerInset.left + 5
         messagePlaceholderTopConstraint.constant = messageTextView.textContainerInset.top
         fullNameTextFieldHeightConstraint.constant = formElementHeight * config.scaleFactor
         emailTextFieldHeightConstraint.constant = formElementHeight * config.scaleFactor
         addScreenshotButtonHeightConstraint.constant = formElementHeight * config.scaleFactor
         removeScreenshotButtonHeightConstraint.constant = formElementHeight * config.scaleFactor
         submitButtonHeightConstraint.constant = formElementHeight * config.scaleFactor
         cancelButtonHeightConstraint.constant = formElementHeight * config.scaleFactor
-
-
     }
 
+    // MARK: UI Elements
+
     lazy var formTitleLabel = {
         let label = UILabel(frame: .zero)
         label.text = config.formConfig.formTitle
-        label.font = config.theme.titleFont
+        label.font = config.theme.headerFont
         label.setContentCompressionResistancePriority(.required, for: .horizontal)
         label.adjustsFontForContentSizeCategory = true
         return label
     }()
 
     lazy var sentryLogoView = {
         let shapeLayer = CAShapeLayer()
         shapeLayer.path = SentryIconography.logo
         shapeLayer.fillColor = self.config.theme.foreground.cgColor
 
         let view = UIView(frame: .zero)
         view.layer.addSublayer(shapeLayer)
         view.accessibilityLabel = "provided by Sentry" // ???: what do we want to say here?
         return view
     }()
 
     lazy var fullNameLabel = {
         let label = UILabel(frame: .zero)
         label.text = config.formConfig.nameLabelContents
         return label
     }()
 
     lazy var fullNameTextField = {
         let field = UITextField(frame: .zero)
         field.placeholder = config.formConfig.namePlaceholder
         field.accessibilityLabel = config.formConfig.nameTextFieldAccessibilityLabel
         return field
     }()
 
     lazy var emailLabel = {
         let label = UILabel(frame: .zero)
         label.text = config.formConfig.emailLabelContents
         return label
     }()
 
     lazy var emailTextField = {
         let field = UITextField(frame: .zero)
         field.placeholder = config.formConfig.emailPlaceholder
         field.accessibilityLabel = config.formConfig.emailTextFieldAccessibilityLabel
         return field
     }()
 
     lazy var messageLabel = {
         let label = UILabel(frame: .zero)
         label.text = config.formConfig.messageLabelContents
         return label
     }()
 
     lazy var messageTextViewPlaceholder = {
         let label = UILabel(frame: .zero)
         label.text = config.formConfig.messagePlaceholder
         label.font = config.theme.font
         label.textColor = .placeholderText
         label.translatesAutoresizingMaskIntoConstraints = false
         label.adjustsFontForContentSizeCategory = true
         return label
     }()
 
     lazy var messageTextView = {
         let textView = UITextView(frame: .zero)
         textView.font = config.theme.font
         textView.adjustsFontForContentSizeCategory = true
         textView.accessibilityLabel = config.formConfig.messageTextViewAccessibilityLabel
         textView.delegate = self
         return textView
     }()
 
     lazy var addScreenshotButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.addScreenshotButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.addScreenshotButtonAccessibilityLabel
         button.addTarget(self, action: #selector(addScreenshotButtonTapped), for: .touchUpInside)
         return button
     }()
 
     lazy var removeScreenshotButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.removeScreenshotButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.removeScreenshotButtonAccessibilityLabel
         button.addTarget(self, action: #selector(removeScreenshotButtonTapped), for: .touchUpInside)
         return button
     }()
 
     lazy var submitButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.submitButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.submitButtonAccessibilityLabel
         button.backgroundColor = config.theme.submitBackground
         button.setTitleColor(config.theme.submitForeground, for: .normal)
         button.addTarget(self, action: #selector(submitFeedbackButtonTapped), for: .touchUpInside)
         return button
     }()
 
     lazy var cancelButton = {
         let button = UIButton(frame: .zero)
         button.setTitle(config.formConfig.cancelButtonLabel, for: .normal)
         button.accessibilityLabel = config.formConfig.cancelButtonAccessibilityLabel
         button.addTarget(self, action: #selector(cancelButtonTapped), for: .touchUpInside)
         return button
     }()
 
     lazy var stack = {
         let headerStack = UIStackView(arrangedSubviews: [self.formTitleLabel])
         if self.config.formConfig.showBranding {
             headerStack.addArrangedSubview(self.sentryLogoView)
         }
 
         let stack = UIStackView()
         stack.axis = .vertical
         stack.spacing = 50
 
         stack.addArrangedSubview(headerStack)
 
         let inputStack = UIStackView()
         inputStack.axis = .vertical
         inputStack.spacing = config.theme.font.xHeight
 
         if self.config.formConfig.showName {
             inputStack.addArrangedSubview(self.fullNameLabel)
             inputStack.addArrangedSubview(self.fullNameTextField)
         }
 
         if self.config.formConfig.showEmail {
             inputStack.addArrangedSubview(self.emailLabel)
             inputStack.addArrangedSubview(self.emailTextField)
         }
 
         inputStack.addArrangedSubview(self.messageLabel)
 
         let messageAndScreenshotStack = UIStackView(arrangedSubviews: [self.messageTextView])
         messageAndScreenshotStack.axis = .vertical
 
         if self.config.formConfig.enableScreenshot {
             messageAndScreenshotStack.addArrangedSubview(self.addScreenshotButton)
         }
         messageAndScreenshotStack.spacing = config.theme.font.lineHeight - config.theme.font.xHeight
 
         inputStack.addArrangedSubview(messageAndScreenshotStack)
 
         stack.addArrangedSubview(inputStack)
 
         let controlsStack = UIStackView()
         controlsStack.axis = .vertical
         controlsStack.spacing = config.theme.font.lineHeight - config.theme.font.xHeight
         controlsStack.addArrangedSubview(self.submitButton)
         controlsStack.addArrangedSubview(self.cancelButton)
         stack.addArrangedSubview(controlsStack)
 
         stack.translatesAutoresizingMaskIntoConstraints = false
 
         return stack
     }()
 
     lazy var scrollView = {
         let scrollView = UIScrollView(frame: view.bounds)
         view.addSubview(scrollView)
         scrollView.addSubview(stack)
         scrollView.translatesAutoresizingMaskIntoConstraints = false
         scrollView.addSubview(messageTextViewPlaceholder)
         return scrollView
     }()
 }
 
+// MARK: UITextViewDelegate
 @available(iOS 13.0, *)
 extension SentryUserFeedbackForm: UITextViewDelegate {
     func textViewDidChange(_ textView: UITextView) {
         messageTextViewPlaceholder.isHidden = textView.text != ""
     }
 }
 
 #endif // os(iOS) && !SENTRY_NO_UIKIT