fix: add support for changing the surface mode in the menu (#4378)

* fix: add support for changing the surface mode in the menu * test: adding tests for new mode prop
callstack · Jul 27, 2024 · eebc77f · eebc77f
1 parent eed911b
commit eebc77f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -73,6 +73,14 @@ export type Props = {
    * @supported Available in v5.x with theme version 3
    */
   elevation?: MD3Elevation;
+  /**
+   * Mode of the menu's content.
+   * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
+   * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+   *
+   * @supported Available in v5.x with theme version 3
+   */
+  mode?: 'flat' | 'elevated';
   /**
    * @optional
    */
@@ -114,6 +122,8 @@ export const ELEVATION_LEVELS_MAP = Object.values(
   ElevationLevels
 ) as ElevationLevels[];
 
+const DEFAULT_MODE = 'elevated';
+
 /**
  * Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
  *
@@ -418,6 +428,7 @@ class Menu extends React.Component<Props, State> {
       contentStyle,
       style,
       elevation = DEFAULT_ELEVATION,
+      mode = DEFAULT_MODE,
       children,
       theme,
       statusBarHeight,
@@ -646,6 +657,7 @@ class Menu extends React.Component<Props, State> {
                 }}
               >
                 <Surface
+                  mode={mode}
                   pointerEvents={pointerEvents}
                   style={[
                     styles.shadowMenuContainer,

diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
@@ -206,3 +206,51 @@ it('animated value changes correctly', () => {
     transform: [{ scale: 1.5 }],
   });
 });
+
+it('renders menu with mode "elevated"', () => {
+  const { getByTestId } = render(
+    <Portal.Host>
+      <Menu
+        visible
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+        mode="elevated"
+      >
+        <Menu.Item onPress={jest.fn()} title="Undo" />
+        <Menu.Item onPress={jest.fn()} title="Redo" />
+      </Menu>
+    </Portal.Host>
+  );
+
+  const menuSurface = getByTestId('menu-surface');
+
+  // Get flattened styles
+  const styles = StyleSheet.flatten(menuSurface.props.style);
+
+  expect(styles).toHaveProperty('shadowColor');
+  expect(styles).toHaveProperty('shadowOpacity');
+});
+
+it('renders menu with mode "flat"', () => {
+  const { getByTestId } = render(
+    <Portal.Host>
+      <Menu
+        visible
+        onDismiss={jest.fn()}
+        anchor={<Button mode="outlined">Open menu</Button>}
+        mode="flat"
+      >
+        <Menu.Item onPress={jest.fn()} title="Undo" />
+        <Menu.Item onPress={jest.fn()} title="Redo" />
+      </Menu>
+    </Portal.Host>
+  );
+
+  const menuSurface = getByTestId('menu-surface');
+
+  // Get flattened styles
+  const styles = StyleSheet.flatten(menuSurface.props.style);
+
+  expect(styles).not.toHaveProperty('shadowColor');
+  expect(styles).not.toHaveProperty('shadowOpacity');
+});