[IOAPPFD0-154] Fix UI regressions affecting Button… and LabelLink…

… components (#80) ## Short description This PR fixes the following visual regressions: * `LabelLink` component: it didn't have the correct color when experimental DS is off * Legacy style of the `ButtonSolid` contrast variant: it used the `blueIO` colour instead of the classic blue * Both `ButtonSolid` and `ButtonOutline` had wrong icon sizes (too big for the legacy variant) ## How to test N/A
pagopa · Sep 22, 2023 · b530ce0 · b530ce0
1 parent 54e4576
commit b530ce0
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 33 deletions.
diff --git 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 = () => {
         </View>
       </ComponentViewerBox>
 
-      <View style={styles.primaryBlock}>
+      <View
+        style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+      >
         <ComponentViewerBox
           name="ButtonSolid · Contrast variant"
           colorMode="dark"
@@ -342,7 +349,9 @@ export const Buttons = () => {
         </View>
       </ComponentViewerBox>
 
-      <View style={styles.primaryBlock}>
+      <View
+        style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+      >
         <ComponentViewerBox
           name="ButtonOutline · Contrast variant"
           colorMode="dark"
@@ -555,7 +564,9 @@ export const Buttons = () => {
         </View>
       </ComponentViewerBox>
 
-      <View style={styles.primaryBlock}>
+      <View
+        style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+      >
         <ComponentViewerBox
           name="IconButton · Contrast variant"
           colorMode="dark"
@@ -626,7 +637,9 @@ export const Buttons = () => {
         </View>
       </ComponentViewerBox>
 
-      <View style={styles.primaryBlock}>
+      <View
+        style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+      >
         <ComponentViewerBox
           name="IconButtonSolid · Contrast variant, large"
           colorMode="dark"
@@ -706,7 +719,9 @@ export const Buttons = () => {
         </View>
       </ComponentViewerBox>
 
-      <View style={styles.primaryBlock}>
+      <View
+        style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+      >
         <ComponentViewerBox
           name="IconButtonContained · Contrast variant"
           colorMode="dark"

diff --git 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 (
       <Pressable

diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx
@@ -21,7 +21,12 @@ import {
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
@@ -191,6 +196,9 @@ const IOButtonLegacyStylesLocal = StyleSheet.create({
   }
 });
 
+// Icon size
+const iconSize: IOIconSizeScale = 20;
+
 const DISABLED_OPACITY = 0.5;
 
 const IOButtonStylesLocal = StyleSheet.create({
@@ -349,11 +357,13 @@ export const ButtonOutline = ({
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
                 color={colorMap[color]?.label?.default}
+                size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
                 color={colorMap[color]?.label?.disabled}
+                size={iconSize}
               />
             )}
             <HSpacer size={8} />

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
@@ -9,10 +9,10 @@ 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";
+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;
   };
 };
 
@@ -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
    */
@@ -142,7 +140,7 @@ const mapLegacyColorStates: Record<
     default: IOColors.white,
     pressed: IOColors["blue-50"],
     label: {
-      default: "blueIO-500",
+      default: "blue",
       disabled: "white"
     }
   }
@@ -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)

diff --git 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<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
 type ButtonTextProps = ExternalTypographyProps<

diff --git 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<AllowedWeight, AllowedColors>({
+export const LabelLink = (props: LinkProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     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"
     }
   });
+};
diff --git 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`] = `
 <Text
-  color="blueIO-500"
-  defaultColor="blueIO-500"
+  color="blue"
+  defaultColor="blue"
   defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
@@ -985,7 +985,7 @@ exports[`Test Typography Components Link Snapshot 1`] = `
         "textDecorationLine": "underline",
       },
       {
-        "color": "#0B3EE3",
+        "color": "#0073E6",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
         "fontWeight": "600",