From 6aae282ac5042f83356670fabb587d688baae730 Mon Sep 17 00:00:00 2001 From: Gaurav Tewari Date: Thu, 9 Jan 2025 16:05:06 +0530 Subject: [PATCH] chore: change TabNavItem,TopNavActions background color & update examples [FC-1234] (#2465) * feat: tabNavItem background color update * chore: add change set * chore: change bg color of topNavActions * feat: updated examples * chore: update changeset * chore: update changeset * chore: updated snaps --- .changeset/five-jeans-look.md | 5 +++++ .../blade/src/components/TopNav/TabNav/TabNavItem.web.tsx | 2 +- packages/blade/src/components/TopNav/TopNav.web.tsx | 2 +- .../TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap | 4 ++-- .../TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap | 6 +++--- .../blade/src/components/TopNav/docs/TopNav.stories.tsx | 4 ++-- packages/blade/src/components/TopNav/docs/code.ts | 2 +- 7 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 .changeset/five-jeans-look.md diff --git a/.changeset/five-jeans-look.md b/.changeset/five-jeans-look.md new file mode 100644 index 00000000000..44beec7929b --- /dev/null +++ b/.changeset/five-jeans-look.md @@ -0,0 +1,5 @@ +--- +'@razorpay/blade': patch +--- + +chore(blade): change TabNavItem,TopNavActions background color & update examples \ No newline at end of file diff --git a/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx b/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx index 45b4ede9a4f..27c4add8313 100644 --- a/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx +++ b/packages/blade/src/components/TopNav/TabNav/TabNavItem.web.tsx @@ -69,7 +69,7 @@ const StyledTabNavItemWrapper = styled(BaseBox)<{ position: 'relative', flexShrink: 0, padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`, - backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent', + backgroundColor: isActive ? theme.colors.surface.background.gray.moderate : 'transparent', borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent', borderStyle: 'solid', borderWidth: makeBorderSize(theme.border.width.thin), diff --git a/packages/blade/src/components/TopNav/TopNav.web.tsx b/packages/blade/src/components/TopNav/TopNav.web.tsx index 6682e13ee79..594224a85e5 100644 --- a/packages/blade/src/components/TopNav/TopNav.web.tsx +++ b/packages/blade/src/components/TopNav/TopNav.web.tsx @@ -110,7 +110,7 @@ const TopNavActions = ({ children }: { children: React.ReactNode }): React.React alignItems="center" marginTop="spacing.1" padding="spacing.3" - backgroundColor="surface.background.gray.intense" + backgroundColor="surface.background.gray.moderate" borderTopLeftRadius="medium" borderTopRightRadius="medium" {...metaAttribute({ name: MetaConstants.TopNavActions })} diff --git a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap index 72d2c5f3ee7..901f297cb84 100644 --- a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap +++ b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render TopNav ssr 1`] = `""`; +exports[` should render TopNav ssr 1`] = `""`; exports[` should render TopNav ssr 2`] = ` .c0.c0.c0.c0.c0 { @@ -127,7 +127,7 @@ exports[` should render TopNav ssr 2`] = ` padding: 8px; margin-top: 2px; gap: 8px; - background-color: hsla(0,0%,100%,1); + background-color: hsla(210,40%,98%,1); border-top-left-radius: 4px; border-top-right-radius: 4px; } diff --git a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap index bea7bc5f726..b19435b639d 100644 --- a/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap +++ b/packages/blade/src/components/TopNav/__tests__/__snapshots__/TopNav.web.test.tsx.snap @@ -125,7 +125,7 @@ exports[`TopNav it shpuld support adding test Id 1`] = ` padding: 8px; margin-top: 2px; gap: 8px; - background-color: hsla(0,0%,100%,1); + background-color: hsla(210,40%,98%,1); border-top-left-radius: 4px; border-top-right-radius: 4px; } @@ -904,7 +904,7 @@ exports[`TopNav should render 1`] = ` padding: 8px; margin-top: 2px; gap: 8px; - background-color: hsla(0,0%,100%,1); + background-color: hsla(210,40%,98%,1); border-top-left-radius: 4px; border-top-right-radius: 4px; } @@ -1683,7 +1683,7 @@ exports[`TopNav should support data analytics attributes 1`] = ` padding: 8px; margin-top: 2px; gap: 8px; - background-color: hsla(0,0%,100%,1); + background-color: hsla(210,40%,98%,1); border-top-left-radius: 4px; border-top-right-radius: 4px; } diff --git a/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx b/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx index dfc27aea3e9..b7677e51e4d 100644 --- a/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx +++ b/packages/blade/src/components/TopNav/docs/TopNav.stories.tsx @@ -459,7 +459,7 @@ const TopNavFullExample = () => { height="100vh" padding="spacing.5" overflowY="scroll" - backgroundColor="surface.background.gray.intense" + backgroundColor="surface.background.gray.moderate" > Active URL: {activeUrl} @@ -603,7 +603,7 @@ const TopNavMinimalTemplate: StoryFn = () => { - + This is a minimal example usage of TopNav, checkout Full Dashboard Layout example for other features & integration details. diff --git a/packages/blade/src/components/TopNav/docs/code.ts b/packages/blade/src/components/TopNav/docs/code.ts index 062cf3f9276..c676e5a1036 100644 --- a/packages/blade/src/components/TopNav/docs/code.ts +++ b/packages/blade/src/components/TopNav/docs/code.ts @@ -356,7 +356,7 @@ export const topNavFullExample = { height="100vh" padding="spacing.5" overflowY="scroll" - backgroundColor="surface.background.gray.intense" + backgroundColor="surface.background.gray.moderate" > This demo integrates: