Skip to content

misc: set min widths for icons #25684

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

Merged
merged 8 commits into from
Feb 5, 2023
Merged

misc: set min widths for icons #25684

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
410e89b
set min widths for icons
marktnoonan Feb 2, 2023
2078ae9
update changelog
marktnoonan Feb 2, 2023
3deb94d
try realHover on internal element
marktnoonan Feb 2, 2023
f22112f
Update cli/CHANGELOG.md
marktnoonan Feb 2, 2023
0c23ee9
Merge branch 'develop' into marktnoonan/25665-icon-size
marktnoonan Feb 2, 2023
9790501
Merge branch 'develop' into marktnoonan/25665-icon-size
marktnoonan Feb 3, 2023
1c15f43
Merge branch 'develop' into marktnoonan/25665-icon-size
mike-plummer Feb 3, 2023
b8166e8
Fix changelog
mike-plummer Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions cli/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Copy link
Contributor

@ZachJW34 ZachJW34 Feb 2, 2023

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

- Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
## 12.5.0

_Released 01/31/2023_
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/debug/DebugFailedTest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
size="16"
status="failed"
data-cy="failed-icon"
class="isolate"
class="min-w-16px isolate"
Copy link
Contributor

@warrensplayer warrensplayer Feb 3, 2023

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.

Copy link
Contributor Author

@marktnoonan marktnoonan Feb 3, 2023 •
edited
Loading

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?

Copy link
Contributor

@elevatebart elevatebart Feb 4, 2023

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.

/>
<template
v-for="{text, type}, index in failedTestData.mappedTitleParts"
Expand Down
2 changes: 2 additions & 0 deletions packages/app/src/debug/DebugSpec.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
stroke-color="gray-500"
fill-color="gray-100"
size="16"
class="min-w-16px"
/>

<div
data-cy="spec-path"
class="flex-grow text-base non-italic truncate"
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe('<GroupedDebugFailedTest/>', () => {

cy.findAllByTestId(`grouped-row`).should('have.length', 2).each((el) => cy.wrap(el).within(() => {
cy.findByTestId('debug-artifacts').should('not.be.visible')
cy.wrap(el).realHover()
cy.findByTestId('test-failed-metadata').realHover()
cy.findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
cy.findByTestId('stats-metadata').children().should('have.length', 3)
}))
Expand Down