-
Notifications
You must be signed in to change notification settings - Fork 3.2k
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
misc: set min widths for icons #25684
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just need to fix up the changelog, UI changes look good.
cli/CHANGELOG.md
Outdated
@@ -11,6 +11,8 @@ _Released 02/10/2023_ | |||
|
|||
- Upgraded [`simple-git`](https://github.com/steveukx/git-js) from `3.15.0` to `3.16.0` to address this [security vulnerability](https://github.com/advisories/GHSA-9p95-fxvg-qgq2) where Remote Code Execution (RCE) via the clone(), pull(), push() and listRemote() methods due to improper input sanitization was possible. Addressed in [#25603](https://github.com/cypress-io/cypress/pull/25603). | |||
|
|||
**Misc** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
12.5.1 has already been released, you should create a new entry (I've been doing 12.6.0
since there are a few features in the queue that should be merged by next week.
You can reference 3c2b36d
@@ -7,7 +7,7 @@ | |||
size="16" | |||
status="failed" | |||
data-cy="failed-icon" | |||
class="isolate" | |||
class="min-w-16px isolate" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did not test this, but I think another option that would work is to use flex-shrink-0
to tell the flexbox not the reduce the size of this child element.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that would work just fine too. Ideally we'll handle this in the design system. What do you think @elevatebart? Default min width to match the icon size and prevent shrinkage?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am with @warrensplayer on this one. If we want to avoid shrinking, it's better to use flex-shrink-0
if it works.
I am afraid of the side effects od doing this in the design system. specially if we want to use the size="16"
model with a width of 8px for example.
* develop: (28 commits) chore: update changelog validation example (#25742) fix: Improve error handling around calls to `this.next` in middleware (#25702) chore: debug page tooltip distance and artifact border (#25727) fix: update newProject ref when switching between organizations in SelectCloudProjectModal (#25730) misc: Add max widths to debug page message states (#25725) chore: export types (#25714) chore: release @cypress/webpack-preprocessor-v5.16.3 chore: release @cypress/vue-v5.0.4 chore: release @cypress/grep-v3.1.4 chore: Fix flaky test (#25726) dependency(deps): update dependency debug to ^4.3.4 🌟 (#25699) feat: openInIDE for failed debug spec (#25691) test: fix flaky CT test by relying on query (#25706) test: fix flaky migration test (#25672) misc: style change for responsiveness (#25687) misc: set min widths for icons (#25684) chore(deps): update dependency markdown-it to v11.0.1 🌟 (#25698) chore: Fix flaky origin .wait() test (#25693) chore: unskip tests (#25676) chore: release @cypress/webpack-preprocessor-v5.16.2 ...
Additional details
Setting
min-width
prevents the flex behavior from shrinking the icons.This PR also makes another effort to reduce flake in the hover-related tests for the
GroupDebugFailedTest
component by callingrealHover
on a different element. The test failed repeatedly in CI on this branch earlier today.Steps to test
Open the component tests for
DebugFailedTest
andDebugSpec
component to see the new behavior at small viewports.How has the user experience changed?
Right hand side of this Percy diff shows the corrected file icon in the top left of the Spec row:
Right hand side of this one shows the corrected status icon on the left of the first test row
PR Tasks
cypress-documentation
?type definitions
?