docs(ListView): API Decision #2453

saurabhdaware · 2024-12-26T06:14:02Z

Formatted Documents

Rough Work

<FilterChipDatePicker />

<Dropdown>
  <FilterChipSelectInput />
  <DropdownOverlay>
  </DropdownOverlay>
</Dropdown>

// release later
<Menu>
  <FilterChip />
</Menu>

TODO:

Check with RK if there are checkboxes in FilterChip

changeset-bot · 2024-12-26T06:14:06Z

⚠️ No Changeset found

Latest commit: ce2c86a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-12-26T06:14:18Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2024-12-26T06:17:32Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ce2c86a:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2024-12-26T06:29:31Z

Bundle Size Report

No bundle size changes detected.

Generated by 🚫 dangerJS against ce2c86a

…s/rfc

chaitanyadeorukhkar · 2025-01-10T12:19:01Z

packages/blade/src/components/ListView/_decisions/decisions.md

+- Less verbose compared to API without layout component
+
+**Cons:**
+


Is it really a con? Lets check with design if this will ever be needed to move things around within quick filters

chaitanyadeorukhkar · 2025-01-10T12:20:16Z

packages/blade/src/components/ListView/_decisions/decisions.md

+## Enhancements / Components
+
+- Enhancements:
+  - Searchable Dropdown


Isnt that just autocomplete? What do we need to do here?

chaitanyadeorukhkar · 2025-01-10T12:24:26Z

packages/blade/src/components/ListView/_decisions/decisions.md

+
+- Enhancements:
+  - Searchable Dropdown
+  - InputGroup (TBD)


Where is this needed?

chaitanyadeorukhkar · 2025-01-10T12:25:15Z

packages/blade/src/components/ListView/_decisions/decisions.md

+- Enhancements:
+  - Searchable Dropdown
+  - InputGroup (TBD)
+- New Components


Considering the number of new components and enhancements here, our estimate of 2 weeks seems less. Lets re-evaluate the estimates?

chaitanyadeorukhkar · 2025-01-10T12:27:21Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


There will be different types of filter chips, right? Will this API suffice for all the types?

chaitanyadeorukhkar · 2025-01-10T12:28:08Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


How is the naming convention on Figma for this? Are we also call this FilterChipGroup & FilterChip?

TODO: make names consistent on figma and dev

anuraghazra · 2025-01-13T10:11:18Z

packages/blade/src/components/ListView/_decisions/decisions.md

+      /* filter on search */
+    }}
+  >
+    <FilterGroup />


What is FilterGroup?

anuraghazra · 2025-01-13T10:19:49Z

packages/blade/src/components/ListView/_decisions/decisions.md

+    onSearch={({ value, searchType }) => {
+      /* filter on search */
+    }}


@saurabhdaware I believe we should keep dev side a bit more flexible with slots.

For example in many places in X we don't need search but rather we have some action buttons.

We can keep the QuickFilters and SearchGroup into separate slots which can be independently be used.

<ListView> // internally it will have justify-content: space-between <ListViewQuickFilters filters={[ { title: 'All', onClick: () => {}, }, { title: 'Pending', onClick: () => {}, }, ]} /> <Box> <ListViewFilterToggle /> <ListViewSearchGroup /> </Box> </ListView>

not exactly but something like this ^ this way I can use QuickFilters independently of ListView.

Or

<ListView> // internally it will have justify-content: space-between <ListViewFilters> <QuickFilters filters={[ { title: 'All', onClick: () => {}, }, { title: 'Pending', onClick: () => {}, }, ]} /> <ListViewFiltersActions> // control the gap also <ListViewFilterToggle /> <ListViewSearchGroup /> </ListViewFiltersActions> </ListViewFilters> </ListView>

anuraghazra · 2025-01-13T10:23:50Z

packages/blade/src/components/ListView/_decisions/decisions.md

