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

Minor fix: use outlines instead of borders for input field focus states #267

Closed
Skaiir opened this issue Jun 1, 2022 · 0 comments · Fixed by #308
Closed

Minor fix: use outlines instead of borders for input field focus states #267

Skaiir opened this issue Jun 1, 2022 · 0 comments · Fixed by #308
Assignees
@Skaiir
Labels
bug Something isn't working spring cleaning Could be cleaned up one day

Comments

@Skaiir
Copy link
Contributor

Skaiir commented Jun 1, 2022 •
edited
Loading

Describe the Bug

Currently we use a border which we increase to 2px width when a field is focused. While the styling has been set up so that this shouldn't be much different from an outline, in some cases it causes tiny changes in page layout which make some items move around by a fraction of a pixel. This is particularly visible when tabbing around:

firefox_hvYq2SeIZq

A simple solution here would be to use outline instead.

Steps to Reproduce

  • npm run start
  • Tab around
  • Watch some elements move

Expected Behavior

Focusing elements shouldn't affect page layout.

Environment

  • Host Firefox
  • OS: W10 x64
  • Library version: 0.7.1
@Skaiir Skaiir added bug Something isn't working backlog Queued in backlog spring cleaning Could be cleaned up one day labels Jun 1, 2022
@Skaiir Skaiir self-assigned this Aug 17, 2022
@bpmn-io-tasks bpmn-io-tasks bot added in progress Currently worked on and removed backlog Queued in backlog labels Aug 17, 2022
Skaiir added a commit that referenced this issue Aug 17, 2022
@Skaiir
fix: use outlines for field focus states
4c79610 
Closes #267
@Skaiir Skaiir mentioned this issue Aug 17, 2022
Merged
@bpmn-io-tasks bpmn-io-tasks bot added needs review Review pending and removed in progress Currently worked on labels Aug 17, 2022
@fake-join fake-join bot closed this as completed in #308 Aug 17, 2022
fake-join bot pushed a commit that referenced this issue Aug 17, 2022
@Skaiir @fake-join
fix: use outlines for field focus states
b3398b0 
Closes #267
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Aug 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Skaiir Skaiir

Labels
bug Something isn't working spring cleaning Could be cleaned up one day
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: use outlines for field focus states bpmn-io/form-js
1 participant
@Skaiir