Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample into vasavk/carousel

VDSSample.xcodeproj/project.pbxproj

@@ -47,8 +47,6 @@
 		EA0D1C332A673FD400E5C127 /* RadioButtonItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */; };
 		EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */; };
 		EA1758462BC8893700A5C0D9 /* DatePickerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */; };
-		EA21C5D82B600E4200CFC139 /* VDSTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; };
-		EA21C5D92B600E4200CFC139 /* VDSTokens.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		EA297A682A02F5320031ED56 /* TableViewTestController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA297A672A02F5320031ED56 /* TableViewTestController.swift */; };
 		EA3C3B9D289966EF000CA526 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3B9C289966EF000CA526 /* AppDelegate.swift */; };
 		EA3C3B9F289966EF000CA526 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3B9E289966EF000CA526 /* SceneDelegate.swift */; };
@@ -719,7 +717,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 66;
+				CURRENT_PROJECT_VERSION = 69;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -755,7 +753,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 66;
+				CURRENT_PROJECT_VERSION = 69;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Extensions/Bundle.swift

@@ -45,7 +45,7 @@ struct VDSHelper {
         return bundle.contents("ReleaseNotes") ?? ""
     }
     
-    static func changeLog(for component: ViewProtocol.Type) -> String? {
+    static func changeLog(for component: any ViewProtocol.Type) -> String? {
         return bundle.contents("\(component.self)ChangeLog")
     }
 }

VDSSample/ViewControllers/BaseViewController.swift

