Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RUMM-2972 [SR] Support UISegmentedControl elements in session replay #1169

Merged
merged 2 commits into from
Feb 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ internal enum Fixture: CaseIterable {
case basicShapes
case basicTexts
case sliders
case segments

var menuItemTitle: String {
switch self {
Expand All @@ -19,6 +20,8 @@ internal enum Fixture: CaseIterable {
return "Basic Texts"
case .sliders:
return "Sliders"
case .segments:
return "Segments"
}
}

Expand All @@ -30,6 +33,9 @@ internal enum Fixture: CaseIterable {
return UIStoryboard.basic.instantiateViewController(withIdentifier: "Texts")
case .sliders:
return UIStoryboard.inputElements.instantiateViewController(withIdentifier: "Sliders")
case .segments:
return UIStoryboard.inputElements.instantiateViewController(withIdentifier: "Segments")

}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<device id="retina6_12" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
<capability name="Image references" minToolsVersion="12.0"/>
<capability name="Named colors" minToolsVersion="9.0"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
Expand Down Expand Up @@ -86,8 +87,119 @@
</objects>
<point key="canvasLocation" x="138" y="6"/>
</scene>
<!--View Controller-->
<scene sceneID="EM5-Q5-n2I">
<objects>
<viewController storyboardIdentifier="Segments" id="Uyj-Ig-4Fe" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="yDW-cg-1lR">
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="DTL-W3-6vG">
<rect key="frame" x="8" y="67" width="377" height="328.66666666666669"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Default - 1st selected" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="WoK-b0-C37">
<rect key="frame" x="0.0" y="0.0" width="377" height="20.333333333333332"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" translatesAutoresizingMaskIntoConstraints="NO" id="m81-jH-gSH">
<rect key="frame" x="0.0" y="28.333333333333329" width="377" height="32"/>
<segments>
<segment title="First"/>
<segment title="Second"/>
<segment title="Third"/>
</segments>
</segmentedControl>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Default - 2nd selected" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Ym8-h6-nyq">
<rect key="frame" x="0.0" y="67.333333333333343" width="377" height="20.333333333333329"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" translatesAutoresizingMaskIntoConstraints="NO" id="tHf-vi-tF8">
<rect key="frame" x="0.0" y="95.666666666666657" width="377" height="32"/>
<segments>
<segment title="First"/>
<segment title="Second"/>
<segment title="Third"/>
<segment title="Fourth"/>
<segment title="Fifth"/>
</segments>
</segmentedControl>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Custom #1" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wqb-y1-cbu">
<rect key="frame" x="0.0" y="134.66666666666666" width="377" height="20.333333333333343"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" translatesAutoresizingMaskIntoConstraints="NO" id="NAy-1U-Vz5">
<rect key="frame" x="0.0" y="163" width="377" height="32"/>
<color key="backgroundColor" systemColor="systemPinkColor"/>
<segments>
<segment title="First"/>
<segment title="Second"/>
<segment title="Third"/>
<segment title="Fourth"/>
</segments>
<color key="selectedSegmentTintColor" systemColor="systemYellowColor"/>
</segmentedControl>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Custom #2" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="IsM-k7-x69">
<rect key="frame" x="0.0" y="202" width="377" height="20.333333333333343"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" translatesAutoresizingMaskIntoConstraints="NO" id="3uM-nj-w7l">
<rect key="frame" x="0.0" y="230.33333333333331" width="377" height="32"/>
<segments>
<segment title="">
<imageReference key="image" image="cloud.fill" catalog="system" symbolScale="small"/>
</segment>
<segment title="">
<imageReference key="image" image="cloud.rain.fill" catalog="system" symbolScale="small"/>
</segment>
<segment title="">
<imageReference key="image" image="sun.max.fill" catalog="system" symbolScale="small"/>
</segment>
</segments>
</segmentedControl>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Disabled" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Wgm-YM-pqI">
<rect key="frame" x="0.0" y="269.33333333333331" width="377" height="20.333333333333314"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" enabled="NO" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="1" translatesAutoresizingMaskIntoConstraints="NO" id="Acx-OW-gag">
<rect key="frame" x="0.0" y="297.66666666666669" width="377" height="32"/>
<segments>
<segment title="First"/>
<segment title="Second"/>
<segment title="Third"/>
</segments>
</segmentedControl>
</subviews>
</stackView>
</subviews>
<viewLayoutGuide key="safeArea" id="lP8-1i-wOE"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="DTL-W3-6vG" firstAttribute="top" secondItem="lP8-1i-wOE" secondAttribute="top" constant="8" id="8Zz-Qp-Yud"/>
<constraint firstItem="DTL-W3-6vG" firstAttribute="leading" secondItem="lP8-1i-wOE" secondAttribute="leading" constant="8" id="Dvj-Mu-I7k"/>
<constraint firstItem="lP8-1i-wOE" firstAttribute="trailing" secondItem="DTL-W3-6vG" secondAttribute="trailing" constant="8" id="tC2-fJ-owI"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="2H1-Mt-tGf" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1042" y="6"/>
</scene>
</scenes>
<resources>
<image name="cloud.fill" catalog="system" width="128" height="87"/>
<image name="cloud.rain.fill" catalog="system" width="126" height="128"/>
<image name="sun.max.fill" catalog="system" width="128" height="125"/>
<namedColor name="AccentColor">
<color red="0.0" green="0.46000000000000002" blue="0.89000000000000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
Expand All @@ -100,5 +212,11 @@
<systemColor name="systemGreenColor">
<color red="0.20392156862745098" green="0.7803921568627451" blue="0.34901960784313724" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
<systemColor name="systemPinkColor">
<color red="1" green="0.17647058823529413" blue="0.33333333333333331" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
<systemColor name="systemYellowColor">
<color red="1" green="0.80000000000000004" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
Original file line number Diff line number Diff line change
Expand Up @@ -549,7 +549,7 @@
isa = XCRemoteSwiftPackageReference;
repositoryURL = "https://github.com/ncreated/Framing";
requirement = {
branch = framer;
branch = "ship-framer";
Copy link
Member Author

@ncreated ncreated Feb 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pointing to stable branch in https://github.com/ncreated/Framing/tree/ship-framer - I added basic text alignment options in there, so we can preview SRTextPosition in snapshot tests.

kind = branch;
};
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,22 @@ final class SRSnapshotTests: SnapshotTestCase {
record: recordingMode
)
}

func testSegments() throws {
show(fixture: .segments)

var image = try takeSnapshot(configuration: .init(privacy: .allowAll))
DDAssertSnapshotTest(
newImage: image,
snapshotLocation: .folder(named: snapshotsFolderName, fileNameSuffix: "-allowAll-privacy"),
record: recordingMode
)

image = try takeSnapshot(configuration: .init(privacy: .maskAll))
DDAssertSnapshotTest(
newImage: image,
snapshotLocation: .folder(named: snapshotsFolderName, fileNameSuffix: "-maskAll-privacy"),
record: recordingMode
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ private extension SRTextWireframe {
width: CGFloat(width),
height: CGFloat(height),
style: frameStyle(border: border, style: shapeStyle),
content: frameContent(text: text, textStyle: textStyle)
content: frameContent(text: text, textStyle: textStyle, textPosition: textPosition)
)
}
}
Expand Down Expand Up @@ -103,7 +103,7 @@ private func frameStyle(border: SRShapeBorder?, style: SRShapeStyle?) -> Bluepri
return fs
}

