forked from razorpay/blade
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(blade): tabs web implementation (razorpay#1694)
* 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
- Loading branch information
1 parent
109f607
commit 478588d
Showing
40 changed files
with
9,395 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| "@razorpay/blade": minor | ||
| --- | ||
|
|
||
| feat(blade): tabs implementation | ||
|
|
||
| > [!NOTE] | ||
| > We've updated `@floating-ui/react` to version `0.25.4` | ||
| > Consumers may need to update their jest snapshots |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
packages/blade/src/components/Tabs/SafeSceneMap.native.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
|
|
||
| // Copy of SceneMap component with an additional check for null component, | ||
| // So we don't get runtime error if a TabPanel doesn't exist, instead it throws an warning | ||
| // https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/src/SceneMap.tsx | ||
|
|
||
| import React from 'react'; | ||
| import type { SceneRendererProps } from 'react-native-tab-view/src/types'; | ||
| import { logger } from '~utils/logger'; | ||
|
|
||
| type SafeSceneProps = { | ||
| route: any; | ||
| } & Omit<SceneRendererProps, 'layout'>; | ||
|
|
||
| const SafeSceneComponent = React.memo( | ||
| <T extends { component: React.ComponentType<any> } & SafeSceneProps>({ | ||
| component, | ||
| ...rest | ||
| }: T) => { | ||
| if (!component) { | ||
| logger({ | ||
| type: 'warn', | ||
| moduleName: 'Tabs', | ||
| message: `Unable to find TabPanel with value "${rest.route.key}"`, | ||
| }); | ||
| return null; | ||
| } | ||
| return React.createElement(component, rest); | ||
| }, | ||
| ); | ||
|
|
||
| const SafeSceneMap = <T,>(scenes: { [key: string]: React.ComponentType<T> }) => { | ||
| return ({ route, jumpTo, position }: SafeSceneProps) => ( | ||
| <SafeSceneComponent | ||
| key={route.key} | ||
| component={scenes[route.key]} | ||
| route={route} | ||
| jumpTo={jumpTo} | ||
| position={position} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export { SafeSceneMap }; |
44 changes: 44 additions & 0 deletions
44
packages/blade/src/components/Tabs/TabIndicator.native.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import React from 'react'; | ||
| import type { TabBarIndicatorProps } from 'react-native-tab-view'; | ||
| import { TabBarIndicator as RNTabBarIndicator } from 'react-native-tab-view'; | ||
| import { useTabsContext } from './TabsContext'; | ||
| import { useTheme } from '~utils'; | ||
| import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; | ||
|
|
||
| const TabIndicator = (props: TabBarIndicatorProps<any>): React.ReactElement => { | ||
| const { theme } = useTheme(); | ||
| const { variant } = useTabsContext(); | ||
| const isFilled = variant === 'filled'; | ||
| return ( | ||
| <RNTabBarIndicator | ||
| {...props} | ||
| {...metaAttribute({ name: MetaConstants.TabIndicator })} | ||
| width="auto" | ||
| getTabWidth={(index) => { | ||
| if (!isFilled) return props.getTabWidth(index); | ||
| if (index === props.navigationState.routes.length - 1) { | ||
| return props.getTabWidth(index) - theme.spacing[2] * 3; | ||
| } | ||
| return props.getTabWidth(index); | ||
| }} | ||
| style={{ | ||
| pointerEvents: 'none', | ||
| ...(isFilled | ||
| ? { | ||
| height: props.layout.height - theme.border.width.thick - theme.spacing[2] * 2, | ||
| left: theme.spacing[2], | ||
| bottom: theme.spacing[2], | ||
| backgroundColor: theme.colors.brand.primary[300], | ||
| borderRadius: theme.border.radius.small, | ||
| } | ||
| : { | ||
| height: theme.border.width.thick, | ||
| backgroundColor: theme.colors.brand.primary[500], | ||
| }), | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export { TabIndicator }; |
Oops, something went wrong.