chore(components): make combobox consistent (#5979)

Arize-ai · Jan 9, 2025 · fb8c10c · fb8c10c
1 parent 0d425a7
commit fb8c10c
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 174 deletions.
diff --git a/app/src/components/combobox/styles.tsx b/app/src/components/combobox/styles.tsx
@@ -3,11 +3,13 @@ import { css } from "@emotion/react";
 export const comboBoxCSS = css`
   &[data-size="M"] {
     --combobox-vertical-padding: 6px;
-    --combobox-horizontal-padding: 6px;
+    --combobox-start-padding: 8px;
+    --combobox-end-padding: 6px;
   }
   &[data-size="L"] {
     --combobox-vertical-padding: 10px;
-    --combobox-horizontal-padding: var(--ac-global-dimension-static-size-200);
+    --combobox-start-padding: var(--ac-global-dimension-static-size-200);
+    --combobox-end-padding: var(--ac-global-dimension-static-size-200);
   }
   color: var(--ac-global-text-color-900);
   &[data-required] {
@@ -25,8 +27,8 @@ export const comboBoxCSS = css`
     position: relative;
 
     .react-aria-Input {
-      padding: var(--combobox-vertical-padding)
-        var(--combobox-horizontal-padding);
+      padding: var(--combobox-vertical-padding) var(--combobox-end-padding)
+        var(--combobox-vertical-padding) var(--combobox-start-padding);
     }
     .react-aria-Button {
       background: none;

diff --git a/app/src/components/field/styles.ts b/app/src/components/field/styles.ts
@@ -15,6 +15,7 @@ export const fieldBaseCSS = css`
     transition: all 0.2s ease-in-out;
     margin: 0;
     flex: 1 1 auto;
+    font-size: var(--ac-global-font-size-s);
     min-width: var(--ac-global-input-field-min-width);
     background-color: var(--ac-global-input-field-background-color);
     color: var(--ac-global-text-color-900);

diff --git a/app/stories/ComboBox.stories.tsx b/app/stories/ComboBox.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Flex } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import {
   ComboBox,
   ComboBoxItem,
@@ -62,20 +62,22 @@ export default meta;
 
 const Template: StoryFn<ComboBoxProps<object>> = (args) => (
   <ThemeWrapper>
-    <ComboBox {...args}>
-      <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-        Chocolate
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Mint" key={"mint"}>
-        Mint
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-        Strawberry
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-        Vanilla
-      </ComboBoxItem>
-    </ComboBox>
+    <View width="300px">
+      <ComboBox {...args}>
+        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+          Chocolate
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Mint" key={"mint"}>
+          Mint
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+          Strawberry
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+          Vanilla
+        </ComboBoxItem>
+      </ComboBox>
+    </View>
   </ThemeWrapper>
 );