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

Feature/better apply and close ux #875

Merged
merged 9 commits into from
Jun 1, 2022

Conversation

tynandebold
Copy link
Member

@tynandebold tynandebold commented May 30, 2022

Description

Resolves #860.

Development notes

The heft of this is in the Modal files. I added some state to be able to track what's been clicked, and then the different button text and styles act on that.

I thought about refactoring the actual Modal component and decided against it. I think it would be a premature optimization.

QA notes

Here's what it looks like:

Screen.Recording.2022-05-30.at.17.30.06.mov

Take a look at the branch via Gitpod and play around with it.

Note: in the button's success state I've used a check mark (✓) instead of the emoji (😎). I found this to be a good middle ground between playful and showy.

Checklist

  • Read the contributing guidelines
  • Opened this PR as a 'Draft Pull Request' if it is work-in-progress
  • Updated the documentation to reflect the code changes
  • Added new entries to the RELEASE.md file
  • Added tests to cover my changes

…ature/better-apply-and-close-ux

Signed-off-by: Tynan DeBold <[email protected]>
Signed-off-by: Tynan DeBold <[email protected]>
@tynandebold tynandebold requested a review from yetudada as a code owner May 30, 2022 16:49
@comym
Copy link

comym commented May 31, 2022

I like it, I feel it's working well! That's not ready for shipping though. The tick mark you have included after the text is not according to the design and it should be changed to the emoji as seen on the provided assets on Figma. Many thanks.

Screenshot 2022-05-31 at 11 08 16
Screenshot 2022-05-31 at 11 13 49

…ature/better-apply-and-close-ux

Signed-off-by: Tynan DeBold <[email protected]>
Signed-off-by: Tynan DeBold <[email protected]>
@tynandebold
Copy link
Member Author

I like it, I feel it's working well! That's not ready for shipping though. The tick mark you have included after the text is not according to the design and it should be changed to the emoji as seen on the provided assets on Figma. Many thanks.

Screenshot 2022-05-31 at 11 08 16 Screenshot 2022-05-31 at 11 13 49

@GabrielComymQB thanks for this. As discussed just now on our call, I've added the ✅ instead of the 😎 one. If there's nothing else to change, feel free to approve the PR whenever you can. Thanks so much.

@tynandebold tynandebold merged commit be3f000 into main Jun 1, 2022
@tynandebold tynandebold deleted the feature/better-apply-and-close-ux branch June 1, 2022 15:20
cvetankanechevska pushed a commit that referenced this pull request Jun 9, 2022
* add and update buttons across modals; wire up some of the functionality

Signed-off-by: Tynan DeBold <[email protected]>

* remove X icon; update styles so we can transition them

Signed-off-by: Tynan DeBold <[email protected]>

* experiment tracking modal looking good with the animations

Signed-off-by: Tynan DeBold <[email protected]>

* update fn names and tests

Signed-off-by: Tynan DeBold <[email protected]>

* tests

Signed-off-by: Tynan DeBold <[email protected]>

* update release notes

Signed-off-by: Tynan DeBold <[email protected]>

* add check mark emoji

Signed-off-by: Tynan DeBold <[email protected]>
Signed-off-by: Cvetanka <[email protected]>
@tynandebold tynandebold mentioned this pull request Jun 16, 2022
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement 'Apply and close' design
3 participants