Custom select UI (#218)

* First pass * Add more * Add a more complex option * Tests * Drop custom CSS * Clean up * Test onexit * Update snapshots after package updates * Adjustments + include mbx-assembly 1.5.0
mapbox · Jan 25, 2024 · fb688c3 · fb688c3
1 parent 20ce3ef
commit fb688c3
Show file tree

Hide file tree

Showing 14 changed files with 2,105 additions and 1,644 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,21 +34,22 @@
     "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@mapbox/mbx-assembly": "^1.4.0",
+    "@mapbox/mbx-assembly": "^1.5.0",
     "@mapbox/query-selector-contains-node": "^1.0.0",
-    "@radix-ui/react-accessible-icon": "^1.0.2",
-    "@radix-ui/react-accordion": "^1.1.1",
-    "@radix-ui/react-context-menu": "^2.1.3",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-label": "^2.0.1",
-    "@radix-ui/react-popover": "^1.0.5",
-    "@radix-ui/react-portal": "^1.0.2",
-    "@radix-ui/react-slider": "^1.1.1",
-    "@radix-ui/react-switch": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.3",
-    "@radix-ui/react-toast": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.0.5",
-    "@radix-ui/react-visually-hidden": "^1.0.2",
+    "@radix-ui/react-accessible-icon": "^1.0.3",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-portal": "^1.0.4",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.0",
     "debounce": "^1.1.0",

diff --git a/src/components/context-menu/__snapshots__/context-menu.test.tsx.snap b/src/components/context-menu/__snapshots__/context-menu.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`ContextMenu all options renders 1`] = `
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(2px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -2px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 0%;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(2px, 0px); min-width: max-content; --radix-popper-available-width: -2px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0%;"
   >
     <div
       aria-orientation="vertical"
@@ -156,7 +156,7 @@ exports[`ContextMenu basic renders 1`] = `
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(0, -200%, 0); min-width: max-content;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       aria-orientation="vertical"
@@ -177,7 +177,7 @@ exports[`ContextMenu basic renders 1`] = `
         Options
       </div>
       <div
-        class="flex flex--space-between-main px6 py6 round color-blue-on-hover bg-gray-lighter-on-hover"
+        class="flex flex--space-between-main px6 py6 round color-blue-on-hover bg-darken5-on-hover"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -199,7 +199,7 @@ exports[`ContextMenu basic renders 1`] = `
         </span>
       </div>
       <div
-        class="flex flex--space-between-main px6 py6 round color-blue-on-hover bg-gray-lighter-on-hover"
+        class="flex flex--space-between-main px6 py6 round color-blue-on-hover bg-darken5-on-hover"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"

diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx
@@ -32,7 +32,7 @@ export default function ContextMenu({
   onChange,
   options,
   themeControlWrapper = 'bg-white round shadow-darken10 px6 py6 txt-s wmin240',
-  themeItem = 'px6 py6 round color-blue-on-hover bg-gray-lighter-on-hover',
+  themeItem = 'px6 py6 round color-blue-on-hover bg-darken5-on-hover',
   themeTitle = 'px6 py6 txt-bold',
   themeSeparator = 'border-t border--gray-light my6'
 }: Props): ReactElement {

diff --git a/src/components/control-text/__snapshots__/control-text.test.tsx.snap b/src/components/control-text/__snapshots__/control-text.test.tsx.snap
@@ -96,7 +96,7 @@ exports[`ControlText all options renders as expected 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(0, -200%, 0); min-width: max-content;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       class="bg-gray-dark border--gray-dark color-white border shadow-darken25 round px12 py6 border border-1 border--border--gray-dark"

diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -319,7 +319,7 @@ exports[`Modal basic, auto renders 1`] = `
   />
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(0, -200%, 0); min-width: max-content;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       class="bg-white border--white color-text border round txt-s px12 py6 wmax240"

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Popover all options renders 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(-6px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 50%;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(-6px, 0px); min-width: max-content; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 50%;"
   >
     <div
       class="bg-white border--white color-text border shadow-darken25 round border border-1 border--border--white"
@@ -83,7 +83,7 @@ exports[`Popover basic renders 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(6px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
   >
     <div
       class="bg-white border--white color-text border shadow-darken25 round px12 py12 border border-1 border--border--white"
@@ -148,7 +148,7 @@ exports[`Popover dark renders 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(6px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
   >
     <div
       class="bg-gray-dark border--gray-dark color-white border shadow-darken25 round px12 py12 border border-1 border--border--gray-dark"
@@ -213,7 +213,7 @@ exports[`Popover no arrow renders 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(6px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 50%;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 50%;"
   >
     <div
       class="bg-white border--white color-text border shadow-darken25 round px12 py12 border border-1 border--border--white"
@@ -263,7 +263,7 @@ exports[`Popover warning renders 1`] = `
   </div>
   <div
     data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate3d(6px, 0px, 0); min-width: max-content; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(6px, 0px); min-width: max-content; --radix-popper-available-width: -6px; --radix-popper-available-height: 0px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
   >
     <div
       class="bg-orange-faint border--orange-deep color-orange-deep border shadow-darken25 round px12 py12 border border-1 border--border--orange-deep"