Merge branch 'main' into feat/refactor-icon-button-component

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: alpharius-ck

docs/6.x/docs/guides/fonts.md

@@ -67,6 +67,13 @@ Platform.select({
 }),
 ```
 
+Material Design 3 typescale uses two font families:
+
+- **Brand**: Display, Headline and Title Large
+- **Plain**: Title Medium/Small, Label and Body
+
+The default theme uses the platform default for both font families.
+
 :::
 
 - #### Display
@@ -291,14 +298,29 @@ Platform.select({
   "fontFamily": "Font",
   "fontSize": 16,
   "fontWeight": "400",
-  "letterSpacing": 0.15,
+  "letterSpacing": 0.5,
   "lineHeight": 24,
 }
 ```
 
   </div>
 </div>
 
+- #### Emphasized
+
+Each variant also has an `Emphasized` counterpart with a heavier font weight: `displayLargeEmphasized`,
+`bodyMediumEmphasized` etc.
+
+```json
+"bodyMediumEmphasized": {
+  "fontFamily": "Font",
+  "fontSize": 14,
+  "fontWeight": "500",
+  "letterSpacing": 0.25,
+  "lineHeight": 20,
+}
+```
+
 :::info
 If any component uses Paper's `Text` component, without specified <b>variant</b>, then `default` variant is applied:
 

docs/6.x/docs/guides/migration.md

@@ -71,61 +71,41 @@ You can use the component's color prop where available, or override the correspo
 
 ### Test IDs
 
-Hardcoded default test IDs have been removed for the components listed below. Many of these components also derive test IDs for their internal parts by appending a suffix to the `testID` prop (e.g. `${testID}-container`). Since `testID` is no longer defaulted to a hardcoded value, none of these derived test IDs are set either unless you pass a `testID` explicitly — so all queries by the IDs below will stop matching:
+Hardcoded default test IDs have been removed for the components listed below:
 
 - `Appbar.Content`: `appbar-content`
-  - `appbar-content-title-text`
 - `Appbar.Header`: `appbar-header`
-  - `appbar-header-root-layer`
 - `BottomNavigation`: `bottom-navigation`
-  - `bottom-navigation-bar`
 - `BottomNavigation.Bar`: `bottom-navigation-bar`
-  - `bottom-navigation-bar-content`
-  - `bottom-navigation-bar-content-wrapper`
 - `Button`: `button`
-  - `button-container`
-  - `button-icon-container`
-  - `button-text`
 - `Card`: `card`
-  - `card-container`
-  - `card-outline`
 - `Chip`: `chip`
-  - `chip-container`
 - `Drawer.CollapsedItem`: `drawer-collapsed-item`
-  - `drawer-collapsed-item-outline`
-  - `drawer-collapsed-item-container`
 - `FAB`: `floating-action-button`
-  - `floating-action-button-container`
-  - `floating-action-button-text`
 - `FAB.Extended`: `extended-floating-action-button`
-  - `extended-floating-action-button-container`
-  - `extended-floating-action-button-text`
 - `FAB.Menu`: `floating-action-button-menu`
 - `IconButton`: `icon-button`
-  - `icon-button-container`
-  - `icon-button-icon` (and `icon-button-icon-previous` / `icon-button-icon-current` when `animated`)
 - `Menu`: `menu`
-  - `menu-view`
-  - `menu-surface`
 - `Menu.Item`: `menu-item`
-  - `menu-item-title`
 - `Modal`: `modal`
-  - `modal-backdrop`
-  - `modal-wrapper`
-  - `modal-surface`
 - `ProgressBar`: `progress-bar`
-  - `progress-bar-fill`
 - `Searchbar`: `search-bar`
-  - `search-bar-container`
-  - `search-bar-icon`
-  - `search-bar-icon-wrapper`
-  - `search-bar-clear-icon`
-  - `search-bar-trailering-icon`
-  - `search-bar-divider`
 - `Surface`: `surface`
-  - `surface-outer-layer`
 
-You can specify a `testID` explicitly to restore both the component's own test ID and all of its derived test IDs above, using the same suffixes.
+You can specify a `testID` explicitly to restore each component's own test ID.
+
+These components used to also derive test IDs for internal, implementation-only elements by appending a suffix to the `testID` prop (e.g. `${testID}-container`, `${testID}-icon`, `${testID}-outline`). They have been removed entirely.
+
+If you were relying on internal test IDs, update your tests not to rely on internal implementation details and only interact with elements or assert content your users can reach, e.g.: query by role, label, text etc., or `testID` props accepted by the component.
+
+Some components now accept explicit `testID` props for their interactable elements:
+
+- `BottomNavigation`: `barTestID` for the internal `BottomNavigation.Bar`, replacing the previous `${testID}-bar` derivation.
+- `Chip`: `closeIconTestID` for the close icon button.
+- `Dialog` and `Modal`: `overlayTestID` for the overlay displayed behind the content.
+- `Menu`: `overlayTestID` for the overlay displayed behind the menu.
+- `Searchbar`: `searchTestID`, `clearTestID`, and `trailingTestID` for the search, clear, and trailing icon buttons.
+- `Snackbar`: `iconTestID` for the icon button.
 
 ## Components
 

