Skip to content

chore(input): Increase hit target of input element to fill to the border#30825

Merged
behowell merged 2 commits intomicrosoft:masterfrom
behowell:input/increase-hit-target
Mar 19, 2024
Merged

chore(input): Increase hit target of input element to fill to the border#30825
behowell merged 2 commits intomicrosoft:masterfrom
behowell:input/increase-hit-target

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Mar 19, 2024

Previous Behavior

The Input control had padding on the root div, which reduced the size of the true input element, and reduced its hit target to not fill the entire space.

New Behavior

Combine the padding from the root and input slots onto just the input itself. This expands the hit target of the input to extend to the borders of the root.

If there is contentBefore or contentAfter, the original padding values are used to make sure everything aligns appropriately.

Related Issue(s)

@behowell behowell self-assigned this Mar 19, 2024
@github-actions github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 19, 2024
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@behowell
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 640 674 5000
Button mount 299 308 5000
Field mount 1176 1199 5000
FluentProvider mount 765 754 5000
FluentProviderWithTheme mount 80 89 10
FluentProviderWithTheme virtual-rerender 60 61 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 81 10
MakeStyles mount 909 918 50000
Persona mount 1841 1793 5000
SpinButton mount 1447 1480 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-datepicker-compat
DatePicker Compat
224.523 kB
62.94 kB
225.758 kB
63.183 kB
1.235 kB
243 B
react-input
Input
26.891 kB
9.12 kB
28.126 kB
9.362 kB
1.235 kB
242 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
71.098 kB
20.515 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
220.047 kB
62.171 kB
react-components
react-components: FluentProvider & webLightTheme
43.585 kB
14.352 kB
react-portal-compat
PortalCompatProvider
7.944 kB
2.588 kB
🤖 This report was generated against 61b2b750d65ebf39519bdf2ab1354ced00485ee5

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@behowell behowell merged commit 62641cd into microsoft:master Mar 19, 2024
@behowell behowell deleted the input/increase-hit-target branch March 19, 2024 22:24
robertpenner pushed a commit to robertpenner/fluentui that referenced this pull request Apr 11, 2024
…der (microsoft#30825)

Combine the padding from the `root` and `input` slots onto just the `input` itself. This expands the hit target of the input to extend to the borders of the `root`.

If there is `contentBefore` or `contentAfter`, the original padding values are used to make sure everything aligns appropriately.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Input control has dead-zones where clicking does not bring focus to the control

3 participants