Fix layout issues and add more test examples

packages/design-system/src/components/text-field.stories.tsx

@@ -6,6 +6,8 @@ import { Flex } from "./flex";
 import { IconButton } from "./icon-button";
 import { TextField } from "./text-field";
 import { Box } from "./box";
+import { Grid } from "./grid";
+import { Text } from "./text";
 
 export default {
   component: TextField,
@@ -100,26 +102,59 @@ export const PrefixSuffix: ComponentStory<typeof TextField> = () => {
 
 export const Layout: ComponentStory<typeof TextField> = () => {
   return (
-    <Flex direction="row" gap={2} css={{ justifyContent: "space-between" }}>
-      <TextField
-        value="Long content comes here and it doesn't wrap"
-        prefix={<BrushIcon />}
-        suffix={
-          <IconButton>
-            <ChevronDownIcon />
-          </IconButton>
-        }
+    <>
+      <Flex direction="row" gap={2} css={{ justifyContent: "space-between" }}>
+        <TextField
+          value="Long content comes here and it doesn't wrap"
+          prefix={<BrushIcon />}
+          suffix={
+            <IconButton>
+              <ChevronDownIcon />
+            </IconButton>
+          }
+          css={{
+            flexGrow: 1,
+            maxWidth: "25%",
+          }}
+        />
+        <Box css={{ background: "$muted" }}>Content</Box>
+        <TextField
+          state="invalid"
+          value="Long content comes here and it doesn't wrap"
+        />
+      </Flex>
+
+      <Grid
+        gap={2}
         css={{
-          flexGrow: 1,
-          maxWidth: "25%",
+          gridTemplateColumns: "100px 1fr",
+          width: 250,
+          border: "1px solid",
         }}
-      />
-      <Box css={{ background: "$muted" }}>Content</Box>
-      <TextField
-        state="invalid"
-        value="Long content comes here and it doesn't wrap"
-      />
-    </Flex>
+      >
+        <Box css={{ background: "$muted" }}>
+          <Text as="label" htmlFor="field">
+            This is a label
+          </Text>
+        </Box>
+        <Box css={{ background: "$muted" }}>
+          <TextField
+            id="field"
+            value="Long content comes here and it doesn't wrap"
+            prefix={<BrushIcon />}
+          />
+        </Box>
+        <Box css={{ background: "$muted" }}>
+          <Text as="label" htmlFor="field2">
+            This is a label
+          </Text>
+        </Box>
+        <TextField
+          id="field2"
+          value="Long content comes here and it doesn't wrap"
+        />
+      </Grid>
+    </>
   );
 };
 

packages/design-system/src/components/text-field.tsx

@@ -14,6 +14,9 @@ const InputBase = styled("input", {
   padding: "0",
   flexGrow: 1,
   flexShrink: 1,
+  minWidth: 0,
+  width: "100%",
+  textOverflow: "ellipsis",
   outline: "none",
   WebkitTapHighlightColor: "rgba(0,0,0,0)",
 
@@ -21,12 +24,6 @@ const InputBase = styled("input", {
   // DOM order reflects focus path and visually we use order to put them into the correct visual order.
   order: 1,
 
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
   "&:-webkit-autofill": {
     boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
   },
@@ -51,6 +48,7 @@ const InputBase = styled("input", {
     fontFamily: "$untitled",
     color: "$hiContrast",
   },
+
   "&::placeholder": {
     color: "$slate9",
   },