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

CS 7628 error cards design update #1911

Merged
merged 5 commits into from
Dec 10, 2024
Merged

Conversation

richardhjtan
Copy link
Contributor

@richardhjtan richardhjtan commented Dec 10, 2024

Refer to https://linear.app/cardstack/issue/CS-7628/design-for-errored-cards-states

What is changing

  • update UI design on error cards
Before Now
Cards Grid
Screenshot 2024-12-10 at 1 03 07 PM Screenshot 2024-12-10 at 2 01 02 PM
Hover Screenshot 2024-12-10 at 2 01 09 PM
Interact Mode
Screenshot 2024-12-10 at 1 05 19 PM Screenshot 2024-12-10 at 4 16 36 PM
Screenshot 2024-12-10 at 1 05 29 PM Screenshot 2024-12-10 at 10 20 08 PM
Code mode
Screenshot 2024-12-10 at 11 36 05 PM Screenshot 2024-12-10 at 11 33 26 PM
Screenshot 2024-12-10 at 11 36 12 PM Screenshot 2024-12-10 at 11 33 36 PM

Notes

  • The design of the accordion component will remain as it is for consistency, compared to the design given

Copy link

github-actions bot commented Dec 10, 2024

Host Test Results

    1 files  ±0      1 suites  ±0   20m 49s ⏱️ +22s
701 tests ±0  700 ✔️ ±0  1 💤 ±0  0 ±0 
706 runs  ±0  705 ✔️ ±0  1 💤 ±0  0 ±0 

Results for commit 10973d9. ± Comparison against base commit 4e1e498.

♻️ This comment has been updated with latest results.

@richardhjtan richardhjtan force-pushed the CS-7628-error-state-design-update branch from 227c185 to 8bf1351 Compare December 10, 2024 14:07
@richardhjtan richardhjtan force-pushed the CS-7628-error-state-design-update branch from 8bf1351 to bd609f2 Compare December 10, 2024 14:20
@richardhjtan richardhjtan self-assigned this Dec 10, 2024
@richardhjtan richardhjtan marked this pull request as ready for review December 10, 2024 14:44
@richardhjtan richardhjtan requested a review from a team December 10, 2024 14:44
@@ -1117,7 +1117,6 @@ export default class CodeSubmode extends Component<Signature> {
}

.card-error {
flex: 2;
Copy link
Contributor

@habdelra habdelra Dec 10, 2024

Choose a reason for hiding this comment

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

i added this because of how errors are displayed in the code mode preview such that the error detail accordion when open took up half as much space as the last known good state. double check the view for small screens too to make sure it makes sense at different sizes.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for bringing it out @habdelra , then I understand why flex property is introduced now. Code mode container is displaying flex column. I will tweak and check again

@habdelra
Copy link
Contributor

Can you include some screenshots of what this looks like in code mode too? this error page is shared between interact mode and code mode

Copy link
Contributor

@habdelra habdelra left a comment

Choose a reason for hiding this comment

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

looks good!

@richardhjtan richardhjtan merged commit 74cc545 into main Dec 10, 2024
37 of 39 checks passed
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.

2 participants