mobile-design 0.1.1 → 0.1.3

package/src/components/fab.tsx

@@ -539,7 +539,8 @@ function MenuItem({
     const { fontScale } = useWindowDimensions();
     const colors = roleColors(theme, variant);
     const disabled = Boolean(item.disabled || (item.items && !item.items.length));
-    const [width, setWidth] = useState(56);
+    const iconSpace = item.icon ? 32 : 0;
+    const [labelWidth, setLabelWidth] = useState<number | null>(null);
     const [height, setHeight] = useState(56);
     const [focused, setFocused] = useState(false);
     const [hovered, setHovered] = useState(false);
@@ -568,7 +569,9 @@ function MenuItem({
         },
         [alpha, widthFraction]
     );
-    const naturalWidth = Math.max(56, Math.min(maxWidth, width));
+    // Keep the icon space live even before native text layout reports a new measurement.
+    const measuredWidth = labelWidth === null ? 56 : labelWidth + 49 + iconSpace;
+    const naturalWidth = Math.max(56, Math.min(maxWidth, measuredWidth));
     const geometry = useAnimatedStyle(() => ({ width: naturalWidth * Math.max(0, widthFraction.get()) }));
     const fade = useAnimatedStyle(() => ({ opacity: Math.max(0, Math.min(1, alpha.get())) }));
     const contentOffset = useAnimatedStyle(() => {
@@ -661,19 +664,19 @@ function MenuItem({
                 </Animated.View>
             </AnimatedSurface>
             <View
-                key={JSON.stringify([item.label, fontScale, maxWidth, theme.fonts.titleMedium])}
+                key={JSON.stringify([item.label, fontScale, maxWidth, iconSpace, theme.fonts.titleMedium])}
                 pointerEvents="none"
                 accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
                 {...(Platform.OS === 'web' ? { 'aria-hidden': true } : {})}
-                style={[styles.measure, { maxWidth: Math.max(1, maxWidth - 48 - (item.icon ? 32 : 0)) }]}
+                style={[styles.measure, { maxWidth: Math.max(1, maxWidth - 48 - iconSpace) }]}
             >
                 <Text
                     variant="titleMedium"
                     onLayout={
                         Platform.OS === 'web'
                             ? (event) => {
-                                  setWidth(Math.ceil(event.nativeEvent.layout.width) + 49 + (item.icon ? 32 : 0));
+                                  setLabelWidth(Math.ceil(event.nativeEvent.layout.width));
                                   setHeight(Math.max(56, Math.ceil(event.nativeEvent.layout.height) + 16));
                               }
                             : undefined
@@ -681,11 +684,7 @@ function MenuItem({
                     onTextLayout={
                         Platform.OS !== 'web'
                             ? (event) => {
-                                  setWidth(
-                                      Math.ceil(Math.max(0, ...event.nativeEvent.lines.map((line) => line.width))) +
-                                          49 +
-                                          (item.icon ? 32 : 0)
-                                  );
+                                  setLabelWidth(Math.ceil(Math.max(0, ...event.nativeEvent.lines.map((line) => line.width))));
                                   setHeight(
                                       Math.max(56, Math.ceil(event.nativeEvent.lines.reduce((sum, line) => sum + line.height, 0)) + 16)
                                   );

package/src/components/text-field.tsx

@@ -41,6 +41,8 @@ export interface TextFieldProps extends Omit<TextInputProps, 'style' | 'value' |
     value: string;
     onChangeText: (value: string) => void;
     variant?: 'filled' | 'outlined';
+    /** Compact starts at 48 dp. Both sizes grow with text scaling and multiline content. */
+    size?: 'standard' | 'compact';
     label?: string;
     disabled?: boolean;
     readOnly?: boolean;
@@ -83,6 +85,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         value,
         onChangeText,
         variant = 'filled',
+        size = 'standard',
         label,
         disabled = false,
         readOnly = false,
@@ -209,7 +212,15 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         ) : null);
     const labelStart = leadingContent ? 52 : 16;
     const lineHeight = 24 * fontScale;
-    const minimumHeight = Math.max(56, label && !outlined ? 16 + 40 * fontScale : 32 + lineHeight);
+    const compact = size === 'compact';
+    const verticalPadding = compact ? 12 : 16;
+    const filledLabelPadding = verticalPadding - 8;
+    const hasFilledLabel = Boolean(label) && !outlined;
+    const paddingTop = hasFilledLabel ? filledLabelPadding + 16 * fontScale : verticalPadding;
+    const paddingBottom = hasFilledLabel ? filledLabelPadding : verticalPadding;
+    const minimumHeight = Math.max(compact ? 48 : 56, paddingTop + lineHeight + paddingBottom);
+    const labelTop = outlined ? verticalPadding : filledLabelPadding + 8 * fontScale;
+    const labelTravel = outlined ? labelTop + 8 * fontScale : 8 * fontScale;
 
     // RNW reports scrollHeight including the previous minimum height. Measure the
     // natural textarea synchronously, restoring its style before the next paint,
@@ -315,7 +326,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         left: direction === 'rtl' ? undefined : labelStart + (outlined ? (16 - labelStart) * progress.get() - 4 : 0),
         right: direction === 'rtl' ? labelStart + (outlined ? (16 - labelStart) * progress.get() - 4 : 0) : undefined,
         backgroundColor: outlined && progress.get() > 0.001 ? fieldColor : 'transparent',
-        transform: [{ translateY: outlined ? -(16 + 8 * fontScale) * progress.get() : -8 * fontScale * progress.get() }],
+        transform: [{ translateY: -labelTravel * progress.get() }],
     }));
     const focusInput = () => {
         // Read-only fields remain focusable for selecting and copying text.
@@ -391,8 +402,8 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
                             flexDirection: direction === 'rtl' ? 'row-reverse' : 'row',
                             paddingLeft: (direction === 'rtl' ? trailingContent : leadingContent) ? 4 : 16,
                             paddingRight: (direction === 'rtl' ? leadingContent : trailingContent) ? 4 : 16,
-                            paddingTop: label && !outlined ? 8 + 16 * fontScale : 16,
-                            paddingBottom: label && !outlined ? 8 : 16,
+                            paddingTop,
+                            paddingBottom,
                         },
                     ]}
                 >
@@ -537,7 +548,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
                         style={[
                             styles.label,
                             {
-                                top: outlined ? 16 : 8 + 8 * fontScale,
+                                top: labelTop,
                                 paddingHorizontal: outlined ? 4 : 0,
                                 maxWidth: trailingContent ? '70%' : '85%',
                             },