fix(ListBox): add noCard flag

Author: tenphi

.changeset/afraid-adults-thank.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `noCard` flag to ListBox to remove the border and the padding.

src/components/fields/ListBox/ListBox.stories.tsx

@@ -82,6 +82,13 @@ const meta: any = {
         defaultValue: { summary: 'medium' },
       },
     },
+    noCard: {
+      control: { type: 'boolean' },
+      description: 'Remove card styling (border and outer margin)',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
     header: {
       control: { type: 'text' },
       description: 'Custom header content',
@@ -1392,3 +1399,81 @@ export const AllValuePropsExample: Story = {
     },
   },
 };
+
+export const NoCardStyling: Story = {
+  render: () => (
+    <Space gap="4x" flow="column">
+      <div>
+        <Text preset="t3" weight="600">
+          Default Card Styling
+        </Text>
+        <Text preset="t4" color="#dark.60">
+          With border and outer margin
+        </Text>
+        <Space height="1x" />
+        <ListBox
+          label="Select a fruit"
+          selectionMode="single"
+          defaultSelectedKey="apple"
+        >
+          {fruits.slice(0, 4).map((fruit) => (
+            <ListBox.Item key={fruit.key}>{fruit.label}</ListBox.Item>
+          ))}
+        </ListBox>
+      </div>
+
+      <div>
+        <Text preset="t3" weight="600">
+          No Card Styling (noCard=true)
+        </Text>
+        <Text preset="t4" color="#dark.60">
+          Without border and outer margin
+        </Text>
+        <Space height="1x" />
+        <ListBox
+          noCard
+          label="Select a fruit"
+          selectionMode="single"
+          defaultSelectedKey="banana"
+        >
+          {fruits.slice(0, 4).map((fruit) => (
+            <ListBox.Item key={fruit.key}>{fruit.label}</ListBox.Item>
+          ))}
+        </ListBox>
+      </div>
+
+      <div>
+        <Text preset="t3" weight="600">
+          No Card with Sections
+        </Text>
+        <Text preset="t4" color="#dark.60">
+          Section margins are preserved
+        </Text>
+        <Space height="1x" />
+        <ListBox
+          noCard
+          label="Select food items"
+          selectionMode="single"
+          defaultSelectedKey="carrot"
+        >
+          <ListBox.Section title="Fruits">
+            <ListBox.Item key="apple">Apple</ListBox.Item>
+            <ListBox.Item key="banana">Banana</ListBox.Item>
+          </ListBox.Section>
+          <ListBox.Section title="Vegetables">
+            <ListBox.Item key="carrot">Carrot</ListBox.Item>
+            <ListBox.Item key="broccoli">Broccoli</ListBox.Item>
+          </ListBox.Section>
+        </ListBox>
+      </div>
+    </Space>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The `noCard` prop removes the border and outer margin from the ListBox, making it suitable for use in contexts where the card styling is not needed (e.g., inside popovers or dialogs). Section margins are preserved to maintain proper spacing.',
+      },
+    },
+  },
+};

src/components/fields/ListBox/ListBox.tsx

@@ -79,7 +79,7 @@ const ListBoxWrapperElement = tasty({
       valid: '#success-text.50',
       invalid: '#danger-text.50',
       disabled: true,
-      'popover | searchable': false,
+      'popover | searchable | !card': false,
     },
   },
 });
@@ -93,7 +93,7 @@ const ListElement = tasty({
     boxSizing: 'border-box',
     margin: {
       '': '.5x .5x 0 .5x',
-      sections: '.5x .5x 0 .5x',
+      '!card': '0',
     },
     height: 'max-content',
   },
@@ -309,6 +309,13 @@ export interface CubeListBoxProps<T>
    * Defaults to "No items".
    */
   emptyLabel?: ReactNode;
+
+  /**
+   * Whether to remove the card styling (border and outer margin).
+   * When true, removes the border and outer margin while keeping section margins.
+   * Defaults to false (card styling is applied).
+   */
+  noCard?: boolean;
 }
 
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -516,6 +523,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
     allValueProps,
     filter,
     emptyLabel = 'No items',
+    noCard = false,
     form,
     ...otherProps
   } = props;
@@ -840,6 +848,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
       header: !!header || (showSelectAll && props.selectionMode === 'multiple'),
       footer: !!footer,
       selectAll: showSelectAll && props.selectionMode === 'multiple',
+      card: !noCard,
       ...externalMods,
     }),
     [
@@ -851,6 +860,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
       footer,
       showSelectAll,
       props.selectionMode,
+      noCard,
       externalMods,
     ],
   );
@@ -901,7 +911,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
             ref={listRef}
             styles={listStyles}
             aria-disabled={isDisabled || undefined}
-            mods={{ sections: hasSections }}
+            mods={{ sections: hasSections, card: !noCard }}
             style={
               shouldVirtualize
                 ? {