From 878512afe67f1ca40d3d11d19145002de8b9085c Mon Sep 17 00:00:00 2001 From: Bibazavr Date: Fri, 2 Feb 2024 14:31:17 +0300 Subject: [PATCH] fix: cant change button text color by font Signed-off-by: Bibazavr --- .../__snapshots__/ModalCalendar.test.tsx.snap | 10 ++---- .../core/src/cta/components/Button/Button.tsx | 4 +-- .../__snapshots__/Button.test.tsx.snap | 5 --- .../cta/components/Button/getDefaultFont.tsx | 35 +++++++++++++++++++ .../src/cta/components/Button/stylesCreate.ts | 14 ++------ .../HorizontalButtonsView.test.tsx.snap | 16 +++------ .../VerticalButtonsView.test.tsx.snap | 1 - .../__snapshots__/ModalAsk.test.tsx.snap | 6 +--- .../__snapshots__/ModalError.test.tsx.snap | 2 -- .../__snapshots__/ModalLoading.test.tsx.snap | 6 ++-- .../__snapshots__/ModalSuccess.test.tsx.snap | 2 -- .../__snapshots__/LeftButton.test.tsx.snap | 1 - 12 files changed, 49 insertions(+), 53 deletions(-) create mode 100644 packages/core/src/cta/components/Button/getDefaultFont.tsx diff --git a/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap b/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap index c5caa559b..39e14d909 100644 --- a/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap +++ b/packages/calendar/src/Calendar/__tests__/__snapshots__/ModalCalendar.test.tsx.snap @@ -4532,7 +4532,7 @@ exports[`ModalCalendar bottomView IButtonView.large 1`] = ` style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -4540,7 +4540,6 @@ exports[`ModalCalendar bottomView IButtonView.large 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -4607,7 +4606,6 @@ exports[`ModalCalendar bottomView IButtonView.large 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -9141,7 +9139,6 @@ exports[`ModalCalendar bottomView IButtonView.small onAcceptDateRangeChange 1`] }, [ { - "color": "#FFF", "paddingHorizontal": 6, }, undefined, @@ -13675,7 +13672,6 @@ exports[`ModalCalendar bottomView IButtonView.small onDateRangeChange 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 6, }, undefined, @@ -27154,7 +27150,7 @@ exports[`ModalCalendar renders correctly initialRange only fromDate isShowToday style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -27162,7 +27158,6 @@ exports[`ModalCalendar renders correctly initialRange only fromDate isShowToday }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -27229,7 +27224,6 @@ exports[`ModalCalendar renders correctly initialRange only fromDate isShowToday }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/cta/components/Button/Button.tsx b/packages/core/src/cta/components/Button/Button.tsx index 3c36f0325..c46989ef2 100644 --- a/packages/core/src/cta/components/Button/Button.tsx +++ b/packages/core/src/cta/components/Button/Button.tsx @@ -11,6 +11,7 @@ import Counter from '../../../other/components/Badge/Counter/Counter'; import {IButtonProps, IButtonSize, IButtonTypes} from './types'; import stylesCreate from './stylesCreate'; +import {getDefaultFont} from './getDefaultFont'; const Button = forwardRef((props, ref) => { const { @@ -36,8 +37,7 @@ const Button = forwardRef((props, ref) => { Boolean(text), ); - const defaultFont = - size === IButtonSize.small ? 'SemiBold-White-XS' : 'SemiBold-White-L'; + const defaultFont = getDefaultFont(size, type); const counterSize = size === IButtonSize.small ? ICounterSize.small : ICounterSize.medium; diff --git a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 2c8398385..57834fb1b 100644 --- a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -55,7 +55,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -124,7 +123,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly 2`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 6, }, undefined, @@ -413,7 +411,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly left icon size large 1 }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -484,7 +481,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly left icon size small 1 }, [ { - "color": "#FFF", "paddingHorizontal": 6, }, undefined, @@ -1594,7 +1590,6 @@ exports[`@lad-tech/mobydick-core/Button renders correctly text 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 6, }, undefined, diff --git a/packages/core/src/cta/components/Button/getDefaultFont.tsx b/packages/core/src/cta/components/Button/getDefaultFont.tsx new file mode 100644 index 000000000..5ea6cfb97 --- /dev/null +++ b/packages/core/src/cta/components/Button/getDefaultFont.tsx @@ -0,0 +1,35 @@ +import {TypographyProp} from '../../../typography'; + +import {IButtonSize, IButtonTypes} from './types'; + +export const getDefaultFont = ( + size: IButtonSize, + type: IButtonTypes, +): TypographyProp => { + let defaultButtonFont = 'SemiBold'; + + switch (type) { + case IButtonTypes.primary: + case IButtonTypes.disabled: + case IButtonTypes.destructive: + case IButtonTypes.loading: + defaultButtonFont += '-White'; + break; + case IButtonTypes.secondary: + case IButtonTypes.tertiary: + defaultButtonFont += '-Accent'; + } + + switch (size) { + case IButtonSize.small: + defaultButtonFont += '-XS'; + break; + case IButtonSize.large: + case IButtonSize.fixed: + default: + defaultButtonFont += '-L'; + break; + } + + return defaultButtonFont as TypographyProp; +}; diff --git a/packages/core/src/cta/components/Button/stylesCreate.ts b/packages/core/src/cta/components/Button/stylesCreate.ts index eb3d02791..2730d21fb 100644 --- a/packages/core/src/cta/components/Button/stylesCreate.ts +++ b/packages/core/src/cta/components/Button/stylesCreate.ts @@ -84,7 +84,6 @@ const primaryStyle = ({ }, text: { - color: colors.TextWhite, paddingHorizontal: size === IButtonSize.small ? theme.spaces.Space4 : theme.spaces.Space6, }, @@ -103,11 +102,10 @@ const secondaryStyle = ({ }: IButtonContents) => { const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text}); const { - colors: {CtaBtnSecondary, TextAccent}, + colors: {CtaBtnSecondary}, } = theme; defaultStyles.container.backgroundColor = CtaBtnSecondary; - defaultStyles.text.color = TextAccent; return defaultStyles; }; @@ -120,12 +118,8 @@ const tertiaryStyle = ({ text, }: IButtonContents) => { const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text}); - const { - colors: {TextAccent}, - } = theme; defaultStyles.container.backgroundColor = 'transparent'; - defaultStyles.text.color = TextAccent; return defaultStyles; }; @@ -139,11 +133,10 @@ const disabledStyle = ({ }: IButtonContents) => { const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text}); const { - colors: {CtaBtnMuted, TextWhite}, + colors: {CtaBtnMuted}, } = theme; defaultStyles.container.backgroundColor = CtaBtnMuted; - defaultStyles.text.color = TextWhite; return defaultStyles; }; @@ -157,11 +150,10 @@ const destructiveStyle = ({ }: IButtonContents) => { const defaultStyles = primaryStyle({theme, size, leftIcon, rightIcon, text}); const { - colors: {CtaBtnDestructive, TextWhite}, + colors: {CtaBtnDestructive}, } = theme; defaultStyles.container.backgroundColor = CtaBtnDestructive; - defaultStyles.text.color = TextWhite; return defaultStyles; }; diff --git a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap index c3b108d3a..7835bf041 100644 --- a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap +++ b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/HorizontalButtonsView.test.tsx.snap @@ -65,7 +65,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -132,7 +131,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -211,7 +209,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -278,7 +275,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -349,7 +345,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -357,7 +353,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, @@ -416,7 +411,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -424,7 +419,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, @@ -495,7 +489,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -503,7 +497,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, @@ -562,7 +555,7 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -570,7 +563,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly HorizontalBu }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap index 714fcd42b..6fdeed6e7 100644 --- a/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap +++ b/packages/core/src/popups/components/ModalBase/__tests__/__snapshots__/VerticalButtonsView.test.tsx.snap @@ -64,7 +64,6 @@ exports[`@lad-tech/mobydick-core/modalBase should renders correctly VerticalButt }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap index 026284b3c..379cfef18 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalAsk.test.tsx.snap @@ -209,7 +209,7 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = ` style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -217,7 +217,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = ` }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, @@ -284,7 +283,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -517,7 +515,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly with optional }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -584,7 +581,6 @@ exports[`@lad-tech/mobydick-core/modalAsk should renders correctly with optional }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap index 4596cc0e3..8b47f298c 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalError.test.tsx.snap @@ -216,7 +216,6 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -448,7 +447,6 @@ exports[`@lad-tech/mobydick-core/modalError should renders correctly with option }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalLoading.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalLoading.test.tsx.snap index 097e61e7e..7f9503755 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalLoading.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalLoading.test.tsx.snap @@ -205,7 +205,7 @@ exports[`@lad-tech/mobydick-core/modalLoading should renders correctly 1`] = ` style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -213,7 +213,6 @@ exports[`@lad-tech/mobydick-core/modalLoading should renders correctly 1`] = ` }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, @@ -434,7 +433,7 @@ exports[`@lad-tech/mobydick-core/modalLoading should renders correctly with opti style={ [ { - "color": "#FFF", + "color": "#2B78EE", "fontFamily": "Inter-SemiBold", "fontSize": 27, "lineHeight": 33, @@ -442,7 +441,6 @@ exports[`@lad-tech/mobydick-core/modalLoading should renders correctly with opti }, [ { - "color": "#2B78EE", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap index 65ef0f10e..95d0aeec1 100644 --- a/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap +++ b/packages/core/src/popups/components/Modals/__tests__/__snapshots__/ModalSuccess.test.tsx.snap @@ -214,7 +214,6 @@ exports[`@lad-tech/mobydick-core/modalSuccess should renders correctly 1`] = ` }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, @@ -444,7 +443,6 @@ exports[`@lad-tech/mobydick-core/modalSuccess should renders correctly with opti }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined, diff --git a/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/LeftButton.test.tsx.snap b/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/LeftButton.test.tsx.snap index caee5575f..c782e789f 100644 --- a/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/LeftButton.test.tsx.snap +++ b/packages/core/src/popups/components/TooltipBase/__tests__/__snapshots__/LeftButton.test.tsx.snap @@ -56,7 +56,6 @@ exports[`@lad-tech/mobydick-core/TooltipBase/LeftButton should renders correctly }, [ { - "color": "#FFF", "paddingHorizontal": 9, }, undefined,