Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

This commit is contained in:
Matt Bruce 2026-01-27 11:16:14 -06:00
parent d8b45af52f
commit 113660a7f9
2 changed files with 58 additions and 31 deletions

View File

@ -132,49 +132,66 @@ IconLabel("star.fill", "Favorites", .body, emphasis: .secondary)
## When to Use StyledLabel vs Text() ## When to Use StyledLabel vs Text()
### Use StyledLabel ### Use StyledLabel (Preferred)
For simple text with standard styling: Use `StyledLabel` for the vast majority of text:
```swift ```swift
// Simple text
StyledLabel("Settings", .subheadingEmphasis) StyledLabel("Settings", .subheadingEmphasis)
StyledLabel("Description", .subheading, emphasis: .secondary) StyledLabel("Description", .subheading, emphasis: .secondary)
```
### Use Text() with .typography() // With multiline alignment
StyledLabel("Centered text", .body, emphasis: .primary, alignment: .center)
When you need additional modifiers: // With line limit
StyledLabel("One line only", .caption, emphasis: .secondary, lineLimit: 1)
```swift // In buttons (put frame modifiers outside)
// Multiline text Button(action: onContinue) {
Text("Long description that might wrap to multiple lines") StyledLabel("Continue", .heading, emphasis: .custom(AppTextColors.inverse))
.typography(.subheading)
.foregroundStyle(AppTextColors.secondary)
.multilineTextAlignment(.center)
// Conditional colors
Text(title)
.typography(.heading)
.foregroundStyle(isActive ? AppTextColors.primary : AppTextColors.tertiary)
// With padding/background
Text(dayLabel)
.typography(.caption)
.foregroundStyle(AppTextColors.secondary)
.padding(.horizontal, Design.Spacing.small)
.background(AppAccent.light.opacity(0.3))
// Button labels with frame
Text("Continue")
.typography(.heading)
.foregroundStyle(AppTextColors.inverse)
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity)
.frame(height: 50) .frame(height: 50)
.background(AppAccent.primary)
}
```
// Font design variants ### Use Text() with .typography() (Rare Exceptions)
Only use `Text()` when you genuinely need modifiers that `StyledLabel` doesn't support:
```swift
// Font design variants (rounded, etc.)
Text(formattedValue) Text(formattedValue)
.typography(.subheadingEmphasis) .typography(.subheadingEmphasis)
.fontDesign(.rounded) .fontDesign(.rounded)
// TextField styling
TextField("Placeholder", text: $value)
.typography(.heading)
// Inside special view builders (like Charts AxisValueLabel)
AxisValueLabel {
Text("\(value)%")
.font(Typography.caption2.font) // .typography() won't work here
.foregroundStyle(color)
}
```
### Never Use Raw `.font()` with System Fonts
Instead of:
```swift
// BAD
Text("Title").font(.headline)
```
Use:
```swift
// GOOD
StyledLabel("Title", .heading)
``` ```
--- ---

View File

@ -25,26 +25,36 @@ public struct StyledLabel: View {
private let text: String private let text: String
private let typography: Typography private let typography: Typography
private let emphasis: TextEmphasis private let emphasis: TextEmphasis
private let alignment: TextAlignment?
private let lineLimit: Int?
/// Creates a styled label. /// Creates a styled label.
/// - Parameters: /// - Parameters:
/// - text: The text to display. /// - text: The text to display.
/// - typography: The typography style (default: `.body`). /// - typography: The typography style (default: `.body`).
/// - emphasis: The text emphasis/color (default: `.primary`). /// - emphasis: The text emphasis/color (default: `.primary`).
/// - alignment: Optional multiline text alignment.
/// - lineLimit: Optional line limit.
public init( public init(
_ text: String, _ text: String,
_ typography: Typography = .body, _ typography: Typography = .body,
emphasis: TextEmphasis = .primary emphasis: TextEmphasis = .primary,
alignment: TextAlignment? = nil,
lineLimit: Int? = nil
) { ) {
self.text = text self.text = text
self.typography = typography self.typography = typography
self.emphasis = emphasis self.emphasis = emphasis
self.alignment = alignment
self.lineLimit = lineLimit
} }
public var body: some View { public var body: some View {
Text(text) Text(text)
.font(typography.font) .font(typography.font)
.foregroundStyle(emphasis.color) .foregroundStyle(emphasis.color)
.multilineTextAlignment(alignment ?? .leading)
.lineLimit(lineLimit)
} }
} }