fix: correct changing Dialog backdrop color (#3259)

docs/pages/10.migration-guide-to-5.0.md

@@ -75,6 +75,7 @@ theme: {
     inverseOnSurface,
     inverseSurface,
     inversePrimary,
+    backdrop,
     elevation: {
       level0,
       level1,

docs/pages/2.theming.md

@@ -128,6 +128,7 @@ A theme usually contains the following properties:
     - `inverseOnSurface`
     - `inverseSurface`
     - `inversePrimary`
+    - `backdrop`
 
 - `typescale` (`object`): various fonts styling properties under the text variant key used in component.
   - [`variant` e.g. `labelMedium`] (`object`):

src/components/Dialog/Dialog.tsx

@@ -114,6 +114,7 @@ const Dialog = ({
         styles.container,
         style,
       ]}
+      theme={theme}
     >
       {React.Children.toArray(children)
         .filter((child) => child != null && typeof child !== 'boolean')

src/components/FAB/FABGroup.tsx

@@ -22,13 +22,14 @@ type Props = {
    * An action item should contain the following properties:
    * - `icon`: icon to display (required)
    * - `label`: optional label text
-   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
    * - `color`: custom icon color of the action item
    * - `labelTextColor`: custom label text color of the action item
+   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
    * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
    * - `labelStyle`: pass additional styles for the fab item label, for example, `backgroundColor`
-   * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x
    * - `onPress`: callback that is called when `FAB` is pressed (required)
+   * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x
+   * - `testID`: testID to be used on tests
    */
   actions: Array<{
     icon: IconSource;
@@ -55,6 +56,10 @@ type Props = {
    * Custom color for the `FAB`.
    */
   color?: string;
+  /**
+   * Custom backdrop color for opened speed dial background.
+   */
+  backdropColor?: string;
   /**
    * Function to execute on pressing the `FAB`.
    */
@@ -170,6 +175,7 @@ const FABGroup = ({
   onStateChange,
   color: colorProp,
   variant = 'primary',
+  backdropColor: customBackdropColor,
 }: Props) => {
   const { current: backdrop } = React.useRef<Animated.Value>(
     new Animated.Value(0)
@@ -238,7 +244,7 @@ const FABGroup = ({
   const toggle = () => onStateChange({ open: !open });
 
   const { labelColor, backdropColor, stackedFABBackgroundColor } =
-    getFABGroupColors({ theme });
+    getFABGroupColors({ theme, customBackdropColor });
 
   const backdropOpacity = open
     ? backdrop.interpolate({

src/components/FAB/utils.ts

@@ -305,7 +305,16 @@ const getLabelColor = ({ theme }: { theme: Theme }) => {
   return color(theme.colors.text).fade(0.54).rgb().string();
 };
 
-const getBackdropColor = ({ theme }: { theme: Theme }) => {
+const getBackdropColor = ({
+  theme,
+  customBackdropColor,
+}: {
+  theme: Theme;
+  customBackdropColor?: string;
+}) => {
+  if (customBackdropColor) {
+    return customBackdropColor;
+  }
   if (theme.isV3) {
     return color(theme.colors.background).alpha(0.95).rgb().string();
   }
@@ -319,10 +328,16 @@ const getStackedFABBackgroundColor = ({ theme }: { theme: Theme }) => {
   return theme.colors.surface;
 };
 
-export const getFABGroupColors = ({ theme }: { theme: Theme }) => {
+export const getFABGroupColors = ({
+  theme,
+  customBackdropColor,
+}: {
+  theme: Theme;
+  customBackdropColor?: string;
+}) => {
   return {
     labelColor: getLabelColor({ theme }),
-    backdropColor: getBackdropColor({ theme }),
+    backdropColor: getBackdropColor({ theme, customBackdropColor }),
     stackedFABBackgroundColor: getStackedFABBackgroundColor({ theme }),
   };
 };

src/components/Modal.tsx

@@ -10,16 +10,14 @@ import {
   View,
   NativeEventSubscription,
 } from 'react-native';
-import color from 'color';
 import {
   getStatusBarHeight,
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 import Surface from './Surface';
-import { useTheme } from '../core/theming';
+import { withTheme } from '../core/theming';
 import useAnimatedValue from '../utils/useAnimatedValue';
 import { addEventListener } from '../utils/addEventListener';
-import { MD3Colors } from '../styles/themes/v3/tokens';
 
 type Props = {
   /**
@@ -51,6 +49,14 @@ type Props = {
    * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme: ReactNativePaper.Theme;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const DEFAULT_DURATION = 220;
@@ -96,23 +102,23 @@ const BOTTOM_INSET = getBottomSpace();
  * export default MyComponent;
  * ```
  */
-export default function Modal({
+function Modal({
   dismissable = true,
   visible = false,
   overlayAccessibilityLabel = 'Close modal',
   onDismiss,
   children,
   contentContainerStyle,
   style,
+  theme,
+  testID = 'modal',
 }: Props) {
   const visibleRef = React.useRef(visible);
 
   React.useEffect(() => {
     visibleRef.current = visible;
   });
 
-  const theme = useTheme();
-
   const { scale } = theme.animation;
 
   const opacity = useAnimatedValue(visible ? 1 : 0);
@@ -209,6 +215,7 @@ export default function Modal({
       accessibilityLiveRegion="polite"
       style={StyleSheet.absoluteFill}
       onAccessibilityEscape={hideModal}
+      testID={testID}
     >
       <TouchableWithoutFeedback
         accessibilityLabel={overlayAccessibilityLabel}
@@ -218,12 +225,11 @@ export default function Modal({
         importantForAccessibility="no"
       >
         <Animated.View
+          testID={`${testID}-backdrop`}
           style={[
             styles.backdrop,
             {
-              backgroundColor: theme.isV3
-                ? color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string()
-                : theme.colors?.backdrop,
+              backgroundColor: theme.colors?.backdrop,
               opacity,
             },
           ]}
@@ -253,6 +259,8 @@ export default function Modal({
   );
 }
 
+export default withTheme(Modal);
+
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,

src/components/__tests__/FABGroup.test.js

@@ -0,0 +1,96 @@
+import color from 'color';
+import { getFABGroupColors } from '../FAB/utils';
+import { getTheme } from '../../core/theming';
+
+describe('getFABGroupColors - backdrop color', () => {
+  it('should return custom color', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(),
+        customBackdropColor: 'transparent',
+      })
+    ).toMatchObject({
+      backdropColor: 'transparent',
+    });
+  });
+
+  it('should return correct backdrop color, for theme version 3', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(),
+      })
+    ).toMatchObject({
+      backdropColor: color(getTheme().colors.background)
+        .alpha(0.95)
+        .rgb()
+        .string(),
+    });
+  });
+
+  it('should return correct backdrop color, for theme version 2', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(false, false),
+      })
+    ).toMatchObject({
+      backdropColor: getTheme(false, false).colors.backdrop,
+    });
+  });
+});
+
+describe('getFABGroupColors - label color', () => {
+  it('should return correct theme color, for theme version 3', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(),
+      })
+    ).toMatchObject({
+      labelColor: getTheme().colors.onSurface,
+    });
+  });
+
+  it('should return correct theme color, dark mode, for theme version 2', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(true, false),
+      })
+    ).toMatchObject({
+      labelColor: getTheme(true, false).colors.text,
+    });
+  });
+
+  it('should return correct theme color, light mode, for theme version 2', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(false, false),
+      })
+    ).toMatchObject({
+      labelColor: color(getTheme(false, false).colors.text)
+        .fade(0.54)
+        .rgb()
+        .string(),
+    });
+  });
+});
+
+describe('getFABGroupColors - stacked FAB background color', () => {
+  it('should return correct theme color, for theme version 3', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(),
+      })
+    ).toMatchObject({
+      stackedFABBackgroundColor: getTheme().colors.elevation.level3,
+    });
+  });
+
+  it('should return correct theme color, dark mode, for theme version 2', () => {
+    expect(
+      getFABGroupColors({
+        theme: getTheme(false, false),
+      })
+    ).toMatchObject({
+      stackedFABBackgroundColor: getTheme(false, false).colors.surface,
+    });
+  });
+});

