Refactor components sizing, radius and more

Sources/OversizeUI/Controls/Avatar/AvatarView.swift

@@ -7,8 +7,8 @@ import SwiftUI
 
 public enum AvatarSize: Int, CaseIterable {
     case small
-    case m
-    case l
+    case medium
+    case large
 }
 
 public struct AvatarView: View {
@@ -28,13 +28,13 @@ public struct AvatarView: View {
     let firstName: String
     let lastName: String
     let size: AvatarSize
-    let avatar: Image
+    let avatar: Image?
     let stroke: Bool
 
     public init(firstName: String = "",
                 lastName: String = "",
-                size: AvatarSize = .m,
-                avatar: Image = Image(""),
+                size: AvatarSize = .medium,
+                avatar: Image? = nil,
                 stroke: Bool = false)
     {
         self.firstName = firstName
@@ -45,11 +45,11 @@ public struct AvatarView: View {
     }
 
     public var body: some View {
-        if avatar != Image("") {
+        if let avatar = avatar {
             avatar
                 .resizable()
-                .frame(width: size == .small ? Constants.sizeS : size == .m ? Constants.sizeM : Constants.sizeL,
-                       height: size == .small ? Constants.sizeS : size == .m ? Constants.sizeM : Constants.sizeL)
+                .frame(width: size == .small ? Constants.sizeS : size == .medium ? Constants.sizeM : Constants.sizeL,
+                       height: size == .small ? Constants.sizeS : size == .medium ? Constants.sizeM : Constants.sizeL)
                 .clipShape(Circle())
                 .overlay(stroke ? Circle().stroke(Constants.borderColor, lineWidth: Constants.borderLineWidth) : nil)
 
@@ -58,19 +58,19 @@ public struct AvatarView: View {
                 Circle()
                     .fill(LinearGradient(gradient:
                         Gradient(colors: [Color.warning, Color.success]), startPoint: .topLeading, endPoint: .bottom))
-                    .frame(width: size == .small ? Constants.sizeS : size == .m ? Constants.sizeM : Constants.sizeL,
-                           height: size == .small ? Constants.sizeS : size == .m ? Constants.sizeM : Constants.sizeL)
+                    .frame(width: size == .small ? Constants.sizeS : size == .medium ? Constants.sizeM : Constants.sizeL,
+                           height: size == .small ? Constants.sizeS : size == .medium ? Constants.sizeM : Constants.sizeL)
                     .overlay(stroke
                         ? Circle().stroke(Constants.borderColor, lineWidth: Constants.borderLineWidth)
                         : nil)
 
                 HStack(spacing: size == .small
                     ? Constants.avatarTextSpaceS
-                    : size == .m ? Constants.avatarTextSpaceM
+                    : size == .medium ? Constants.avatarTextSpaceM
                     : Constants.avatarTextSpaceL) {
                         if firstName != "" {
                             Text(String(firstName.dropLast(firstName.count - 1)))
-                                .fontStyle(size == .small ? .caption : size == .m
+                                .fontStyle(size == .small ? .caption : size == .medium
                                     ? .title3
                                     : .largeTitle,
                                     color: .onPrimaryHighEmphasis)
@@ -80,7 +80,7 @@ public struct AvatarView: View {
                             Text(String(lastName.dropLast(lastName.count - 1)))
                                 .fontStyle(size == .small
                                     ? .caption
-                                    : size == .m
+                                    : size == .medium
                                     ? .title3
                                     : .largeTitle,
                                     color: .onPrimaryHighEmphasis)
@@ -111,32 +111,32 @@ struct M7AvatarView_Previews: PreviewProvider {
             .background(Color.surfaceTertiary)
 
         Group {
-            AvatarView(firstName: "Jhon", size: .m)
+            AvatarView(firstName: "Jhon", size: .medium)
                 .previewDisplayName("Only firsy name")
 
-            AvatarView(firstName: "Jhon", lastName: "Smith", size: .m, stroke: true)
+            AvatarView(firstName: "Jhon", lastName: "Smith", size: .medium, stroke: true)
                 .previewDisplayName("First name, last name and storke")
 
-            AvatarView(size: .m, avatar: Image("empty", bundle: .module))
+            AvatarView(size: .medium, avatar: Image("empty", bundle: .module))
                 .previewDisplayName("Only avatar")
 
-            AvatarView(firstName: "Jhon", lastName: "Smith", size: .m, avatar: Image("empty", bundle: .module), stroke: true)
+            AvatarView(firstName: "Jhon", lastName: "Smith", size: .medium, avatar: Image("empty", bundle: .module), stroke: true)
                 .previewDisplayName("All data")
 
         }.previewLayout(.fixed(width: 48, height: 48))
             .background(Color.surfaceTertiary)
 
         Group {
-            AvatarView(firstName: "Jhon", size: .l)
+            AvatarView(firstName: "Jhon", size: .large)
                 .previewDisplayName("Only firsy name")
 
-            AvatarView(firstName: "Jhon", lastName: "Smith", size: .l, stroke: true)
+            AvatarView(firstName: "Jhon", lastName: "Smith", size: .large, stroke: true)
                 .previewDisplayName("First name, last name and storke")
 
-            AvatarView(size: .l, avatar: Image("empty", bundle: .module))
+            AvatarView(size: .large, avatar: Image("empty", bundle: .module))
                 .previewDisplayName("Only avatar")
 
-            AvatarView(firstName: "Jhon", lastName: "Smith", size: .l, avatar: Image("empty", bundle: .module), stroke: true)
+            AvatarView(firstName: "Jhon", lastName: "Smith", size: .large, avatar: Image("empty", bundle: .module), stroke: true)
                 .previewDisplayName("All data")
 
         }.previewLayout(.fixed(width: 96, height: 96))

Sources/OversizeUI/Controls/Background/Background.swift

@@ -34,25 +34,16 @@ public struct Background<Content: View>: View {
     }
 
     private let content: Content
-
-    public var backgroundColor: Color = Constants.colorPrimary
-
-    public var background: BackgroundColor
-
+    private let background: BackgroundColor
     public var padding: BackgroundPadding
 
-    public var paddingSize: CGFloat = 0
-
     public init(background: BackgroundColor = .primary,
                 padding: BackgroundPadding = .medium,
                 @ViewBuilder content: () -> Content)
     {
         self.content = content()
         self.padding = padding
         self.background = background
-
-        setBackground(background)
-        setPadding(padding)
     }
 
     public var body: some View {
@@ -63,23 +54,23 @@ public struct Background<Content: View>: View {
             .cornerRadius(Radius.medium)
     }
 
-    private mutating func setPadding(_ padding: BackgroundPadding) {
+    private var paddingSize: CGFloat {
         switch padding {
         case .medium:
-            paddingSize = Constants.paddingM
+            return Constants.paddingM
         case .small:
-            paddingSize = Constants.paddingS
+            return Constants.paddingS
         }
     }
 
-    private mutating func setBackground(_ background: BackgroundColor) {
+    private var backgroundColor: Color {
         switch background {
         case .primary:
-            backgroundColor = Constants.colorPrimary
+            return Constants.colorPrimary
         case .secondary:
-            backgroundColor = Constants.colorSecondary
+            return Constants.colorSecondary
         case .tertiary:
-            backgroundColor = Constants.colorTertiary
+            return Constants.colorTertiary
         }
     }
 }

Sources/OversizeUI/Controls/Badge/Bage.swift

@@ -7,14 +7,13 @@ import SwiftUI
 
 public struct Bage<Label: View>: View {
     @Environment(\.theme) private var theme: ThemeSettings
+    @Environment(\.controlRadius) private var controlRadius: Radius
 
     private let label: Label
-    private var color: Color
-    private var radius: Radius
+    private let color: Color
 
-    public init(color: Color = .accentColor, radius: Radius = .small, @ViewBuilder label: () -> Label) {
+    public init(color: Color = .accentColor, @ViewBuilder label: () -> Label) {
         self.color = color
-        self.radius = radius
         self.label = label()
     }
 
@@ -27,11 +26,11 @@ public struct Bage<Label: View>: View {
         .padding(.vertical, .xxxSmall)
         .padding(.horizontal, 6)
         .background(
-            RoundedRectangle(cornerRadius: radius.rawValue,
+            RoundedRectangle(cornerRadius: controlRadius.rawValue,
                              style: .circular)
                 .fill(color.opacity(0.1))
                 .overlay(
-                    RoundedRectangle(cornerRadius: radius.rawValue,
+                    RoundedRectangle(cornerRadius: controlRadius.rawValue,
                                      style: .continuous)
                         .stroke(
                             theme.borderSurface

Sources/OversizeUI/Controls/Icon/Icon.swift

@@ -316,42 +316,42 @@ public struct Icon: View {
     }
 
     let name: Icons
-    var size: CGFloat = Constants.medium
+    let size: IconSizes
     var color: Color
 
     public init(_ name: Icons = .menu) {
         self.name = name
+        size = .medium
         color = Color.onBackgroundHighEmphasis
-        setTextStyle(IconSizes.medium)
     }
 
     public init(_ name: Icons = .menu, size: IconSizes = .medium, color: Color = .onBackgroundHighEmphasis) {
         self.name = name
         self.color = color
-        setTextStyle(size)
+        self.size = size
     }
 
     public var body: some View {
         if name != .none {
             Image(name.rawValue, bundle: .module)
                 .resizable()
-                .frame(width: size, height: size)
+                .frame(width: iconSize, height: iconSize)
                 .foregroundColor(color)
         } else {
             EmptyView()
         }
     }
 
-    private mutating func setTextStyle(_ size: IconSizes) {
+    var iconSize: CGFloat {
         switch size {
         case .medium:
-            break
+            return Constants.medium
         case .small:
-            self.size = Constants.small
+            return Constants.small
         case .large:
-            self.size = Constants.large
+            return Constants.large
         case .xLarge:
-            self.size = Constants.xLarge
+            return Constants.xLarge
         }
     }
 }

Sources/OversizeUI/Controls/Loader/LoaderOverlayView.swift

@@ -50,7 +50,7 @@ public struct LoaderOverlayView: View {
                 Color.surfaceSecondary.opacity(0.5)
             #endif
 
-            Surface(background: .primary) {
+            Surface {
                 VStack(spacing: 20) {
                     containedView()
 
@@ -62,6 +62,7 @@ public struct LoaderOverlayView: View {
                 }
                 .padding()
             }
+            .surfaceStyle(.primary)
             .elevation(.z4)
         }
         .ignoresSafeArea()

Sources/OversizeUI/Controls/Row/Row.swift

@@ -155,9 +155,12 @@ public struct Row: View {
         case let .avatar(avatar):
             avatar
         case let .iconOnSurface(icon):
-            Surface(background: .secondary, padding: .xxSmall) {
+            Surface {
                 Icon(icon)
-            }.padding(.trailing, Constants.spacingIconAndText)
+            }
+            .surfaceStyle(.secondary)
+            .padding(.trailing, Constants.spacingIconAndText)
+            .controlPadding(.xxSmall)
         case let .systemImage(systemImage):
             Image(systemName: systemImage)
                 .foregroundColor(Color.onBackgroundHighEmphasis)
@@ -171,9 +174,7 @@ public struct Row: View {
     private func tralling() -> some View {
         switch trallingType {
         case .none:
-
             EmptyView()
-
         case let .toggle(isOn):
             Toggle(isOn: isOn) {}
                 .labelsHidden()

Sources/OversizeUI/Controls/Row/RowButton.swift

@@ -33,9 +33,11 @@ public struct RowButton: View {
             Button(action: self.tapAction) {
                 HStack {
                     if icon != .none {
-                        Surface(background: .secondary, padding: .xxSmall) {
+                        Surface {
                             Icon(icon)
                         }
+                        .surfaceStyle(.secondary)
+                        .controlPadding(.xxSmall)
                     }
 
                     Text(text)

Sources/OversizeUI/Controls/ScrollView/SectionView.swift

@@ -28,12 +28,15 @@ public struct SectionView<Content: View>: View {
                 Text(title)
                     .fontStyle(.subtitle1)
                     .foregroundColor(.onBackgroundHighEmphasis)
+                    .padding(.leading, .xxxSmall)
             }
 
-            Surface(padding: .zero) {
+            Surface {
                 content
                     .padding(.vertical, verticalPadding)
-            }.clipShape(
+            }
+            .controlPadding(.zero)
+            .clipShape(
                 RoundedRectangle(cornerRadius: Constants.radiusMedium,
                                  style: .circular)
             )