@@ -177,7 +177,7 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     open override func viewDidLoad() {
         super.viewDidLoad()
         
-        if let component = component as? ViewProtocol, let content = VDSHelper.changeLog(for: type(of: component)) {
+        if let component = component as? (any ViewProtocol), let content = VDSHelper.changeLog(for: type(of: component)) {
             let tooltip =  VDS.Tooltip()
             tooltip.title = "ChangeLog"
             tooltip.content = content

VDSSample/ViewControllers/CheckboxItemViewController.swift

@@ -71,10 +71,19 @@ class  CheckboxItemViewController: BaseViewController<CheckboxItem> {
     }
     
     func setupModel() {
-        component.labelText = "Terms and conditions"
+        let fullText = "I accept the Terms and Conditions"
-        component.childText = "I agree to Verizon's terms and conditions click here"
+        let linkText = "Terms and Conditions"
         component.errorText = "Error Text"
-                
+        component.childText = fullText
+        
+        if let link = ActionLabelAttribute(text: fullText, linkText: linkText) {
+            link.action.sink { [weak self] in
+                guard let self else { return }
+                present(UIAlertController(title: "TextLink", message: "Clicked \(linkText)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+            }.store(in: &subscribers)
+            component.childTextAttributes = [link]
+        }
+
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         disabledSwitch.isOn = !component.isEnabled

VDSSample/ViewControllers/CheckboxViewController.swift

@@ -29,7 +29,9 @@ class  CheckboxViewController: BaseViewController<Checkbox> {
         addFormRow(label: "Disabled", view: disabledSwitch)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Error", view: showErrorSwitch)
-        
+        addFormRow(label: "Calendar", view: VDS.DatePicker().with {
+            $0.calendarModel = .init(minDate: Date().startOfMonth, maxDate: Calendar.current.date(byAdding: .month, value: 2, to: Date())!)
+        })
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             self.component.showError = sender.isOn

VDSSample/ViewControllers/DatePickerViewController.swift

@@ -93,6 +93,37 @@ class DatePickerViewController: BaseViewController<DatePicker> {
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         append(section: getCalendarSection())
+        append(section: .init().with({
+            func datePicker() -> VDS.DatePicker {
+                VDS.DatePicker().with {
+                    $0.calendarModel = .init(minDate: Date().startOfMonth, maxDate: Calendar.current.date(byAdding: .month, value: 2, to: Date())!)
+                }
+            }
+            $0.title = "UI Testing"
+            $0.addFormRow(label: "Below Test", view: datePicker())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Above Test", view: datePicker())
+        }))
+
         disabledSwitch.onChange = { [weak self] sender in
             self?.component.isEnabled = !sender.isOn
         }
@@ -154,7 +185,6 @@ class DatePickerViewController: BaseViewController<DatePicker> {
             .sink { [weak self] text in
                 self?.updateTooltip()
             }.store(in: &subscribers)
-        
     }
     
     func setupModel() {
@@ -227,8 +257,7 @@ extension DatePickerViewController {
         section.addFormRow(label: "Indicator One Date", view: indicatorOnePicker)
         section.addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker)
         section.addFormRow(label: "Indicator Three Date", view: indicatorThreePicker)
-        
+                
-        
         containerBorderSwitch.onChange = { [weak self] sender in
             self?.updateCalendarModel()
         }

VDSSample/ViewControllers/MenuViewController.swift

@@ -112,12 +112,13 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
     }
     
     override func viewDidLoad() {
-        title = "VDS Sample: Build \(Bundle.main.build ?? "none")"
+        let build = Bundle.main.build ?? "none"
+        title = "VDS Sample: Build \(build)"
        
         let content = VDSHelper.releaseNotes()
         if !content.isEmpty {
             let tooltip =  VDS.Tooltip()
-            tooltip.title = "Release Notes: \(VDSHelper.version)"
+            tooltip.title = "Release Notes: \(build)"
             tooltip.content = content
             navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tooltip)
         }

VDSSample/ViewControllers/RadioBoxGroupViewController.swift

@@ -78,8 +78,19 @@ class  RadioBoxGroupViewController: BaseViewController<RadioBoxGroup>{
         radioBox2.inputId = "model2"
         radioBox2.value = "model 2 Value"
         radioBox2.text = "iPhone 11 Bundle 2"
-        radioBox2.subText = "Apple iPhone 11 - 128 GB\nOtterbox Case Black\nScreen Protector"
 
+        let fullText = "I accept the Terms and Conditions"
+        let linkText = "Terms and Conditions"
+        radioBox2.subText = fullText
+        
+        if let link = ActionLabelAttribute(text: fullText, linkText: linkText) {
+            link.action.sink { [weak self] in
+                guard let self else { return }
+                present(UIAlertController(title: "TextLink", message: "Clicked \(linkText)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+            }.store(in: &subscribers)
+            radioBox2.subTextAttributes = [link]
+        }
+        
         component.selectorModels = [radioBox1, radioBox2]
 
         component.onChange = { [weak self] group in
@@ -120,7 +131,7 @@ extension RadioBoxGroupViewController: ComponentSampleable {
         radioBox1.text = "iPhone 11 Bundle 1"
         radioBox1.subText = "Apple iPhone 11 - 64 GB\nOtterbox Case Red\nScreen Protector"
         radioBox1.subTextRight = "Right Text"
-
+        
         var radioBox2 = RadioBoxGroup.RadioBoxItemModel()
         radioBox2.inputId = "model2"
         radioBox2.value = "model 2 Value"

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -19,12 +19,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         return picker
     }()
     
-    lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
-                           picker: self.picker,
-                           items: BackgroundColor.allCases)
-    }()
-    
     lazy var imageFallbackColorPickerSelectorView = {
         SurfacePickerSelectorView(picker: self.picker)
     }()
@@ -76,9 +70,9 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
-    var colorPickerType: ColorPickerType = .backgroundColor
+    var colorPickerType: ColorPickerType = .gradientColor1
     enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+        case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -95,56 +89,103 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         }
     }()
     
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
+    
+    lazy var backgroundColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
+    }()
+
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        
-        component.width = 300
+        let mainView = View()
+        mainView.backgroundColor = .purple
+        
+        ///top
+        let topView = View()
+        topView.backgroundColor = .yellow
+
+        let topLabel = Label()
+        topLabel.text = "Do you want to Register?"
+        
+        let topButton = Button()
+        topButton.setTitle("Register", for: .normal)
+
+        ///bottom
+        let bottomView = View()
+        bottomView.backgroundColor = .green
+
+        let bottomLabel = Label()
+        bottomLabel.text = "Forgot your info?"
+
+        let bottomButton = Button()
+        bottomButton.setTitle("Forgot Password", for: .normal)
+
+        mainView.addSubview(topView)
+        mainView.addSubview(bottomView)
+        
+        topView.addSubview(topLabel)
+        topView.addSubview(topButton)
+
+        bottomView.addSubview(bottomLabel)
+        bottomView.addSubview(bottomButton)
+        let space: CGFloat = 5
+        topView
+            .pinTop(space*2)
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(anchor: bottomView.topAnchor, constant: space*2)
+        
+        topLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: topButton.topAnchor, constant: space)
+        
+        topButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
+        bottomView
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(space*2)
+
+        bottomLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: bottomButton.topAnchor, constant: space)
+        
+        bottomButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
         component.color = .secondary
         component.accessibilityLabel = "Tile Container"
-        
-        let level2View = View()
-        level2View.backgroundColor = .purple
-        
-        let level3View = View()
-        level3View.backgroundColor = .yellow
-        level2View.addSubview(level3View)
-        level3View.pinToSuperView(.uniform(15))
 
-        let level2label = Label()
+        addContentTopView(view: .makeWrapper(for: component))
-        level2label.text = "Do you want to Register?"
+        component.addContentView(mainView)
-       
-        level3View.addSubview(level2label)
-        level2label.pinTop().pinLeading()
-        
-        let level3Button = Button()
-        level3Button.setTitle("Register", for: .normal)
-        
-        level3View.addSubview(level3Button)
-        level3Button.pinTop(anchor: level2label.bottomAnchor, constant: 5)
-        level3Button.pinLeading()
-       
-        let level4View = View()
-        level4View.backgroundColor = .green
-        level3View.addSubview(level4View)
-        level4View.pinTop(anchor: level3Button.bottomAnchor, constant: 10)
-        level4View.pinLeading()
-        level4View.pinBottom()
-        level4View.pinTrailing()
-       
-        let level4Label = Label()
-        level4Label.text = "Forgot your info?"
-        level4View.addSubview(level4Label)
-        level4Label.pinTop().pinLeading()
-
-        let level4Button = Button()
-        level4Button.setTitle("Forgot Password", for: .normal)
-        level4View.addSubview(level4Button)
-        
-        level4Button.pinTop(anchor: level4Label.bottomAnchor, constant: 5)
-        level4Button.pinLeading().pinBottom()
-        
-
-        component.addContentView(level2View)
         setupPicker()
         setupModel()
     }
@@ -166,6 +207,13 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         addFormRow(label: "Show Border", view: showBorderSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
         customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
         customPaddingRowView?.isHidden = true
@@ -223,20 +271,34 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else { 
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self?.heightTextField.text = ""
-                    self.component.height = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
 
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self?.widthTextField.text = ""
-                    self.component.width = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
     }
@@ -263,11 +325,15 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             if let color = item.color {
                 self.component.color = color
             } else {
-                self.colorPickerType = .backgroundColor
+                backgroundColorTokenFormStackView.isHidden = item != .token
-                self.present(self.colorPicker, animated: true)
+                backgroundColorFormStackView.isHidden = item != .custom
             }
         }
         
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.component.color = .token(item)
+        }
+        
         backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
             guard let self else { return }
             if let effect = $0.effect {
@@ -339,14 +405,15 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
         case .gradientColor2:
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
+        case .custom:
+            backgroundColorCustomColorView.selectedColor = color
+            component.color = .custom(color)
         }
     }
     
@@ -390,7 +457,7 @@ extension TileContainerViewController {
     //Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -402,6 +469,8 @@ extension TileContainerViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                nil
             case .custom:
                 nil
             }

VDSSample/ViewControllers/TileletViewController.swift

@@ -67,9 +67,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         return picker
     }()
     
-    var colorPickerType: ColorPickerType = .backgroundColor
+    var colorPickerType: ColorPickerType = .custom
     enum ColorPickerType {
-        case backgroundColor
         case gradientColor1, gradientColor2
         case contentViewBackgroundColor, token, custom
     }
@@ -88,12 +87,31 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }()
     
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
+        PickerSelectorView(title: "",
                            picker: self.picker,
                            items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
     }()
     
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .background
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
                            picker: self.picker,
@@ -103,7 +121,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     /// titleLockup
     var currentSurfaceColorType: SurfaceColorType = .title
     enum SurfaceColorType {
-        case eyebrow, title, subtitle, directionalIcon, descriptionIcon
+        case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
     }
     
     enum TitleTextColor: String, CaseIterable {
@@ -319,6 +337,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
         addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
         addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -394,7 +419,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
         directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
-        directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
+        directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
         append(section: directionalIconTokenFormStackView)
         append(section: directionalIconColorFormStackView)
 
@@ -415,20 +440,34 @@ class TileletViewController: BaseViewController<Tilelet> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self?.heightTextField.text = ""
-                    self.component.height = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
-        
+
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self?.widthTextField.text = ""
-                    self.component.width = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
         
@@ -777,14 +816,18 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
-            if let color = self.getTilelet(backgroundColor: item) {
+            if let color = getTilelet(backgroundColor: item) {
-                self.component.color = color
+                component.color = color
             } else {
-                self.colorPickerType = .backgroundColor
+                backgroundColorTokenFormStackView.isHidden = item != .token
-                self.present(self.colorPicker, animated: true)
+                backgroundColorFormStackView.isHidden = item != .custom
-            }            
+            }
         }
         
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.component.color = .token(item)
+        }
+                
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .eyebrow
             self?.eyebrowTokenFormStackView.isHidden = item != .token
@@ -878,6 +921,8 @@ class TileletViewController: BaseViewController<Tilelet> {
                 .black
         case .custom:
                 nil
+        case .token:
+                nil
         }
     }
 }
