update(MenuToggle): Add prop for custom trigger element. (#304)

airbnb · Mar 30, 2020 · 9f3ea04 · 9f3ea04
1 parent a963e6c
commit 9f3ea04
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 22 deletions.
diff --git a/packages/core/src/components/MenuToggle/index.tsx b/packages/core/src/components/MenuToggle/index.tsx
@@ -41,6 +41,8 @@ export type MenuToggleProps = {
   toggleIcon?: React.ReactNode;
   /** Toggle button text. */
   toggleLabel: NonNullable<React.ReactNode>;
+  /** Custom toggle trigger. */
+  toggleElement?: React.ReactNode;
   /** Z-index of the menu. */
   zIndex?: number;
   /** @ignore @private */
@@ -153,6 +155,7 @@ export class MenuToggle extends React.Component<
       styles,
       toggleIcon,
       toggleLabel,
+      toggleElement,
       zIndex,
     } = this.props;
     let iconSize = '1.5em';
@@ -165,29 +168,38 @@ export class MenuToggle extends React.Component<
 
     const Button = muted ? MutedButton : BaseButton;
 
+    let toggleButton = toggleIcon ? (
+      <IconButton
+        disabled={disabled}
+        aria-label={accessibilityLabel}
+        onClick={this.handleToggleMenu}
+      >
+        {toggleIcon}
+      </IconButton>
+    ) : (
+      <Button
+        disabled={disabled}
+        afterIcon={<ExpandableIcon expanded={opened} size={iconSize} />}
+        inverted={inverted}
+        large={large}
+        small={small}
+        onClick={this.handleToggleMenu}
+      >
+        {toggleLabel}
+      </Button>
+    );
+
+    if (toggleElement) {
+      toggleButton = (
+        <button type="button" className={cx(styles.customToggle)} onClick={this.handleToggleMenu}>
+          {toggleElement}
+        </button>
+      );
+    }
+
     return (
       <div ref={this.ref} className={cx(styles.container)}>
-        {toggleIcon ? (
-          <IconButton
-            disabled={disabled}
-            aria-label={accessibilityLabel}
-            onClick={this.handleToggleMenu}
-          >
-            {toggleIcon}
-          </IconButton>
-        ) : (
-          <Button
-            disabled={disabled}
-            afterIcon={<ExpandableIcon expanded={opened} size={iconSize} />}
-            inverted={inverted}
-            large={large}
-            small={small}
-            onClick={this.handleToggleMenu}
-          >
-            {toggleLabel}
-          </Button>
-        )}
-
+        {toggleButton}
         <div
           className={cx(styles.dropdown, !opened && styles.dropdown_hidden, { zIndex })}
           aria-expanded={opened}

diff --git a/packages/core/src/components/MenuToggle/story.tsx b/packages/core/src/components/MenuToggle/story.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import IconMenuDots from '@airbnb/lunar-icons/lib/interface/IconMenuDots';
 import MenuToggle, { Item } from '.';
+import Emoji from '../Emoji';
 
 const children = [
   <Item key="0" onClick={() => console.log('onClick')}>
@@ -35,6 +36,27 @@ aBasicMenuWithMenuItems.story = {
   name: 'A basic menu with menu items.',
 };
 
+export function withCustomTrigger() {
+  return (
+    <MenuToggle
+      accessibilityLabel="Actions"
+      toggleElement={
+        <>
+          Custom <Emoji unicode="🐱" /> Menu <Emoji unicode="🐱" /> Trigger
+        </>
+      }
+      toggleLabel="Actions"
+      zIndex={10}
+    >
+      {children}
+    </MenuToggle>
+  );
+}
+
+withCustomTrigger.story = {
+  name: 'With custom trigger.',
+};
+
 export function withCustomIcon() {
   return (
     <MenuToggle

diff --git a/packages/core/src/components/MenuToggle/styles.ts b/packages/core/src/components/MenuToggle/styles.ts
@@ -1,6 +1,6 @@
 import { StyleSheet } from '../../hooks/useStyles';
 
-export const styleSheetMenuToggle: StyleSheet = ({ unit, transition }) => ({
+export const styleSheetMenuToggle: StyleSheet = ({ pattern, unit, transition }) => ({
   container: {
     display: 'inline-block',
     position: 'relative',
@@ -26,4 +26,8 @@ export const styleSheetMenuToggle: StyleSheet = ({ unit, transition }) => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+
+  customToggle: {
+    ...pattern.resetButton,
+  },
 });