feat(blade): tabs web implementation #1694

anuraghazra · 2023-10-04T09:28:55Z

PR 1 - Web Implementation (this PR)
PR 2 - Native Implementation
PR 3 - Documentation

changeset-bot · 2023-10-04T09:28:59Z

🦋 Changeset detected

Latest commit: 689143a

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 · 2023-10-09T06:27:53Z

✅ PR title follows Conventional Commits specification.

* feat: initial rn tabs * feat: refactor tabs implementation * fix: bug with sceneMap * chore: fix tabbar filled width bug * chore: fix initial value, androidshadow, indicator spacing * chore: minor * feat: added divider in filled tabs rn * chore: update rn with new design * chore: pass lazy prop * chore: review comments * chore: add comment * chore: fix rn context type issue * test: added Tabs web & native test (#1743) * chore: added web tests * chore: update snaps * test: added more web tests * chore: native test wip * chore: rn tests * chore: minor update * chore: add ssr test * chore: remove comments * docs(blade): added documentation for tabs (#1715) * docs: added examples/docs for tabs * fix: vertical border taking up 100% height * chore: minor changes * chore: fix rn stories * docs: added product usecases * chore: update docs for react router * chore: added kitchen sink * chore: remove todo * chore: update styled props of tablist * chore: wrap with card * chore: prevent vertical on mobile * chore: update spacing * chore: export tabs * chore: fix rn stories * chore: add meta attributes * chore: remove version change * chore: update snaps

github-actions · 2023-10-27T11:02:52Z

CodeRabbit

Uplevel your code reviews with CodeRabbit Pro

CodeRabbit Pro

If you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

codesandbox-ci · 2023-10-27T11:10:21Z

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 689143a:

Sandbox	Source
razorpay/blade: basic	Configuration

github-actions

CodeRabbit

Commits

Files that changed from the base of the PR and between d6f5210 and 8fbd3d8 commits.

Files selected (29)

.eslintrc.js (1)
packages/blade/.storybook/react-native/storybook.requires.js (2)
packages/blade/ios/blade.xcodeproj/project.pbxproj (13)
packages/blade/src/components/Counter/Counter.tsx (3)
packages/blade/src/components/Tabs/SafeSceneMap.native.tsx (1)
packages/blade/src/components/Tabs/TabIndicator.native.tsx (1)
packages/blade/src/components/Tabs/TabIndicator.web.tsx (1)
packages/blade/src/components/Tabs/TabItem.native.tsx (1)
packages/blade/src/components/Tabs/TabItem.web.tsx (1)
packages/blade/src/components/Tabs/TabList.native.tsx (1)
packages/blade/src/components/Tabs/TabList.web.tsx (1)
packages/blade/src/components/Tabs/TabPanel.native.tsx (1)
packages/blade/src/components/Tabs/TabPanel.web.tsx (1)
packages/blade/src/components/Tabs/Tabs.native.tsx (1)
packages/blade/src/components/Tabs/Tabs.stories.tsx (1)
packages/blade/src/components/Tabs/Tabs.web.tsx (1)
packages/blade/src/components/Tabs/TabsContext.ts (1)
packages/blade/src/components/Tabs/_KitchenSink.Tabs.stories.tsx (1)
packages/blade/src/components/Tabs/tests/Tabs.native.test.tsx (1)
packages/blade/src/components/Tabs/tests/Tabs.ssr.test.tsx (1)
packages/blade/src/components/Tabs/tests/Tabs.web.test.tsx (1)
packages/blade/src/components/Tabs/index.ts (1)
packages/blade/src/components/Tabs/tabTokens.ts (1)
packages/blade/src/components/Tabs/types.ts (1)
packages/blade/src/components/Tabs/utils.ts (1)
packages/blade/src/components/index.ts (1)
packages/blade/src/utils/metaAttribute/metaConstants.ts (1)
packages/blade/src/utils/useBreakpoint/useBreakpoint.ts (1)
packages/blade/src/utils/useControllable.ts (2)

Files ignored due to filter (6)

packages/blade/ios/Podfile.lock
packages/blade/package.json
packages/blade/src/components/Tabs/tests/snapshots/Tabs.native.test.tsx.snap
packages/blade/src/components/Tabs/tests/snapshots/Tabs.ssr.test.tsx.snap
packages/blade/src/components/Tabs/tests/snapshots/Tabs.web.test.tsx.snap
yarn.lock

Files not summarized due to errors (25)

packages/blade/ios/blade.xcodeproj/project.pbxproj (diff tokens exceeds limit)
packages/blade/src/components/Tabs/SafeSceneMap.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabIndicator.web.tsx (nothing obtained from openai)
packages/blade/.storybook/react-native/storybook.requires.js (nothing obtained from openai)
packages/blade/src/components/Tabs/TabIndicator.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabItem.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/Tabs.stories.tsx (diff tokens exceeds limit)
packages/blade/src/components/Tabs/TabList.web.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabList.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabItem.web.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabPanel.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/Tabs.native.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/tests/Tabs.web.test.tsx (diff tokens exceeds limit)
packages/blade/src/components/Tabs/Tabs.web.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/TabsContext.ts (nothing obtained from openai)
packages/blade/src/components/Tabs/_KitchenSink.Tabs.stories.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/tests/Tabs.ssr.test.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/tests/Tabs.native.test.tsx (nothing obtained from openai)
packages/blade/src/components/Tabs/tabTokens.ts (nothing obtained from openai)
packages/blade/src/components/Tabs/types.ts (nothing obtained from openai)
packages/blade/src/components/Tabs/utils.ts (nothing obtained from openai)
packages/blade/src/components/index.ts (nothing obtained from openai)
packages/blade/src/utils/metaAttribute/metaConstants.ts (nothing obtained from openai)
packages/blade/src/utils/useBreakpoint/useBreakpoint.ts (nothing obtained from openai)
packages/blade/src/utils/useControllable.ts (nothing obtained from openai)

Files not reviewed due to errors (25)

packages/blade/src/components/Tabs/TabIndicator.native.tsx (no response)
packages/blade/ios/blade.xcodeproj/project.pbxproj (no response)
packages/blade/.storybook/react-native/storybook.requires.js (no response)
packages/blade/src/components/Tabs/SafeSceneMap.native.tsx (no response)
packages/blade/src/components/Tabs/TabItem.native.tsx (no response)
packages/blade/src/components/Tabs/TabIndicator.web.tsx (no response)
packages/blade/src/components/Tabs/TabPanel.native.tsx (no response)
packages/blade/src/components/Tabs/TabList.web.tsx (no response)
packages/blade/src/components/Tabs/TabList.native.tsx (no response)
packages/blade/src/components/Tabs/Tabs.native.tsx (no response)
packages/blade/src/components/Tabs/TabItem.web.tsx (no response)
packages/blade/src/components/Tabs/TabPanel.web.tsx (no response)
packages/blade/src/components/Tabs/TabsContext.ts (no response)
packages/blade/src/components/Tabs/tests/Tabs.ssr.test.tsx (no response)
packages/blade/src/components/Tabs/_KitchenSink.Tabs.stories.tsx (no response)
packages/blade/src/components/Tabs/tests/Tabs.native.test.tsx (no response)
packages/blade/src/components/Tabs/Tabs.web.tsx (no response)
packages/blade/src/components/Tabs/tests/Tabs.web.test.tsx (no response)
packages/blade/src/utils/metaAttribute/metaConstants.ts (no response)
packages/blade/src/utils/useBreakpoint/useBreakpoint.ts (no response)
packages/blade/src/components/Tabs/utils.ts (no response)
packages/blade/src/components/Tabs/types.ts (no response)
packages/blade/src/components/Tabs/tabTokens.ts (no response)
packages/blade/src/components/index.ts (no response)
packages/blade/src/utils/useControllable.ts (no response)

Files skipped from review due to trivial changes (4)

.eslintrc.js
packages/blade/src/components/Counter/Counter.tsx
packages/blade/src/components/Tabs/index.ts
packages/blade/src/components/Tabs/Tabs.stories.tsx (diff too large)

Review comments generated (0)

Review: 0
LGTM: 0

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

bundlemon · 2023-10-27T11:23:40Z

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	Web Components _{build/components/index.production.web.js}	260.1KB (+4.45KB +1.74%)	-
✅	React Native Components _{build/components/index.native.js}	186KB (+2.65KB +1.45%)	-

Unchanged files (12)

Status	Path	Size	Limits
✅	Web Tokens _{build/tokens/index.production.web.js}	42.26KB	-
✅	React Native Tokens _{build/tokens/index.native.js}	38.5KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkDesktop.css}	4.55KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightDesktop.css}	4.54KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkMobile.css}	4.54KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightMobile.css}	4.53KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightDesktop.css}	4.53KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkDesktop.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightMobile.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkMobile.css}	4.51KB	-
✅	Web Utils _{build/utils/index.production.web.js}	3.29KB	-
✅	React Native Utils _{build/utils/index.native.js}	2.26KB	-

