Skip to content

Commit

Permalink
feat(Accordion): add new filled variant (#2065)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
saurabhdaware authored Mar 14, 2024
1 parent 4ef68d0 commit 77a436d
Show file tree
Hide file tree
Showing 43 changed files with 8,071 additions and 1,666 deletions.
46 changes: 46 additions & 0 deletions .changeset/late-planes-destroy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
'@razorpay/blade': minor
---

feat(Accordion): add new `filled` variant

New variant can be used to build individual filled Accordions like these

<img width="400" alt="image" src="https://github.com/razorpay/blade/assets/30949385/7f3d737f-149a-42b0-be1b-1c86d5a0fd83">

> [!Warning]
>
> Accordion has a new API and the current API will be deprecated and removed in next major version
#### Migration from existing API

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

Props like `icon`, `title`, `description` from AccordionItem are deprecated.

- `icon` on AccordionItem can be replicated with `leading` on AccordionItemHeader
- `title` moves from AccordionItem to AccordionItemHeader
- `description` from AccordionItem can be passed to AccordionItemBody as children

##### Diff

```diff
<Accordion>
<AccordionItem
- icon={StarIcon}
- title="This is title"
- description="Body content of Accordion"
/>
</Accordion>
```

```diff
<Accordion>
<AccordionItem>
+ <AccordionItemHeader leading={<StarIcon size="large" />} title="This is title" />
+ <AccordionItemBody>Body content of Accordion</AccordionItemBody>
</AccordionItem>
</Accordion>
```

Checkout full documentation at https://blade.razorpay.com/?path=/docs/components-accordion--docs
7 changes: 7 additions & 0 deletions packages/blade/.storybook/react-native/storybook.requires.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const getStories = () => {
'./src/components/Box/BaseBox/BaseBox.internal.stories.tsx': require('../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx'),
'./src/components/Box/Box.stories.tsx': require('../../src/components/Box/Box.stories.tsx'),
'./src/components/Box/styledProps/StyledProps.stories.tsx': require('../../src/components/Box/styledProps/StyledProps.stories.tsx'),
'./src/components/Breadcrumb/Breadcrumb.stories.tsx': require('../../src/components/Breadcrumb/Breadcrumb.stories.tsx'),
'./src/components/Button/BaseButton/BaseButton.internal.stories.tsx': require('../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx'),
'./src/components/Button/Button/Button.stories.tsx': require('../../src/components/Button/Button/Button.stories.tsx'),
'./src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'),
Expand All @@ -65,9 +66,13 @@ const getStories = () => {
'./src/components/Collapsible/Collapsible.stories.tsx': require('../../src/components/Collapsible/Collapsible.stories.tsx'),
'./src/components/Counter/Counter.stories.tsx': require('../../src/components/Counter/Counter.stories.tsx'),
'./src/components/Divider/Divider.stories.tsx': require('../../src/components/Divider/Divider.stories.tsx'),
'./src/components/Drawer/docs/Drawer.stories.tsx': require('../../src/components/Drawer/docs/Drawer.stories.tsx'),
'./src/components/Drawer/docs/DrawerExamples.stories.tsx': require('../../src/components/Drawer/docs/DrawerExamples.stories.tsx'),
'./src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx'),
'./src/components/Dropdown/docs/DropdownWithButton.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx'),
'./src/components/Dropdown/docs/DropdownWithSelect.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx'),
'./src/components/FileUpload/docs/FileUpload.stories.tsx': require('../../src/components/FileUpload/docs/FileUpload.stories.tsx'),
'./src/components/FileUpload/docs/FileUploadExamples.stories.tsx': require('../../src/components/FileUpload/docs/FileUploadExamples.stories.tsx'),
'./src/components/Icons/Icons.stories.tsx': require('../../src/components/Icons/Icons.stories.tsx'),
'./src/components/Indicator/Indicator.stories.tsx': require('../../src/components/Indicator/Indicator.stories.tsx'),
'./src/components/Input/BaseInput/BaseInput.stories.tsx': require('../../src/components/Input/BaseInput/BaseInput.stories.tsx'),
Expand Down Expand Up @@ -106,8 +111,10 @@ const getStories = () => {
'./src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx'),
'./src/components/Table/docs/BasicTable.stories.tsx': require('../../src/components/Table/docs/BasicTable.stories.tsx'),
'./src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'),
'./src/components/Table/docs/TablePaginationExamples.stories.tsx': require('../../src/components/Table/docs/TablePaginationExamples.stories.tsx'),
'./src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'),
'./src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'),
'./src/components/Toast/Toast.stories.tsx': require('../../src/components/Toast/Toast.stories.tsx'),
'./src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'),
'./src/components/Typography/BaseText/BaseText.stories.tsx': require('../../src/components/Typography/BaseText/BaseText.stories.tsx'),
'./src/components/Typography/Code/Code.stories.tsx': require('../../src/components/Typography/Code/Code.stories.tsx'),
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@
"react-dom": "18.2.0",
"react-native": "0.72.3",
"react-native-gesture-handler": "2.9.0",
"react-native-reanimated": "3.4.1",
"react-native-reanimated": "3.4.2",
"react-native-svg": "12.3.0",
"react-scripts": "5.0.1",
"react-test-renderer": "18.2.0",
Expand Down
Loading

0 comments on commit 77a436d

Please sign in to comment.