{"files":[{"path":"src\/devtools\/views\/Components\/OwnersStack.css","status":"M"},{"path":"src\/devtools\/views\/Components\/OwnersStack.js","status":"M"}],"commit":{"shortRevision":"e489c8ac8e","authorEmail":"bvaughn@fb.com","authoredAt":"2019-04-07T15:32:13-07:00","authorName":"Brian Vaughn","subject":"Owners stack modal behaves and looks more like a modal","revision":"e489c8ac8e16ac90d95faefb171926658d836a8e"},"body":"","patch":"diff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nindex 270e22ee3b..f7acd99612 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.css\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -2,6 +2,7 @@\n flex: 1;\n display: flex;\n align-items: center;\n+ position: relative;\n }\n \n .Component,\n@@ -42,23 +43,6 @@\n margin-right: 0.5rem;\n }\n \n-.DropdownWrapper {\n- display: inline-block;\n- position: relative;\n-}\n-\n-.Dropdown {\n- z-index: 1;\n- position: absolute;\n- top: calc(100% + 0.25rem);\n- left: 0;\n- background-color: var(--color-background);\n- overflow-y: auto;\n- max-height: 10rem;\n- display: flex;\n- flex-direction: column;\n-}\n-\n .VRule {\n flex: 0 0 auto;\n height: 20px;\n@@ -66,3 +50,19 @@\n background-color: var(--color-border);\n margin: 0 0.5rem;\n }\n+\n+.Modal {\n+ position: absolute;\n+ top: calc(100% + 0.25rem);\n+ left: 2.5rem;\n+ z-index: 1;\n+ display: inline-flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ padding: 0.5rem;\n+ padding-right: 0;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+ max-height: 10rem;\n+ overflow: auto;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex 9bf7c57732..a9d789ac4a 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -1,5 +1,6 @@\n \/\/ @flow\n import React, {\n+ Fragment,\n useCallback,\n useContext,\n useLayoutEffect,\n@@ -11,7 +12,7 @@ import ButtonIcon from '..\/ButtonIcon';\n import Toggle from '..\/Toggle';\n import { TreeContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n-import { useIsOverflowing } from '..\/hooks';\n+import { useIsOverflowing, useModalDismissSignal } from '..\/hooks';\n \n import type { Element } from '.\/types';\n \n@@ -102,8 +103,13 @@ function ElementsDropdown({\n [selectOwner, setIsDropdownVisible]\n );\n \n+ const modalRef = useRef(null);\n+ const dismissModal = useCallback(() => setIsDropdownVisible(false));\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n return (\n-

\n+ \n \n <\/Toggle>\n {isDropdownVisible && (\n-

\n+

\n {ownerStack.map((id, index) => (\n \n )}\n- <\/div>\n+ <\/Fragment>\n );\n }\n \n","parents":["2ac815784b9aff97fb367d605c126d55846cecc7"]}

dillon1000/react

Files changed