@@ -917,8 +962,6 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
@@ -929,6 +972,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             var colorView: ColorPickerView<ColorPickerType>
             
             switch currentSurfaceColorType {
+            case .background:
+                colorView = backgroundColorCustomColorView
             case .eyebrow:
                 colorView = eyebrowCustomColorView
             case .title:
@@ -943,6 +988,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             colorView.selectedColor = viewController.selectedColor
             
             switch currentSurfaceColorType {
+            case .background:
+                component.color = .custom(color)
             case .eyebrow:
                 setEyebrowModel()
             case .title:
@@ -971,7 +1018,7 @@ extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -983,6 +1030,8 @@ extension TileletViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                    nil
             case .custom:
                     nil
             }

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -146,31 +146,40 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
 
-        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
+        append(section: .init().with({
-        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
+            $0.title = "\nEyebrow"
-        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+            $0.addFormRow(label: "TextStyle (Subtitle)", view: otherStandardStylePickerSelectorView)
-        addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: eyebrowIsBold)
+            $0.addFormRow(label: "Text", view: eyebrowTextField)
+            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
+        }))
+        
         eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
         eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
         append(section: eyebrowTokenFormStackView)
         append(section: eyebrowColorFormStackView)
 
-        addFormRow(label: "Title is Bold", view: titleIsBold)
+        append(section: .init().with({
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
+            $0.title = "\nTitle"
-        addFormRow(label: "Title Text", view: titleTextField)
+            $0.addFormRow(label: "TextStyle", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: titleIsBold)
+            $0.addFormRow(label: "Text", view: titleTextField)
+            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
+        }))
         titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
         titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
         append(section: titleTokenFormStackView)
         append(section: titleColorFormStackView)
 
-        addFormRow(label: "Subtitle Text", view: subTitleTextField)
+        append(section: .init().with({
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+            $0.title = "\nSubtitle"
+            $0.addFormRow(label: "Subtitle Text", view: subTitleTextField)
+            $0.addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        }))
         subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
         subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
         append(section: subtitleTokenFormStackView)
         append(section: subtitleColorFormStackView)
-
         
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()