@pagopa/io-app-design-system 5.0.2 → 5.0.3

package/src/components/buttons/ButtonLink.tsx

@@ -161,7 +161,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
         accessible={true}
         disabled={disabled}
         hitSlop={{ top: 14, right: 24, bottom: 14, left: 24 }}
-        style={IOButtonStyles.dimensionsDefault}
+        style={{ alignSelf: "flex-start" }}
       >
         <Animated.View
           style={[

package/src/components/buttons/ButtonOutline.tsx

@@ -192,7 +192,11 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
         onPressOut={onPressOut}
         accessible={true}
         disabled={disabled}
-        style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
+        style={
+          fullWidth
+            ? { flexShrink: 0, alignSelf: "stretch" }
+            : { flexShrink: 1, alignSelf: "auto" }
+        }
       >
         <Animated.View
           style={[

package/src/components/buttons/ButtonSolid.tsx

@@ -208,7 +208,11 @@ export const ButtonSolid = forwardRef<View, ButtonSolidProps>(
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         disabled={disabled}
-        style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
+        style={
+          fullWidth
+            ? { flexShrink: 0, alignSelf: "stretch" }
+            : { flexShrink: 1, alignSelf: "auto" }
+        }
       >
         <Animated.View
           style={[

package/src/components/buttons/IconButtonContained.tsx

@@ -11,12 +11,7 @@ import {
   IOIcons,
   IconClassComponent
 } from "../../components/icons";
-import {
-  IOButtonStyles,
-  IOColors,
-  IOIconButtonStyles,
-  hexToRgba
-} from "../../core";
+import { IOColors, IOIconButtonStyles, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 
@@ -135,7 +130,7 @@ export const IconButtonContained = ({
       onPressOut={onPressOut}
       accessible={true}
       disabled={disabled}
-      style={IOButtonStyles.dimensionsDefault}
+      style={{ alignSelf: "flex-start" }}
     >
       <Animated.View
         style={[

package/src/components/buttons/IconButtonSolid.tsx

@@ -5,7 +5,7 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOButtonStyles, IOIconButtonStyles, useIOTheme } from "../../core";
+import { IOIconButtonStyles, useIOTheme } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -98,7 +98,7 @@ export const IconButtonSolid = ({
       onPressOut={onPressOut}
       accessible={true}
       disabled={disabled}
-      style={IOButtonStyles.dimensionsDefault}
+      style={{ alignSelf: "flex-start" }}
     >
       <Animated.View
         style={[

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -147,7 +147,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
   onStartShouldSetResponder={[Function]}
   style={
     {
-      "alignSelf": "flex-start",
+      "alignSelf": "auto",
+      "flexShrink": 1,
     }
   }
 >
@@ -264,7 +265,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
   onStartShouldSetResponder={[Function]}
   style={
     {
-      "alignSelf": "flex-start",
+      "alignSelf": "auto",
+      "flexShrink": 1,
     }
   }
 >
@@ -890,7 +892,8 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     {
-      "alignSelf": "flex-start",
+      "alignSelf": "auto",
+      "flexShrink": 1,
     }
   }
 >
@@ -1007,7 +1010,8 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     {
-      "alignSelf": "flex-start",
+      "alignSelf": "auto",
+      "flexShrink": 1,
     }
   }
 >

package/src/components/layout/HeaderFirstLevel.tsx

@@ -23,7 +23,7 @@ import {
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HStack } from "../stack";
-import { H3 } from "../typography";
+import { H2 } from "../typography";
 import { HeaderActionProps } from "./common";
 
 type HeaderActionsProp =
@@ -125,14 +125,15 @@ export const HeaderFirstLevel = ({
 
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
-          <H3
+          <H2
             weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
             color={theme["textHeading-default"]}
+            maxFontSizeMultiplier={1.25}
           >
             {title}
-          </H3>
+          </H2>
         </View>
         <HStack space={16} style={{ flexShrink: 0 }}>
           {actions.map((action, index) => (

package/src/components/layout/HeaderSecondLevel.tsx

@@ -13,6 +13,8 @@ import Animated, {
   SharedValue,
   interpolate,
   interpolateColor,
+  runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
   useScrollViewOffset,
@@ -269,6 +271,31 @@ export const HeaderSecondLevel = ({
       : 1
   }));
 
+  const [importantForAccessibility, setImportantForAccessibility] =
+    React.useState<"yes" | "no-hide-descendants">("yes");
+
+  // Updates accessibility state based on scroll position.
+  useAnimatedReaction(
+    () =>
+      enableDiscreteTransition
+        ? scrollOffset.value
+        : scrollValues?.contentOffsetY.value,
+    (currentOffset, previousOffset) => {
+      if (currentOffset !== previousOffset) {
+        const offsetToCompare = enableDiscreteTransition
+          ? 0
+          : scrollValues?.triggerOffset ?? 0;
+        // Sets accessibility to "yes" when scrolled past the threshold, else hides it from screen readers.
+        const newValue =
+          (currentOffset ?? 0) > offsetToCompare && !ignoreAccessibilityCheck
+            ? "yes"
+            : "no-hide-descendants";
+        runOnJS(setImportantForAccessibility)(newValue);
+      }
+    },
+    [scrollValues, enableDiscreteTransition]
+  );
+
   return (
     <Animated.View
       accessibilityRole="header"
@@ -303,11 +330,7 @@ export const HeaderSecondLevel = ({
         <View
           ref={titleRef}
           accessibilityElementsHidden={!isTitleAccessible}
-          importantForAccessibility={
-            isTitleAccessible && !ignoreAccessibilityCheck
-              ? "yes"
-              : "no-hide-descendants"
-          }
+          importantForAccessibility={importantForAccessibility}
           accessible={isTitleAccessible}
           accessibilityLabel={title}
           accessibilityRole="header"

package/src/components/searchInput/SearchInput.tsx

@@ -214,7 +214,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
         : inputWidth;
     };
 
-    const cancel = useCallback(
+    const handleCancel = useCallback(
       (event: GestureResponderEvent) => {
         onChangeText?.("");
         onCancel?.(event);
@@ -222,7 +222,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       [onCancel, onChangeText]
     );
 
-    const clear = useCallback(() => {
+    const handleClear = useCallback(() => {
       onChangeText?.("");
       searchInputRef.current?.clear();
     }, [onChangeText]);
@@ -233,7 +233,10 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     );
 
     const renderSearchBar = () => (
-      <Animated.View style={styles.searchBar}>
+      <Animated.View
+        importantForAccessibility={pressable ? "no-hide-descendants" : "auto"}
+        style={styles.searchBar}
+      >
         <Animated.View
           style={[styles.searchInput, animatedStyle]}
           pointerEvents={pressable ? "none" : "auto"}
@@ -279,7 +282,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           />
           <AnimatedPressable
             style={[styles.clearButton, clearButtonAnimatedStyle]}
-            onPress={clear}
+            onPress={handleClear}
             accessibilityLabel={clearAccessibilityLabel}
             accessibilityRole="button"
             hitSlop={16}
@@ -294,7 +297,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={cancelButtonLabel}
-            onPress={cancel}
+            onPress={handleCancel}
           >
             <IOText
               color={theme["interactiveElem-default"]}
@@ -316,9 +319,10 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
     return pressable ? (
       <Pressable
+        accessible={true}
         accessibilityRole="button"
         accessibilityLabel={placeholder}
-        onPress={pressable?.onPress}
+        onPress={pressable.onPress}
       >
         {renderSearchBar()}
       </Pressable>

package/src/components/tabs/TabNavigation.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FlexStyle, LayoutChangeEvent, StyleSheet, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
+import { IOVisualCostants } from "../../core";
 import { TabItem } from "./TabItem";
 
 export type TabNavigationItem = Omit<
@@ -23,6 +24,7 @@ type TabNavigation = {
   onItemPress?: (index: number) => void;
   // Tabs
   children: TabNavigationChildren;
+  includeContentMargins?: boolean;
 };
 
 const itemsJustify: Record<TabAlignment, FlexStyle["justifyContent"]> = {
@@ -37,7 +39,8 @@ const TabNavigation = ({
   selectedIndex,
   tabAlignment = "center",
   onItemPress,
-  children
+  children,
+  includeContentMargins = true
 }: TabNavigation) => {
   const [itemMinWidth, setItemMinWidth] = React.useState<number>(0);
 
@@ -79,8 +82,11 @@ const TabNavigation = ({
       centerContent={true}
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={[
-        styles.container,
+        includeContentMargins
+          ? { paddingHorizontal: IOVisualCostants.appMarginDefault }
+          : {},
         {
+          flexGrow: 1,
           justifyContent: itemsJustify[tabAlignment]
         }
       ]}
@@ -91,10 +97,6 @@ const TabNavigation = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    paddingHorizontal: 24
-  },
   item: {
     flexGrow: 0,
     flexShrink: 1,

package/src/components/typography/H2.tsx

@@ -1,17 +1,24 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIONewTypeface, useIOTheme } from "../../core";
-import { IOFontSize } from "../../utils/fonts";
+import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
+type H2StyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
+};
+
 export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 34;
 
 /**
  * `H2` typographic style
  */
-export const H2 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+export const H2 = forwardRef<View, H2StyleProps>(
+  (
+    { weight: customWeight, color: customColor, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
     const theme = useIOTheme();
     const { newTypefaceEnabled } = useIONewTypeface();
 
@@ -19,7 +26,7 @@ export const H2 = forwardRef<View, TypographicStyleProps>(
       ...props,
       dynamicTypeRamp: "title1", // iOS only
       font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
-      weight: "Semibold",
+      weight: customWeight ?? "Semibold",
       size: h2FontSize,
       lineHeight: h2LineHeight,
       color: customColor ?? theme["textHeading-default"]

package/src/components/typography/H3.tsx

@@ -1,13 +1,9 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIONewTypeface, useIOTheme } from "../../core";
-import { IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type H3StyleProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
-};
-
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
@@ -15,11 +11,8 @@ export const h3LineHeight = 33;
 /**
  * `H3` typographic style
  */
-export const H3 = forwardRef<View, H3StyleProps>(
-  (
-    { weight: customWeight, color: customColor, ...props },
-    ref?: ForwardedRef<View>
-  ) => {
+export const H3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
     const { newTypefaceEnabled } = useIONewTypeface();
 
@@ -27,7 +20,7 @@ export const H3 = forwardRef<View, H3StyleProps>(
       ...props,
       dynamicTypeRamp: "title2", // iOS only
       font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
-      weight: customWeight ?? "Semibold",
+      weight: "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,
       color: customColor ?? theme["textHeading-default"]

package/src/core/IOStyles.ts

@@ -167,10 +167,6 @@ export const IOButtonStyles = StyleSheet.create({
   },
   buttonSizeSmall: {
     height: btnSizeDefault
-  },
-  /* Widths */
-  dimensionsDefault: {
-    alignSelf: "flex-start"
   }
 });