package.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.9",
     "color": "^3.1.2",
+    "fast-deep-equal": "^3.1.3",
     "use-latest-callback": "^0.2.3"
   },
   "devDependencies": {

src/components/Appbar/AppbarContent.tsx

@@ -135,7 +135,6 @@ const AppbarContent = ({
           numberOfLines={1}
           accessible
           role={onPress ? 'none' : 'heading'}
-          testID={testID ? `${testID}-title-text` : undefined}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}

src/components/BottomNavigation/BottomNavigation.tsx

@@ -252,6 +252,10 @@ export type Props<Route extends BaseRoute> = {
    * TestID used for testing purposes
    */
   testID?: string;
+  /**
+   * testID for the underlying `BottomNavigation.Bar`.
+   */
+  barTestID?: string;
 };
 
 const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
@@ -336,6 +340,7 @@ const BottomNavigation = <Route extends BaseRoute>({
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
   testID,
+  barTestID,
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
@@ -579,7 +584,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
-        testID={testID ? `${testID}-bar` : undefined}
+        testID={barTestID}
         theme={theme}
       />
     </View>

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -493,10 +493,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
       ]}
       onLayout={onLayout}
     >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={testID ? `${testID}-content` : undefined}
-      >
+      <Animated.View style={[styles.barContent, { backgroundColor }]}>
         <View
           style={[
             styles.items,
@@ -509,7 +506,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             },
           ]}
           role={'tablist'}
-          testID={testID ? `${testID}-content-wrapper` : undefined}
         >
           {routes.map((route, index) => {
             const focused = navigationState.index === index;

src/components/Button/Button.tsx

@@ -292,7 +292,6 @@ const Button = ({
     <Surface
       {...rest}
       ref={ref}
-      testID={testID ? `${testID}-container` : undefined}
       backgroundColor={backgroundOpacity < 1 ? 'transparent' : backgroundColor}
       {...touchableStyle}
       style={[
@@ -342,10 +341,7 @@ const Button = ({
       >
         <View style={[styles.content, { opacity: textOpacity }, contentStyle]}>
           {icon && loading !== true ? (
-            <View
-              style={iconStyle}
-              testID={testID ? `${testID}-icon-container` : undefined}
-            >
+            <View style={iconStyle}>
               <Icon
                 source={icon}
                 size={customLabelSize ?? iconSize}
@@ -372,7 +368,6 @@ const Button = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            testID={testID ? `${testID}-text` : undefined}
             style={[
               styles.label,
               isMode('text')

src/components/Card/Card.tsx

@@ -204,7 +204,7 @@ const Card = ({
   const borderRadius = theme.shapes.corner.medium;
 
   const content = (
-    <View style={[styles.innerContainer, contentStyle]} testID={testID}>
+    <View style={[styles.innerContainer, contentStyle]}>
       {React.Children.map(children, (child, index) =>
         React.isValidElement(child)
           ? React.cloneElement(child as React.ReactElement<any>, {
@@ -225,13 +225,12 @@ const Card = ({
       style={[{ borderColor }, style]}
       theme={theme}
       elevation={elevation}
-      testID={testID ? `${testID}-container` : undefined}
+      testID={hasPassedTouchHandler ? undefined : testID}
       {...rest}
     >
       {isMode('outlined') && (
         <View
           pointerEvents="none"
-          testID={testID ? `${testID}-outline` : undefined}
           style={[
             {
               borderColor,
@@ -252,6 +251,7 @@ const Card = ({
           onPress={onPress}
           onPressIn={handlePressIn}
           onPressOut={handlePressOut}
+          testID={testID}
         >
           {content}
         </Pressable>

src/components/Card/CardContent.tsx

@@ -43,8 +43,8 @@ export type Props = ViewProps & {
  * ```
  */
 const CardContent = ({ index, total, siblings, style, ...rest }: Props) => {
-  const cover = 'withInternalTheme(CardCover)';
-  const title = 'withInternalTheme(CardTitle)';
+  const cover = 'Card.Cover';
+  const title = 'Card.Title';
 
   let contentStyle, prev, next;
 

src/components/Card/CardTitle.tsx

@@ -102,6 +102,10 @@ export type Props = ViewProps & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const LEFT_SIZE = 40;
@@ -143,14 +147,15 @@ const CardTitle = ({
   rightStyle,
   style,
   theme: themeOverrides,
+  testID,
 }: Props) => {
   useInternalTheme(themeOverrides);
 
   const minHeight = subtitle || left || right ? 72 : 50;
   const marginBottom = subtitle ? 0 : 2;
 
   return (
-    <View style={[styles.container, { minHeight }, style]}>
+    <View style={[styles.container, { minHeight }, style]} testID={testID}>
       {left ? (
         <View style={[styles.left, leftStyle]}>
           {left({