Skip to content

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Oct 6, 2022

Current Behavior

Field uses inline-grid for its layout, but fields are never meant to be inline, and should default to being full-width of their parent container.

New Behavior

Change Field to use grid for its layout, and update several stories to also use grid.

Bonus fix: change the validationMessage and hint slots to be <div> elements instead of <span>, since they are blocks within the field layout.

Related Issue(s)

@behowell behowell self-assigned this Oct 6, 2022
@github-actions github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 6, 2022
@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
62.781 kB
17.574 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.227 kB
52.474 kB
react-components
react-components: FluentProvider & webLightTheme
33.4 kB
11.008 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against a8e81b5296f1551e74010c1d2ad9d37c6fd48306

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 6, 2022

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.

Latest deployment of this branch, based on commit bfa0b93:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Oct 7, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: a8e81b5296f1551e74010c1d2ad9d37c6fd48306 (build)

@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 1304 1346 5000
Button mount 951 965 5000
FluentProvider mount 1604 1584 5000
FluentProviderWithTheme mount 632 633 10
FluentProviderWithTheme virtual-rerender 592 595 10
FluentProviderWithTheme virtual-rerender-with-unmount 626 635 10
MakeStyles mount 1912 1919 50000
SpinButton mount 2513 2539 5000

@behowell behowell marked this pull request as ready for review October 7, 2022 17:40
@behowell behowell requested a review from a team as a code owner October 7, 2022 17:40
@behowell behowell merged commit 8954cd0 into microsoft:master Oct 10, 2022
@behowell behowell deleted the field/block branch October 10, 2022 20:05
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 11, 2022
* master:
  fix: Menu trigger should be focused when menu is closed with keyboard (microsoft#25165)
  fix(codemods): Do not fail on empty configMod config (microsoft#25148)
  fix: Field should have block layout, not inline (microsoft#25126)
  chore: Update Griffel to latest version (microsoft#25075)
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
* Change Field to use `grid` for its layout, and update several stories to also use `grid`.
* Change the `validationMessage` and `hint` slots to be `<div>` elements instead of `<span>`, since they are blocks within the field layout.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Field should have block layout, not inline

4 participants