@momo-kits/foundation 0.169.7-beta.4 → 0.169.7-beta.5

package/Application/BottomTab/CurvedContainer.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
-import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
 
 type Props = {
   width: number;
@@ -15,16 +15,18 @@ type Props = {
 
 // room for the floating shadow around the shape: the key shadow reaches 12 + 3 × 16 below it
 const SHADOW_PADDING = 64;
-// Figma Shadow/floating: 12% blur 24, plus 4% blur 32 spread -16 offset 12; svg blur takes
-// half the CSS blur radius, the spread shrinks the shape the key shadow is cast from
+/**
+ * Figma Shadow/floating: 12% blur 24, plus 4% blur 32 spread -16 offset 12. SVG blur takes
+ * half the CSS blur radius; the spread shrinks the shape the key shadow is cast from.
+ */
 const AMBIENT_BLUR = 12;
 const KEY_BLUR = 16;
 const KEY_SPREAD = 16;
 const KEY_OFFSET_Y = 12;
 
 /**
- * rounded container path placed at (`x`, `y`) on the canvas, with the notch dipped into the
- * top edge around `notchCenterX`
+ * SVG path of the rounded container placed at (`x`, `y`) on the canvas, with the notch
+ * dipped into the top edge around `notchCenterX`.
  */
 const getContainerPath = (
   width: number,
@@ -43,11 +45,10 @@ const getContainerPath = (
   if (notchCenterX !== undefined) {
     const cx = x + notchCenterX;
     const point = ([dx, dy]: [number, number]) => `${cx + dx} ${top + dy}`;
-    notch =
-      ` L ${cx - NOTCH_HALF_WIDTH} ${top}` +
-      NOTCH_CURVES.map(
-        ([c1, c2, end]) => ` C ${point(c1)} ${point(c2)} ${point(end)}`,
-      ).join('');
+    const curves = NOTCH_CURVES.map(([c1, c2, end]) => {
+      return ` C ${point(c1)} ${point(c2)} ${point(end)}`;
+    });
+    notch = ` L ${cx - NOTCH_HALF_WIDTH} ${top}${curves.join('')}`;
   }
   return (
     `M ${left + r} ${top}` +
@@ -64,8 +65,8 @@ const getContainerPath = (
 };
 
 /**
- * navigation bar container: surface fill with the floating shadow, drawn as a shape so
- * the shadow follows the notch
+ * Navigation bar container: surface fill with the floating shadow, drawn as an SVG shape
+ * so the shadow follows the notch.
  */
 const CurvedContainer: React.FC<Props> = ({
   width,
@@ -87,6 +88,7 @@ const CurvedContainer: React.FC<Props> = ({
     SHADOW_PADDING,
     notchCenterX,
   );
+  const hasKeyShadow = width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD;
 
   return (
     <Svg
@@ -123,7 +125,7 @@ const CurvedContainer: React.FC<Props> = ({
         fillOpacity={0.12}
         filter={'url(#ambientShadow)'}
       />
-      {width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD && (
+      {hasKeyShadow && (
         <Path
           d={getContainerPath(
             width - 2 * KEY_SPREAD,
@@ -137,7 +139,13 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path d={path} fill={theme.colors.background.surface} />
+      <Path
+        d={path}
+        fill={theme.colors.background.surface}
+        fillOpacity={TabBarMetrics.backgroundOpacity}
+        stroke={theme.colors.border.default}
+        strokeWidth={1}
+      />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,10 +10,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { FixedScaleText, TabBarIcon } from './TabBarIcon';
+import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors, Spacing } from '../../Consts';
+import { Colors } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -31,14 +31,12 @@ type TabItemContentProps = {
   badge?: string | number;
   // rail item (.Nav/Duo/Item) instead of the horizontal one (.Nav/itemTab)
   vertical?: boolean;
-  // keep the label at its design size, the Duo displays otherwise scale it up
-  fixedFontScale?: boolean;
   hideLabel?: boolean;
 };
 
 /**
- * icon in its indicator slot, label under it. The bar slides one shared active indicator
- * behind the slots; the icon and label tint cross-fade on focus
+ * Tab item body: the icon in its indicator slot, the label in a fixed slot under it so a
+ * scaled label grows down. The bar slides one shared active indicator behind the icon slots.
  */
 const TabItemContent: React.FC<TabItemContentProps> = ({
   label,
@@ -48,7 +46,6 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
   icon,
   badge,
   vertical,
-  fixedFontScale,
   hideLabel,
 }) => {
   const progress = useSharedValue(focused ? 1 : 0);
@@ -72,9 +69,9 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </Text>
   );
 
-  // the active label fades in over the inactive one
-  const text = (
-    <View style={!vertical && styles.labelBox}>
+  // Active label fades in over the inactive one; a scaled label overflows down.
+  const labelNode = (
+    <View style={vertical ? styles.railLabelSlot : styles.labelSlot}>
       {renderText(inactiveTintColor)}
       <Animated.View
         pointerEvents={'none'}
@@ -97,8 +94,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
           renderIcon={icon}
         />
       </View>
-      {!hideLabel &&
-        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
+      {!hideLabel && labelNode}
     </>
   );
 };
@@ -112,7 +108,7 @@ type CustomBottomTabItemProps = TabItemContentProps & {
 };
 
 /**
- * horizontal navigation item (.Nav/itemTab): fills an even share of the container
+ * Horizontal navigation item (.Nav/itemTab), filling an even share of the container.
  */
 const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   onPress,
@@ -147,7 +143,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: Spacing.XXS,
+    gap: TabBarMetrics.itemIconLabelGap,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,
@@ -164,9 +160,13 @@ const styles = StyleSheet.create({
     paddingVertical: TabBarMetrics.railIndicatorPaddingVertical,
     paddingHorizontal: TabBarMetrics.indicatorPaddingHorizontal,
   },
-  labelBox: {
+  labelSlot: {
+    height: TabBarMetrics.labelHeight,
     alignSelf: 'stretch',
   },
+  railLabelSlot: {
+    height: TabBarMetrics.railLabelHeight,
+  },
   label: {
     textAlign: 'center',
   },

package/Application/BottomTab/DuoBarCompression.tsx

@@ -28,9 +28,9 @@ type DuoBarCompression = {
 
 // space kept between the top and the bottom groups (HIG Vertical controls)
 const GROUP_GAP = Spacing.M;
+const BACK_SLOT_HEIGHT = DuoMetrics.controlSize + Spacing.M;
 // Back, then the right toolkit: help + home capsule
-const DEFAULT_TOOLBAR_HEIGHT =
-  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
+const DEFAULT_TOOLBAR_HEIGHT = BACK_SLOT_HEIGHT + 2 * DuoMetrics.itemPitch;
 // Back, then the single button the toolbar folds into
 const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
 
@@ -39,16 +39,12 @@ const NO_COMPRESSION: DuoBarCompression = {
   tabBarCompressed: false,
 };
 
-const DuoBarCompressionContext =
-  createContext<DuoBarCompression>(NO_COMPRESSION);
+const DuoBarCompressionContext = createContext(NO_COMPRESSION);
 
 /**
- * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
- * iPhone Duo: Vertical controls):
- * - both fit: both stay whole
- * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
- * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
- *   again once a tab is picked)
+ * Keeps the Duo side bar's toolbar and tab bar clear of each other (HIG Vertical controls):
+ * both stay whole if they fit, else one is compressed and tapping it swaps them, else both
+ * rest compressed and tapping one opens it until a tab is picked.
  */
 const DuoBarCompressionProvider: React.FC<{
   behavior?: DuoBarCompressionBehavior;
@@ -71,18 +67,16 @@ const DuoBarCompressionProvider: React.FC<{
     }
     const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
     const tabBar = getRailHeight(tabCount, hasQr);
-    const compressedTabBar =
-      DuoMetrics.controlSize +
-      (hasQr ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
+    const qrHeight = TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight;
+    const compressedTabBar = DuoMetrics.controlSize + (hasQr ? qrHeight : 0);
     const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
 
     if (fits(toolbarHeight, tabBar)) {
       return { ...NO_COMPRESSION, setToolbarHeight };
     }
-    const canSwap =
-      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
-      fits(toolbarHeight, compressedTabBar);
-    if (canSwap) {
+    const canCompressToolbar = fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar);
+    const canCompressTabBar = fits(toolbarHeight, compressedTabBar);
+    if (canCompressToolbar && canCompressTabBar) {
       return {
         toolbarCompressed: expanded === 'tabBar',
         tabBarCompressed: expanded === 'toolbar',
@@ -97,8 +91,7 @@ const DuoBarCompressionProvider: React.FC<{
       expandTabBar: () => setOpened('tabBar'),
       setToolbarHeight,
     };
-    // an opened rail always shows, even when only the gap between the groups is short:
-    // it closes again once a tab is picked
+    // An opened rail shows even if only the group gap is short; picking a tab closes it.
     if (opened === 'tabBar') {
       return {
         ...open,
@@ -122,6 +115,7 @@ const DuoBarCompressionProvider: React.FC<{
   );
 };
 
+/** Compression state of the Duo side bars; no compression outside the provider. */
 const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
 
 export { DuoBarCompressionProvider, useDuoBarCompression };

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,6 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -24,7 +23,7 @@ import {
 import type { DuoTabBarProps } from './DuoTabBar';
 
 /**
- * Center action icon: an icon name drawn at the CTA size, or a custom node
+ * Center action icon: an icon name drawn at the CTA size, or a custom node.
  */
 const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
   if (typeof icon === 'string') {
@@ -40,7 +39,7 @@ const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
 };
 
 /**
- * vertical container (.Nav/Duo/Item column) with the sliding active indicator
+ * Vertical container (.Nav/Duo/Item column) with the sliding active indicator.
  */
 const Rail: React.FC<{
   items: TabItem[];
@@ -76,7 +75,6 @@ const Rail: React.FC<{
       >
         <TabItemContent
           vertical
-          fixedFontScale
           label={item.label}
           focused={item.focused}
           icon={item.icon}
@@ -90,7 +88,7 @@ const Rail: React.FC<{
 );
 
 /**
- * center action of the rail: round button with its label, under the container
+ * Center action of the rail: a round button with its label, under the container.
  */
 const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   floatingButton,
@@ -116,15 +114,13 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <FixedScaleText>
-          <Text
-            numberOfLines={1}
-            typography={'label_xs_medium'}
-            color={theme.colors.text.secondary}
-          >
-            {floatingButton.label}
-          </Text>
-        </FixedScaleText>
+        <Text
+          numberOfLines={1}
+          typography={'label_xs_medium'}
+          color={theme.colors.text.secondary}
+        >
+          {floatingButton.label}
+        </Text>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}
@@ -136,14 +132,14 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
 };
 
 /**
- * vertical bar anchored to the bottom of the Duo side bar, center action below it.
- * When the side bar is short, it can shrink to one button showing the current tab
- * (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar
+ * Vertical bar anchored to the bottom of the Duo side bar, center action below it. When the
+ * side bar is short it can shrink to one button showing the current tab (HIG "Tab bar
+ * compressed"); tapping it expands the rail and compresses the toolbar.
  */
 const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
-  const { tabBarCompressed, expandTabBar, onTabSelected } =
-    useDuoBarCompression();
+  const compression = useDuoBarCompression();
+  const { tabBarCompressed, expandTabBar, onTabSelected } = compression;
   const compactLift = usePressLift();
   const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
   const items = getTabItems(props);
@@ -153,8 +149,7 @@ const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
     return null;
   }
 
-  // the rail lines up with the header buttons in the side bar: centered on a 48 lane kept 12
-  // from the strip's inner edge
+  // Lines up with the side bar header buttons: a 48 lane kept 12 from the inner edge.
   const columnStyle = [
     styles.railColumn,
     {
@@ -164,9 +159,10 @@ const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
     },
     sideBar.edge === 'right' ? styles.railColumnRight : styles.railColumnLeft,
   ];
-  const cta = floatingButton && (
-    <RailCenterAction floatingButton={floatingButton} />
-  );
+  let cta: React.ReactNode;
+  if (floatingButton) {
+    cta = <RailCenterAction floatingButton={floatingButton} />;
+  }
 
   if (!tabBarCompressed) {
     return (

package/Application/BottomTab/DuoTabBar.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
+import {
+  getSystemIndicatorHeight,
+  hasCenterAction,
+  HorizontalTabBar,
+} from './BottomTabBar';
 import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
@@ -16,8 +20,8 @@ type DuoTabBarProps = BottomTabBarProps & {
 };
 
 /**
- * space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
- * 0 when the Duo rail sits in the side bar
+ * Space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
+ * 0 when the Duo rail sits in the side bar.
  */
 const useDuoTabBarInset = () => {
   const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
@@ -28,12 +32,13 @@ const useDuoTabBarInset = () => {
 };
 
 /**
- * horizontal navigation bar of the unfolded display: 65% of the short side, centered
+ * Horizontal navigation bar of the unfolded display: 65% of the short side, centered.
  */
 const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
   const { width, height } = useWindowDimensions();
   const { floatingButton, activeTintColor, inactiveTintColor } = props;
+  const tabItems = getTabItems(props);
 
   return (
     <View
@@ -44,9 +49,15 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
-        fixedFontScale
-        items={getTabItems(props)}
-        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
+        items={tabItems}
+        width={getHorizontalBarWidth(
+          width,
+          height,
+          insets.left,
+          insets.right,
+          tabItems.length,
+          hasCenterAction(floatingButton, tabItems.length),
+        )}
         floatingButton={floatingButton}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
@@ -56,15 +67,14 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
 };
 
 /**
- * iPhone Duo tab bar: rail in the side bar, or the horizontal bar when unfolded portrait
+ * iPhone Duo tab bar: the rail in the side bar, or the horizontal bar when unfolded portrait.
  */
 const DuoTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
-  return sideBar ? (
-    <DuoRailTabBar {...props} />
-  ) : (
-    <DuoFloatingTabBar {...props} />
-  );
+  if (sideBar) {
+    return <DuoRailTabBar {...props} />;
+  }
+  return <DuoFloatingTabBar {...props} />;
 };
 
 export type { DuoTabBarProps };

package/Application/BottomTab/TabBarIcon.tsx

@@ -7,9 +7,10 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { Colors, Spacing } from '../../Consts';
-import { ApplicationContext, MiniAppContext } from '../../Context';
+import { ApplicationContext } from '../../Context';
 import { BadgeDot } from '../../Badge';
 import { Text } from '../../Text';
+import ScaleSizeProvider from '../ScaleSizeProvider';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type Props = {
@@ -28,7 +29,8 @@ type Props = {
 };
 
 /**
- * badge value shown on a tab: undefined hides it, '' is a dot, numbers cap at 99+
+ * Badge value of a tab: undefined hides it, '' is a dot (also 0 when `showDot`), numbers
+ * cap at 99+.
  */
 export const getTabBadge = (
   badgeLabel?: string | number,
@@ -52,27 +54,8 @@ export const getTabBadge = (
 };
 
 /**
- * text at its design size: like the system tab bar it doesn't grow with the OS font scale or
- * the wide Duo displays, which Text otherwise scales up to 5pt
- */
-export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
-      }}
-    >
-      {children}
-    </MiniAppContext.Provider>
-  );
-};
-
-/**
- * numbers use the error color, text the warning color (Figma Badge round numeric / text)
+ * Label badge of a tab: numbers use the error color, text the warning color (Figma Badge
+ * round numeric / text). The text keeps its design size to fit the 16 height.
  */
 const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
   label,
@@ -80,19 +63,21 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const isNumber = /^\d+\+?$/.test(label);
+  let backgroundColor = theme.colors.warning.primary;
+  if (isNumber) {
+    backgroundColor = theme.colors.error.primary;
+  }
   const badge = (
     <View
       style={[
         styles.badge,
         {
-          backgroundColor: isNumber
-            ? theme.colors.error.primary
-            : theme.colors.warning.primary,
+          backgroundColor,
           borderColor: theme.colors.background.surface,
         },
       ]}
     >
-      <FixedScaleText>
+      <ScaleSizeProvider scaleSizeMaxRate={1}>
         <Text
           numberOfLines={1}
           typography={'action_xxs_bold'}
@@ -100,7 +85,7 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
         >
           {label}
         </Text>
-      </FixedScaleText>
+      </ScaleSizeProvider>
     </View>
   );
   if (vertical) {
@@ -110,7 +95,8 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
 };
 
 /**
- * 24 icon; active and inactive icons are stacked and cross-faded on focus
+ * Tab icon (24) with its badge; active and inactive icons are stacked and cross-fade on
+ * focus.
  */
 export function TabBarIcon({
   focused,

package/Application/BottomTab/TabScreen.tsx

@@ -29,8 +29,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
-  // the floating tab bar covers the bottom of the tab: pad the content unless a Screen in it
-  // keeps clear of the bar itself (scroll content running under the bar)
+  // Pad clear of the floating bar unless a Screen inside claims the inset to scroll under it.
   const { inset: tabBarInset } = useContext(BottomTabInsetContext);
   const [insetClaimed, setInsetClaimed] = useState(false);
   const tabInsetValue = useMemo(
@@ -54,9 +53,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         ...data,
       });
 
-      /**
-       * debug toast
-       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_navigated`,