From 738a34178700ca18ed95285d76c2d986274904ab Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 22 Sep 2023 12:08:54 +0200 Subject: [PATCH 1/5] =?UTF-8?q?Restore=20correct=20icon=20size=20in=20the?= =?UTF-8?q?=20`Button=E2=80=A6`=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/buttons/ButtonLink.tsx | 9 +++++++-- src/components/buttons/ButtonOutline.tsx | 12 +++++++++++- src/components/buttons/ButtonSolid.tsx | 14 ++++---------- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx index cdf0a7b3..d7dec1b8 100644 --- a/src/components/buttons/ButtonLink.tsx +++ b/src/components/buttons/ButtonLink.tsx @@ -19,7 +19,12 @@ import { } from "../../core"; import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; -import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons/Icon"; +import { + AnimatedIcon, + IOIconSizeScale, + IOIcons, + IconClassComponent +} from "../icons"; import { HSpacer } from "../spacer/Spacer"; import { buttonTextFontSize } from "../typography"; @@ -175,7 +180,7 @@ export const ButtonLink = React.memo( }, [isPressed]); // Icon size - const iconSize = 24; + const iconSize: IOIconSizeScale = 24; return ( ) : ( )} diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx index db0c19c7..5c443085 100644 --- a/src/components/buttons/ButtonSolid.tsx +++ b/src/components/buttons/ButtonSolid.tsx @@ -9,7 +9,7 @@ import Animated, { useSharedValue, withSpring } from "react-native-reanimated"; -import { IOIcons, Icon } from "../icons"; +import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { WithTestID } from "../../utils/types"; import { HSpacer } from "../spacer/Spacer"; import { ButtonText, ButtonTextAllowedColors } from "../typography/ButtonText"; @@ -45,6 +45,9 @@ const legacyStyles = StyleSheet.create({ const colorPrimaryButtonDisabled: IOColors = "grey-200"; const DISABLED_OPACITY = 0.5; +// Icon size +const iconSize: IOIconSizeScale = 20; + const styles = StyleSheet.create({ backgroundDisabled: { backgroundColor: IOColors[colorPrimaryButtonDisabled], @@ -58,11 +61,6 @@ export type ButtonSolidProps = WithTestID<{ */ color?: ButtonSolidColor; label: string; - /** - * Renders a small variant of the button. This property applies to the legacy look only - * @default false - */ - small?: boolean; /** * @default false */ @@ -152,7 +150,6 @@ export const ButtonSolid = React.memo( ({ color = "primary", label, - small = false, fullWidth = false, disabled = false, icon, @@ -177,9 +174,6 @@ export const ButtonSolid = React.memo( [isExperimental] ); - // Icon size - const iconSize = React.useMemo(() => (small ? 16 : 20), [small]); - // Using a spring-based animation for our interpolations const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button) From db2d4079acf46f9c1e7a6bdcce5ec465a2a0bd81 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 22 Sep 2023 13:42:23 +0200 Subject: [PATCH 2/5] Update example app to get proper Button background colors --- example/src/pages/Buttons.tsx | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx index 2889f2a1..737b4850 100644 --- a/example/src/pages/Buttons.tsx +++ b/example/src/pages/Buttons.tsx @@ -21,6 +21,11 @@ import { ComponentViewerBox } from "../components/ComponentViewerBox"; import { Screen } from "../components/Screen"; const styles = StyleSheet.create({ + primaryBlockLegacy: { + backgroundColor: IOColors.blue, + padding: 16, + borderRadius: 8 + }, primaryBlock: { backgroundColor: IOColors["blueIO-500"], padding: 16, @@ -186,7 +191,9 @@ export const Buttons = () => { - + { - + { - + { - + { - + Date: Fri, 22 Sep 2023 14:09:11 +0200 Subject: [PATCH 3/5] Fix wrong color in the `contrast` legacy variant of `ButtonSolid` --- src/components/buttons/ButtonSolid.tsx | 8 ++++---- src/components/typography/ButtonText.tsx | 5 +---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx index 5c443085..c4d50068 100644 --- a/src/components/buttons/ButtonSolid.tsx +++ b/src/components/buttons/ButtonSolid.tsx @@ -12,7 +12,7 @@ import Animated, { import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { WithTestID } from "../../utils/types"; import { HSpacer } from "../spacer/Spacer"; -import { ButtonText, ButtonTextAllowedColors } from "../typography/ButtonText"; +import { ButtonText } from "../typography/ButtonText"; import { IOButtonLegacyStyles, IOButtonStyles, @@ -28,8 +28,8 @@ type ColorStates = { default: string; pressed: string; label: { - default: ButtonTextAllowedColors; - disabled: ButtonTextAllowedColors; + default: IOColors; + disabled: IOColors; }; }; @@ -140,7 +140,7 @@ const mapLegacyColorStates: Record< default: IOColors.white, pressed: IOColors["blue-50"], label: { - default: "blueIO-500", + default: "blue", disabled: "white" } } diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx index dee4845f..7f817087 100644 --- a/src/components/typography/ButtonText.tsx +++ b/src/components/typography/ButtonText.tsx @@ -4,10 +4,7 @@ import { useIOExperimentalDesign } from "../../core"; import { useTypographyFactory } from "./Factory"; import { ExternalTypographyProps, TypographyProps } from "./common"; -export type ButtonTextAllowedColors = Extract< - IOColors, - "white" | "blueIO-500" | "grey-700" ->; +export type ButtonTextAllowedColors = IOColors; type AllowedWeight = Extract; type ButtonTextProps = ExternalTypographyProps< From 1d18f885e72e3db1dca080cef1421d6506c79145 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 22 Sep 2023 14:32:26 +0200 Subject: [PATCH 4/5] Add correct legacy colour to the `LabelLink` component --- src/components/typography/LabelLink.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/typography/LabelLink.tsx b/src/components/typography/LabelLink.tsx index 93bdb07b..972b68d1 100644 --- a/src/components/typography/LabelLink.tsx +++ b/src/components/typography/LabelLink.tsx @@ -1,5 +1,5 @@ import { IOFontFamily, IOFontWeight } from "../../utils/fonts"; -import type { IOColors } from "../../core"; +import { useIOExperimentalDesign, type IOColors } from "../../core"; import { ExternalTypographyProps, FontSize, @@ -20,18 +20,22 @@ type LinkProps = ExternalTypographyProps< const fontName: IOFontFamily = "TitilliumWeb"; +export const linkLegacyDefaultColor: AllowedColors = "blue"; + export const linkDefaultColor: AllowedColors = "blueIO-500"; export const linkDefaultWeight: AllowedWeight = "SemiBold"; /** * `Link` typographic style */ -export const LabelLink = (props: LinkProps) => - useTypographyFactory({ +export const LabelLink = (props: LinkProps) => { + const { isExperimental } = useIOExperimentalDesign(); + + return useTypographyFactory({ accessibilityRole: props.onPress ? "link" : undefined, ...props, defaultWeight: linkDefaultWeight, - defaultColor: linkDefaultColor, + defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor, font: fontName, fontStyle: { fontSize: props.fontSize @@ -43,3 +47,4 @@ export const LabelLink = (props: LinkProps) => textDecorationLine: "underline" } }); +}; From a5f6fb3b69d959964bca7f7c5779888aafc1d386 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 22 Sep 2023 15:19:15 +0200 Subject: [PATCH 5/5] Update jest snapshot --- .../__test__/__snapshots__/typography.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap index a2cdd1f1..2d5b659f 100644 --- a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap +++ b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap @@ -966,8 +966,8 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = ` exports[`Test Typography Components Link Snapshot 1`] = `