Total files change +7.1KB +1.27%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

github-actions

CodeRabbit

Commits

Files that changed from the base of the PR and between 8fbd3d8 and d16fdfb commits.

Files selected (3)

packages/blade/src/components/Dropdown/tests/Dropdown.ssr.test.tsx (1)
packages/blade/src/components/Input/DropdownInputTriggers/tests/AutoComplete.ssr.test.tsx (1)
packages/blade/src/components/Tooltip/tests/Tooltip.ssr.test.tsx (1)

Files ignored due to filter (4)

packages/blade/package.json
packages/blade/src/components/Modal/tests/snapshots/Modal.web.test.tsx.snap
packages/blade/src/components/Popover/tests/snapshots/Popover.web.test.tsx.snap
yarn.lock

Files skipped from review due to trivial changes (3)

packages/blade/src/components/Dropdown/tests/Dropdown.ssr.test.tsx
packages/blade/src/components/Input/DropdownInputTriggers/tests/AutoComplete.ssr.test.tsx
packages/blade/src/components/Tooltip/tests/Tooltip.ssr.test.tsx

Review comments generated (0)

Review: 0
LGTM: 0

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

github-actions

CodeRabbit

Commits

Files that changed from the base of the PR and between d16fdfb and 60a6d75 commits.

Files selected (1)