src/components/__tests__/Modal.test.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from 'react-native-testing-library';
+import Modal from '../Modal';
+
+describe('Modal', () => {
+  it('should render custom backdrop color', () => {
+    const { getByTestId } = render(
+      <Modal
+        visible={true}
+        testID="modal"
+        theme={{
+          colors: {
+            backdrop: 'transparent',
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId('modal-backdrop').props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ backgroundColor: 'transparent' }),
+      ])
+    );
+  });
+});

src/components/__tests__/__snapshots__/ListSection.test.js.snap

@@ -16,6 +16,7 @@ exports[`renders list section with custom title style 1`] = `
         "scale": 1,
       },
       "colors": Object {
+        "backdrop": "rgba(50, 47, 55, 0.4)",
         "background": "rgba(255, 251, 254, 1)",
         "elevation": Object {
           "level0": "transparent",
@@ -47,7 +48,6 @@ exports[`renders list section with custom title style 1`] = `
         "primaryContainer": "rgba(234, 221, 255, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
-        "shadow": "rgba(0, 0, 0, 1)",
         "surface": "rgba(255, 251, 254, 1)",
         "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
@@ -456,6 +456,7 @@ exports[`renders list section with subheader 1`] = `
         "scale": 1,
       },
       "colors": Object {
+        "backdrop": "rgba(50, 47, 55, 0.4)",
         "background": "rgba(255, 251, 254, 1)",
         "elevation": Object {
           "level0": "transparent",
@@ -487,7 +488,6 @@ exports[`renders list section with subheader 1`] = `
         "primaryContainer": "rgba(234, 221, 255, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
