Conversation
matyasf
changed the title
|
matyasf
commented
Apr 11, 2025
|
|
||
| When `direction` is set to `column`, Flex.Items' `overflowY` property is automagically set | ||
| to `auto` to account for content overflow with a vertical scrollbar. | ||
| to `auto` to account for content overflow with a vertical scrollbar. Add padding, so focus rings are not cut off. |
Collaborator
Author
There was a problem hiding this comment.
I don't like that we are doing this automagically, but I think it would be a breaking change to remove
matyasf
force-pushed
the
focus_ring_fix
branch
4 times, most recently
from
e87dc87 to
6eb8d1b
Compare
matyasf
changed the title
View
it uses now the outline CSS prop instead of a :before pseudo class. This has several advantages: - View can now display focus rings even if the position is not absolute - focus rings follow border settings if they are not the same for all corners page CSS is simpler Also add a new prop that will be useful when we use this code for all components that need to display a focus ring
HerrTopi
approved these changes
May 8, 2025
balzss
approved these changes
May 8, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The main change is to use CSS
outlineinstead of an absolute positioned:beforeelement. This has the following effects:+Now focus ring is not part of the size calculation, so there will be no scrollbars e.g. if theoverflowis set toautoin some parent element.+Viewnow can display focus rings even if itspositionis notabsolute+Page CSS and code became simpler since we are not using:beforeCSS pseudo tags+Focus ring will follow fancybordersettings (seeView's focus ring examples)~The focus animation is very slightly different. (the old one was usingscale, this usesoutline-offset)-We were using theoutlineprop to display the debug border with thewithVisualDebugprop. To fix this conflict the debug border now uses box-shadow; this overwrite the normal shadow of theViewand is not a dashed but a solid line.For future components we should use
View's focus ring for all our components, this could be done with the https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within CSS pseudo-class, I've added a new prop for it (focusWithin). But sadly we define how the focus ring should look like in several component's theme and use there theme variables, so removing these and switching to this new prop would be a breaking change.To test:
border) and theme variables that change how the focus ring and border behavefocusWithinprop with the current focus/border props