.changeset/breezy-dancers-breathe.md (1)

Files skipped from review due to trivial changes (1)

.changeset/breezy-dancers-breathe.md

Review comments generated (0)

Review: 0
LGTM: 0

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

.changeset/breezy-dancers-breathe.md

github-actions

CodeRabbit

Commits

Files that changed from the base of the PR and between 60a6d75 and 05d72ac commits.

Files selected (1)

.changeset/breezy-dancers-breathe.md (1)

Files not reviewed due to errors (1)

.changeset/breezy-dancers-breathe.md (no response)

Review comments generated (0)

Review: 0
LGTM: 0

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

.changeset/breezy-dancers-breathe.md

github-actions

CodeRabbit

Commits

Files that changed from the base of the PR and between 05d72ac and 689143a commits.

Files selected (1)

.changeset/breezy-dancers-breathe.md (1)

Files skipped from review due to trivial changes (1)

.changeset/breezy-dancers-breathe.md

Review comments generated (0)

Review: 0
LGTM: 0

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

* feat: tabs main logic & a11y implementation * feat: animated indicator * feat: add filled variant & perfect the animations * feat: fixed paddings, refactored padding object & fixed vertical states * chore: refactor tab tokens * chore: minor refactors * chore: rename components * chore: only add border left on bordered variant * fix: weird react state update bug, causing it to fail on certain cases * chore: rename autoWidth prop * feat: added isLazy prop * refactor: redo paddings * chore: border design changes * chore: large font design change * chore: add filled vertical variant example * chore: add icon color in selected state * feat: added support for href in tabitem * chore: use media query for changing padding * chore: added jsdoc * chore: review comments * feat(blade): tabs react-native implementation (razorpay#1707) * feat: initial rn tabs * feat: refactor tabs implementation * fix: bug with sceneMap * chore: fix tabbar filled width bug * chore: fix initial value, androidshadow, indicator spacing * chore: minor * feat: added divider in filled tabs rn * chore: update rn with new design * chore: pass lazy prop * chore: review comments * chore: add comment * chore: fix rn context type issue * test: added Tabs web & native test (razorpay#1743) * chore: added web tests * chore: update snaps * test: added more web tests * chore: native test wip * chore: rn tests * chore: minor update * chore: add ssr test * chore: remove comments * docs(blade): added documentation for tabs (razorpay#1715) * docs: added examples/docs for tabs * fix: vertical border taking up 100% height * chore: minor changes * chore: fix rn stories * docs: added product usecases * chore: update docs for react router * chore: added kitchen sink * chore: remove todo * chore: update styled props of tablist * chore: wrap with card * chore: prevent vertical on mobile * chore: update spacing * chore: export tabs * chore: fix rn stories * chore: add meta attributes * chore: remove version change * chore: update snaps * chore: update fialing tests * Create breezy-dancers-breathe.md * chore: update changelog * chore: update changeset

* feat: tabs main logic & a11y implementation * feat: animated indicator * feat: add filled variant & perfect the animations * feat: fixed paddings, refactored padding object & fixed vertical states * chore: refactor tab tokens * chore: minor refactors * chore: rename components * chore: only add border left on bordered variant * fix: weird react state update bug, causing it to fail on certain cases * chore: rename autoWidth prop * feat: added isLazy prop * refactor: redo paddings * chore: border design changes * chore: large font design change * chore: add filled vertical variant example * chore: add icon color in selected state * feat: added support for href in tabitem * chore: use media query for changing padding * chore: added jsdoc * chore: review comments * feat(blade): tabs react-native implementation (#1707) * feat: initial rn tabs * feat: refactor tabs implementation * fix: bug with sceneMap * chore: fix tabbar filled width bug * chore: fix initial value, androidshadow, indicator spacing * chore: minor * feat: added divider in filled tabs rn * chore: update rn with new design * chore: pass lazy prop * chore: review comments * chore: add comment * chore: fix rn context type issue * test: added Tabs web & native test (#1743) * chore: added web tests * chore: update snaps * test: added more web tests * chore: native test wip * chore: rn tests * chore: minor update * chore: add ssr test * chore: remove comments * docs(blade): added documentation for tabs (#1715) * docs: added examples/docs for tabs * fix: vertical border taking up 100% height * chore: minor changes * chore: fix rn stories * docs: added product usecases * chore: update docs for react router * chore: added kitchen sink * chore: remove todo * chore: update styled props of tablist * chore: wrap with card * chore: prevent vertical on mobile * chore: update spacing * chore: export tabs * chore: fix rn stories * chore: add meta attributes * chore: remove version change * chore: update snaps * chore: update fialing tests * Create breezy-dancers-breathe.md * chore: update changelog * chore: update changeset

anuraghazra added 2 commits October 4, 2023 02:40

feat: tabs main logic & a11y implementation

9189a37

feat: animated indicator

8c51be6

anuraghazra added 2 commits October 5, 2023 22:59

feat: add filled variant & perfect the animations

467122a

feat: fixed paddings, refactored padding object & fixed vertical states

8ba38ff

anuraghazra added 4 commits October 9, 2023 12:06

chore: refactor tab tokens

9a5d240

chore: minor refactors

753a022

chore: rename components

8a98206

chore: only add border left on bordered variant

8a12fbc

anuraghazra marked this pull request as ready for review October 16, 2023 07:41

anuraghazra requested review from chaitanyadeorukhkar, kamleshchandnani, dhruvdutt, nashcheez, divyanshu013, saurabhdaware and snitin315 as code owners October 16, 2023 07:41

This was referenced Oct 16, 2023

docs(blade): added documentation for tabs #1715

Merged

feat(blade): tabs react-native implementation #1707

Merged

anuraghazra assigned kamleshchandnani Oct 16, 2023

anuraghazra added the Review - L1 First level of review label Oct 16, 2023

anuraghazra added 8 commits October 17, 2023 02:43

fix: weird react state update bug, causing it to fail on certain cases

edf5956

chore: rename autoWidth prop

254042b

feat: added isLazy prop

42e6d8a

refactor: redo paddings

99b0025

chore: border design changes

216f218

chore: large font design change

0d2276a

chore: add filled vertical variant example

5297375

chore: add icon color in selected state

578eeaf

anuraghazra dismissed saurabhdaware’s stale review via 0ed80db October 26, 2023 07:18

saurabhdaware previously approved these changes Oct 26, 2023

View reviewed changes

Merge branch 'master' into anu/tabs

5734fd3

kamleshchandnani previously approved these changes Oct 27, 2023

View reviewed changes

anuraghazra dismissed stale reviews from kamleshchandnani and saurabhdaware via 26d8024 October 27, 2023 11:02

Merge branch 'master' into anu/tabs

8fbd3d8