+```ts
+type QuickFilter = {
+  title: string;
+  onClick: (e: React.MouseEvent) => void;


We will also need onChange, value & controlled/uncontrolled state for QuickFilters.

Because QuickFilters will have the same semantics of RadioGroup it can also change on keyboard events not just click.

Plus this will also be a requirement if we want this to work independently as i've mentioned here

+1. Will change

anuraghazra · 2025-01-13T10:33:29Z

packages/blade/src/components/ListView/_decisions/decisions.md

+        onClick: () => {},
+      },
+    ]}
+    onSearchChange={() => {


We need to make sure consumers are able to externally control all aspects of quickfilters/search etc.

Quick filters, search, and dropdowns may be controlled or have initial values set via URL query parameters.

TODO:

Check search feasibility (design @-RK and API)

Check what all might come in trailing of QuickFilters

anuraghazra · 2025-01-13T10:46:36Z

packages/blade/src/components/ListView/_decisions/decisions.md

+<FilterChipGroup>
+  <Dropdown>
+    <FilterChip value={duration} onClearButtonClick={({ value }) => setDuration(undefined)}>
+      Duration
+    </FilterChip>
+    <DropdownOverlay>
+      <ActionList>
+        <ActionListItem
+          title="2 days"
+          value="2d"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 week"
+          value="1w"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 month"


Wouldn’t this get quite cumbersome to write all these JSX even when we just have 2-3 filter chips, not to mention most production apps will have 8-12 chips

Are there any alternatives we can approach? 🤔 Since we already know the specific inputs involved, could we consider a more streamlined, config-driven, and focused API instead?

Will check with RK on where we need freeflowing texts + leading / trailing usage on actionlist

saurabhdaware

Ignore the irrelevant comments. Old comments. I forgot to submit these.

saurabhdaware · 2025-01-14T06:34:49Z

packages/blade/src/components/ListView/_decisions/decisions.md

+        onClick: () => {},
+      },
+    ]}
+    onSearchChange={() => {


TODO:

Check search feasibility (design @-RK and API)

Check what all might come in trailing of QuickFilters

saurabhdaware · 2025-01-14T06:53:46Z

packages/blade/src/components/ListView/_decisions/decisions.md

+```ts
+type QuickFilter = {
+  title: string;
+  onClick: (e: React.MouseEvent) => void;


+1. Will change

saurabhdaware · 2025-01-14T06:59:41Z

packages/blade/src/components/ListView/_decisions/decisions.md

+<FilterChipGroup>
+  <Dropdown>
+    <FilterChip value={duration} onClearButtonClick={({ value }) => setDuration(undefined)}>
+      Duration
+    </FilterChip>
+    <DropdownOverlay>
+      <ActionList>
+        <ActionListItem
+          title="2 days"
+          value="2d"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 week"
+          value="1w"
+          onClick={({ name, value }) => setDuration(name)}
+        />
+        <ActionListItem
+          title="1 month"


Will check with RK on where we need freeflowing texts + leading / trailing usage on actionlist

saurabhdaware · 2025-01-14T07:16:12Z

packages/blade/src/components/ListView/_decisions/decisions.md

+</Dropdown>
+```
+
+### FilterChipGroup


TODO: make names consistent on figma and dev

saurabhdaware added 2 commits December 13, 2024 10:53

feat: add rough api

022c81e

feat: add alternate API

f93842c

saurabhdaware added 12 commits December 27, 2024 15:57

feat: add different types and terminologies of patterns

aaaeed0

docs: add conclusion to pattern scope

acfbf4d

docs: update diagram

62aee9b

docs: fix heading levels

ffc5e4e

docs: add versioning pro for layout components

3d10a39

docs: add all alternative APIs

1d38d4c

Merge branch 'patterns/rfc' of github.com:razorpay/blade into pattern…

2950881

…s/rfc

feat: add search api

3fe6ffa

docs: add apis for subcomponents

0de5bee

docs: fix image widths and info

c5e3e51

docs: add references and open questions

dfdae3a

feat: remove unused image

a4e162d

saurabhdaware marked this pull request as ready for review January 8, 2025 06:20

saurabhdaware requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, snitin315 and tewarig as code owners January 8, 2025 06:20

chaitanyadeorukhkar reviewed Jan 10, 2025

View reviewed changes

anuraghazra reviewed Jan 13, 2025

View reviewed changes

packages/blade/src/components/ListView/_decisions/decisions.md

/* filter on search */

}}

>

<FilterGroup />

Copy link

Member

anuraghazra Jan 13, 2025

Choose a reason for hiding this comment

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

What is FilterGroup?

anuraghazra reviewed Jan 13, 2025

View reviewed changes

saurabhdaware commented Jan 16, 2025

View reviewed changes

docs: add tradeoffs

ce2c86a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(ListView): API Decision #2453

docs(ListView): API Decision #2453

saurabhdaware commented Dec 26, 2024 •

edited

Loading

changeset-bot bot commented Dec 26, 2024 •

edited

Loading

github-actions bot commented Dec 26, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 26, 2024 •

edited

Loading

rzpcibot commented Dec 26, 2024 •

edited

Loading

chaitanyadeorukhkar Jan 10, 2025

chaitanyadeorukhkar Jan 10, 2025

chaitanyadeorukhkar Jan 10, 2025

chaitanyadeorukhkar Jan 10, 2025

chaitanyadeorukhkar Jan 10, 2025

chaitanyadeorukhkar Jan 10, 2025

saurabhdaware Jan 14, 2025

anuraghazra Jan 13, 2025

anuraghazra Jan 13, 2025 •

edited

Loading

anuraghazra Jan 13, 2025

saurabhdaware Jan 14, 2025

anuraghazra Jan 13, 2025

saurabhdaware Jan 14, 2025

anuraghazra Jan 13, 2025

saurabhdaware Jan 14, 2025

saurabhdaware left a comment

saurabhdaware Jan 14, 2025

saurabhdaware Jan 14, 2025

saurabhdaware Jan 14, 2025

saurabhdaware Jan 14, 2025

		- Less verbose compared to API without layout component

		Cons:

docs(ListView): API Decision #2453

Are you sure you want to change the base?

docs(ListView): API Decision #2453

Conversation

saurabhdaware commented Dec 26, 2024 • edited Loading

Formatted Documents

Rough Work

changeset-bot bot commented Dec 26, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Dec 26, 2024 • edited Loading

codesandbox-ci bot commented Dec 26, 2024 • edited Loading

rzpcibot commented Dec 26, 2024 • edited Loading

Bundle Size Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware commented Dec 26, 2024 •

edited

Loading

changeset-bot bot commented Dec 26, 2024 •

edited

Loading

github-actions bot commented Dec 26, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 26, 2024 •

edited

Loading

rzpcibot commented Dec 26, 2024 •

edited

Loading

anuraghazra Jan 13, 2025 •

edited

Loading