Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>
This commit is contained in:
parent
d8b45af52f
commit
113660a7f9
@ -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)
|
||||||
|
|
||||||
|
// With multiline alignment
|
||||||
|
StyledLabel("Centered text", .body, emphasis: .primary, alignment: .center)
|
||||||
|
|
||||||
|
// With line limit
|
||||||
|
StyledLabel("One line only", .caption, emphasis: .secondary, lineLimit: 1)
|
||||||
|
|
||||||
|
// In buttons (put frame modifiers outside)
|
||||||
|
Button(action: onContinue) {
|
||||||
|
StyledLabel("Continue", .heading, emphasis: .custom(AppTextColors.inverse))
|
||||||
|
.frame(maxWidth: .infinity)
|
||||||
|
.frame(height: 50)
|
||||||
|
.background(AppAccent.primary)
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Use Text() with .typography()
|
### Use Text() with .typography() (Rare Exceptions)
|
||||||
|
|
||||||
When you need additional modifiers:
|
Only use `Text()` when you genuinely need modifiers that `StyledLabel` doesn't support:
|
||||||
|
|
||||||
```swift
|
```swift
|
||||||
// Multiline text
|
// Font design variants (rounded, etc.)
|
||||||
Text("Long description that might wrap to multiple lines")
|
|
||||||
.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(height: 50)
|
|
||||||
|
|
||||||
// Font design variants
|
|
||||||
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)
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user