Skip to content

feat: add FilterCard component #653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rsbh wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: add FilterCard component #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8a676c8
feat: add FilterCard Component
rsbh Feb 24, 2026
bac9f7a
chore: add FilterCard docs and example
rsbh Feb 24, 2026
661db9b
feat: add unstyled popover variant
rsbh Feb 24, 2026
380e53b
feat: add filter card footer
rsbh Feb 24, 2026
77cbe32
chore: update filtercard docs
rsbh Feb 24, 2026
0e02d80
chore: update data table display setting with filtercard
rsbh Feb 24, 2026
a320f85
fix: address PR review feedback
rsbh Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions apps/www/src/components/playground/filter-card-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
'use client';

import { Button, FilterCard, Select, Text } from '@raystack/apsara';
import PlaygroundLayout from './playground-layout';

export function FilterCardExamples() {
return (
<PlaygroundLayout title='FilterCard'>
<FilterCard>
<FilterCard.Section>
<FilterCard.Item label='Ordering'>
<Select defaultValue='auto'>
<Select.Trigger
size='small'
variant='outline'
style={{ width: '100%' }}
Comment on lines 13 to 16
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the Select component definition and check for variant support
find . -type f -path "*select*" -name "*.tsx" -o -name "*.ts" | head -20

Repository: raystack/apsara

Length of output: 931

🏁 Script executed:

#!/bin/bash
# Search for SelectTrigger or Select.Trigger component definition
rg -n "SelectTrigger|type.*Trigger.*Props|interface.*Trigger.*Props" --type=tsx --type=ts -A5 | head -100

Repository: raystack/apsara

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Check the actual filter-card-examples.tsx file at the lines mentioned
cat -n apps/www/src/components/playground/filter-card-examples.tsx | sed -n '1,60p'

Repository: raystack/apsara

Length of output: 2303

🏁 Script executed:

#!/bin/bash
# Check ordering.tsx for Select usage pattern
cat -n apps/www/src/components/playground/ordering.tsx | sed -n '35,55p'

Repository: raystack/apsara

Length of output: 138

🏁 Script executed:

#!/bin/bash
# Check display-settings.tsx for Button variant on Reset button
cat -n apps/www/src/components/playground/display-settings.tsx | sed -n '100,115p'

Repository: raystack/apsara

Length of output: 146

🏁 Script executed:

#!/bin/bash
# Search for ordering.tsx and display-settings.tsx across the repo
fd "ordering.tsx|display-settings.tsx" .

Repository: raystack/apsara

Length of output: 198

🏁 Script executed:

#!/bin/bash
# Find Select component source files
fd "select" packages/raystack/components/ -type f | head -20

Repository: raystack/apsara

Length of output: 229

🏁 Script executed:

#!/bin/bash
# Look for Select component definition and check variant prop
rg "variant.*filter" --type ts --type tsx -B3 -A3 | head -80

Repository: raystack/apsara

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Search for Select.Trigger or SelectTrigger component definition
rg "Select\.Trigger|SelectTrigger" --type ts --type tsx -B2 -A8 | head -120

Repository: raystack/apsara

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Read ordering.tsx from correct path
cat -n packages/raystack/components/data-table/components/ordering.tsx | head -60

Repository: raystack/apsara

Length of output: 2254

🏁 Script executed:

#!/bin/bash
# Read display-settings.tsx from correct path
cat -n packages/raystack/components/data-table/components/display-settings.tsx | head -120

Repository: raystack/apsara

Length of output: 3701

🏁 Script executed:

#!/bin/bash
# Find Select component source
find packages/raystack/components/select -type f -name "*.tsx" -o -name "*.ts" | head -20

Repository: raystack/apsara

Length of output: 638

🏁 Script executed:

#!/bin/bash
# Read Select.Trigger component definition
cat -n packages/raystack/components/select/select-trigger.tsx

Repository: raystack/apsara

Length of output: 2715

🏁 Script executed:

#!/bin/bash
# Read Select types to see what props are allowed
cat -n packages/raystack/components/select/types.ts

Repository: raystack/apsara

Length of output: 238

Remove variant='filter' from Select.Trigger.

Select.Trigger only supports variant='outline' (default) or variant='text'. The value 'filter' is not a valid variant and will be ignored. In actual DataTable implementations (ordering.tsx, grouping.tsx), the filter styling is applied via data-variant='filter' on Select.Content, not on the trigger. Move or remove this prop from lines 15 and 31.

Align Button variant with actual implementation.

Line 48 uses variant='ghost', but the reset button in the actual DisplaySettings component (display-settings.tsx line 107) uses variant='text' color='neutral'. Align the playground example with the production pattern.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/components/playground/filter-card-examples.tsx` around lines 13
- 16, Remove the invalid variant on the select trigger: delete variant='filter'
from Select.Trigger instances and, if filter styling is needed, add
data-variant='filter' to the corresponding Select.Content component (match how
ordering.tsx/grouping.tsx do it). Also change the reset Button from
variant='ghost' to variant='text' and add color='neutral' so the playground
matches display-settings.tsx's reset button pattern. Ensure you update both
occurrences noted around Select.Trigger (the two triggers) and the reset Button
instance.

>
<Select.Value />
</Select.Trigger>
<Select.Content>
<Select.Item value='auto'>Auto</Select.Item>
<Select.Item value='name'>Name</Select.Item>
<Select.Item value='date'>Date</Select.Item>
</Select.Content>
</Select>
</FilterCard.Item>
<FilterCard.Item label='Grouping'>
<Select defaultValue='none'>
<Select.Trigger
size='small'
variant='outline'
style={{ width: '100%' }}
>
<Select.Value />
</Select.Trigger>
<Select.Content>
<Select.Item value='none'>No grouping</Select.Item>
<Select.Item value='status'>Status</Select.Item>
<Select.Item value='type'>Type</Select.Item>
</Select.Content>
</Select>
</FilterCard.Item>
</FilterCard.Section>
<FilterCard.Section title='Display Properties'>
<Text size={1}>Name, Creator, Project</Text>
</FilterCard.Section>
<FilterCard.Footer>
<Button variant='text' size='small' color='neutral'>
Reset to default
</Button>
</FilterCard.Footer>
</FilterCard>
</PlaygroundLayout>
);
}
1 change: 1 addition & 0 deletions apps/www/src/components/playground/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export * from './data-table-examples';
export * from './dialog-examples';
export * from './dropdown-menu-examples';
export * from './empty-state-examples';
export * from './filter-card-examples';
export * from './filter-chip-examples';
export * from './flex-examples';
export * from './headline-examples';
Expand Down
74 changes: 74 additions & 0 deletions apps/www/src/content/docs/components/filter-card/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
'use client';

import { getPropsString } from '@/lib/utils';

export const getCode = (props: any) => {
const { children, ...rest } = props;
return `<FilterCard>
<FilterCard.Section${getPropsString(rest)}>${children}</FilterCard.Section>
</FilterCard>`;
};
Comment on lines +5 to +10
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Unescaped children interpolation can produce malformed JSX output.

children is inserted verbatim into the JSX template string. If a playground user types characters like <, >, ${, or `, the generated code snippet will be syntactically broken. A minimal guard (e.g., HTML-entity escaping or clamping to alphanumeric input) keeps the output valid regardless of playground input.

Additionally, since props.ts introduces typed interfaces for FilterCard, consider replacing props: any with the appropriate type to get compile-time safety on the destructuring.

🛡️ Proposed fix 
-export const getCode = (props: any) => {
+export const getCode = (props: { title?: string; children?: string }) => {
   const { children, ...rest } = props;
+  const safeChildren = (children ?? '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   return `<FilterCard>
-  <FilterCard.Section${getPropsString(rest)}>${children}</FilterCard.Section>
+  <FilterCard.Section${getPropsString(rest)}>${safeChildren}</FilterCard.Section>
 </FilterCard>`;
 };
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/content/docs/components/filter-card/demo.ts` around lines 5 -
10, getCode currently interpolates children verbatim into the template string
which can break generated JSX if users enter characters like <, >, ${, or
backticks; update getCode to escape/sanitize children before interpolation
(e.g., replace &, <, >, ", ', ${ and backticks with safe equivalents) so the
returned string always produces valid JSX, use the sanitized version inside the
<FilterCard.Section${getPropsString(rest)}>...</FilterCard.Section> output, and
while here replace props: any with the proper typed interface exported from
props.ts (e.g., FilterCardProps or the correct name) so destructuring {
children, ...rest } is type-checked.


export const playground = {
type: 'playground',
controls: {
title: {
type: 'text',
initialValue: 'Display Properties'
},
children: {
type: 'text',
initialValue: 'Section content goes here'
}
},
getCode
};

export const sectionsDemo = {
type: 'code',
code: `
<FilterCard>
<FilterCard.Section>
<FilterCard.Item label="Ordering">
<Select defaultValue="auto">
<Select.Trigger size="small" variant="outline" style={{ width: "100%" }}>
<Select.Value />
</Select.Trigger>
<Select.Content>
<Select.Item value="auto">Auto</Select.Item>
<Select.Item value="name">Name</Select.Item>
<Select.Item value="date">Date</Select.Item>
</Select.Content>
</Select>
</FilterCard.Item>
<FilterCard.Item label="Grouping">
<Select defaultValue="none">
<Select.Trigger size="small" variant="outline" style={{ width: "100%" }}>
<Select.Value />
</Select.Trigger>
<Select.Content>
<Select.Item value="none">No grouping</Select.Item>
<Select.Item value="status">Status</Select.Item>
<Select.Item value="type">Type</Select.Item>
</Select.Content>
</Select>
</FilterCard.Item>
</FilterCard.Section>
<FilterCard.Section title="Display Properties">
<Text size={1}>Name, Creator, Project</Text>
</FilterCard.Section>
<FilterCard.Footer>
<Button variant="text" size="small" color="neutral">Reset to default</Button>
</FilterCard.Footer>
</FilterCard>`
};

export const withoutTitleDemo = {
type: 'code',
code: `
<FilterCard>
<FilterCard.Section>
<Text size={1}>Section without a title</Text>
</FilterCard.Section>
</FilterCard>`
};
71 changes: 71 additions & 0 deletions apps/www/src/content/docs/components/filter-card/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
title: FilterCard
description: A sectioned card component for grouping filter controls and configuration options.
source: packages/raystack/components/filter-card
---

import { playground, sectionsDemo, withoutTitleDemo } from "./demo.ts";

<Demo data={playground} />

## Anatomy

Import and assemble the component:

```tsx
import { FilterCard } from '@raystack/apsara'

<FilterCard>
<FilterCard.Section>
<FilterCard.Item label="Label">
Action content
</FilterCard.Item>
</FilterCard.Section>
<FilterCard.Section title="Section Title">
Content
</FilterCard.Section>
<FilterCard.Footer>
Footer content
</FilterCard.Footer>
</FilterCard>
```

## API Reference

### FilterCard

The outer container for the filter card.

<auto-type-table path="./props.ts" name="FilterCardProps" />

### FilterCard.Section

A section within the filter card with an optional title.

<auto-type-table path="./props.ts" name="FilterCardSectionProps" />

### FilterCard.Item

A label-action row within a section.

<auto-type-table path="./props.ts" name="FilterCardItemProps" />

### FilterCard.Footer

A compact footer section, right-aligned by default.

<auto-type-table path="./props.ts" name="FilterCardFooterProps" />

## Examples

### With Sections

Multiple sections separated by a divider:

<Demo data={sectionsDemo} />

### Without Title

Sections can be rendered without a title:

<Demo data={withoutTitleDemo} />
75 changes: 75 additions & 0 deletions apps/www/src/content/docs/components/filter-card/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
export interface FilterCardProps {
/** Content of the filter card */
children?: React.ReactNode;

/** Additional CSS class names */
className?: string;
}

export interface FilterCardSectionProps {
/** Optional title for the section */
title?: string;

/** Content of the section */
children?: React.ReactNode;

/** Additional CSS class names */
className?: string;

/**
* Flex direction
* @defaultValue "column"
*/
direction?: 'row' | 'column' | 'rowReverse' | 'columnReverse';

/** Flex align items */
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';

/** Flex justify content */
justify?: 'start' | 'center' | 'end' | 'between';

/** Flex wrap */
wrap?: 'noWrap' | 'wrap' | 'wrapReverse';

/** Flex gap */
gap?:
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 'extra-small'
| 'small'
| 'medium'
| 'large'
| 'extra-large';
}

export interface FilterCardItemProps {
/** Label text displayed on the left */
label: string;

/** Action content displayed on the right */
children?: React.ReactNode;

/** Additional CSS class names */
className?: string;
}

export interface FilterCardFooterProps {
/** Content of the footer */
children?: React.ReactNode;

/** Additional CSS class names */
className?: string;

/**
* Flex justify content
* @defaultValue "end"
*/
justify?: 'start' | 'center' | 'end' | 'between';
}
6 changes: 6 additions & 0 deletions apps/www/src/content/docs/components/popover/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ export interface PopoverRootProps {
}

export interface PopoverContentProps {
/**
* Visual style variant
* @defaultValue "default"
*/
variant?: 'default' | 'unstyled';

/** Preferred side of the trigger to render. */
side?: 'top' | 'right' | 'bottom' | 'left';

Expand Down
28 changes: 12 additions & 16 deletions packages/raystack/components/data-table/components/display-properties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { Chip } from '../../chip';
import { Flex } from '../../flex';
import { Text } from '../../text';
import { DataTableColumn } from '../data-table.types';

export function DisplayProperties<TData, TValue>({
Expand All @@ -13,21 +12,18 @@ export function DisplayProperties<TData, TValue>({
const hidableColumns = columns?.filter(col => col.columnDef.enableHiding);

return (
<Flex direction='column' gap={3}>
<Text>Display Properties</Text>
<Flex gap={3} wrap='wrap'>
{hidableColumns.map(column => (
<Chip
key={column.id}
variant='outline'
size='small'
color={column.getIsVisible() ? 'accent' : 'neutral'}
onClick={() => column.toggleVisibility()}
>
{(column.columnDef.header as string) || column.id}
</Chip>
))}
</Flex>
<Flex gap={3} wrap='wrap'>
{hidableColumns.map(column => (
<Chip
key={column.id}
variant='outline'
size='small'
color={column.getIsVisible() ? 'accent' : 'neutral'}
onClick={() => column.toggleVisibility()}
>
{(column.columnDef.header as string) || column.id}
</Chip>
))}
</Flex>
);
}
Loading