From 1646eb75dc11b4c281a366bc2418055322994136 Mon Sep 17 00:00:00 2001 From: vasavk Date: Tue, 30 Jan 2024 10:48:20 +0530 Subject: [PATCH 01/14] story:ONEAPP-6315: Updated background color, drop shadow according to states based on component surface. --- .../Icon/ButtonIcon/ButtonIcon.swift | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 85e0ae6e..dd0c0c71 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -181,13 +181,19 @@ open class ButtonIcon: Control { }() } - private struct LowContrastColorFillFloatingConfiguration: Configuration { + private struct LowContrastColorFillFloatingConfiguration: Configuration, Dropshadowable { var kind: Kind = .lowContrast var surfaceType: SurfaceType = .colorFill var floating: Bool = true var backgroundColorConfiguration: AnyColorable = { - SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, .clear).eraseToAnyColorable() + SurfaceColorConfiguration(VDSColor.paletteWhite, VDSColor.paletteGray20).eraseToAnyColorable() }() + var shadowColorConfiguration: AnyColorable = { + SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteBlack).eraseToAnyColorable() + }() + var shadowOpacity: CGFloat = 0.16 + var shadowOffset: CGSize = .init(width: 0, height: 2) + var shadowRadius: CGFloat = 4 } private struct LowContrastMediaConfiguration: Configuration, Borderable { @@ -195,11 +201,11 @@ open class ButtonIcon: Control { var surfaceType: SurfaceType = .media var floating: Bool = false var backgroundColorConfiguration: AnyColorable = { - SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, .clear).eraseToAnyColorable() + SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, VDSColor.backgroundPrimaryDark).eraseToAnyColorable() }() var borderWidth: CGFloat = 1.0 var borderColorConfiguration: AnyColorable = { - SurfaceColorConfiguration(VDSColor.elementsLowcontrastOnlight, .clear).eraseToAnyColorable() + SurfaceColorConfiguration(VDSColor.elementsLowcontrastOnlight, VDSColor.elementsLowcontrastOndark).eraseToAnyColorable() }() } @@ -208,14 +214,14 @@ open class ButtonIcon: Control { var surfaceType: SurfaceType = .media var floating: Bool = true var backgroundColorConfiguration: AnyColorable = { - SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, .clear).eraseToAnyColorable() + SurfaceColorConfiguration(VDSColor.paletteWhite, VDSColor.paletteGray20).eraseToAnyColorable() }() var shadowColorConfiguration: AnyColorable = { - SurfaceColorConfiguration(VDSColor.paletteBlack, .clear).eraseToAnyColorable() + SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteBlack).eraseToAnyColorable() }() var shadowOpacity: CGFloat = 0.16 var shadowOffset: CGSize = .init(width: 0, height: 2) - var shadowRadius: CGFloat = 2 + var shadowRadius: CGFloat = 4 } private struct HighContrastConfiguration: Configuration { @@ -232,17 +238,23 @@ open class ButtonIcon: Control { }() } - private struct HighContrastFloatingConfiguration: Configuration { + private struct HighContrastFloatingConfiguration: Configuration, Dropshadowable { var kind: Kind = .highContrast var surfaceType: SurfaceType = .colorFill var floating: Bool = true var backgroundColorConfiguration: AnyColorable = { return ControlColorConfiguration().with { - $0.setSurfaceColors(VDSColor.backgroundPrimaryLight, VDSColor.backgroundPrimaryLight, forState: .normal) + $0.setSurfaceColors(VDSColor.paletteGray20, VDSColor.paletteWhite, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) }.eraseToAnyColorable() }() + var shadowColorConfiguration: AnyColorable = { + SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteBlack).eraseToAnyColorable() + }() + var shadowOpacity: CGFloat = 0.16 + var shadowOffset: CGSize = .init(width: 0, height: 2) + var shadowRadius: CGFloat = 6 } //-------------------------------------------------- From 95d638ebf43f968b1ee8e2cc8be419143f44b4e2 Mon Sep 17 00:00:00 2001 From: vasavk Date: Wed, 7 Feb 2024 13:12:39 +0530 Subject: [PATCH 02/14] having badge indicator object for the buttonIcon --- .../Icon/ButtonIcon/ButtonIcon.swift | 47 ++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index dd0c0c71..7a768c80 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -43,6 +43,11 @@ open class ButtonIcon: Control { case colorFill, media } + /// Enum used to describe the badge indicator direction of icon button determining the expand direction. + public enum ExpandDirection: String, CaseIterable { + case right, center, left + } + /// Enum used to describe the size of button icon. public enum Size: String, EnumSubset { case large @@ -67,6 +72,8 @@ open class ButtonIcon: Control { private var centerYConstraint: NSLayoutConstraint? private var layoutGuideWidthConstraint: NSLayoutConstraint? private var layoutGuideHeightConstraint: NSLayoutConstraint? + private var badgeIndicatorLeadingConstraint: NSLayoutConstraint? + private var badgeIndicatorBottomConstraint: NSLayoutConstraint? private var currentIconName: Icon.Name? { if let selectedIconName { return selectedIconName @@ -75,9 +82,31 @@ open class ButtonIcon: Control { } } + private var badgeIndicatorOffset: CGPoint { + switch (size, kind) { + case (.small, .ghost): + return .init(x: 1, y: 0) + case (.large, .ghost): + return .init(x: 1, y: 1) + case (.small, .lowContrast), (.small, .highContrast): + return .init(x: 4, y: 4) + case (.large, .lowContrast), (.large, .highContrast): + return .init(x: 6, y: 6) + } + } + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- + + ///BadgeIndicator object used to render for the ButtonIcon. + open var badgeIndicator = BadgeIndicator().with { + $0.translatesAutoresizingMaskIntoConstraints = false +// $0.hideBorder = true +// $0.borderWidth = 0 + $0.size = .small + } + /// Icon object used to render out the Icon for this ButtonIcon. open var icon = Icon().with { $0.isUserInteractionEnabled = false } @@ -107,7 +136,13 @@ open class ButtonIcon: Control { /// If set to true, the button icon will not have a border. open var hideBorder: Bool = true { didSet { setNeedsUpdate() } } + + /// If provided, the badge indicator will present. + open var showBadge: Bool = false { didSet { setNeedsUpdate() } } + /// If provided, the button icon will have selectable Icon. + open var selectable: Bool = false { didSet { setNeedsUpdate() } } + /// Used to move the icon inside the button in both x and y axis. open var iconOffset: CGPoint = .init(x: 0, y: 0) { didSet { setNeedsUpdate() } } @@ -270,11 +305,16 @@ open class ButtonIcon: Control { //add the icon addSubview(icon) + addSubview(badgeIndicator) + badgeIndicator.isHidden = !showBadge //determines the height/width of the icon layoutGuideWidthConstraint = iconLayoutGuide.width(constant: size.containerSize) layoutGuideHeightConstraint = iconLayoutGuide.height(constant: size.containerSize) - + badgeIndicatorBottomConstraint = icon.centerYAnchor.constraint(equalTo: badgeIndicator.bottomAnchor) + badgeIndicatorLeadingConstraint = badgeIndicator.leadingAnchor.constraint(equalTo: icon.centerXAnchor) + badgeIndicatorBottomConstraint?.isActive = true + badgeIndicatorLeadingConstraint?.isActive = true //pin layout guide iconLayoutGuide .pinTop() @@ -300,6 +340,9 @@ open class ButtonIcon: Control { hideBorder = true iconOffset = .init(x: 0, y: 0) iconName = nil +// selectableIconName = nil + showBadge = false + selectable = false shouldUpdateView = true setNeedsUpdate() } @@ -318,6 +361,8 @@ open class ButtonIcon: Control { } else { icon.reset() } + badgeIndicatorLeadingConstraint?.constant = badgeIndicatorOffset.x + badgeIndicatorBottomConstraint?.constant = badgeIndicatorOffset.y setNeedsLayout() } From 206cbf04e47208bd605653c5c9263b51bff1d4d1 Mon Sep 17 00:00:00 2001 From: vasavk Date: Thu, 8 Feb 2024 13:19:47 +0530 Subject: [PATCH 03/14] story:ONEAPP-6315: using struct to set badge indicator properties --- VDS.xcodeproj/project.pbxproj | 4 + .../Icon/ButtonIcon/ButtonIcon.swift | 34 +++++++- .../ButtonIconBadgeIndicatorModel.swift | 78 +++++++++++++++++++ 3 files changed, 113 insertions(+), 3 deletions(-) create mode 100644 VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index 28cadb8a..0356c108 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -7,6 +7,7 @@ objects = { /* Begin PBXBuildFile section */ + 18792A902B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */; }; 445BA07829C07B3D0036A7C5 /* Notification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07729C07B3D0036A7C5 /* Notification.swift */; }; 44604AD429CE186A00E62B51 /* NotificationButtonModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD329CE186A00E62B51 /* NotificationButtonModel.swift */; }; 44604AD729CE196600E62B51 /* Line.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD629CE196600E62B51 /* Line.swift */; }; @@ -168,6 +169,7 @@ /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ + 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconBadgeIndicatorModel.swift; sourceTree = ""; }; 445BA07729C07B3D0036A7C5 /* Notification.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Notification.swift; sourceTree = ""; }; 44604AD329CE186A00E62B51 /* NotificationButtonModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationButtonModel.swift; sourceTree = ""; }; 44604AD629CE196600E62B51 /* Line.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Line.swift; sourceTree = ""; }; @@ -671,6 +673,7 @@ isa = PBXGroup; children = ( EA81410A2A0E8E3C004F60D2 /* ButtonIcon.swift */, + 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */, ); path = ButtonIcon; sourceTree = ""; @@ -1060,6 +1063,7 @@ EA5E30532950DDA60082B959 /* TitleLockup.swift in Sources */, EAD062B02A3B873E0015965D /* BadgeIndicator.swift in Sources */, EAA5EEB528ECBFB4003B3210 /* ImageLabelAttribute.swift in Sources */, + 18792A902B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift in Sources */, EA0B18062A9E2D2D00F2D0CD /* SelectorItemBase.swift in Sources */, EAB5FF0129424ACB00998C17 /* UIControl.swift in Sources */, EA985BF5296C60C000F2FF2E /* Icon.swift in Sources */, diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 7a768c80..a15cef68 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -99,14 +99,15 @@ open class ButtonIcon: Control { // MARK: - Public Properties //-------------------------------------------------- - ///BadgeIndicator object used to render for the ButtonIcon. + ///Badge Indicator object used to render for the ButtonIcon. open var badgeIndicator = BadgeIndicator().with { $0.translatesAutoresizingMaskIntoConstraints = false -// $0.hideBorder = true -// $0.borderWidth = 0 $0.size = .small } + /// If set, this is used to render the badge indicator. + open var badgeIndicatorModel: BadgeIndicatorModel? { didSet { setNeedsUpdate() } } + /// Icon object used to render out the Icon for this ButtonIcon. open var icon = Icon().with { $0.isUserInteractionEnabled = false } @@ -305,6 +306,8 @@ open class ButtonIcon: Control { //add the icon addSubview(icon) + + //add badgeIndicator addSubview(badgeIndicator) badgeIndicator.isHidden = !showBadge @@ -343,6 +346,7 @@ open class ButtonIcon: Control { // selectableIconName = nil showBadge = false selectable = false + badgeIndicatorModel = nil shouldUpdateView = true setNeedsUpdate() } @@ -361,6 +365,7 @@ open class ButtonIcon: Control { } else { icon.reset() } + updateBadgeIndicator() badgeIndicatorLeadingConstraint?.constant = badgeIndicatorOffset.x badgeIndicatorBottomConstraint?.constant = badgeIndicatorOffset.y setNeedsLayout() @@ -410,6 +415,29 @@ open class ButtonIcon: Control { } } + + //-------------------------------------------------- + // MARK: - Private Methods + //-------------------------------------------------- + private func updateBadgeIndicator() { + if let badgeIndicatorModel { + badgeIndicator.kind = badgeIndicatorModel.kind + badgeIndicator.fillColor = badgeIndicatorModel.fillColor + badgeIndicator.surface = badgeIndicatorModel.surface + badgeIndicator.size = badgeIndicatorModel.size + badgeIndicator.maximumDigits = badgeIndicatorModel.maximumDigits + badgeIndicator.width = badgeIndicatorModel.width + badgeIndicator.height = badgeIndicatorModel.height + badgeIndicator.number = badgeIndicatorModel.number + badgeIndicator.leadingCharacter = badgeIndicatorModel.leadingCharacter + badgeIndicator.trailingText = badgeIndicatorModel.trailingText + badgeIndicator.dotSize = badgeIndicatorModel.dotSize + badgeIndicator.verticalPadding = badgeIndicatorModel.verticalPadding + badgeIndicator.horizontalPadding = badgeIndicatorModel.horizontalPadding + badgeIndicator.hideDot = badgeIndicatorModel.hideDot + badgeIndicator.hideBorder = badgeIndicatorModel.hideBorder + } + } } // MARK: AppleGuidelinesTouchable diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift b/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift new file mode 100644 index 00000000..b30e64e8 --- /dev/null +++ b/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift @@ -0,0 +1,78 @@ +// +// ButtonIconBadgeIndicatorModel.swift +// VDS +// +// Created by Kanamarlapudi, Vasavi on 08/02/24. +// + +import Foundation + +extension ButtonIcon { + + //Model that represents the options available for the Badge Indicator + public struct BadgeIndicatorModel { + + /// Kind that will be used for the badge indicator. + public var kind: BadgeIndicator.Kind + + /// Fill color that will be used for the badge indicator. + public var fillColor: BadgeIndicator.FillColor + + /// Current Surface and this is used to pass down to child objects that implement Surfacable + public var surface: Surface + + /// Size that will be used for the badge indicator. + public var size: BadgeIndicator.Size + + /// Number of digits that will be used for the badge indicator. + public var maximumDigits: BadgeIndicator.MaximumDigits + + /// Max width that will be used for the badge indicator. + public var width: CGFloat? + + /// Max height that will be used for the badge indicator. + public var height: CGFloat? + + /// Number that will be used for the badge indicator. + public var number: Int? + + /// Leading Character that will be used for the badge indicator. + public var leadingCharacter: String? + + /// Trailing Text height that will be used for the badge indicator. + public var trailingText: String? + + /// Dot Size that will be used for the badge indicator. + public var dotSize: CGFloat? + + /// Vertical Padding that will be used for the badge indicator. + public var verticalPadding: CGFloat? + + /// Horizontal Padding that will be used for the badge indicator. + public var horizontalPadding: CGFloat? + + /// Hide Dot that will be used for the badge indicator. + public var hideDot: Bool = false + + /// Hide Border that will be used for the badge indicator. + public var hideBorder: Bool = false + + public init(kind: BadgeIndicator.Kind = .simple, fillColor: BadgeIndicator.FillColor = .red, surface: Surface = .light, size: BadgeIndicator.Size = .xxlarge, maximumDigits: BadgeIndicator.MaximumDigits = .two, width: CGFloat? = nil, height: CGFloat? = nil, number: Int? = nil, leadingCharacter: String = "", trailingText: String = "", dotSize: CGFloat? = nil, verticalPadding: CGFloat? = nil, horizontalPadding: CGFloat? = nil, hideDot: Bool = false, hideBorder: Bool = false) { + self.kind = kind + self.fillColor = fillColor + self.surface = surface + self.size = size + self.maximumDigits = maximumDigits + self.width = width + self.height = height + self.number = number + self.leadingCharacter = leadingCharacter + self.trailingText = trailingText + self.dotSize = dotSize + self.verticalPadding = verticalPadding + self.horizontalPadding = horizontalPadding + self.hideDot = hideDot + self.hideBorder = hideBorder + } + } +} From 77c1026278cb8c456ec75824c003bda128dd1360 Mon Sep 17 00:00:00 2001 From: vasavk Date: Thu, 8 Feb 2024 22:58:15 +0530 Subject: [PATCH 04/14] story:ONEAPP-6315: Changes for the ExpandDirection picker, the button icon has no border if hideBorder is turned on --- .../Icon/ButtonIcon/ButtonIcon.swift | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index a15cef68..5b09a13d 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -139,7 +139,7 @@ open class ButtonIcon: Control { open var hideBorder: Bool = true { didSet { setNeedsUpdate() } } /// If provided, the badge indicator will present. - open var showBadge: Bool = false { didSet { setNeedsUpdate() } } + open var showBadgeIndicator: Bool = false { didSet { setNeedsUpdate() } } /// If provided, the button icon will have selectable Icon. open var selectable: Bool = false { didSet { setNeedsUpdate() } } @@ -147,6 +147,9 @@ open class ButtonIcon: Control { /// Used to move the icon inside the button in both x and y axis. open var iconOffset: CGPoint = .init(x: 0, y: 0) { didSet { setNeedsUpdate() } } + /// Applies expand direction to Badge Indicator if shows badge indicator. + open var expandDirection: ExpandDirection = .right { didSet { setNeedsUpdate() } } + //-------------------------------------------------- // MARK: - Configuration //-------------------------------------------------- @@ -309,7 +312,7 @@ open class ButtonIcon: Control { //add badgeIndicator addSubview(badgeIndicator) - badgeIndicator.isHidden = !showBadge + badgeIndicator.isHidden = !showBadgeIndicator //determines the height/width of the icon layoutGuideWidthConstraint = iconLayoutGuide.width(constant: size.containerSize) @@ -344,9 +347,10 @@ open class ButtonIcon: Control { iconOffset = .init(x: 0, y: 0) iconName = nil // selectableIconName = nil - showBadge = false + showBadgeIndicator = false selectable = false badgeIndicatorModel = nil + expandDirection = .right shouldUpdateView = true setNeedsUpdate() } @@ -400,7 +404,7 @@ open class ButtonIcon: Control { layoutGuideHeightConstraint?.constant = iconLayoutSize //border - if let borderable = currentConfig as? Borderable { + if let borderable = currentConfig as? Borderable, self.hideBorder { layer.borderColor = borderable.borderColorConfiguration.getColor(self).cgColor layer.borderWidth = borderable.borderWidth } else { @@ -413,7 +417,10 @@ open class ButtonIcon: Control { } else { removeDropShadow() } - + + if showBadgeIndicator { + updateExpandDirectionalConstraints() + } } //-------------------------------------------------- @@ -438,6 +445,16 @@ open class ButtonIcon: Control { badgeIndicator.hideBorder = badgeIndicatorModel.hideBorder } } + + private func updateExpandDirectionalConstraints() { + if expandDirection == .right { + print("expandDirection -> Right") + } else if expandDirection == .center { + print("expandDirection -> center") + } else if expandDirection == .left { + print("expandDirection -> left") + } + } } // MARK: AppleGuidelinesTouchable From 0c9a689e13d9d41cf6456a0a1edda3ca43453118 Mon Sep 17 00:00:00 2001 From: vasavk Date: Thu, 8 Feb 2024 23:11:34 +0530 Subject: [PATCH 05/14] story:ONEAPP-6315: added buttonIcon changeLog --- VDS.xcodeproj/project.pbxproj | 4 + .../Icon/ButtonIcon/ButtonIconChangeLog.txt | 79 +++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 VDS/Components/Icon/ButtonIcon/ButtonIconChangeLog.txt diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index 0356c108..7a9467eb 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -8,6 +8,7 @@ /* Begin PBXBuildFile section */ 18792A902B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */; }; + 18BDEE822B75316E00452358 /* ButtonIconChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 18BDEE812B75316E00452358 /* ButtonIconChangeLog.txt */; }; 445BA07829C07B3D0036A7C5 /* Notification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07729C07B3D0036A7C5 /* Notification.swift */; }; 44604AD429CE186A00E62B51 /* NotificationButtonModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD329CE186A00E62B51 /* NotificationButtonModel.swift */; }; 44604AD729CE196600E62B51 /* Line.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD629CE196600E62B51 /* Line.swift */; }; @@ -170,6 +171,7 @@ /* Begin PBXFileReference section */ 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconBadgeIndicatorModel.swift; sourceTree = ""; }; + 18BDEE812B75316E00452358 /* ButtonIconChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = ButtonIconChangeLog.txt; sourceTree = ""; }; 445BA07729C07B3D0036A7C5 /* Notification.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Notification.swift; sourceTree = ""; }; 44604AD329CE186A00E62B51 /* NotificationButtonModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationButtonModel.swift; sourceTree = ""; }; 44604AD629CE196600E62B51 /* Line.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Line.swift; sourceTree = ""; }; @@ -674,6 +676,7 @@ children = ( EA81410A2A0E8E3C004F60D2 /* ButtonIcon.swift */, 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */, + 18BDEE812B75316E00452358 /* ButtonIconChangeLog.txt */, ); path = ButtonIcon; sourceTree = ""; @@ -941,6 +944,7 @@ EAEEECAF2B1FC2BA00531FC2 /* ToggleViewChangeLog.txt in Resources */, EAEEEC922B1F807300531FC2 /* BadgeChangeLog.txt in Resources */, EAEEEC9E2B1F8F7700531FC2 /* ButtonGroupChangeLog.txt in Resources */, + 18BDEE822B75316E00452358 /* ButtonIconChangeLog.txt in Resources */, EA3362062891E14D0071C351 /* VerizonNHGeTX-Regular.otf in Resources */, EA3362052891E14D0071C351 /* VerizonNHGeDS-Bold.otf in Resources */, EAEEECA02B1F908200531FC2 /* BadgeIndicatorChangeLog.txt in Resources */, diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIconChangeLog.txt b/VDS/Components/Icon/ButtonIcon/ButtonIconChangeLog.txt new file mode 100644 index 00000000..df1dcb5f --- /dev/null +++ b/VDS/Components/Icon/ButtonIcon/ButtonIconChangeLog.txt @@ -0,0 +1,79 @@ + +03/30/2023 +---------------- +- Dev handoff + +04/06/2023 +---------------- +- Changed component name to Button Icon. + +04/13/2023 +---------------- +- Dev handoff (additional states) + +04/20/2023 +---------------- +- Added Selectable and Selected properties in Configuration. + +05/01/2023 +---------------- +- Added fitToIcon prop for Ghost variation. + +05/03/2023 +---------------- +- Updated drop shadows for light and dark floating buttons (all states) +- Removed border from all floating buttons +- Updated all dark floating button backgrounds to gray.20
 +- Disabled icons on gray.20 changed to palette.black 70% opacity for floating buttons +- Reduce Inside focusborderPosition to 1px + +05/25/2023 +---------------- +- Added hideBorder prop back to Configurations
 +- Added showBadgeIndicator prop to Configurations
 +- Added Hit Area support for Button Icon with Badge Indicator
 +- Added Elements page for Badge Indicator with default settings and offset information
 +- Updated Badge Indicator Offset to be based on center of Icon container + +05/30/2023 +---------------- +- Added expandDirection prop to Configurations under Badge Indicator section. + +06/02/2023 +---------------- +- Added Additional Border Color specification if hideBorder=True on Low Contrast hover states. + +06/12/2023 +---------------- +- Ghost Icon Cart position updated from {1,2} to {1,1}. + +06/13/2023 +---------------- +- Updated Drop shadow properties layout in States. + +06/29/2023 +---------------- +- Updated Badge Indicator simple dot size to 4px. + +08/18/2023 +---------------- +- Updated default icon color for all selected Button Icon states to element.primary.onlight for light surfaces and element.primary.ondark for dark surfaces. +- Added a dev note that this default color can be set to a custom color (like red). + +11/16/2023 +---------------- +- Added component tokens +- Applied component tokens throughout states +- Applied semantic inverse to primary element, background states on light and dark surfaces + +12/1/2023 +---------------- +- Reapplied component token updates to Ghost States + +1/9/2024 +---------------- +- Fixed incorrect Low Contrast border token + +1/25/2024 +---------------- +- Removed redundant opacity specs in States (dark surface). From 960cf33b4193e3765c218bea71c52550e039bdfd Mon Sep 17 00:00:00 2001 From: vasavk Date: Fri, 9 Feb 2024 16:45:50 +0530 Subject: [PATCH 06/14] story:ONEAPP-6315: made changes for selectedIconName, and selected state of buttonIcon --- VDS/Components/Icon/ButtonIcon/ButtonIcon.swift | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 5b09a13d..5e1e792e 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -75,7 +75,7 @@ open class ButtonIcon: Control { private var badgeIndicatorLeadingConstraint: NSLayoutConstraint? private var badgeIndicatorBottomConstraint: NSLayoutConstraint? private var currentIconName: Icon.Name? { - if let selectedIconName { + if let selectedIconName, selectable { return selectedIconName } else { return iconName @@ -120,7 +120,7 @@ open class ButtonIcon: Control { /// Icon Name used within the Icon. open var iconName: Icon.Name? { didSet { setNeedsUpdate() } } - /// Icon Name used within the Icon within the Selected State. + /// Selected Icon Name used within the Icon if selectable true. open var selectedIconName: Icon.Name? { didSet { setNeedsUpdate() } } /// Sets the size of button icon and icon. @@ -141,7 +141,7 @@ open class ButtonIcon: Control { /// If provided, the badge indicator will present. open var showBadgeIndicator: Bool = false { didSet { setNeedsUpdate() } } - /// If provided, the button icon will have selectable Icon. + /// If true, button will be rendered as selected, when it is selectable. open var selectable: Bool = false { didSet { setNeedsUpdate() } } /// Used to move the icon inside the button in both x and y axis. @@ -154,7 +154,7 @@ open class ButtonIcon: Control { // MARK: - Configuration //-------------------------------------------------- private var iconColorConfiguration: AnyColorable { - if selectedIconName != nil { + if selectedIconName != nil, selectable { return selectedIconColorConfiguration } else { if kind == .highContrast { @@ -346,7 +346,7 @@ open class ButtonIcon: Control { hideBorder = true iconOffset = .init(x: 0, y: 0) iconName = nil -// selectableIconName = nil + selectedIconName = nil showBadgeIndicator = false selectable = false badgeIndicatorModel = nil From ff5f7e5f5582143d08671bb963f9cb6087b53ef5 Mon Sep 17 00:00:00 2001 From: vasavk Date: Mon, 12 Feb 2024 13:25:58 +0530 Subject: [PATCH 07/14] story:ONEAPP-6315: expand direction configuration changes --- .../Icon/ButtonIcon/ButtonIcon.swift | 46 +++++++++++++------ 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 5e1e792e..19b78e6f 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -73,7 +73,9 @@ open class ButtonIcon: Control { private var layoutGuideWidthConstraint: NSLayoutConstraint? private var layoutGuideHeightConstraint: NSLayoutConstraint? private var badgeIndicatorLeadingConstraint: NSLayoutConstraint? - private var badgeIndicatorBottomConstraint: NSLayoutConstraint? + private var badgeIndicatorTrailingConstraint: NSLayoutConstraint? + private var badgeIndicatorCenterXConstraint: NSLayoutConstraint? + private var badgeIndicatorCenterYConstraint: NSLayoutConstraint? private var currentIconName: Icon.Name? { if let selectedIconName, selectable { return selectedIconName @@ -295,7 +297,9 @@ open class ButtonIcon: Control { var shadowOffset: CGSize = .init(width: 0, height: 2) var shadowRadius: CGFloat = 6 } - + + private var badgeIndicatorDefaultSize: CGSize = .zero + //-------------------------------------------------- // MARK: - Overrides //-------------------------------------------------- @@ -313,13 +317,17 @@ open class ButtonIcon: Control { //add badgeIndicator addSubview(badgeIndicator) badgeIndicator.isHidden = !showBadgeIndicator - + badgeIndicatorDefaultSize = badgeIndicator.frame.size + //determines the height/width of the icon layoutGuideWidthConstraint = iconLayoutGuide.width(constant: size.containerSize) layoutGuideHeightConstraint = iconLayoutGuide.height(constant: size.containerSize) - badgeIndicatorBottomConstraint = icon.centerYAnchor.constraint(equalTo: badgeIndicator.bottomAnchor) badgeIndicatorLeadingConstraint = badgeIndicator.leadingAnchor.constraint(equalTo: icon.centerXAnchor) - badgeIndicatorBottomConstraint?.isActive = true + badgeIndicatorTrailingConstraint = badgeIndicator.trailingAnchor.constraint(equalTo: icon.centerXAnchor) + badgeIndicatorCenterXConstraint = badgeIndicator.centerXAnchor.constraint(equalTo: icon.centerXAnchor) + badgeIndicatorCenterYConstraint = icon.centerYAnchor.constraint(equalTo: badgeIndicator.centerYAnchor) + badgeIndicatorCenterYConstraint?.isActive = true + badgeIndicatorLeadingConstraint?.isActive = true //pin layout guide iconLayoutGuide @@ -370,8 +378,6 @@ open class ButtonIcon: Control { icon.reset() } updateBadgeIndicator() - badgeIndicatorLeadingConstraint?.constant = badgeIndicatorOffset.x - badgeIndicatorBottomConstraint?.constant = badgeIndicatorOffset.y setNeedsLayout() } @@ -417,7 +423,12 @@ open class ButtonIcon: Control { } else { removeDropShadow() } - + + badgeIndicatorCenterXConstraint?.constant = badgeIndicatorOffset.x + badgeIndicatorDefaultSize.width/2 + badgeIndicatorCenterYConstraint?.constant = badgeIndicatorOffset.y + badgeIndicatorDefaultSize.height/2 + badgeIndicatorLeadingConstraint?.constant = badgeIndicatorOffset.x + badgeIndicatorTrailingConstraint?.constant = badgeIndicatorOffset.x + badgeIndicatorDefaultSize.width + if showBadgeIndicator { updateExpandDirectionalConstraints() } @@ -447,12 +458,19 @@ open class ButtonIcon: Control { } private func updateExpandDirectionalConstraints() { - if expandDirection == .right { - print("expandDirection -> Right") - } else if expandDirection == .center { - print("expandDirection -> center") - } else if expandDirection == .left { - print("expandDirection -> left") + switch expandDirection { + case .right: + badgeIndicatorLeadingConstraint?.isActive = true + badgeIndicatorTrailingConstraint?.isActive = false + badgeIndicatorCenterXConstraint?.isActive = false + case .center: + badgeIndicatorLeadingConstraint?.isActive = false + badgeIndicatorTrailingConstraint?.isActive = false + badgeIndicatorCenterXConstraint?.isActive = true + case .left: + badgeIndicatorLeadingConstraint?.isActive = false + badgeIndicatorCenterXConstraint?.isActive = false + badgeIndicatorTrailingConstraint?.isActive = true } } } From 7ec8b792eeb0008034dce7a821d9003bd7e9c65d Mon Sep 17 00:00:00 2001 From: vasavk Date: Mon, 12 Feb 2024 16:04:33 +0530 Subject: [PATCH 08/14] story:ONEAPP-6315: added accessibility --- VDS/Components/Icon/ButtonIcon/ButtonIcon.swift | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 19b78e6f..12e5ee70 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -306,7 +306,10 @@ open class ButtonIcon: Control { /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations. open override func setup() { super.setup() - + isAccessibilityElement = true + accessibilityTraits = .image + accessibilityElements = [badgeIndicator] + //create a layoutGuide for the icon to key off of let iconLayoutGuide = UILayoutGuide() addLayoutGuide(iconLayoutGuide) @@ -473,8 +476,14 @@ open class ButtonIcon: Control { badgeIndicatorTrailingConstraint?.isActive = true } } + + /// Used to update any Accessibility properties. + open override func updateAccessibility() { + super.updateAccessibility() + setAccessibilityLabel(for: [icon, badgeIndicator.label]) + } } - + // MARK: AppleGuidelinesTouchable extension ButtonIcon: AppleGuidelinesTouchable { /// Overrides to ensure that the touch point meets a minimum of the minimumTappableArea. From b3b3fa6965115633c1880b066ec6525ece131414 Mon Sep 17 00:00:00 2001 From: vasavk Date: Mon, 12 Feb 2024 20:27:19 +0530 Subject: [PATCH 09/14] story:ONEAPP-6315: updated icon and background color configurations as per spec --- .../Icon/ButtonIcon/ButtonIcon.swift | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 12e5ee70..247be717 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -156,14 +156,12 @@ open class ButtonIcon: Control { // MARK: - Configuration //-------------------------------------------------- private var iconColorConfiguration: AnyColorable { - if selectedIconName != nil, selectable { - return selectedIconColorConfiguration + if kind == .highContrast { + return highContrastIconColorConfiguration + } else if kind == .lowContrast { + return (surfaceType == .colorFill) ? lowContrastIconColorConfiguration : (floating ? lowContrastIconColorConfiguration : standardIconColorConfiguration) } else { - if kind == .highContrast { - return highContrastIconColorConfiguration - } else { - return standardIconColorConfiguration - } + return standardIconColorConfiguration } } @@ -192,16 +190,16 @@ open class ButtonIcon: Control { }.eraseToAnyColorable() }() - private var highContrastIconColorConfiguration: AnyColorable = { - return SurfaceColorConfiguration(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight).eraseToAnyColorable() + private var lowContrastIconColorConfiguration: AnyColorable = { + return ControlColorConfiguration().with { + $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal) + $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: .disabled) + }.eraseToAnyColorable() }() - private var selectedIconColorConfiguration: AnyColorable = { - return ControlColorConfiguration().with { - $0.setSurfaceColors(VDSColor.elementsBrandhighlight, VDSColor.elementsPrimaryOndark, forState: .normal) - $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) - }.eraseToAnyColorable() + private var highContrastIconColorConfiguration: AnyColorable = { + return SurfaceColorConfiguration(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight).eraseToAnyColorable() }() private struct GhostConfiguration: Configuration { From 7b9ba1acba58f23dc44a8c53560ea5f5088e0b70 Mon Sep 17 00:00:00 2001 From: vasavk Date: Tue, 13 Feb 2024 20:40:30 +0530 Subject: [PATCH 10/14] story:ONEAPP-6315: added the selected state for the color configuration --- VDS/Components/Icon/ButtonIcon/ButtonIcon.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 247be717..020f6c7d 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -186,7 +186,7 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -194,7 +194,7 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -271,7 +271,7 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -285,7 +285,7 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.paletteGray20, VDSColor.paletteWhite, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) - $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() var shadowColorConfiguration: AnyColorable = { From b80e1ed18a7577f38e29170a278f68c51aee924e Mon Sep 17 00:00:00 2001 From: vasavk Date: Tue, 13 Feb 2024 22:11:57 +0530 Subject: [PATCH 11/14] story:ONEAPP-6315: updated color configurations for each state. --- VDS/Components/Icon/ButtonIcon/ButtonIcon.swift | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 020f6c7d..59f6a96a 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -122,7 +122,7 @@ open class ButtonIcon: Control { /// Icon Name used within the Icon. open var iconName: Icon.Name? { didSet { setNeedsUpdate() } } - /// Selected Icon Name used within the Icon if selectable true. + /// Icon Name used within the Icon within the Selected State. open var selectedIconName: Icon.Name? { didSet { setNeedsUpdate() } } /// Sets the size of button icon and icon. @@ -186,6 +186,9 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected) + $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -194,6 +197,9 @@ open class ButtonIcon: Control { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: .disabled) + $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected) + $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -270,7 +276,10 @@ open class ButtonIcon: Control { var backgroundColorConfiguration: AnyColorable = { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .normal) + $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .selected) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() @@ -284,7 +293,10 @@ open class ButtonIcon: Control { var backgroundColorConfiguration: AnyColorable = { return ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.paletteGray20, VDSColor.paletteWhite, forState: .normal) + $0.setSurfaceColors(VDSColor.paletteGray20, VDSColor.paletteWhite, forState: .selected) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) + $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) + $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() From fd29a57d19251a918b9e9b649115453618b61bc4 Mon Sep 17 00:00:00 2001 From: vasavk Date: Wed, 14 Feb 2024 18:37:42 +0530 Subject: [PATCH 12/14] story:ONEAPP-6315: Changes to determine if a control is "iselected" or not, and removed unnecessary states for surface colors. --- .../Icon/ButtonIcon/ButtonIcon.swift | 41 ++++++++++++++++--- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 59f6a96a..a26765e6 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -8,12 +8,13 @@ import Foundation import UIKit import VDSColorTokens +import Combine /// A button icon is an interactive element that visually communicates the action it triggers via an icon. /// It usually represents a supplementary or utilitarian action. A button icon can stand alone, but often /// exists in a group when there are several actions that can be performed. @objc(VDSButtonIcon) -open class ButtonIcon: Control { +open class ButtonIcon: Control, Changeable, FormFieldable { //-------------------------------------------------- // MARK: - Initializers @@ -77,7 +78,7 @@ open class ButtonIcon: Control { private var badgeIndicatorCenterXConstraint: NSLayoutConstraint? private var badgeIndicatorCenterYConstraint: NSLayoutConstraint? private var currentIconName: Icon.Name? { - if let selectedIconName, selectable { + if let selectedIconName, isSelected { return selectedIconName } else { return iconName @@ -144,7 +145,15 @@ open class ButtonIcon: Control { open var showBadgeIndicator: Bool = false { didSet { setNeedsUpdate() } } /// If true, button will be rendered as selected, when it is selectable. - open var selectable: Bool = false { didSet { setNeedsUpdate() } } + open var selectable: Bool = false { + didSet { + //unselect + if !selectable && isSelected { + isSelected = false + } + setNeedsUpdate() + } + } /// Used to move the icon inside the button in both x and y axis. open var iconOffset: CGPoint = .init(x: 0, y: 0) { didSet { setNeedsUpdate() } } @@ -152,6 +161,12 @@ open class ButtonIcon: Control { /// Applies expand direction to Badge Indicator if shows badge indicator. open var expandDirection: ExpandDirection = .right { didSet { setNeedsUpdate() } } + open var onChangeSubscriber: AnyCancellable? + + open var inputId: String? { didSet { setNeedsUpdate() } } + + open var value: AnyHashable? { didSet { setNeedsUpdate() } } + //-------------------------------------------------- // MARK: - Configuration //-------------------------------------------------- @@ -199,7 +214,6 @@ open class ButtonIcon: Control { $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: .disabled) $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected) - $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -279,7 +293,6 @@ open class ButtonIcon: Control { $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .selected) $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) - $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() @@ -356,6 +369,24 @@ open class ButtonIcon: Control { centerYConstraint?.activate() } + /// Executed on initialization for this View. + open override func initialSetup() { + super.initialSetup() + onClick = { control in + guard control.isEnabled else { return } + if let selectedIconName = control.selectedIconName, control.selectable { + control.toggle() + } + } + } + + /// This will change the state of the Selector and execute the actionBlock if provided. + open func toggle() { + //removed error + isSelected.toggle() + sendActions(for: .valueChanged) + } + /// Resets to default settings. open override func reset() { super.reset() From 8fd74d5ef9ee01dba35b407dc866d69bcdd1b7e5 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 14 Feb 2024 11:57:08 -0600 Subject: [PATCH 13/14] refactored ExpandDirect to the BadgeIndicatorModel Signed-off-by: Matt Bruce --- .../Icon/ButtonIcon/ButtonIcon.swift | 57 +++++++++---------- .../ButtonIconBadgeIndicatorModel.swift | 16 ++++-- 2 files changed, 37 insertions(+), 36 deletions(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index a26765e6..05b41224 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -43,12 +43,7 @@ open class ButtonIcon: Control, Changeable, FormFieldable { public enum SurfaceType: String, CaseIterable { case colorFill, media } - - /// Enum used to describe the badge indicator direction of icon button determining the expand direction. - public enum ExpandDirection: String, CaseIterable { - case right, center, left - } - + /// Enum used to describe the size of button icon. public enum Size: String, EnumSubset { case large @@ -106,6 +101,7 @@ open class ButtonIcon: Control, Changeable, FormFieldable { open var badgeIndicator = BadgeIndicator().with { $0.translatesAutoresizingMaskIntoConstraints = false $0.size = .small + $0.isHidden = true } /// If set, this is used to render the badge indicator. @@ -157,10 +153,7 @@ open class ButtonIcon: Control, Changeable, FormFieldable { /// Used to move the icon inside the button in both x and y axis. open var iconOffset: CGPoint = .init(x: 0, y: 0) { didSet { setNeedsUpdate() } } - - /// Applies expand direction to Badge Indicator if shows badge indicator. - open var expandDirection: ExpandDirection = .right { didSet { setNeedsUpdate() } } - + open var onChangeSubscriber: AnyCancellable? open var inputId: String? { didSet { setNeedsUpdate() } } @@ -203,7 +196,6 @@ open class ButtonIcon: Control, Changeable, FormFieldable { $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected) - $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted]) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled]) }.eraseToAnyColorable() }() @@ -374,7 +366,7 @@ open class ButtonIcon: Control, Changeable, FormFieldable { super.initialSetup() onClick = { control in guard control.isEnabled else { return } - if let selectedIconName = control.selectedIconName, control.selectable { + if control.selectedIconName != nil && control.selectable { control.toggle() } } @@ -402,7 +394,6 @@ open class ButtonIcon: Control, Changeable, FormFieldable { showBadgeIndicator = false selectable = false badgeIndicatorModel = nil - expandDirection = .right shouldUpdateView = true setNeedsUpdate() } @@ -482,27 +473,33 @@ open class ButtonIcon: Control, Changeable, FormFieldable { // MARK: - Private Methods //-------------------------------------------------- private func updateBadgeIndicator() { - if let badgeIndicatorModel { - badgeIndicator.kind = badgeIndicatorModel.kind - badgeIndicator.fillColor = badgeIndicatorModel.fillColor - badgeIndicator.surface = badgeIndicatorModel.surface - badgeIndicator.size = badgeIndicatorModel.size - badgeIndicator.maximumDigits = badgeIndicatorModel.maximumDigits - badgeIndicator.width = badgeIndicatorModel.width - badgeIndicator.height = badgeIndicatorModel.height - badgeIndicator.number = badgeIndicatorModel.number - badgeIndicator.leadingCharacter = badgeIndicatorModel.leadingCharacter - badgeIndicator.trailingText = badgeIndicatorModel.trailingText - badgeIndicator.dotSize = badgeIndicatorModel.dotSize - badgeIndicator.verticalPadding = badgeIndicatorModel.verticalPadding - badgeIndicator.horizontalPadding = badgeIndicatorModel.horizontalPadding - badgeIndicator.hideDot = badgeIndicatorModel.hideDot - badgeIndicator.hideBorder = badgeIndicatorModel.hideBorder + badgeIndicator.isHidden = !showBadgeIndicator + + guard let badgeIndicatorModel else { + badgeIndicator.isHidden = true + return } + + badgeIndicator.surface = surface + badgeIndicator.kind = badgeIndicatorModel.kind + badgeIndicator.fillColor = badgeIndicatorModel.fillColor + badgeIndicator.size = badgeIndicatorModel.size + badgeIndicator.maximumDigits = badgeIndicatorModel.maximumDigits + badgeIndicator.width = badgeIndicatorModel.width + badgeIndicator.height = badgeIndicatorModel.height + badgeIndicator.number = badgeIndicatorModel.number + badgeIndicator.leadingCharacter = badgeIndicatorModel.leadingCharacter + badgeIndicator.trailingText = badgeIndicatorModel.trailingText + badgeIndicator.dotSize = badgeIndicatorModel.dotSize + badgeIndicator.verticalPadding = badgeIndicatorModel.verticalPadding + badgeIndicator.horizontalPadding = badgeIndicatorModel.horizontalPadding + badgeIndicator.hideDot = badgeIndicatorModel.hideDot + badgeIndicator.hideBorder = badgeIndicatorModel.hideBorder } private func updateExpandDirectionalConstraints() { - switch expandDirection { + guard let badgeIndicatorModel else { return } + switch badgeIndicatorModel.expandDirection { case .right: badgeIndicatorLeadingConstraint?.isActive = true badgeIndicatorTrailingConstraint?.isActive = false diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift b/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift index b30e64e8..61b94c12 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIconBadgeIndicatorModel.swift @@ -11,16 +11,20 @@ extension ButtonIcon { //Model that represents the options available for the Badge Indicator public struct BadgeIndicatorModel { + /// Enum used to describe the badge indicator direction of icon button determining the expand direction. + public enum ExpandDirection: String, CaseIterable { + case right, center, left + } + + /// Applies expand direction to Badge Indicator if shows badge indicator. + public var expandDirection: ExpandDirection = .right /// Kind that will be used for the badge indicator. public var kind: BadgeIndicator.Kind /// Fill color that will be used for the badge indicator. public var fillColor: BadgeIndicator.FillColor - - /// Current Surface and this is used to pass down to child objects that implement Surfacable - public var surface: Surface - + /// Size that will be used for the badge indicator. public var size: BadgeIndicator.Size @@ -57,10 +61,10 @@ extension ButtonIcon { /// Hide Border that will be used for the badge indicator. public var hideBorder: Bool = false - public init(kind: BadgeIndicator.Kind = .simple, fillColor: BadgeIndicator.FillColor = .red, surface: Surface = .light, size: BadgeIndicator.Size = .xxlarge, maximumDigits: BadgeIndicator.MaximumDigits = .two, width: CGFloat? = nil, height: CGFloat? = nil, number: Int? = nil, leadingCharacter: String = "", trailingText: String = "", dotSize: CGFloat? = nil, verticalPadding: CGFloat? = nil, horizontalPadding: CGFloat? = nil, hideDot: Bool = false, hideBorder: Bool = false) { + public init(kind: BadgeIndicator.Kind = .simple, fillColor: BadgeIndicator.FillColor = .red, expandDirection: ExpandDirection = .right, size: BadgeIndicator.Size = .xxlarge, maximumDigits: BadgeIndicator.MaximumDigits = .two, width: CGFloat? = nil, height: CGFloat? = nil, number: Int? = nil, leadingCharacter: String = "", trailingText: String = "", dotSize: CGFloat? = nil, verticalPadding: CGFloat? = nil, horizontalPadding: CGFloat? = nil, hideDot: Bool = false, hideBorder: Bool = false) { self.kind = kind self.fillColor = fillColor - self.surface = surface + self.expandDirection = expandDirection self.size = size self.maximumDigits = maximumDigits self.width = width From 1591c50fd0c2fd049a7cfa9566b8ba5747b0a56e Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 14 Feb 2024 11:59:19 -0600 Subject: [PATCH 14/14] removed self. Signed-off-by: Matt Bruce --- VDS/Components/Icon/ButtonIcon/ButtonIcon.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift index 05b41224..922b9153 100644 --- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift +++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift @@ -445,7 +445,7 @@ open class ButtonIcon: Control, Changeable, FormFieldable { layoutGuideHeightConstraint?.constant = iconLayoutSize //border - if let borderable = currentConfig as? Borderable, self.hideBorder { + if let borderable = currentConfig as? Borderable, hideBorder { layer.borderColor = borderable.borderColorConfiguration.getColor(self).cgColor layer.borderWidth = borderable.borderWidth } else {