private func frameContent(text: String, textStyle: SRTextStyle?) -> BlueprintFrameContent {
private func frameContent(text: String, textStyle: SRTextStyle?, textPosition: SRTextPosition?) -> BlueprintFrameContent {
var fc = BlueprintFrameContent(
text: text,
textColor: .clear,
Expand All @@ -115,6 +115,21 @@ private func frameContent(text: String, textStyle: SRTextStyle?) -> BlueprintFra
fc.font = .systemFont(ofSize: CGFloat(textStyle.size))
}

if let textPosition = textPosition {
switch textPosition.alignment?.horizontal {
case .left?: fc.horizontalAlignment = .leading
case .center?: fc.horizontalAlignment = .center
case .right?: fc.horizontalAlignment = .trailing
default: break
}
switch textPosition.alignment?.vertical {
case .top?: fc.verticalAlignment = .leading
case .center?: fc.verticalAlignment = .center
case .bottom?: fc.verticalAlignment = .trailing
default: break
}
}

return fc
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ internal class WireframesBuilder {
frame: CGRect,
text: String,
textFrame: CGRect? = nil,
textAlignment: SRTextPosition.Alignment? = nil,
clip: SRContentClip? = nil,
textColor: CGColor? = nil,
font: UIFont? = nil,
Expand All @@ -101,7 +102,7 @@ internal class WireframesBuilder {

if let textFrame = textFrame {
textPosition = .init(
alignment: nil, // TODO: RUMM-2452 Improve text rendering
alignment: textAlignment,
padding: .init(
bottom: Int64(withNoOverflow: frame.maxY - textFrame.maxY),
left: Int64(withNoOverflow: textFrame.minX - frame.minX),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
* This product includes software developed at Datadog (https://www.datadoghq.com/).
* Copyright 2019-Present Datadog, Inc.
*/

import UIKit

/// Collection of system colors.
///
/// Contextual colors are light- and dark-mode sensitive and must be implemented as computed variables,
/// so they return different values upon `UIUserInterfaceStyle` change.
///
/// For older iOS versions that do not support `UIUserInterfaceStyle`, approximate fallbacks are provided.
/// See https://gist.github.com/ncreated/35bf4d69d83d1a5ab408ff29a77fc9ff for reference when updating this collection.
internal enum SystemColors {
static let clear: CGColor = UIColor.clear.cgColor

static var tertiarySystemFill: CGColor {
if #available(iOS 13.0, *) {
return UIColor.tertiarySystemFill.cgColor
} else {
// Fallback to iOS 16.2 light mode color:
return UIColor(red: 118 / 255, green: 118 / 255, blue: 128 / 255, alpha: 1).cgColor
}
}

static var tertiarySystemBackground: CGColor {
if #available(iOS 13.0, *) {
return UIColor.tertiarySystemBackground.cgColor
} else {
// Fallback to iOS 16.2 light mode color:
return UIColor(red: 255 / 255, green: 255 / 255, blue: 255 / 255, alpha: 1).cgColor
}
}

static var secondarySystemFill: CGColor {
if #available(iOS 13.0, *) {
return UIColor.secondarySystemFill.cgColor
} else {
// Fallback to iOS 16.2 light mode color:
return UIColor(red: 120 / 255, green: 120 / 255, blue: 128 / 255, alpha: 1).cgColor
}
}

static var tintColor: CGColor {
if #available(iOS 15.0, *) {
return UIColor.tintColor.cgColor
Comment on lines +47 to +48
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 15? this one is available since iOS7

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, the Apple doc says iOS7, but this seems to not be true:

Screenshot 2023-02-21 at 15 20 37

Screenshot 2023-02-21 at 15 20 05

🤷

} else {
// Fallback to iOS 16.2 light mode color:
return UIColor(red: 0 / 255, green: 122 / 255, blue: 255 / 255, alpha: 1).cgColor
}
}

static var label: CGColor {
if #available(iOS 13.0, *) {
return UIColor.label.cgColor
} else {
// Fallback to iOS 16.2 light mode color:
return UIColor(red: 0 / 255, green: 0 / 255, blue: 0 / 255, alpha: 1).cgColor
}
}
}
Loading