-        "shadow": "rgba(0, 0, 0, 1)",
         "surface": "rgba(255, 251, 254, 1)",
         "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
@@ -894,6 +894,7 @@ exports[`renders list section without subheader 1`] = `
         "scale": 1,
       },
       "colors": Object {
+        "backdrop": "rgba(50, 47, 55, 0.4)",
         "background": "rgba(255, 251, 254, 1)",
         "elevation": Object {
           "level0": "transparent",
@@ -925,7 +926,6 @@ exports[`renders list section without subheader 1`] = `
         "primaryContainer": "rgba(234, 221, 255, 1)",
         "secondary": "rgba(98, 91, 113, 1)",
         "secondaryContainer": "rgba(232, 222, 248, 1)",
-        "shadow": "rgba(0, 0, 0, 1)",
         "surface": "rgba(255, 251, 254, 1)",
         "surfaceDisabled": "rgba(28, 27, 31, 0.12)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",

src/styles/themes/v3/DarkTheme.tsx

@@ -1,7 +1,7 @@
 import color from 'color';
 import type { MD3Theme } from '../../../types';
 import { MD3LightTheme } from './LightTheme';
-import { tokens } from './tokens';
+import { MD3Colors, tokens } from './tokens';
 
 const { palette, opacity } = tokens.md.ref;
 
@@ -43,10 +43,10 @@ export const MD3DarkTheme: MD3Theme = {
     onErrorContainer: palette.error80,
     onBackground: palette.neutral90,
     outline: palette.neutralVariant60,
-    shadow: palette.neutral0,
     inverseSurface: palette.neutral90,
     inverseOnSurface: palette.neutral20,
     inversePrimary: palette.primary40,
+    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
     elevation: {
       level0: 'transparent',
       // Note: Color values with transparency cause RN to transfer shadows to children nodes