feat(Accordion): add new filled variant #2065

saurabhdaware · 2024-03-05T05:39:23Z

Description

Modify accordion

Changes

Add size, variant prop
Add AccordionItemHeader, AccordionItemBody components
Add deprecation handling to support old API
Add tests for new API and keep some deprecation tests to ensure old API doesn't break
Update documentation

For API changes, check out - #2058

Additional Information

TODO

Finalize variant="filled" | "transparent" vs variant="bordered" | "borderless"
Release on Figma

Component Checklist

Update Component Status Page
Perform Manual Testing in Other Browsers
Add KitchenSink Story
Add Interaction Tests (if applicable)
Add changeset

changeset-bot · 2024-03-05T05:39:26Z

🦋 Changeset detected

Latest commit: efa8ca9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Minor

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2024-03-05T07:31:29Z

✅ PR title follows Conventional Commits specification.

…-changes

…o accordion/new-improvements

anuraghazra

kamleshchandnani · 2024-03-13T06:50:29Z

packages/blade/src/components/Accordion/AccordionItem.tsx

  const isExpanded = expandedIndex === _index;
  const isDefaultExpanded = defaultExpandedIndex === _index;
+  const isDeprecatedAPI = Boolean(title) || Boolean(description);
+  const [header, body] = React.Children.toArray(children);


where are we throwing an error when there's something else apart from header and body?

we can't until we remove deprecated API. Because passing anything is valid in the old API. People can pass any child and that becomes the content slot for old API.

<AccordionItem> <div>Random content</div> </AccordionItem>

oh right! the checks you have added should be sufficient 👍

kamleshchandnani · 2024-03-13T06:52:48Z

packages/blade/src/components/Accordion/AccordionItem.tsx

+          <AccordionButton
+            index={_index}
+            icon={icon}
+            title={title}


shouldn't this be _title like we have _description? or since AccordionButton is not exposed to the consumers hence this is kept this way?

yup AccordionButton is not exposed so the component itself is internal unlike AccordionItemBody which is exposed and where description is not a valid prop from consumer end. We just have to internally maintain it to support old API.

kamleshchandnani · 2024-03-13T07:02:07Z

packages/blade/src/components/Accordion/AccordionItemBody.tsx

+ * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).
+ * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.
+ *
+ * Rendering a blank `Text` at the end seems to fix all this 🤯


what sorcery is this ? 😮

Don't know 😆 Credits to Divyanshu

kamleshchandnani · 2024-03-13T11:00:31Z

packages/blade/src/components/Accordion/AccordionItemHeader.tsx

@@ -56,4 +58,8 @@ const AccordionItemHeader = ({
  );
 };

