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.

Sign up for GitHub

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

Jump to bottom

fix(dialog-wrapper): update heading to fully span grid area #4810

Merged
merged 9 commits into from
Oct 17, 2024
Merged

fix(dialog-wrapper): update heading to fully span grid area #4810

merged 9 commits into from
Oct 17, 2024

Conversation

rubencarvalho
Copy link
Collaborator

@rubencarvalho rubencarvalho commented Oct 10, 2024 •
edited
Loading

Description

The header and typeIcon grid areas were still defined, seemingly without reason, which caused the issue with title wrapping. We’ve added a temporary override to remove these areas from the grid until CSS fixes this on its side.
We’re also addressing the error attribute, which should have already been in deprecated status (when we remove it, the typeIcon grid area becomes unnecessary). The alternative is to move towards using Alert Dialog with variant="error" for error cases.

Related issue(s)

Motivation and context

This was causing a long dialog title being wrongly formatted, as the original issue above describes.

How has this been tested?

I've added a new story to cover this case.

Screenshots

Before:
Screenshot 2024-10-11 at 12 43 48

After:
Screenshot 2024-10-11 at 12 42 44

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@rubencarvalho rubencarvalho changed the title fix(dialog): update grid-template-areas to use heading instead of uns… fix(dialog): update grid to span heading area Oct 10, 2024
@github-actions GitHub Actions
Copy link

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

@coveralls
Copy link
Collaborator

coveralls commented Oct 10, 2024 •
edited
Loading

Pull Request Test Coverage Report for Build 11363148106

Details

  • 41 of 41 (100.0%) changed or added relevant lines in 2 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.005%) to 98.227%
Totals Coverage Status
Change from base Build 11351160238: -0.005%
Covered Lines: 32983
Relevant Lines: 33395
💛 - Coveralls

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 10, 2024 •
edited
Loading

Tachometer results

Chrome

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 694 kB 53.92ms - 56.10ms - faster ✔
4% - 8%
2.32ms - 4.97ms
branch 648 kB 57.92ms - 59.40ms slower ❌
4% - 9%
2.32ms - 4.97ms		 -

dialog permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 558 kB 79.80ms - 80.34ms - faster ✔
1% - 2%
0.93ms - 1.78ms
branch 515 kB 81.10ms - 81.76ms slower ❌
1% - 2%
0.93ms - 1.78ms		 -
Firefox

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 694 kB 109.52ms - 116.60ms - faster ✔
0% - 8%
0.36ms - 9.28ms
branch 648 kB 115.17ms - 120.59ms slower ❌
0% - 8%
0.36ms - 9.28ms		 -

dialog permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 558 kB 121.42ms - 126.78ms - unsure 🔍
-3% - +3%
-4.33ms - +3.57ms
branch 515 kB 121.58ms - 127.38ms unsure 🔍
-3% - +3%
-3.57ms - +4.33ms		 -

@rubencarvalho rubencarvalho changed the title fix(dialog): update grid to span heading area fix(dialog): update grid to fully span heading area Oct 10, 2024
@rubencarvalho rubencarvalho changed the title fix(dialog): update grid to fully span heading area fix(dialog-wrapper): update grid to fully span heading area Oct 10, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 10, 2024 •
edited
Loading

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.99 0.99
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 228.267 kB 217.259 kB 217.209 kB 🏆
Scripts 57.684 kB 52.602 kB 52.502 kB 🏆
Stylesheet 34.514 kB 30.175 kB 🏆 30.278 kB
Document 6.223 kB 5.465 kB 5.456 kB 🏆
Font 126.952 kB 126.642 kB 126.623 kB 🏆

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

@rubencarvalho rubencarvalho changed the title fix(dialog-wrapper): update grid to fully span heading area fix(dialog-wrapper): update heading to fully span grid area Oct 10, 2024
@rubencarvalho rubencarvalho marked this pull request as ready for review October 11, 2024 10:44
@rubencarvalho rubencarvalho requested a review from a team as a code owner October 11, 2024 10:44
blunteshwar
blunteshwar reviewed Oct 14, 2024
View reviewed changes
Copy link
Collaborator

@blunteshwar blunteshwar left a comment

Choose a reason for hiding this comment

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

VRTs are failing!
Can you resolve them

@rubencarvalho
Copy link
Collaborator Author

VRTs are failing! Can you resolve them

The failure is about the new screenshot, see example: https://418fbb9265881e994fcd003ef6b56b6f--spectrum-web-components.netlify.app/review/

I will update the golden image cache.

@rubencarvalho rubencarvalho merged commit 7d1f461 into main Oct 17, 2024
58 of 61 checks passed
@rubencarvalho rubencarvalho deleted the ruben/dialog-grid-fix branch October 17, 2024 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@blunteshwar blunteshwar blunteshwar approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug/Regression]: Long dialog title is wrongly formatted - grid issue
3 participants
@rubencarvalho @coveralls @blunteshwar