Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(Popper): improve positioning in multiple cases #2187

Merged
layershifter merged 8 commits into from
Dec 19, 2019
Merged

fix(Popper): improve positioning in multiple cases #2187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
049ab2b
wip
layershifter Dec 16, 2019
a040777
add comments, fix typings
layershifter Dec 16, 2019
66e6602
revert changes
layershifter Dec 18, 2019
33e3e69
add snapshot for noflip
layershifter Dec 18, 2019
2edb36b
Merge branches 'docs/update-examples' and 'master' of https://github.…
layershifter Dec 19, 2019
0951bdc
add changelog entry
layershifter Dec 19, 2019
1b7f388
update changelog
layershifter Dec 19, 2019
ce2b753
Update CHANGELOG.md
layershifter Dec 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

### Fixes
- Fix `toggle` changing width during animation in Teams theme @mnajdova ([#2189](https://github.com/microsoft/fluent-ui-react/pull/2189))
- Fix `Popup` positioning in multiple cases @layershifter ([#2187](https://github.com/microsoft/fluent-ui-react/pull/2187))

<!--------------------------------[ v0.42.0 ]------------------------------- -->
## [v0.42.0](https://github.com/microsoft/fluent-ui-react/tree/v0.42.0) (2019-12-12)
Expand Down
9 changes: 8 additions & 1 deletion packages/react/src/themes/teams/components/Popup/popupStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,17 @@ const popupStyles: ComponentSlotStylesPrepared<PopupProps, PopupVariables> = {

popup: ({ variables: v }): ICSSInJSStyle => ({
zIndex: v.zIndex,
position: 'absolute',
textAlign: 'left',
color: v.contentColor,
background: v.contentBackgroundColor,

// Prevents scroll issue, waiting for Popper.js to add this style once initiated.
// https://github.com/mui-org/material-ui/issues/16740
position: 'fixed',
// Fix Popper.js initial positioning display issue
// https://github.com/mui-org/material-ui/issues/17774
top: 0,
left: '0px /* @noflip */',
}),
}

Expand Down
14 changes: 13 additions & 1 deletion packages/react/src/utils/positioner/Popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,28 @@ import getScrollParent from './getScrollParent'
// https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
const createPopper = (
reference: Element | _PopperJS.ReferenceObject,
popper: Element,
popper: HTMLElement,
options?: PopperJS.PopperOptions,
): PopperJS => {
const instance = new ((_PopperJS as any).default || _PopperJS)(reference, popper, {
...options,
eventsEnabled: false,
})

const originalUpdate = instance.update
instance.update = () => {
Copy link
Member

@miroslavstastny miroslavstastny Dec 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the PR title says 'first render'? This fixes resizing after the first render.

Copy link
Member Author

@layershifter layershifter Dec 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated 👍

// Fix Popper.js initial positioning display issue
// https://github.com/popperjs/popper.js/issues/457#issuecomment-367692177
popper.style.left = '0'
popper.style.top = '0'

originalUpdate()
}

const actualWindow = popper.ownerDocument.defaultView
instance.scheduleUpdate = () => actualWindow.requestAnimationFrame(instance.update)
instance.enableEventListeners()

return instance
}
/**
Expand Down
14 changes: 14 additions & 0 deletions packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,20 @@ exports[`felaRenderer keyframe colors are rendered 1`] = `
"
`;

exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`noFlip\` 1`] = `
".a {
margin-left: 10px; /* @noflip */
}


<div className=ui-provider__box dir=rtl>
<span className=ui-text a dir=auto>
Hello
</span>
</div>;
"
`;

exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
".a {
margin-right: 10px;
Expand Down
13 changes: 12 additions & 1 deletion packages/react/test/specs/utils/felaRenderer-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ describe('felaRenderer', () => {

test('marginLeft is rendered into marginRight due to RTL', () => {
const snapshot = createSnapshot(
<Provider rtl={true}>
<Provider rtl>
<Text content="Hello" styles={{ marginLeft: '10px' }} />
</Provider>,
{},
Expand All @@ -115,6 +115,17 @@ describe('felaRenderer', () => {
expect(snapshot).toMatchSnapshot()
})

test('marginLeft is rendered into marginLeft due to RTL with `noFlip`', () => {
const snapshot = createSnapshot(
<Provider rtl>
<Text content="Hello" styles={{ marginLeft: '10px /* @noflip */' }} />
</Provider>,
{},
felaRenderer,
)
expect(snapshot).toMatchSnapshot()
})

test('styles are expanded to longhand values', () => {
const snapshot = createSnapshot(
<EmptyThemeProvider>
Expand Down