@momo-kits/foundation 0.169.4-beta.1 → 0.169.4-beta.2

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,7 +17,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
+import { CappedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -114,7 +114,7 @@ const CenterAction: React.FC<{
         </Animated.View>
         <View style={styles.ctaLabel}>
           {fixedFontScale ? (
-            <FixedScaleText>{labelText}</FixedScaleText>
+            <CappedScaleText>{labelText}</CappedScaleText>
           ) : (
             labelText
           )}
@@ -194,21 +194,17 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
-  const customContainer = withCta && floatingButton?.container;
-
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      {customContainer || (
-        <CurvedContainer
-          width={width}
-          height={TabBarMetrics.height}
-          radius={TabBarMetrics.height / 2}
-          notchCenterX={withCta ? width / 2 : undefined}
-        />
-      )}
+      <CurvedContainer
+        width={width}
+        height={TabBarMetrics.height}
+        radius={TabBarMetrics.height / 2}
+        notchCenterX={withCta ? width / 2 : undefined}
+      />
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -258,6 +254,7 @@ export default function BottomTabBar(props: Props) {
       ]}
     >
       <HorizontalTabBar
+        fixedFontScale
         items={getTabItems(props)}
         width={width}
         floatingButton={floatingButton}

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,7 +10,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { FixedScaleText, TabBarIcon } from './TabBarIcon';
+import { CappedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing } from '../../Consts';
@@ -98,7 +98,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
         />
       </View>
       {!hideLabel &&
-        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
+        (fixedFontScale ? <CappedScaleText>{text}</CappedScaleText> : text)}
     </>
   );
 };
@@ -166,6 +166,11 @@ const styles = StyleSheet.create({
   },
   labelBox: {
     alignSelf: 'stretch',
+    // fixed to the design line height so a capped-scale label overflows downward and the
+    // icon above it stays put
+    height: TabBarMetrics.labelHeight,
+    justifyContent: 'flex-start',
+    overflow: 'visible',
   },
   label: {
     textAlign: 'center',

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,7 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
+import { CappedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -116,7 +116,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <FixedScaleText>
+        <CappedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
@@ -124,7 +124,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
           >
             {floatingButton.label}
           </Text>
-        </FixedScaleText>
+        </CappedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/TabBarIcon.tsx

@@ -71,6 +71,30 @@ export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
+// the tab labels follow the OS/host font scale but never grow past this, so the fixed-height
+// container and the notch stay aligned
+const TAB_LABEL_MAX_SCALE = 1.2;
+
+/**
+ * caps the label scale at `TAB_LABEL_MAX_SCALE`: it keeps following the host/OS font scale but
+ * stops growing past 1.2× so it fits the fixed bar geometry
+ */
+export const CappedScaleText: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  return (
+    <MiniAppContext.Provider
+      value={{
+        ...context,
+        fontScale: { ...context?.fontScale, maxScaleRate: TAB_LABEL_MAX_SCALE },
+      }}
+    >
+      {children}
+    </MiniAppContext.Provider>
+  );
+};
+
 /**
  * numbers use the error color, text the warning color (Figma Badge round numeric / text)
  */

package/Application/BottomTab/metrics.ts

@@ -20,6 +20,9 @@ const TabBarMetrics = {
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
+  // label_s_medium line height: the label box keeps this height so a scaled label grows
+  // downward instead of pushing the icon up
+  labelHeight: 18,
   // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
   // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short

package/Application/types.tabs.ts

@@ -36,7 +36,6 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
-  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/Layout/FloatingButton.tsx

@@ -13,7 +13,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
-import { Colors, Spacing } from '../Consts';
+import { Colors } from '../Consts';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
 import { type AnimatedCompatValue } from '../Application/utils';
@@ -50,11 +50,8 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const labelFontFamily = exportFontFamily('bold');
   const maxWidth = useSharedValue(0);
   const minWidth = size === 'small' ? 36 : 48;
-  const iconSize = size === 'small' ? 12 : 24;
   const opacityAnimated = useSharedValue(0);
   const widthAnimated = useSharedValue<number | null>(null);
-  const paddingLeftAnimated = useSharedValue(Spacing.M);
-  const collapsedPaddingLeft = useSharedValue(Spacing.M);
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
   const [showText, setShowText] = useState(true);
@@ -76,9 +73,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           lastDirection.value = direction;
           if (direction === 'down') {
             opacityAnimated.value = withTiming(0, { duration: 100 });
-            paddingLeftAnimated.value = withTiming(collapsedPaddingLeft.value, {
-              duration: 100,
-            });
             widthAnimated.value = withTiming(
               minWidth,
               { duration: 100 },
@@ -88,7 +82,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
             );
           } else {
             opacityAnimated.value = withTiming(1, { duration: 100 });
-            paddingLeftAnimated.value = withTiming(Spacing.M, { duration: 100 });
             widthAnimated.value = withTiming(
               maxWidth.value,
               { duration: 100 },
@@ -105,7 +98,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 
   const containerStyle = useAnimatedStyle(() => ({
     width: widthAnimated.value ?? undefined,
-    paddingLeft: paddingLeftAnimated.value,
   }));
 
   const labelStyle = useAnimatedStyle(() => ({
@@ -115,14 +107,8 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const handleLayout = (event: LayoutChangeEvent) => {
     const layout = event.nativeEvent.layout;
     if (widthAnimated.value != null) return;
-    // layout is already scaled: rescale by height/minWidth so `width` isn't scaled twice
-    const expandedWidth = (layout.width * minWidth) / layout.height;
-    maxWidth.value = expandedWidth;
-    widthAnimated.value = expandedWidth;
-    // collapsed it is a circle as wide as it is tall: center the icon from the
-    // rendered height so it stays centered when sizes are scaled but padding is not
-    collapsedPaddingLeft.value =
-      (layout.height - (layout.height * iconSize) / minWidth) / 2;
+    maxWidth.value = layout.width;
+    widthAnimated.value = layout.width;
   };
 
   if (renderComponent) {
@@ -154,7 +140,11 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       ]}
     >
       <TouchableOpacity style={styles.content} onPress={onPress}>
-        <Icon source={icon} size={iconSize} color={iconColor} />
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
         {showText && !!label && (
           <Animated.Text
             allowFontScaling={false}

package/Text/utils.ts

@@ -9,13 +9,18 @@ const MAX_DEVICE_SCALE = 5;
 const useScaleSize = (size: number, scaleRate?: number) => {
   const { width } = useWindowDimensions();
   const context = useContext<any>(MiniAppContext);
+  // opt-in ceiling: when set (arg or context), the final size never exceeds size × capRate,
+  // in both the mini-app userScaleRate path and the OS path. Undefined keeps the old behavior.
+  const capRate = scaleRate ?? context?.fontScale?.maxScaleRate;
+  const cap = (scaled: number) =>
+    capRate != null ? Math.min(scaled, size * capRate) : scaled;
   if (context?.fontScale?.useOSScaleRate === false) {
-    return size * (context.fontScale.userScaleRate ?? 1);
+    return cap(size * (context.fontScale.userScaleRate ?? 1));
   }
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
+  const maxScaleRate = capRate ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -34,7 +39,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
     );
   }
 
-  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+  return cap(Math.max(fontSizeDeviceScale, fontSizeOSScale));
 };
 
 const scaleSize = (size: number) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.4-beta.1",
+    "version": "0.169.4-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},