Skip to content

Combobox: Allow PopperJS to position menu correctly #1454

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.

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

Merged

Conversation

interactivellama
Copy link
Contributor

@interactivellama interactivellama commented Jul 12, 2018

Fixes #1451 This enables dialog flip and preventing overflow by adding height and width to Combobox menu

Additional description

.slds-dropdown sets the menu to absolute positioning, since it has a relative parent. Absolute positioning removes clientHeight and clientWidth which Popper.js needs to absolute position the menu's wrapping div. Absolute positioning an already absolute positioned element doesn't work. Setting the menu's position to relative allows PopperJS to work it's magic.

https://design-system-react-co-pr-1454.herokuapp.com/?selectedKind=SLDSModal&selectedStory=Small%20with%20footer%2C%20not%20dismissible&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

@qyiming Please pull down and review in your sidebar.

screen shot 2018-07-11 at 10 36 31 pm


CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

  • First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
  • npm run lint:fix has been run and linting passes.
  • Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

  • TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.
  • Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
  • While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

@interactivellama interactivellama temporarily deployed to design-system-react-co-pr-1454 July 12, 2018 04:35 Inactive
@interactivellama
Copy link
Contributor Author

interactivellama commented Jul 12, 2018

@vintik This shouldn't change any of your code (I think), but it affects dialog positioning for Combobox.

@interactivellama interactivellama temporarily deployed to design-system-react-co-pr-1454 July 12, 2018 05:31 Inactive
@qyiming
Copy link
Contributor

qyiming commented Jul 12, 2018

@interactivellama I tested your PR in my "sidebar", the dialog is now able to flip correctly. We do not need #1452 any more.

This enables dialog flip and preventing overflow
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow Combobox menu to flip if it overflows its parent
2 participants