Merge pull request #236 from buildo/fill-available-bug

Author: gabro

packages/bento-design-system/src/Table/createTable.tsx

@@ -249,7 +249,7 @@ export function createTable(
     function gridWidthStyle(gridWidth: GridWidth): string {
       return match(gridWidth)
         .with("fit-content", () => "max-content")
-        .with("fill-available", () => "minmax(max-content, auto")
+        .with("fill-available", () => "minmax(max-content, auto)")
         .with({ custom: __.string }, ({ custom: width }) => width)
         .with({ custom: __.number }, ({ custom: width }) => `${width}px`)
         .exhaustive();

packages/storybook/stories/Components/Table.stories.tsx

@@ -295,3 +295,20 @@ export const Grouped = createStory({
   data: exampleData,
   groupBy: "group",
 });
+
+export const WithFillColumn = createStory({
+  columns: [
+    tableColumn.text({
+      headerLabel: formatMessage("Name"),
+      accessor: "name",
+      width: "fill-available",
+    }),
+    tableColumn.textWithIcon({
+      headerLabel: formatMessage("Country"),
+      accessor: "country",
+      iconPosition: "right",
+      hint: formatMessage("This is a hint"),
+    }),
+  ] as const,
+  data: exampleData,
+});