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

fix(list-item): Improve focus outline appearance #9653

Merged
merged 6 commits into from
Jun 20, 2024

Conversation

josercarcamo
Copy link
Contributor

Related Issue: #7538

Summary

Make list item highlight display correctly over action items.

@josercarcamo josercarcamo requested a review from a team as a code owner June 20, 2024 21:05
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 20, 2024
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

There are some changes made that are unrelated and would cause regressions here.

@@ -14,6 +14,16 @@

@include disabled();

.indent {
Copy link
Member

Choose a reason for hiding this comment

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

indent isn't a valid class on the list-item. Can this part be reverted? It should be on .nested-container. I'm guessing this was copied from a previous release.

}

.nested-container--open {
@apply flex;
.nested-container--hidden {
Copy link
Member

Choose a reason for hiding this comment

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

This should be reverted as well.

Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

Code changes look good. I guess since its a focus state our screenshot tests can't really test this. 👍

tr:focus {
.actions-start,
.actions-end {
inset-block: theme("spacing[0.5]");
Copy link
Member

Choose a reason for hiding this comment

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

note: At some point these theme() vars will need to be updated to use calcite css vars.

content: "";
inline-size: theme("spacing[0]");
z-index: theme("zIndex.header");
background-color: theme("colors.brand");
Copy link
Member

Choose a reason for hiding this comment

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

optional: Might be able to use a css var here for brand.

@apply absolute;
content: "";
inline-size: theme("spacing[0]");
z-index: theme("zIndex.header");
Copy link
Member

Choose a reason for hiding this comment

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

optional: Might be able to use a css var here for z-index.

@josercarcamo josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 20, 2024
@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 20, 2024
@josercarcamo josercarcamo merged commit b3d2cb2 into dev Jun 20, 2024
12 checks passed
@josercarcamo josercarcamo deleted the josercarcamo/7538-improve-focus-outline branch June 20, 2024 23:29
@github-actions github-actions bot added this to the 2024-06-25 - Jun Release milestone Jun 20, 2024
@benelan benelan added autorelease: tagged Pull requests created by release-please that were merged and deployed and removed autorelease: tagged Pull requests created by release-please that were merged and deployed labels Jun 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants