refactored ColorPickerView

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDSSample/Classes/ColorPickerView.swift

@@ -9,14 +9,18 @@ import Foundation
 import UIKit
 import VDS
 
-public class ColorPickerView<EnumType>: UIStackView {
+public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
-    public var pickerType: EnumType
     public var selectedColor: UIColor? {
         didSet {
             selectedColorView.backgroundColor = selectedColor
         }
     }
-    
+   
+    private var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        return picker
+    }()
+
     var selectedColorView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
@@ -31,25 +35,30 @@ public class ColorPickerView<EnumType>: UIStackView {
         $0.text = "Select"
     }
 
-    public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) {
+    /// Callback once the user picks a color from the picker.
-        self.pickerType = pickerType
+    public var onColorSelected: ((UIColor) -> Void)?
+
+    public init(color: UIColor? = nil) {
         super.init(frame: .zero)
         if let color {
             selectedColor = color
         }
+        colorPicker.delegate = self
         setup()
-        button.onClick = { _ in onClick(self) }
+        button.onClick = { _ in
+            UIApplication.topViewController()?.present(self.colorPicker, animated: true)
+        }
     }
-    
+
     required init(coder: NSCoder) {
-        fatalError()
+        fatalError("init(coder:) has not been implemented")
     }
-    
+   
     private func setup() {
         distribution = .fillEqually
         alignment = .fill
         spacing = 10
-        
+
         let indicatorWrapper = View()
         indicatorWrapper.addSubview(selectedColorView)
         indicatorWrapper.height(32)
@@ -57,8 +66,9 @@ public class ColorPickerView<EnumType>: UIStackView {
         indicatorWrapper.pinLeading()
         indicatorWrapper.pinBottom()
         indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        
+       
         addArrangedSubview(indicatorWrapper)
+
         let buttonWrapper = View()
         buttonWrapper.addSubview(button)
         buttonWrapper.height(32)
@@ -68,4 +78,15 @@ public class ColorPickerView<EnumType>: UIStackView {
         button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
         addArrangedSubview(buttonWrapper)
     }
+   
+    // MARK: - UIColorPickerViewControllerDelegate
+
+    public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        selectedColor = viewController.selectedColor
+        onColorSelected?(viewController.selectedColor)
+    }
+   
+    public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        UIApplication.topViewController()?.dismiss(animated: true)
+    }
 }

VDSSample/Classes/TokenColorPickerFormSection.swift

@@ -9,33 +9,14 @@ import Foundation
 import UIKit
 import VDS
 
-
-/// This is a Helper FormSection class that deals with Enums that deal with "Token" and "Custom" color pickers.
-/// Then Enum passed into the generic MUST has a case that includes "token" and "custom" values
 public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
-    //TODO: Remove once this is refactored out.
-
-    public enum ColorPicker { case none }
    
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
     private var picker: UIPickerView
-    private lazy var colorPicker: UIColorPickerViewController = {
+    private var rowTitle: String = "Color"   
-        let picker = UIColorPickerViewController()
+    private var rowToolTip: Tooltip.TooltipModel?
-        picker.delegate = pickerHandler
-        return picker
-    }()
-   
-    private lazy var pickerHandler = {
-        PickerHandler().with {
-            $0.onSelectedColor = { [weak self] color in
-                guard let self else { return }
-                customColorView.selectedColor = color
-                onColorSelected?(color)
-            }
-        }
-    }()
 
     ///Handles VDS Color Selections
     private var tokenColorRow: UIView?
@@ -45,15 +26,14 @@ public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>:
                            items: UIColor.VDSColor.allCases)
         .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
     }()
-    
+   
     ///Handles Custom Color picker selections
     private var customColorRow: UIView?
