Make style views not use a button style

RELEASE_NOTES.md

@@ -23,7 +23,8 @@ This release starts moving types and views that relate to other types into the t
 * All types that implement `RichTextLabelValue` get a `label` that has improved accessibility.
 
 * `RichTextColor` `.adjust` now takes an optional color.
-* `RichTextStyle.Button` no longer uses a style - use `foregroundStyle` and `.accentColor` instead. 
+* `RichTextFormatSheet` no longer hard-codes an accent color.
+* `RichTextStyle` views no longer use a style - use `foregroundStyle`, `tint` and `accentColor` instead. 
 
 ### 🐛 Bug Fixes
 

Sources/RichTextKit/Format/RichTextFormatSheet.swift

@@ -73,7 +73,6 @@ public struct RichTextFormatSheet: View {
                 }
                 .padding(.vertical, padding)
                 .environment(\.sizeCategory, .medium)
-                .accentColor(.primary)
                 .background(background)
             }
             .withAutomaticToolbarRole()
@@ -134,7 +133,7 @@ private extension RichTextFormatSheet {
 
     @ViewBuilder
     var styleButtons: some View {
-        RichTextStyleToggleGroup(
+        RichTextStyle.ToggleGroup(
             context: context
         )
     }

Sources/RichTextKit/Format/RichTextFormatSidebar.swift

@@ -79,7 +79,6 @@ public struct RichTextFormatSidebar: View {
             Spacer()
         }
         .padding(8)
-        .prefersFocusable()
         .background(Color.white.opacity(0.05))
     }
 }

Sources/RichTextKit/Styles/RichTextStyle+Toggle.swift

@@ -27,18 +27,15 @@ public extension RichTextStyle {
 
          - Parameters:
            - style: The style to toggle.
-           - buttonStyle: The button style to use, by default `.standard`.
            - value: The value to bind to.
            - fillVertically: Whether or not fill up vertical space in a non-greedy way, by default `false`.
          */
         public init(
             style: RichTextStyle,
-            buttonStyle: Style = .standard,
             value: Binding<Bool>,
             fillVertically: Bool = false
         ) {
             self.style = style
-            self.buttonStyle = buttonStyle
             self.value = value
             self.fillVertically = fillVertically
         }
@@ -48,26 +45,22 @@ public extension RichTextStyle {
 
          - Parameters:
            - style: The style to toggle.
-           - buttonStyle: The button style to use, by default `.standard`.
            - context: The context to affect.
            - fillVertically: Whether or not fill up vertical space in a non-greedy way, by default `false`.
          */
         public init(
             style: RichTextStyle,
-            buttonStyle: Style = .standard,
             context: RichTextContext,
             fillVertically: Bool = false
         ) {
             self.init(
                 style: style,
-                buttonStyle: buttonStyle,
                 value: context.binding(for: style),
                 fillVertically: fillVertically
             )
         }
 
         private let style: RichTextStyle
-        private let buttonStyle: Style
         private let value: Binding<Bool>
         private let fillVertically: Bool
 
@@ -84,62 +77,17 @@ public extension RichTextStyle {
                 style.icon
                     .frame(maxHeight: fillVertically ? .infinity : nil)
             }
-            .tint(tintColor)
             .keyboardShortcut(for: style)
             .accessibilityLabel(style.title)
         }
     }
 }
 
