badge documentation

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-07-12 16:03:35 -05:00
parent fcbb6e99e4
commit a75e254064

View File

@ -24,6 +24,8 @@ open class Badge: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Public Properties // MARK: - Public Properties
//-------------------------------------------------- //--------------------------------------------------
/// Label used to render text
open var label = Label().with { open var label = Label().with {
$0.setContentCompressionResistancePriority(.required, for: .vertical) $0.setContentCompressionResistancePriority(.required, for: .vertical)
$0.adjustsFontSizeToFitWidth = false $0.adjustsFontSizeToFitWidth = false
@ -32,12 +34,17 @@ open class Badge: View {
$0.textStyle = .boldBodySmall $0.textStyle = .boldBodySmall
} }
/// This will render the badges fill color based on the available options.
/// When used in conjunction with the surface prop, this fill color will change its tint automatically based on a light or dark surface.
open var fillColor: FillColor = .red { didSet { setNeedsUpdate() }} open var fillColor: FillColor = .red { didSet { setNeedsUpdate() }}
/// The text that will be shown in the label.
open var text: String = "" { didSet { setNeedsUpdate() }} open var text: String = "" { didSet { setNeedsUpdate() }}
/// When applied, this property takes a px value that will restrict the width at that point
open var maxWidth: CGFloat? { didSet { setNeedsUpdate() }} open var maxWidth: CGFloat? { didSet { setNeedsUpdate() }}
/// This will restrict the badge height to a specific number of lines. If the text overflows the allowable space, ellipsis will show.
open var numberOfLines: Int = 1 { didSet { setNeedsUpdate() }} open var numberOfLines: Int = 1 { didSet { setNeedsUpdate() }}
//-------------------------------------------------- //--------------------------------------------------
@ -86,6 +93,8 @@ open class Badge: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Configuration // MARK: - Configuration
//-------------------------------------------------- //--------------------------------------------------
/// ColorConfiguration that is mapped to the 'fillColor' for the surface
private var backgroundColorConfiguration: AnyColorable = { private var backgroundColorConfiguration: AnyColorable = {
let config = KeyedColorConfiguration<Badge, FillColor>(keyPath: \.fillColor) let config = KeyedColorConfiguration<Badge, FillColor>(keyPath: \.fillColor)
config.setSurfaceColors(VDSColor.backgroundBrandhighlight, VDSColor.backgroundBrandhighlight, forKey: .red) config.setSurfaceColors(VDSColor.backgroundBrandhighlight, VDSColor.backgroundBrandhighlight, forKey: .red)
@ -98,8 +107,10 @@ open class Badge: View {
return config.eraseToAnyColorable() return config.eraseToAnyColorable()
}() }()
/// ColorConfiguration for the Text
private var textColorConfiguration = ViewColorConfiguration() private var textColorConfiguration = ViewColorConfiguration()
/// Updates the textColorConfiguration based on the fillColor
public func updateTextColorConfig() { public func updateTextColorConfig() {
textColorConfiguration.reset() textColorConfiguration.reset()