-    private lazy var customColorView: ColorPickerView<ColorPicker> = {
+    private lazy var customColorView: ColorPickerView = {
-        return .init(with: ColorPicker.none, color: .black) { [weak self] picker in
+        .init(color: .black).with {
-            guard let self else { return }
+            $0.onColorSelected =  { [weak self] color in
-            if let selectedColor = picker.selectedColor{
+                guard let self else { return }
-                colorPicker.selectedColor = selectedColor
+                onColorSelected?(color)
-                UIApplication.topViewController()?.present(colorPicker, animated: true)
             }
         }
     }()
@@ -61,16 +41,16 @@ public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>:
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
-    
+   
     /// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well.
     public lazy var pickerSelectorView = {
         PickerSelectorView<EnumType>(title: "",
                                      picker: picker,
                                      items: EnumType.allCases as! [EnumType])
     }()
-    
+
     public var selectedItem: EnumType { pickerSelectorView.selectedItem }
-    
+   
     /// Callback for a non-token/non-color selection
     public var onSelected: ((EnumType) -> Void)?
     /// Callback after "token" is selected from the VDSColor array
@@ -78,62 +58,50 @@ public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>:
     /// Callback once the user picks a color from the picker.
     public var onColorSelected: ((UIColor) -> Void)?
     
-    public var rowTitle: String = "Color"
     ///Pass in a title and the reference for the picker
-    public init(title: String? = nil, rowTitle: String = "Color", picker: UIPickerView) {
+    public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) {
         self.picker = picker
         super.init(frame: .zero)
         self.title = title
         self.rowTitle = rowTitle
+        self.rowToolTip = rowTooltip
         setup()
     }
-    
+   
     required init(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
-    
-    public func setup() {
 
-        addFormRow(label: rowTitle, view: pickerSelectorView)
+    public func setup() {
+        addFormRow(label: rowTitle, tooltip: rowToolTip, view: pickerSelectorView)
         tokenColorRow = addFormRow(label: "Token", view: tokenColorView)
         customColorRow = addFormRow(label: "Custom", view: customColorView)
-        
+       
         tokenColorRow?.isHidden = true
         customColorRow?.isHidden = true
-        
+       
         pickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
             let isToken =  item.rawValue == "token"
             let isCustom =  item.rawValue == "custom"
-            if isToken  {
+            if isToken {
-                onTokenSelected?(tokenColorView.selectedItem)
+                self.onTokenSelected?(self.tokenColorView.selectedItem)
-            } else if let selectedItem = customColorView.selectedColor, isCustom {
+            } else if let selectedItem = self.customColorView.selectedColor, isCustom {
-                onColorSelected?(selectedItem)
+                self.onColorSelected?(selectedItem)
             } else {
-                onSelected?(item)
+                self.onSelected?(item)
             }
-            tokenColorRow?.isHidden = !isToken
+            self.tokenColorRow?.isHidden = !isToken
-            customColorRow?.isHidden = !isCustom
+            self.customColorRow?.isHidden = !isCustom
         }
-        
+       
-        tokenColorView.onPickerDidSelect = {  [weak self] item in
+        tokenColorView.onPickerDidSelect = { [weak self] item in
             guard let self else { return }
-            onTokenSelected?(item)
+            self.onTokenSelected?(item)
         }
     }
-    
+   
     public func setDefault(value: EnumType) {
         pickerSelectorView.set(item: value)
     }
-    
-    private class PickerHandler: NSObject,  UIColorPickerViewControllerDelegate {
-        var onSelectedColor: ((UIColor) -> Void)!
-        func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-            UIApplication.topViewController()?.dismiss(animated: true)
-        }
-        
-        func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-            onSelectedColor(viewController.selectedColor)
-        }
-    }
 }

VDSSample/ViewControllers/ButtonIconViewController.swift

@@ -76,34 +76,36 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         setupModel()
     }
     
-    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
+    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
     
     ///ColorPicker
-    var colorPickerType: ColorPickerType = .light
+    lazy var lightColorPicker: ColorPickerView = {
-    enum ColorPickerType {
+        return .init().with {
-        case light, dark
+            $0.onColorSelected =  { [weak self] _ in
-    }
+                guard let self else { return }
-    
+                updateColors()
-    lazy var colorPicker: UIColorPickerViewController = {
+            }
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
-    }()
-    
-    lazy var lightColorPicker: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) {[weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
         }
     }()
-    
+           
     lazy var darkColorPicker: ColorPickerView = {
-        return .init(with: ColorPickerType.dark) {[weak self] picker in
+        return .init().with {
-            self?.colorPickerType = picker.pickerType
+            $0.onColorSelected =  { [weak self] _ in
-            self?.selectedColorTapped(picker)
+                guard let self else { return }
+                updateColors()
+            }
         }
     }()
     
+    func updateColors() {
+        if let selectedLightColor = lightColorPicker.selectedColor {
+            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
+        } else if let selectedDarkColor = darkColorPicker.selectedColor,
+           let selectedLightColor = lightColorPicker.selectedColor {
+            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
+        }
+    }
+    
     override func setupForm(){
         super.setupForm()
         addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
@@ -111,21 +113,25 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Kind", view: kindPickerSelectorView)
-        addFormRow(label: "Selected Light", view: lightColorPicker)
-        addFormRow(label: "Selected Dark", view: darkColorPicker)
         addFormRow(label: "Floating", view: floating, pinTrailing: false)
         addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
         addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
         addFormRow(label: "Name", view: namePickerSelectorView)
-        addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
-        addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
         addFormRow(label: "X Offset", view: centerX)
         addFormRow(label: "Y Offset", view: centerY)
+
+        append(section: .init().with {
+            $0.title = "Select State"
+            $0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
+            $0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
+            $0.addFormRow(label: "Selected Light", view: lightColorPicker)
+            $0.addFormRow(label: "Selected Dark", view: darkColorPicker)
+        })
         
-        //badgeIndicator section
         addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
+        //badgeIndicator section
         badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
-        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
+        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
         badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
         badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
 
@@ -218,7 +224,8 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     
     func setupModel() {
         let name = Icon.Name.addToFavorite
-        
+        let selectedName = Icon.Name.addedToFavorite
+        component.selectedIconName = selectedName
         component.iconName = name
         component.onChange = { c in print("changed: \(c.isSelected)") }
         //setup UI
@@ -227,6 +234,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         kindPickerSelectorView.text = component.kind.rawValue
         sizePickerSelectorView.text = component.size.rawValue
         namePickerSelectorView.text = name.rawValue
+        selectedIconNamePickerSelectorView.text = selectedName.rawValue
         disabledSwitch.isOn = !component.isEnabled
         badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
     }
@@ -308,27 +316,3 @@ extension ButtonIconViewController: ComponentSampleable {
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
-
-extension ButtonIconViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor
-        let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker
-        selectedColorPickerView.selectedColor = color
-        if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor {
-            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
-        }
-    }
-}

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -13,12 +13,6 @@ import Combine
 
 class TileContainerViewController: BaseViewController<TileContainer> {
     
-    lazy var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
-    }()
-    
     lazy var imageFallbackColorPickerSelectorView = {
         SurfacePickerSelectorView(picker: self.picker)
     }()
@@ -53,12 +47,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     var customPaddingRowView: UIView?
     var anyCancellable: AnyCancellable?
     
-    var contentAreaBackgroundColorButton = Button().with { instance in
-        instance.size = .small
-        instance.use = .secondary
-        instance.text = "Select"
-    }
-    
     var paddingTextField = NumericField().with {
         $0.placeholder = "Custom Padding"
     }
@@ -70,46 +58,50 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
-    var colorPickerType: ColorPickerType = .gradientColor1
+    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
-    enum ColorPickerType {
+        TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
-        case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
+                                picker: self.picker).with {
-    }
+            $0.onSelected = { [weak self] item in
-    
+                guard let self else { return }
-    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+                switch item {
-        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+                case .primary:
-            self?.colorPickerType = picker.pickerType
+                    component.color = .primary
-            self?.selectedColorTapped(picker)
+                case .secondary:
+                    component.color = .secondary
+                case .white:
+                    component.color = .white
+                case .black:
+                    component.color = .black
+                default: break;
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.color = .custom(color.uiColor)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.color = .custom(color)
+
+            }
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
+    lazy var gradientColorView1: ColorPickerView = {
-        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
+        return .init().with {
-            self?.colorPickerType = picker.pickerType
+            $0.onColorSelected =  { [weak self] _ in
-            self?.selectedColorTapped(picker)
+                guard let self else { return }
+                updateGradientColors()
+            }
         }
     }()
     
-    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var gradientColorView2: ColorPickerView = {
-    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
+        return .init().with {
-    
+            $0.onColorSelected =  { [weak self] _ in
-    lazy var backgroundColorPickerSelectorView = {
+                guard let self else { return }
-        PickerSelectorView(title: "",
+                updateGradientColors()
-                           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)
         }
     }()
     
@@ -208,21 +200,10 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         addFormRow(label: "Height", view: heightTextField)
         addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
-        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        append(section: 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
-        let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton)
-        if let rowView = rowView as? UIStackView {
-            rowView.alignment = .top
-        }
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -309,7 +290,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     func setupModel() {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
-        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
         paddingPickerSelectorView.text = padding.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -322,21 +303,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
-        
+                
-        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            guard let self else { return }
-            if let color = item.color {
-                self.component.color = color
-            } else {
-                backgroundColorTokenFormStackView.isHidden = item != .token
-                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 {
@@ -345,7 +312,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
-                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -369,12 +335,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.imageFallbackColor = item
         }
-        
+    }
-        contentAreaBackgroundColorButton.onClick = { [weak self] _ in
+    
-            guard let self else { return }
+    func updateGradientColors(){
-            self.colorPickerType = .contentViewBackgroundColor
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
-            self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
+           let selectedGradient2Color = gradientColorView2.selectedColor{
-            self.present(self.colorPicker, animated: true)
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
     
@@ -389,45 +355,6 @@ extension TileContainerViewController: ComponentSampleable {
     }
 }
 
-extension TileContainerViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-    
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor
-        switch colorPickerType {
-        case .contentViewBackgroundColor:
-            component.contentView.backgroundColor = color
-        case .gradientColor1:
-            gradientColorView1.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .gradientColor2:
-            gradientColorView2.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .custom:
-            backgroundColorCustomColorView.selectedColor = color
-            component.color = .custom(color)
-        }
-    }
-    
-    func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
-           let selectedGradient2Color = gradientColorView2.selectedColor{
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
-        }
-    }
-}
-
 extension TileContainerViewController {
     
     //Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable

VDSSample/ViewControllers/TileletViewController.swift

@@ -61,57 +61,55 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TileContainerViewController.BackgroundEffect.allCases)
     }()
     
-    lazy var colorPicker: UIColorPickerViewController = {
+    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
-        let picker = UIColorPickerViewController()
+        TokenColorPickerSection<BackgroundColor>(
-        picker.delegate = self
+            rowTitle: "Background Color",
-        return picker
+            rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."),
+            picker: self.picker).with {
+                $0.onSelected = { [weak self] item in
+                    guard let self else { return }
+                    switch item {
+                    case .primary:
+                        component.color = .primary
+                    case .secondary:
+                        component.color = .secondary
+                    case .white:
+                        component.color = .white
+                    case .black:
+                        component.color = .black
+                    default: break;
+                    }
+                }
+                $0.onTokenSelected = { [weak self] color in
+                    guard let self else { return }
+                    component.color = .custom(color.uiColor)
+                }
+                $0.onColorSelected = { [weak self] color in
+                    guard let self else { return }
+                    component.color = .custom(color)
+                    
+                }
+            }
     }()
     
-    var colorPickerType: ColorPickerType = .custom
+    lazy var gradientColorView1: ColorPickerView = {
-    enum ColorPickerType {
+        return .init().with {
-        case gradientColor1, gradientColor2
+            $0.onColorSelected =  { [weak self] _ in
-        case contentViewBackgroundColor, token, custom
+                guard let self else { return }
-    }
+                updateGradientColors()
-    
+            }
-    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
+    lazy var gradientColorView2: ColorPickerView = {
-        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
+        return .init().with {
-            self?.colorPickerType = picker.pickerType
+            $0.onColorSelected =  { [weak self] _ in
-            self?.selectedColorTapped(picker)
+                guard let self else { return }
+                updateGradientColors()
+            }
         }
     }()
     
-    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 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,
@@ -393,14 +391,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Width", view: textWidthTextField)
         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)
+        append(section: 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, pinTrailing: false)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -619,7 +610,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         component.subTitleModel = subTitleModel
         component.padding = .small
         //setup UI
-        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
         textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
         surfacePickerSelectorView.text = component.surface.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
@@ -738,6 +729,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         component.directionalIconModel = .init(iconType: iconType, iconColor: directionIconColor, size: iconSize)
     }
     
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+        }
+    }
+    
     func updateOtherTextStyles() {
         let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
         let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
@@ -786,7 +784,6 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
-                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -794,21 +791,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         textAlignmentPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.titleLockup.textAlignment = item
         }
-        
+                    
-        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            guard let self else { return }
-            if let color = getTilelet(backgroundColor: item) {
-                component.color = color
-            } else {
-                backgroundColorTokenFormStackView.isHidden = item != .token
-                backgroundColorFormStackView.isHidden = item != .custom
-            }
-        }
-        
-        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.component.color = .token(item)
-        }
-            
         descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDescriptiveIconModel()
         }
@@ -870,68 +853,6 @@ extension TileletViewController: ComponentSampleable {
     }
 }
 
-extension TileletViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-    
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor 
-        switch colorPickerType {
-        case .contentViewBackgroundColor:
-            component.contentView.backgroundColor = color
-        case .gradientColor1:
-            gradientColorView1.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .gradientColor2:
-            gradientColorView2.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .custom:
-            var colorView: ColorPickerView<ColorPickerType>?
-            
-            switch currentSurfaceColorType {
-            case .background:
-                colorView = backgroundColorCustomColorView
-            default: break
-            }
-            colorView?.selectedColor = viewController.selectedColor
-            
-            switch currentSurfaceColorType {
-            case .background:
-                component.color = .custom(color)
-            case .eyebrow:
-                setEyebrowModel()
-            case .title:
-                setTitleModel()
-            case .subtitle:
-                setSubTitleModel()
-            case .directionalIcon:
-                setDirectionalIconModel()
-            case .descriptionIcon:
-                setDescriptiveIconModel()
-            }            
-        default:
-            break
-        }
-    }
-    
-    func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
-           let selectedGradient2Color = gradientColorView2.selectedColor{
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
-        }
-    }
-}
-
 extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {