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

feat(Controls): Update Checkbox and RadioButton animations #112

Merged
merged 22 commits into from
May 11, 2021

Conversation

jmpg93
Copy link
Contributor

@jmpg93 jmpg93 commented May 4, 2021

🎟️ Jira ticket

IOS-6669 Checkbox control evolution

🥅 What's the goal?

Add animation as defined by Zepplin (linked video).

🚧 How do we do it

Update Checkbox and RadioButton properties to support CALayer animations.

🧪 How can I test this?

Downloading the catalog and see the new animations under controls section.

🏑 AppCenter build

image

📱 Demo

RPReplay_Final1620116444.MP4

@jmpg93 jmpg93 self-assigned this May 4, 2021
jmpg93 and others added 2 commits May 4, 2021 10:24
# Conflicts:
#	Mistica/Source/Components/Checkbox/Checkbox.swift
#	Mistica/Source/Components/RadioButton/RadioButton.swift
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-movistar-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-movistar-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-o2-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-o2-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-o2Classic-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-o2Classic-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-vivo-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxActiveCheckedState.with-vivo-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-movistar-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-movistar-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-o2-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-o2-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-o2Classic-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-o2Classic-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-vivo-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxDefaultState.with-vivo-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxIsChecked.assertInitialState.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testCheckboxIsChecked.finalState.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/CheckboxTests/testXIBIntegration.1.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/RadioButtonTests/testRadioButtonEnabled.with-movistar-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/RadioButtonTests/testRadioButtonEnabled.with-o2-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/RadioButtonTests/testRadioButtonEnabled.with-o2Classic-dark-style.png
#	Mistica/Tests/MisticaTests/UI/__Snapshots__/RadioButtonTests/testRadioButtonEnabled.with-vivo-dark-style.png
#	MisticaCatalog/Source/ComponentsCatalogs/UICatalogControlsViewController.swift
@jmpg93 jmpg93 requested review from a team, victorpimentel and pbartolome and removed request for a team May 4, 2021 08:39
@jmpg93 jmpg93 marked this pull request as ready for review May 4, 2021 08:39
@pbartolome
Copy link
Contributor

image
the checkmark "Default" case in dark mode is selected?

pbartolome
pbartolome previously approved these changes May 4, 2021
Copy link
Contributor

@pbartolome pbartolome left a comment

Choose a reason for hiding this comment

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

animationssssss!!

@jmpg93
Copy link
Contributor Author

jmpg93 commented May 4, 2021

image
the checkmark "Default" case in dark mode is selected?

That was a nice catch. It seems that the transform is lost when changing userInterfaceStyle. I have update the animation to change the opacity of the layer (so we do not rely in the transform).

Thanks!

jmpg93 added 2 commits May 4, 2021 16:05
…fonica/mistica-ios into IOS-6669-update-checkbox-animations

# Conflicts:
#	Mistica/Source/Components/Checkbox/Checkbox.swift
@jmpg93 jmpg93 merged commit ff570de into main May 11, 2021
@jmpg93 jmpg93 deleted the IOS-6669-update-checkbox-animations branch May 11, 2021 07:50
tuentisre pushed a commit that referenced this pull request Jul 1, 2021
# [11.3.0](v11.2.0...v11.3.0) (2021-07-01)

### Features

* **Controls:** Update Checkbox and RadioButton animations ([#112](#112)) ([ff570de](ff570de))
@tuentisre
Copy link
Collaborator

🎉 This PR is included in version 11.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants