Make the select dropdown for map performance style metrics fit in wit…

…h other input elements. GitOrigin-RevId: 115b12de20f7b8e5927f65217b8da540b9c867cc
nkzw-tech · Sep 13, 2024 · 73245db · 73245db
1 parent 4b8b382
commit 73245db
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/hera/editor/panels/MapEditorSettingsPanel.tsx b/hera/editor/panels/MapEditorSettingsPanel.tsx
@@ -232,6 +232,7 @@ export default function MapEditorSettingsPanel({
                 <span>{getTranslatedPerformanceTypeName('style')}</span>
                 <Stack alignCenter gap={16}>
                   <Select
+                    outline
                     selectedItem={
                       <div className={selectedItemStyle}>
                         {performance.style ? (
@@ -247,6 +248,7 @@ export default function MapEditorSettingsPanel({
                         )}
                       </div>
                     }
+                    size="small"
                   >
                     {PerformanceStyleTypes.map((type) => (
                       <InlineLink

diff --git a/ui/Select.tsx b/ui/Select.tsx
@@ -11,15 +11,25 @@ import Stack from './Stack.tsx';
 export default function Select({
   children,
   forceOpen,
+  outline,
   selectedItem,
+  size = 'medium',
 }: {
   children: ReactNode;
   forceOpen?: boolean;
+  outline?: true;
   selectedItem: ReactNode;
+  size?: 'small' | 'medium';
 }) {
   return (
     <Dropdown
-      className={cx(BoxStyle, dropdownStyle, forceOpen && selectedStyle)}
+      className={cx(
+        BoxStyle,
+        dropdownStyle,
+        forceOpen && selectedStyle,
+        size === 'small' && smallStyle,
+        outline && outlineStyle,
+      )}
       closeOnSelect
       dropdownClassName={cx(BoxStyle, selectorStyle)}
       forceOpen={forceOpen}
@@ -58,3 +68,13 @@ const selectorStyle = css`
 const selectedStyle = css`
   ${pixelBorder(undefined, 2)}
 `;
+
+const outlineStyle = css`
+  ${pixelBorder(applyVar('border-color'), 2)};
+`;
+
+const smallStyle = css`
+  height: 36px;
+  min-height: 32px;
+  padding: 8px 12px;
+`;