From 783cddbace533a38200595373d826e89a6f988d8 Mon Sep 17 00:00:00 2001 From: belousovjr Date: Wed, 22 Nov 2023 16:20:30 +0200 Subject: [PATCH 1/4] Fixed text color and tooltip z-index attrs --- package.json | 1 + src/__tests__/components/breadcrumbs.test.tsx | 2 +- src/components/Text/Text.tsx | 9 ++++++--- src/components/Text/index.stories.tsx | 2 ++ src/components/Tooltip/styles.tsx | 3 +++ src/constants/index.ts | 1 + yarn.lock | 2 +- 7 files changed, 15 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ea9b81e..d5f2ece 100644 --- 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 index 9a7e64b..3f801c8 100644 --- 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 () => { />
${label}
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index af34605..775eff8 100644 --- 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 & { - color?: keyof ThemeColors; + color?: keyof ThemeColors | string; variant?: (typeof typographies)[keyof typeof typographies]; children?: ReactNode; }; -const TextWrap = styled(TextOrig)` - color: ${({ theme, color }) => theme.colors[color as string] || color || theme.colors.white}; +const TextWrap = styled(TextOrig).withConfig({ + shouldForwardProp, +})` + 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 index 89758fb..e82a7a8 100644 --- a/src/components/Text/index.stories.tsx +++ b/src/components/Text/index.stories.tsx @@ -24,6 +24,8 @@ export const Text: React.FC = () => { Button/Regular Caption/Regular Overline/Regular + + Red text ); }; diff --git a/src/components/Tooltip/styles.tsx b/src/components/Tooltip/styles.tsx index a496762..903b2dd 100644 --- 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 index 2148381..115cc18 100644 --- 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 index 3437c85..ec15b65 100644 --- 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== From 6d1b69b4c77e420d9ca22ad4f49e368e62ab122c Mon Sep 17 00:00:00 2001 From: belousovjr Date: Wed, 22 Nov 2023 16:33:47 +0200 Subject: [PATCH 2/4] Added props types exporting of dropdown, radiobutton, table and tabs components --- src/components/Dropdown/index.tsx | 1 + src/components/RadioButton/index.tsx | 1 + src/components/Table/index.tsx | 1 + src/components/Tabs/index.tsx | 1 + 4 files changed, 4 insertions(+) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 915a928..3b47850 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -1 +1,2 @@ export { default as Dropdown } from "./Dropdown"; +export type { IDropdownProps } from "./types"; diff --git a/src/components/RadioButton/index.tsx b/src/components/RadioButton/index.tsx index b8c8397..9348c83 100644 --- a/src/components/RadioButton/index.tsx +++ b/src/components/RadioButton/index.tsx @@ -1 +1,2 @@ export { default as RadioButton } from "./RadioButton"; +export type { IRadioButtonProps } from "./types"; diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 6c9ff96..00ddf46 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -1 +1,2 @@ export { default as Table } from "./Table"; +export type { ITableHeader, ITableProps } from "./types"; diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index 32e5c54..0f08a9c 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -1 +1,2 @@ export { default as Tabs } from "./Tabs"; +export type { ITabsProps } from "./types"; From d6fd30fd1c842b7f14a5e1b0396c69ab85a9629e Mon Sep 17 00:00:00 2001 From: belousovjr Date: Wed, 22 Nov 2023 17:07:06 +0200 Subject: [PATCH 3/4] Updated tabs height --- src/components/Tabs/styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Tabs/styles.ts b/src/components/Tabs/styles.ts index 1502ff5..cd0d43b 100644 --- a/src/components/Tabs/styles.ts +++ b/src/components/Tabs/styles.ts @@ -13,16 +13,16 @@ export const TabsWrap = styled(Flex)` outline-offset: -1px; background: ${({ theme }) => rgba(theme.colors.strokeGray, 0.08)}; border-radius: 32px; - padding: 5px 10px; + padding: 3px 10px; `; export const TabWrap = styled.button` - padding: 10px; + padding: 9px 10px; border: none; border-radius: 32px; - font-size: 16px; + font-size: 14px; font-weight: 400; - line-height: 11px; + line-height: 10px; min-width: 62px; cursor: pointer; outline: none; From 05e4b9ad0d5054c07e6fac48e22bf92a6f2de273 Mon Sep 17 00:00:00 2001 From: belousovjr Date: Wed, 22 Nov 2023 17:13:12 +0200 Subject: [PATCH 4/4] Updated tabs test --- src/__tests__/components/tabs.test.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/__tests__/components/tabs.test.tsx b/src/__tests__/components/tabs.test.tsx index 924a4f1..5ae1df3 100644 --- a/src/__tests__/components/tabs.test.tsx +++ b/src/__tests__/components/tabs.test.tsx @@ -37,7 +37,7 @@ it("should render tabs and call onChange function with correct argument", () => display: -ms-flexbox; display: flex; } - + .c1 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -48,16 +48,16 @@ it("should render tabs and call onChange function with correct argument", () => outline-offset: -1px; background: rgba(97,105,113,0.08); border-radius: 32px; - padding: 5px 10px; + padding: 3px 10px; } - + .c2 { - padding: 10px; + padding: 9px 10px; border: none; border-radius: 32px; - font-size: 16px; + font-size: 14px; font-weight: 400; - line-height: 11px; + line-height: 10px; min-width: 62px; cursor: pointer; outline: none; @@ -66,21 +66,21 @@ it("should render tabs and call onChange function with correct argument", () => -webkit-transition: background 0.2s; transition: background 0.2s; } - + .c2:disabled { color: #5d93b2; } - + .c2:not(:last-child) { margin-right: 16px; } - + .c2:hover, .c2:focus, .c2:disabled { background: rgba(175,182,201,0.08); } - +