I believe this is a regression introduced by https://github.com/microsoft/fluentui/pull/22408. It changes the implementation of the empty space in question from marginTop to paddingTop, but appears to have missed adjusting the corresponding behavior to suppress the empty space when custom navigation is in play at L271 of Panel.styles.ts - it is still overriding marginTop in that case, rather than the newly-used paddingTop.
Actual Behavior
As of @fluentui/react@8.64.2, there is a new 18px of empty padding applied above custom header+nav rendering passed to <Panel>s. See red-highlighted section of the below screenshot of the provided minimal repro:
Expected Behavior
Behavior should be consistent with @fluentui/react<=8.64.1, where the default 18px of margin-top applied to <Panel> content was suppressed for <Panel>s which use a custom header/nav. See red pointer of the below screenshot of the same repro downgraded to 8.64.1:
Library
React / v8 (@fluentui/react)
System Info
Are you reporting Accessibility issue?
no
Reproduction
https://codepen.io/dbjorge/pen/yLpxJXb
Bug Description
I believe this is a regression introduced by https://github.com/microsoft/fluentui/pull/22408. It changes the implementation of the empty space in question from
marginTop
topaddingTop
, but appears to have missed adjusting the corresponding behavior to suppress the empty space when custom navigation is in play at L271 ofPanel.styles.ts
- it is still overridingmarginTop
in that case, rather than the newly-usedpaddingTop
.Actual Behavior
As of
@fluentui/react@8.64.2
, there is a new 18px of empty padding applied above custom header+nav rendering passed to<Panel>
s. See red-highlighted section of the below screenshot of the provided minimal repro:Expected Behavior
Behavior should be consistent with
@fluentui/react<=8.64.1
, where the default 18px ofmargin-top
applied to<Panel>
content was suppressed for<Panel>
s which use a custom header/nav. See red pointer of the below screenshot of the same repro downgraded to 8.64.1:Logs
No response
Requested priority
High
Products/sites affected
Accessibility Insights for Web (see https://github.com/microsoft/accessibility-insights-web/pull/5312#issuecomment-1097091341 for more details and a screenshot of the motivating example)
Are you willing to submit a PR to fix?
no
Validations