-private extension RichTextStyle.Toggle {
-
-    var backgroundColor: Color {
-        value.wrappedValue ? buttonStyle.activeColor.opacity(0.2) : .clear
-    }
-}
-
-public extension RichTextStyle.Toggle {
-
-    struct Style {
-
-        /**
-         Create a rich text style button style.
-
-         - Parameters:
-           - inactiveColor: The color to apply when the button is inactive, by default `nil`.
-           - activeColor: The color to apply when the button is active, by default `.blue`.
-         */
-        public init(
-            inactiveColor: Color? = nil,
-            activeColor: Color = .blue
-        ) {
-            self.inactiveColor = inactiveColor
-            self.activeColor = activeColor
-        }
-
-        /// The color to apply when the button is inactive.
-        public var inactiveColor: Color?
-
-        /// The color to apply when the button is active.
-        public var activeColor: Color
-    }
-}
-
-public extension RichTextStyle.Toggle.Style {
-
-    /// The standard ``RichTextStyle/Toggle`` style.
-    static var standard = RichTextStyle.Toggle.Style()
-}
-
 private extension RichTextStyle.Toggle {
 
     var isOn: Bool {
         value.wrappedValue
     }
-
-    var tintColor: Color? {
-        isOn ? buttonStyle.activeColor : buttonStyle.inactiveColor
-    }
 }
 
 struct RichTextStyle_Toggle_Previews: PreviewProvider {
@@ -157,24 +105,34 @@ struct RichTextStyle_Toggle_Previews: PreviewProvider {
 
         @State
         private var isUnderlinedOn = true
+
+        @StateObject
+        private var context = RichTextContext()
 
         var body: some View {
             HStack {
+                toggle(for: .bold, $isBoldOn)
+                toggle(for: .italic, $isItalicOn)
+                toggle(for: .strikethrough, $isStrikethroughOn)
+                toggle(for: .underlined, $isUnderlinedOn)
+                Divider()
                 RichTextStyle.Toggle(
                     style: .bold,
-                    value: $isBoldOn)
-                RichTextStyle.Toggle(
-                    style: .italic,
-                    value: $isItalicOn)
-                RichTextStyle.Toggle(
-                    style: .strikethrough,
-                    value: $isStrikethroughOn)
-                RichTextStyle.Toggle(
-                    style: .underlined,
-                    value: $isUnderlinedOn)
+                    context: context,
+                    fillVertically: true
+                )
             }
+            .fixedSize(horizontal: false, vertical: true)
             .padding()
         }
+
+        func toggle(for style: RichTextStyle, _ binding: Binding<Bool>) -> some View {
+            RichTextStyle.Toggle(
+                style: style,
+                value: binding,
+                fillVertically: true
+            )
+        }
     }
 
     static var previews: some View {

Sources/RichTextKit/Styles/RichTextStyle+ToggleGroup.swift

@@ -17,6 +17,10 @@ public extension RichTextStyle {
 
      Since this view uses multiple styles, it binds directly
      to a ``RichTextContext`` instead of individual values.
+
+     > Important: Since the `ControlGroup` doesn't highlight
+     active buttons in iOS, the view will use a `ToggleStack`
+     on iOS.
      */
     struct ToggleGroup: View {
 
@@ -27,23 +31,19 @@ public extension RichTextStyle {
            - context: The context to affect.
            - styles: The styles to list, by default ``RichTextStyle/all``.
            - greedy: Whether or not the group is horizontally greedy, by default `true`.
-           - buttonStyle: The button style to use, by default ``RichTextStyleToggle/Style/standard``.
          */
         public init(
             context: RichTextContext,
             styles: [RichTextStyle] = .all,
-            greedy: Bool = true,
-            buttonStyle: RichTextStyle.Toggle.Style = .standard
+            greedy: Bool = true
         ) {
             self._context = ObservedObject(wrappedValue: context)
             self.isGreedy = greedy
             self.styles = styles
-            self.buttonStyle = buttonStyle
         }
 
         private let styles: [RichTextStyle]
         private let isGreedy: Bool
-        private let buttonStyle: RichTextStyle.Toggle.Style
 
         private var groupWidth: CGFloat? {
             if isGreedy { return nil }
@@ -59,17 +59,23 @@ public extension RichTextStyle {
         private var context: RichTextContext
 
         public var body: some View {
+            #if os(macOS)
             ControlGroup {
                 ForEach(styles) {
                     RichTextStyle.Toggle(
                         style: $0,
-                        buttonStyle: buttonStyle,
                         context: context,
                         fillVertically: true
                     )
                 }
             }
             .frame(width: groupWidth)
+            #else
+            RichTextStyle.ToggleStack(
+                context: context,
+                styles: styles
+            )
+            #endif
         }
     }
 }

Sources/RichTextKit/Styles/RichTextStyle+ToggleStack.swift

@@ -1,5 +1,5 @@
 //
-//  RichTextStyleToggleStack.swift
+//  RichTextStyle+ToggleStack.swift
 //  RichTextKit
 //
 //  Created by Daniel Saidi on 2022-12-08.
@@ -25,23 +25,19 @@ public extension RichTextStyle {
          - Parameters:
            - context: The context to affect.
            - styles: The styles to list, by default ``RichTextStyle/all``.
-           - buttonStyle: The button style to use, by default `.standard`.
            - spacing: The spacing to apply to stack items, by default `5`.
          */
         public init(
             context: RichTextContext,
             styles: [RichTextStyle] = .all,
-            buttonStyle: RichTextStyle.Toggle.Style = .standard,
             spacing: Double = 5
         ) {
             self._context = ObservedObject(wrappedValue: context)
             self.styles = styles
-            self.buttonStyle = buttonStyle
             self.spacing = spacing
         }
 
         private let styles: [RichTextStyle]
-        private let buttonStyle: RichTextStyle.Toggle.Style
         private let spacing: Double
 
         @ObservedObject
@@ -52,12 +48,12 @@ public extension RichTextStyle {
                 ForEach(styles) {
                     RichTextStyle.Toggle(
                         style: $0,
-                        buttonStyle: buttonStyle,
                         context: context,
                         fillVertically: true
                     )
                 }
-            }.fixedSize(horizontal: false, vertical: true)
+            }
+            .fixedSize(horizontal: false, vertical: true)
         }
     }
 }