+const AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {


do we still need this assignWithoutSideEffects? 🤔

We didn't test after the bundling changes we might not need it 🤔

The base branch was changed.

kamleshchandnani · 2024-03-14T06:35:59Z

.changeset/late-planes-destroy.md

+
+We have added `AccordionItemHeader` and `AccordionItemBody` components. 
+
+Props like `icon` and `title` move from AccordionItem to AccordionItemHeader and `description` moves to AccordionItemBody.


Suggested change

Props like `icon` and `title` move from AccordionItem to AccordionItemHeader and `description` moves to AccordionItemBody.

Props like `icon` and `title` on AccordionItem are deprecated and moved to AccordionItemHeader and `description` moves to AccordionItemBody.

reworded it a bit because they dont just move. E.g. icon becomes leading with different syntax, description is passed as children

* feat: add new accordion props * feat: update Accordion API * feat: add alternate api * feat: add bordered variant * feat: add baseheader to accordion * feat: allow multiple items * fix: remove border gap * feat: add size in context * feat: add new API * feat: update for new changes * feat: add open question * feat: replace JSX with ReactNode * feat: add size prop on BaseHeader * feat: adjust centerbox for baseheader size * feat: keep old description API working * feat: add size to deprecated icon * feat: add jsdoc for accordion * fix: showNumberPrefix prop * fix: react-native-reanimated bug * fix: Accordion for React Native * feat: update docs example * fix: example api * tests: update snapshots * fix: weird ts error * feat: add stopPropagation to link * fix: baseheader test * feat: align chevron correctly * fix: icon alignment in react native * fix: snapshots * revert rn sb change * feat: update to solid | transparent variant naming * feat: rename variant values * fix: ts * fix: remove isExpanded from header * fix: add disabled prop to BaseHeader * fix: add disabled item * feat: add disabled to accordionitem * feat: handle cursor on web * resolve anurag's comments * docs: add real world examples * feat: add validation * feat: add metaAttributes * feat: update variant value names * Create late-planes-destroy.md * docs: reword migration list * remove code tag

saurabhdaware added 5 commits March 1, 2024 11:18

feat: add new accordion props

4dfa4c2

feat: update Accordion API

2831944

feat: add alternate api

6d93255

feat: add bordered variant

4b1e2e8

feat: add baseheader to accordion

390c116

feat: allow multiple items

e28ac92

saurabhdaware added 18 commits March 6, 2024 14:22

fix: remove border gap

2964017

feat: add size in context

53b1068

feat: add new API

9cfdd1b

feat: update for new changes

847fc46

feat: add open question

e441d86

feat: replace JSX with ReactNode

bb60de3

feat: add size prop on BaseHeader

84c1444

feat: adjust centerbox for baseheader size

0b5e3aa

feat: keep old description API working

f250022

feat: add size to deprecated icon

fce13d0

feat: add jsdoc for accordion

643f845

Merge branch 'master' of github.com:razorpay/blade into accordion/api…

a6b9a9d

…-changes

Merge branch 'accordion/api-changes' of github.com:razorpay/blade int…

9f01b87

…o accordion/new-improvements

fix: showNumberPrefix prop

42ef1f1

fix: react-native-reanimated bug

9bd7384

fix: Accordion for React Native

b36f4e0

feat: update docs example

eb5f863

fix: example api

87e0bcb

saurabhdaware marked this pull request as ready for review March 8, 2024 08:07

saurabhdaware requested review from chaitanyadeorukhkar, kamleshchandnani and anuraghazra as code owners March 8, 2024 08:07

anuraghazra previously approved these changes Mar 12, 2024

View reviewed changes

saurabhdaware added 2 commits March 12, 2024 17:43

feat: add disabled to accordionitem

c9429ae

feat: handle cursor on web

c442d84

saurabhdaware added Review - L2 Second level of review and removed Review - L1 First level of review labels Mar 13, 2024

saurabhdaware assigned kamleshchandnani and unassigned anuraghazra Mar 13, 2024

kamleshchandnani reviewed Mar 13, 2024

View reviewed changes

saurabhdaware added 5 commits March 13, 2024 12:38

resolve anurag's comments

13d6b36

docs: add real world examples

5e1d876

feat: add validation

3af50c1

feat: add metaAttributes

6575b20

feat: update variant value names

d446bcd

kamleshchandnani reviewed Mar 13, 2024

View reviewed changes

kamleshchandnani previously approved these changes Mar 13, 2024

View reviewed changes

Base automatically changed from accordion/api-changes to master March 13, 2024 12:38

saurabhdaware added 2 commits March 14, 2024 01:36

Merge branch 'master' into accordion/new-improvements

7299bf4

Create late-planes-destroy.md

fd10de7

saurabhdaware requested review from anuraghazra and kamleshchandnani March 14, 2024 05:37

kamleshchandnani reviewed Mar 14, 2024

View reviewed changes

saurabhdaware added 2 commits March 14, 2024 12:19

docs: reword migration list

3ba29f0

remove code tag

efa8ca9

saurabhdaware requested a review from kamleshchandnani March 14, 2024 07:04

anuraghazra approved these changes Mar 14, 2024

View reviewed changes

saurabhdaware merged commit 524fa92 into master Mar 14, 2024
16 checks passed

saurabhdaware deleted the accordion/new-improvements branch March 14, 2024 09:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Accordion): add new filled variant #2065

feat(Accordion): add new filled variant #2065

saurabhdaware commented Mar 5, 2024 •

edited

Loading

changeset-bot bot commented Mar 5, 2024 •

edited

Loading

github-actions bot commented Mar 5, 2024 •

edited

Loading

anuraghazra left a comment

kamleshchandnani Mar 13, 2024

saurabhdaware Mar 13, 2024

kamleshchandnani Mar 13, 2024

kamleshchandnani Mar 13, 2024

saurabhdaware Mar 13, 2024

kamleshchandnani Mar 13, 2024

saurabhdaware Mar 13, 2024

kamleshchandnani Mar 13, 2024

saurabhdaware Mar 13, 2024

kamleshchandnani Mar 14, 2024

saurabhdaware Mar 14, 2024


		We have added `AccordionItemHeader` and `AccordionItemBody` components.

		Props like `icon` and `title` move from AccordionItem to AccordionItemHeader and `description` moves to AccordionItemBody.

	Props like `icon` and `title` move from AccordionItem to AccordionItemHeader and `description` moves to AccordionItemBody.
	Props like `icon` and `title` on AccordionItem are deprecated and moved to AccordionItemHeader and `description` moves to AccordionItemBody.

feat(Accordion): add new filled variant #2065

feat(Accordion): add new filled variant #2065

Conversation

saurabhdaware commented Mar 5, 2024 • edited Loading

Description

Changes

Additional Information

TODO

Component Checklist

changeset-bot bot commented Mar 5, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 5, 2024 • edited Loading

anuraghazra 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

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 commented Mar 5, 2024 •

edited

Loading

changeset-bot bot commented Mar 5, 2024 •

edited

Loading

github-actions bot commented Mar 5, 2024 •

edited

Loading