From 439c66fb97135da70a5b797841e5a057c93f6ff1 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 08:56:04 -0500 Subject: [PATCH 01/11] fixed bug for borderline in horizontal - top configuration Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tabs.swift | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/VDS/Components/Tabs/Tabs.swift b/VDS/Components/Tabs/Tabs.swift index 76843585..0ecd12da 100644 --- a/VDS/Components/Tabs/Tabs.swift +++ b/VDS/Components/Tabs/Tabs.swift @@ -104,7 +104,7 @@ open class Tabs: View { private var tabStackView: UIStackView! private var scrollView: UIScrollView! private var contentView: View! - private var borderlineColorConfig = SurfaceColorConfiguration(VDSColor.elementsLowcontrastOnlight, VDSColor.elementsLowcontrastOndark) + private var borderlineColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsLowcontrastOnlight, VDSColor.elementsLowcontrastOndark) private var contentViewWidthConstraint: NSLayoutConstraint? //-------------------------------------------------- @@ -255,20 +255,16 @@ open class Tabs: View { scrollView.contentSize = bounds.size } - // Apply border line - layer.remove(layerName: "borderLineLayer") + //borderLine + removeBorders() if borderLine { - let borderLineLayer = CALayer() - borderLineLayer.name = "borderLineLayer" - borderLineLayer.backgroundColor = borderlineColorConfig.getColor(self).cgColor - - if orientation == .horizontal { - borderLineLayer.frame = CGRect(x: 0, y: bounds.height - 1, width: bounds.width, height: 1) - } else { - borderLineLayer.frame = CGRect(x: 0, y: 0, width: 1, height: bounds.height) + var edge: UIRectEdge = .bottom + if orientation == .vertical { + edge = .left + } else if indicatorPosition == .top { + edge = .top } - - layer.addSublayer(borderLineLayer) + addBorder(side: edge, width: 1, color: borderlineColorConfiguration.getColor(self)) } scrollToSelectedIndex(animated: true) From 55885c80baa5560bce38fedf0a4ec60c96639a02 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 08:56:31 -0500 Subject: [PATCH 02/11] update naming conventions Signed-off-by: Matt Bruce --- VDS/Components/Badge/Badge.swift | 18 +++++++++--------- VDS/Components/Buttons/TextLink/TextLink.swift | 5 +++-- VDS/Components/Notification/Notification.swift | 6 +++--- .../TextFields/EntryField/EntryField.swift | 10 +++++----- .../TextFields/InputField/InputField.swift | 2 +- .../TileContainer/TileContainer.swift | 16 ++++++++-------- VDS/Components/Tooltip/Tooltip.swift | 12 ++++++------ 7 files changed, 35 insertions(+), 34 deletions(-) diff --git a/VDS/Components/Badge/Badge.swift b/VDS/Components/Badge/Badge.swift index 0d5fb623..85760edd 100644 --- a/VDS/Components/Badge/Badge.swift +++ b/VDS/Components/Badge/Badge.swift @@ -98,24 +98,24 @@ open class Badge: View { return config.eraseToAnyColorable() }() - private var textColorConfig = ViewColorConfiguration() + private var textColorConfiguration = ViewColorConfiguration() public func updateTextColorConfig() { - textColorConfig.reset() + textColorConfiguration.reset() switch fillColor { case .red, .black: - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: false) - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: true) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: false) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: true) case .yellow, .white: - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: false) - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: true) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: false) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: true) case .orange, .green, .blue: - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: false) - textColorConfig.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: true) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: false) + textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: true) } } @@ -127,7 +127,7 @@ open class Badge: View { backgroundColor = backgroundColorConfiguration.getColor(self) - label.textColorConfiguration = textColorConfig.eraseToAnyColorable() + label.textColorConfiguration = textColorConfiguration.eraseToAnyColorable() label.numberOfLines = numberOfLines label.text = text label.surface = surface diff --git a/VDS/Components/Buttons/TextLink/TextLink.swift b/VDS/Components/Buttons/TextLink/TextLink.swift index 4c61bc2a..15d7dec9 100644 --- a/VDS/Components/Buttons/TextLink/TextLink.swift +++ b/VDS/Components/Buttons/TextLink/TextLink.swift @@ -75,14 +75,15 @@ open class TextLink: ButtonBase { super.setup() isAccessibilityElement = true accessibilityTraits = .link - + //titleEdgeInsets = .init(top: 0, left: 0, bottom: 2, right: 0) if let titleLabel { addSubview(line) line.pinLeading(titleLabel.leadingAnchor) line.pinTrailing(titleLabel.trailingAnchor) - line.pinTop(titleLabel.bottomAnchor, 1) + line.pinTop(titleLabel.bottomAnchor) lineHeightConstraint = line.heightAnchor.constraint(equalToConstant: 1.0) lineHeightConstraint?.isActive = true + titleLabel.debugBorder(show: true) } } diff --git a/VDS/Components/Notification/Notification.swift b/VDS/Components/Notification/Notification.swift index c4b54185..20d39096 100644 --- a/VDS/Components/Notification/Notification.swift +++ b/VDS/Components/Notification/Notification.swift @@ -181,7 +181,7 @@ open class Notification: View { return config.eraseToAnyColorable() }() - private var textColorConfig = ViewColorConfiguration().with { + private var textColorConfiguration = ViewColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false) $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: true) } @@ -224,8 +224,8 @@ open class Notification: View { mainStackView.addArrangedSubview(closeButton) //labels - titleLabel.textColorConfiguration = textColorConfig.eraseToAnyColorable() - subTitleLabel.textColorConfiguration = textColorConfig.eraseToAnyColorable() + titleLabel.textColorConfiguration = textColorConfiguration.eraseToAnyColorable() + subTitleLabel.textColorConfiguration = textColorConfiguration.eraseToAnyColorable() } open override func reset() { diff --git a/VDS/Components/TextFields/EntryField/EntryField.swift b/VDS/Components/TextFields/EntryField/EntryField.swift index 2501af26..cbdc65fe 100644 --- a/VDS/Components/TextFields/EntryField/EntryField.swift +++ b/VDS/Components/TextFields/EntryField/EntryField.swift @@ -73,12 +73,12 @@ open class EntryField: Control, Changeable { // Sizes are from InVision design specs. internal var containerSize: CGSize { CGSize(width: 45, height: 44) } - internal let primaryColorConfig = ViewColorConfiguration().with { + internal let primaryColorConfiguration = ViewColorConfiguration().with { $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true) $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false) } - internal let secondaryColorConfig = ViewColorConfiguration().with { + internal let secondaryColorConfiguration = ViewColorConfiguration().with { $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true) $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: false) } @@ -218,9 +218,9 @@ open class EntryField: Control, Changeable { .pinLeading() .trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor).isActive = true - titleLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable() - errorLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable() - helperLabel.textColorConfiguration = secondaryColorConfig.eraseToAnyColorable() + titleLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable() + errorLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable() + helperLabel.textColorConfiguration = secondaryColorConfiguration.eraseToAnyColorable() } open func getContainer() -> UIView { diff --git a/VDS/Components/TextFields/InputField/InputField.swift b/VDS/Components/TextFields/InputField/InputField.swift index ffac7e34..acbec3ec 100644 --- a/VDS/Components/TextFields/InputField/InputField.swift +++ b/VDS/Components/TextFields/InputField/InputField.swift @@ -133,7 +133,7 @@ open class InputField: EntryField, UITextFieldDelegate { stackView.addArrangedSubview(successLabel) stackView.setCustomSpacing(8, after: successLabel) - successLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable() + successLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable() backgroundColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessBackgroundOnlight, VDSColor.feedbackSuccessBackgroundOndark, forState: .success) borderColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessOnlight, VDSColor.feedbackSuccessOndark, forState: .success) diff --git a/VDS/Components/TileContainer/TileContainer.swift b/VDS/Components/TileContainer/TileContainer.swift index f5d284a1..0fb735fe 100644 --- a/VDS/Components/TileContainer/TileContainer.swift +++ b/VDS/Components/TileContainer/TileContainer.swift @@ -209,19 +209,19 @@ open class TileContainer: Control { //-------------------------------------------------- private let cornerRadius = VDSFormControls.borderradius * 2 - private var backgroundColorConfig = BackgroundColorConfiguration() + private var backgroundColorConfiguration = BackgroundColorConfiguration() - private var borderColorConfig = SurfaceColorConfiguration().with { + private var borderColorConfiguration = SurfaceColorConfiguration().with { $0.lightColor = VDSColor.elementsLowcontrastOnlight $0.darkColor = VDSColor.elementsLowcontrastOndark } - private var imageFallbackColorConfig = SurfaceColorConfiguration().with { + private var imageFallbackColorConfiguration = SurfaceColorConfiguration().with { $0.lightColor = VDSColor.backgroundPrimaryLight $0.darkColor = VDSColor.backgroundPrimaryDark } - private var hightLightViewColorConfig = SurfaceColorConfiguration().with { + private var hightLightViewColorConfiguration = SurfaceColorConfiguration().with { $0.lightColor = VDSColor.paletteWhite.withAlphaComponent(0.3) $0.darkColor = VDSColor.paletteBlack.withAlphaComponent(0.3) } @@ -265,19 +265,19 @@ open class TileContainer: Control { open override func updateView() { super.updateView() - highlightView.backgroundColor = hightLightViewColorConfig.getColor(self) + highlightView.backgroundColor = hightLightViewColorConfiguration.getColor(self) highlightView.isHidden = !isHighlighted if let backgroundImage { backgroundImageView.image = backgroundImage backgroundImageView.isHidden = false - backgroundColor = imageFallbackColorConfig.getColor(self) + backgroundColor = imageFallbackColorConfiguration.getColor(self) } else { backgroundImageView.isHidden = true - backgroundColor = backgroundColorConfig.getColor(self) + backgroundColor = backgroundColorConfiguration.getColor(self) } - layer.borderColor = borderColorConfig.getColor(self).cgColor + layer.borderColor = borderColorConfiguration.getColor(self).cgColor layer.borderWidth = showBorder ? VDSFormControls.widthBorder : 0 containerTopConstraint?.constant = padding.value diff --git a/VDS/Components/Tooltip/Tooltip.swift b/VDS/Components/Tooltip/Tooltip.swift index 6386daba..c4a98636 100644 --- a/VDS/Components/Tooltip/Tooltip.swift +++ b/VDS/Components/Tooltip/Tooltip.swift @@ -61,27 +61,27 @@ open class Tooltip: Control, TooltipLaunchable { switch fillColor { case .primary: - return primaryColorConfig.eraseToAnyColorable() + return primaryColorConfiguration.eraseToAnyColorable() case .secondary: - return secondaryColorConfig.eraseToAnyColorable() + return secondaryColorConfiguration.eraseToAnyColorable() case .brandHighlight: - return brandHighlightColorConfig.eraseToAnyColorable() + return brandHighlightColorConfiguration.eraseToAnyColorable() } } - private var primaryColorConfig = ControlColorConfiguration().with { + private var primaryColorConfiguration = 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) } - private var secondaryColorConfig = ControlColorConfiguration().with { + private var secondaryColorConfiguration = ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forState: .normal) $0.setSurfaceColors(VDSColor.paletteGray65, VDSColor.paletteGray65, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) } - private var brandHighlightColorConfig = ControlColorConfiguration().with { + private var brandHighlightColorConfiguration = ControlColorConfiguration().with { $0.setSurfaceColors(VDSColor.elementsBrandhighlight, VDSColor.elementsBrandhighlight, forState: .normal) $0.setSurfaceColors(VDSColor.elementsBrandhighlight, VDSColor.elementsBrandhighlight, forState: .highlighted) $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled) From 045babc965a8687f23b58be6519c4fbec93e0c82 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 08:56:49 -0500 Subject: [PATCH 03/11] pinned top/bottom as well as leading/trailing Signed-off-by: Matt Bruce --- VDS/Components/Line/Line.swift | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/VDS/Components/Line/Line.swift b/VDS/Components/Line/Line.swift index 4e038f7e..417fb077 100644 --- a/VDS/Components/Line/Line.swift +++ b/VDS/Components/Line/Line.swift @@ -37,10 +37,7 @@ open class Line: View { addSubview(lineView) lineView.height(1) - - lineView - .pinLeading() - .pinTrailing() + lineView.pinToSuperView() } open override func reset() { From 8b1f5db3e6f39e4f8dfd97df8ccb412343421b59 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 11:14:13 -0500 Subject: [PATCH 04/11] anchored line Signed-off-by: Matt Bruce --- VDS/Components/Buttons/TextLink/TextLink.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VDS/Components/Buttons/TextLink/TextLink.swift b/VDS/Components/Buttons/TextLink/TextLink.swift index 15d7dec9..f604cad9 100644 --- a/VDS/Components/Buttons/TextLink/TextLink.swift +++ b/VDS/Components/Buttons/TextLink/TextLink.swift @@ -75,12 +75,12 @@ open class TextLink: ButtonBase { super.setup() isAccessibilityElement = true accessibilityTraits = .link - //titleEdgeInsets = .init(top: 0, left: 0, bottom: 2, right: 0) if let titleLabel { addSubview(line) line.pinLeading(titleLabel.leadingAnchor) line.pinTrailing(titleLabel.trailingAnchor) line.pinTop(titleLabel.bottomAnchor) + line.pinBottom(bottomAnchor) lineHeightConstraint = line.heightAnchor.constraint(equalToConstant: 1.0) lineHeightConstraint?.isActive = true titleLabel.debugBorder(show: true) From 571b41b54ec78df8b49049fbadd417fc8b1eb5ef Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 12:34:22 -0500 Subject: [PATCH 05/11] removed positioning up 1 pixel Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tab.swift | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/VDS/Components/Tabs/Tab.swift b/VDS/Components/Tabs/Tab.swift index 2b9ff6bc..f6294924 100644 --- a/VDS/Components/Tabs/Tab.swift +++ b/VDS/Components/Tabs/Tab.swift @@ -87,11 +87,8 @@ extension Tabs { open override func setup() { super.setup() addSubview(label) - backgroundColor = .clear accessibilityTraits = .button - - label.backgroundColor = .clear - + label.translatesAutoresizingMaskIntoConstraints = false label.pinTrailing() @@ -167,7 +164,7 @@ extension Tabs { if orientation == .horizontal { indicator = indicatorPosition.value } - addBorder(side: indicator, width: indicatorWidth, color: indicatorColorConfiguration.getColor(self), offset: 1) + addBorder(side: indicator, width: indicatorWidth, color: indicatorColorConfiguration.getColor(self)) } } } From ae4d0f528735763fd46d15cc6788f2218c3c67a3 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 12:35:00 -0500 Subject: [PATCH 06/11] added the borderline as a view to be repositioned based on orientation + indicator position Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tabs.swift | 64 ++++++++++++++++++++++++++++++---- 1 file changed, 57 insertions(+), 7 deletions(-) diff --git a/VDS/Components/Tabs/Tabs.swift b/VDS/Components/Tabs/Tabs.swift index 0ecd12da..36e6824d 100644 --- a/VDS/Components/Tabs/Tabs.swift +++ b/VDS/Components/Tabs/Tabs.swift @@ -101,12 +101,21 @@ open class Tabs: View { //-------------------------------------------------- // MARK: - Private Properties //-------------------------------------------------- - private var tabStackView: UIStackView! - private var scrollView: UIScrollView! - private var contentView: View! + private var tabStackView = UIStackView() + private var scrollView = UIScrollView() + private var contentView = View() + private var borderlineView = View() + private let borderlineSize = 1.0 private var borderlineColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsLowcontrastOnlight, VDSColor.elementsLowcontrastOndark) - private var contentViewWidthConstraint: NSLayoutConstraint? + private var borderlineViewLeadingConstraint: NSLayoutConstraint? + private var borderlineViewTrailingConstraint: NSLayoutConstraint? + private var borderlineViewTopConstraint: NSLayoutConstraint? + private var borderlineViewBottomConstraint: NSLayoutConstraint? + private var borderlineViewHeightConstraint: NSLayoutConstraint? + private var borderlineViewWidthConstraint: NSLayoutConstraint? + private var contentViewWidthConstraint: NSLayoutConstraint? + //-------------------------------------------------- // MARK: - Initializers //-------------------------------------------------- @@ -141,12 +150,22 @@ open class Tabs: View { tabStackView.axis = .horizontal tabStackView.distribution = .fill tabStackView.translatesAutoresizingMaskIntoConstraints = false + contentView.addSubview(borderlineView) contentView.addSubview(tabStackView) - + scrollView.pinToSuperView() contentView.pinToSuperView() tabStackView.pinToSuperView() contentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true + + borderlineViewWidthConstraint = borderlineView.widthAnchor.constraint(equalToConstant: 0) + borderlineViewHeightConstraint = borderlineView.heightAnchor.constraint(equalToConstant: 0) + + borderlineViewLeadingConstraint = borderlineView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor) + borderlineViewTrailingConstraint = borderlineView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor) + borderlineViewTopConstraint = borderlineView.topAnchor.constraint(equalTo: contentView.topAnchor) + borderlineViewBottomConstraint = borderlineView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor) + } private func updateTabItems() { @@ -256,7 +275,6 @@ open class Tabs: View { } //borderLine - removeBorders() if borderLine { var edge: UIRectEdge = .bottom if orientation == .vertical { @@ -264,7 +282,39 @@ open class Tabs: View { } else if indicatorPosition == .top { edge = .top } - addBorder(side: edge, width: 1, color: borderlineColorConfiguration.getColor(self)) + + borderlineViewLeadingConstraint?.isActive = false + borderlineViewTrailingConstraint?.isActive = false + borderlineViewTopConstraint?.isActive = false + borderlineViewBottomConstraint?.isActive = false + borderlineViewHeightConstraint?.isActive = false + borderlineViewWidthConstraint?.isActive = false + + if edge == .left { + borderlineViewWidthConstraint?.constant = borderlineSize + borderlineViewWidthConstraint?.isActive = true + borderlineViewTopConstraint?.isActive = true + borderlineViewLeadingConstraint?.isActive = true + borderlineViewBottomConstraint?.isActive = true + + } else if edge == .top { + borderlineViewHeightConstraint?.constant = borderlineSize + borderlineViewHeightConstraint?.isActive = true + borderlineViewTopConstraint?.isActive = true + borderlineViewLeadingConstraint?.isActive = true + borderlineViewTrailingConstraint?.isActive = true + + } else { + borderlineViewHeightConstraint?.constant = borderlineSize + borderlineViewHeightConstraint?.isActive = true + borderlineViewLeadingConstraint?.isActive = true + borderlineViewTrailingConstraint?.isActive = true + borderlineViewBottomConstraint?.isActive = true + } + borderlineView.backgroundColor = borderlineColorConfiguration.getColor(self) + borderlineView.isHidden = false + } else { + borderlineView.isHidden = true } scrollToSelectedIndex(animated: true) From fd733bc23f97a7ebad479b0ec7bc5ef135340d69 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 12:55:49 -0500 Subject: [PATCH 07/11] added release notes Signed-off-by: Matt Bruce --- VDS/SupportingFiles/ReleaseNotes.txt | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/VDS/SupportingFiles/ReleaseNotes.txt b/VDS/SupportingFiles/ReleaseNotes.txt index e12f2220..daebdc87 100644 --- a/VDS/SupportingFiles/ReleaseNotes.txt +++ b/VDS/SupportingFiles/ReleaseNotes.txt @@ -1,3 +1,8 @@ +1.0.22 +======= +- CXTDT-423133 - Tabs - Indicator should overlap Border +- CXTDT-423092 - Tabs - Top-aligned version should have line top also + 1.0.21 ======= - CXTDT-412383 - Label - Disabled Font color From 3b264d23559b985c4a055f353629ef193b215122 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 13:51:39 -0500 Subject: [PATCH 08/11] refactored code logic into properties and separate functions Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tab.swift | 61 +++++++++++++++++-------------- VDS/Components/Tabs/Tabs.swift | 66 +++++++++++++++++++++++++--------- 2 files changed, 85 insertions(+), 42 deletions(-) diff --git a/VDS/Components/Tabs/Tab.swift b/VDS/Components/Tabs/Tab.swift index f6294924..4948fb6b 100644 --- a/VDS/Components/Tabs/Tab.swift +++ b/VDS/Components/Tabs/Tab.swift @@ -66,6 +66,32 @@ extension Tabs { private var indicatorColorConfiguration = SurfaceColorConfiguration(VDSColor.paletteRed, VDSColor.elementsPrimaryOndark) private var indicatorWidth: CGFloat = 4.0 + private var indicatorSide: UIRectEdge { + guard orientation == .horizontal else { return .left } + return indicatorPosition.value + } + + private var leadingSpace: CGFloat { + guard orientation == .vertical else { return 0 } + return size == .medium ? VDSLayout.Spacing.space4X.value : VDSLayout.Spacing.space6X.value + } + + private var otherSpace: CGFloat { + if orientation == .horizontal { + return size == .medium ? VDSLayout.Spacing.space3X.value : VDSLayout.Spacing.space4X.value + } else { + return VDSLayout.Spacing.space2X.value + } + } + + private var widthConstraint: NSLayoutConstraint { + if let width, orientation == .vertical { + return label.widthAnchor.constraint(equalToConstant: width) + } else { + return label.widthAnchor.constraint(greaterThanOrEqualToConstant: minWidth) + } + } + //-------------------------------------------------- // MARK: - Initializers //-------------------------------------------------- @@ -122,32 +148,17 @@ extension Tabs { } open override func updateView() { + //label properties label.text = text label.textPosition = textPosition label.textStyle = size.textStyle label.textColor = textColorConfiguration.getColor(self) - labelWidthConstraint?.isActive = false - if let width, orientation == .vertical { - labelWidthConstraint = label.widthAnchor.constraint(equalToConstant: width) - } else { - labelWidthConstraint = label.widthAnchor.constraint(greaterThanOrEqualToConstant: minWidth) - } - labelWidthConstraint?.isActive = true - - var leadingSpace: CGFloat - if orientation == .horizontal { - leadingSpace = 0 - } else { - leadingSpace = size == .medium ? VDSLayout.Spacing.space4X.value : VDSLayout.Spacing.space6X.value - } - labelLeadingConstraint?.constant = leadingSpace - var otherSpace: CGFloat - if orientation == .horizontal { - otherSpace = size == .medium ? VDSLayout.Spacing.space3X.value : VDSLayout.Spacing.space4X.value - } else { - otherSpace = VDSLayout.Spacing.space2X.value - } + //constaints + labelWidthConstraint?.isActive = false + labelWidthConstraint = widthConstraint + labelWidthConstraint?.isActive = true + labelLeadingConstraint?.constant = leadingSpace labelTopConstraint?.constant = otherSpace labelBottomConstraint?.constant = -otherSpace @@ -160,12 +171,10 @@ extension Tabs { removeBorders() if selected { - var indicator: UIRectEdge = .left - if orientation == .horizontal { - indicator = indicatorPosition.value - } - addBorder(side: indicator, width: indicatorWidth, color: indicatorColorConfiguration.getColor(self)) + addBorder(side: indicatorSide, width: indicatorWidth, color: indicatorColorConfiguration.getColor(self)) } } } } + + diff --git a/VDS/Components/Tabs/Tabs.swift b/VDS/Components/Tabs/Tabs.swift index 36e6824d..3113a9fb 100644 --- a/VDS/Components/Tabs/Tabs.swift +++ b/VDS/Components/Tabs/Tabs.swift @@ -113,9 +113,44 @@ open class Tabs: View { private var borderlineViewBottomConstraint: NSLayoutConstraint? private var borderlineViewHeightConstraint: NSLayoutConstraint? private var borderlineViewWidthConstraint: NSLayoutConstraint? - private var contentViewWidthConstraint: NSLayoutConstraint? + //-------------------------------------------------- + // MARK: - Configuration Properties + //-------------------------------------------------- + private var stackViewAxis: NSLayoutConstraint.Axis { + orientation == .horizontal ? .horizontal : .vertical + } + + private var stackViewAlignment: UIStackView.Alignment { + orientation == .horizontal ? .fill : .leading + } + + private var stackViewDistribution: UIStackView.Distribution{ + if orientation == .horizontal && fillContainer { + return .fillEqually + } else { + return orientation == .horizontal ? .fillProportionally : .fill + } + } + + private var stackViewSpacing: CGFloat { + switch orientation { + case .vertical: + return size == .medium ? VDSLayout.Spacing.space4X.value : VDSLayout.Spacing.space6X.value + case .horizontal: + return size == .medium ? VDSLayout.Spacing.space6X.value : VDSLayout.Spacing.space8X.value + } + } + + private var scrollIsEnabled: Bool { + orientation == .horizontal && overflow == .scroll + } + + private var textPosition: TextPosition { + orientation == .horizontal && fillContainer ? .center : .left + } + //-------------------------------------------------- // MARK: - Initializers //-------------------------------------------------- @@ -212,15 +247,10 @@ open class Tabs: View { super.updateView() // Update the stackview properties - if orientation == .horizontal && fillContainer { - tabStackView.distribution = .fillEqually - } else { - tabStackView.distribution = orientation == .horizontal ? .fillProportionally : .fill - } - - tabStackView.axis = orientation == .horizontal ? .horizontal : .vertical - tabStackView.alignment = orientation == .horizontal ? .fill : .leading - tabStackView.spacing = orientation == .horizontal ? VDSLayout.Spacing.space6X.value : VDSLayout.Spacing.space4X.value + tabStackView.distribution = stackViewDistribution + tabStackView.axis = stackViewAxis + tabStackView.alignment = stackViewAlignment + tabStackView.spacing = stackViewSpacing // Update tab appearance based on properties for (index, tabItem) in tabViews.enumerated() { @@ -228,19 +258,26 @@ open class Tabs: View { tabItem.index = index tabItem.minWidth = minWidth tabItem.size = size - tabItem.textPosition = orientation == .horizontal && fillContainer ? .center : .left + tabItem.textPosition = textPosition tabItem.orientation = orientation tabItem.surface = surface tabItem.indicatorPosition = indicatorPosition tabItem.accessibilityLabel = "\(tabItem.text) \(tabItem.selected ? "selected" : "unselected") \(index+1) of \(tabViews.count)" } + + + updateWidth() + setNeedsLayout() + layoutIfNeeded() + } + + private func updateWidth() { // Deactivate old constraint contentViewWidthConstraint?.isActive = false // Apply width if orientation == .vertical { - scrollView.isScrollEnabled = false contentViewWidthConstraint = contentView.widthAnchor.constraint(equalTo: widthAnchor) } else { // Apply overflow @@ -254,13 +291,10 @@ open class Tabs: View { contentViewWidthConstraint = contentView.widthAnchor.constraint(equalTo: widthAnchor) } } - scrollView.isScrollEnabled = orientation == .horizontal && overflow == .scroll + scrollView.isScrollEnabled = scrollIsEnabled // Activate old constraint contentViewWidthConstraint?.isActive = true - - setNeedsLayout() - layoutIfNeeded() } open override func layoutSubviews() { From c1c57084cb52ddf3152c6c666661fef82f3249cc Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 8 Jun 2023 15:40:55 -0500 Subject: [PATCH 09/11] updated notes Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tabs.swift | 14 +++++++++----- VDS/SupportingFiles/ReleaseNotes.txt | 2 ++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/VDS/Components/Tabs/Tabs.swift b/VDS/Components/Tabs/Tabs.swift index 3113a9fb..15e17f4e 100644 --- a/VDS/Components/Tabs/Tabs.swift +++ b/VDS/Components/Tabs/Tabs.swift @@ -9,17 +9,21 @@ import Foundation import UIKit import VDSColorTokens +/// Tabs are organizational components that group content and allow customers to navigate its display. Use them to separate content when the content is related but doesn’t need to be compared. @objc(VDSTabs) open class Tabs: View { //-------------------------------------------------- // MARK: - Enums //-------------------------------------------------- + + /// Layout Axis of the Tabs public enum Orientation: String, CaseIterable{ case vertical case horizontal } - + + /// Position for the Hover Border Accent for a Tab. public enum IndicatorPosition: String, CaseIterable { case top case bottom @@ -33,11 +37,13 @@ open class Tabs: View { } } + //Type of behavior for Scrolling public enum Overflow: String, CaseIterable { case scroll case none } - + + /// Available size for tabs public enum Size: String, CaseIterable { case medium case large @@ -94,8 +100,6 @@ open class Tabs: View { ///Model of the Tabs you are wanting to show. open var tabModels: [TabModel] = [] { didSet { updateTabItems() } } - open var tabSpacing: CGFloat { tabStackView.spacing } - open var tabViews: [Tab] = [] //-------------------------------------------------- @@ -265,7 +269,7 @@ open class Tabs: View { tabItem.accessibilityLabel = "\(tabItem.text) \(tabItem.selected ? "selected" : "unselected") \(index+1) of \(tabViews.count)" } - + //update the width based on rules updateWidth() setNeedsLayout() diff --git a/VDS/SupportingFiles/ReleaseNotes.txt b/VDS/SupportingFiles/ReleaseNotes.txt index daebdc87..d65d120e 100644 --- a/VDS/SupportingFiles/ReleaseNotes.txt +++ b/VDS/SupportingFiles/ReleaseNotes.txt @@ -2,6 +2,8 @@ ======= - CXTDT-423133 - Tabs - Indicator should overlap Border - CXTDT-423092 - Tabs - Top-aligned version should have line top also +- CXTDT-423141 - Tabs - Incorrect spacing on top-aligned Fill containe +- CXTDT-422872 - Text Link - spacing issue between text and underline 1.0.21 ======= From b0dbb2c2a777090db4caa6268906bfa56f1658a6 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Fri, 9 Jun 2023 14:17:53 -0500 Subject: [PATCH 10/11] cleaned up code in tabs Signed-off-by: Matt Bruce --- VDS/Components/Tabs/Tabs.swift | 39 ++++++++++++---------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/VDS/Components/Tabs/Tabs.swift b/VDS/Components/Tabs/Tabs.swift index 15e17f4e..9ad1e19c 100644 --- a/VDS/Components/Tabs/Tabs.swift +++ b/VDS/Components/Tabs/Tabs.swift @@ -270,48 +270,37 @@ open class Tabs: View { } //update the width based on rules - updateWidth() + updateContentView() setNeedsLayout() layoutIfNeeded() } - private func updateWidth() { + private func updateContentView() { // Deactivate old constraint contentViewWidthConstraint?.isActive = false - // Apply width - if orientation == .vertical { - contentViewWidthConstraint = contentView.widthAnchor.constraint(equalTo: widthAnchor) + // Apply overflow + if orientation == .horizontal && overflow == .scroll && !fillContainer { + let contentWidth = tabStackView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width + contentViewWidthConstraint = contentView.widthAnchor.constraint(equalToConstant: contentWidth) + scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.bounds.height) } else { - // Apply overflow - if overflow == .scroll && !fillContainer { - let contentWidth = tabStackView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width - contentViewWidthConstraint = contentView.widthAnchor.constraint(equalToConstant: contentWidth) - - // Enable scrolling if necessary - scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.bounds.height) - } else { - contentViewWidthConstraint = contentView.widthAnchor.constraint(equalTo: widthAnchor) - } + contentViewWidthConstraint = contentView.widthAnchor.constraint(equalTo: widthAnchor) + scrollView.contentSize = bounds.size } + scrollView.isScrollEnabled = scrollIsEnabled // Activate old constraint contentViewWidthConstraint?.isActive = true + + scrollToSelectedIndex(animated: true) } open override func layoutSubviews() { super.layoutSubviews() - - //scrollView Contentsize - if orientation == .horizontal && overflow == .scroll && !fillContainer { - let contentWidth = tabStackView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width - scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.bounds.height) - } else { - scrollView.contentSize = bounds.size - } - + //borderLine if borderLine { var edge: UIRectEdge = .bottom @@ -354,7 +343,5 @@ open class Tabs: View { } else { borderlineView.isHidden = true } - - scrollToSelectedIndex(animated: true) } } From 253b57f9c3aee08d6d1db72224689e85aa5af59c Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Fri, 9 Jun 2023 14:21:29 -0500 Subject: [PATCH 11/11] updated version to 22 Signed-off-by: Matt Bruce --- VDS.xcodeproj/project.pbxproj | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index cd68f3c9..10ade0c0 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -1090,7 +1090,7 @@ buildSettings = { BUILD_LIBRARY_FOR_DISTRIBUTION = YES; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 21; + CURRENT_PROJECT_VERSION = 22; DEFINES_MODULE = YES; DEVELOPMENT_TEAM = ""; DYLIB_COMPATIBILITY_VERSION = 1; @@ -1123,7 +1123,7 @@ buildSettings = { BUILD_LIBRARY_FOR_DISTRIBUTION = YES; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 21; + CURRENT_PROJECT_VERSION = 22; DEFINES_MODULE = YES; DEVELOPMENT_TEAM = ""; DYLIB_COMPATIBILITY_VERSION = 1;