Fixed text color and tooltip z-index attrs

RealWagmi · Nov 22, 2023 · 783cddb · 783cddb
1 parent e538917
commit 783cddb
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "@reach/portal": "^0.18.0",
     "@real-wagmi/sdk": "^1.1.6",
     "@storybook/addon-themes": "^7.5.3",
+    "@styled-system/should-forward-prop": "^5.1.5",
     "@types/styled-system": "^5.1.15",
     "framer-motion": "10.11.2",
     "react": "^18.2.0",

diff --git a/src/__tests__/components/breadcrumbs.test.tsx b/src/__tests__/components/breadcrumbs.test.tsx
@@ -113,7 +113,7 @@ it("should render breadcrumbs and redirect with click", async () => {
           />
         </svg>
         <div
-          class="c3 css-ldvhnx"
+          class="c3 css-vurnku"
         >
           ${label}
         </div>

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -5,15 +5,18 @@ import { variant } from "styled-system";
 import { typographyVariants } from "./theme";
 import { typographies } from "./types";
 import { ReactNode } from "react";
+import shouldForwardProp from "@styled-system/should-forward-prop";
 
 type TextProps = Omit<TextPropsOriginal, "variant" | "color"> & {
-  color?: keyof ThemeColors;
+  color?: keyof ThemeColors | string;
   variant?: (typeof typographies)[keyof typeof typographies];
   children?: ReactNode;
 };
 
-const TextWrap = styled(TextOrig)<TextProps>`
-  color: ${({ theme, color }) => theme.colors[color as string] || color || theme.colors.white};
+const TextWrap = styled(TextOrig).withConfig({
+  shouldForwardProp,
+})<TextProps>`
+  color: ${({ theme, color }) => theme.colors[color] || color || theme.colors.white};
   ${variant({
     prop: "variant",
     variants: typographyVariants,

diff --git a/src/components/Text/index.stories.tsx b/src/components/Text/index.stories.tsx
@@ -24,6 +24,8 @@ export const Text: React.FC<React.PropsWithChildren> = () => {
       <TextComponent variant="button">Button/Regular</TextComponent>
       <TextComponent variant="caption">Caption/Regular</TextComponent>
       <TextComponent variant="overline">Overline/Regular</TextComponent>
+
+      <TextComponent color="red">Red text</TextComponent>
     </Grid>
   );
 };
diff --git a/src/components/Tooltip/styles.tsx b/src/components/Tooltip/styles.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Z_INDEX } from "../../constants";
 
 export const Arrow = styled.div`
   width: 8px;
@@ -48,4 +49,6 @@ export const TooltipContainer = styled.div<{ show: boolean }>`
   word-break: break-word;
   background: ${({ theme }) => theme.colors.darkBg};
   border-radius: 8px;
+  
+  z-index: ${Z_INDEX.TOOLTIP};
 `;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -9,4 +9,5 @@ export enum SCREEN_WIDTH {
 
 export enum Z_INDEX {
   DROPDOWN = 100,
+  TOOLTIP = 1000
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3045,7 +3045,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/should-forward-prop@^5.0.0":
+"@styled-system/should-forward-prop@^5.0.0", "@styled-system/should-forward-prop@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
   integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
-Original file line number
+Diff line change
@@ Expand Up @@
               />
             </svg>
             <div
-              class="c3 css-ldvhnx"
+              class="c3 css-vurnku"
             >
               ${label}
             </div>
@@ Expand Down @@