@khanacademy/wonder-blocks-dropdown - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

components/action-menu.js

@@ -59,2 +59,7 @@ // @flow
     testId?: string,
+
+    /**
+     * Optional styling to add to the dropdown wrapper.
+     */
+    dropdownStyle?: StyleType,
 |};
@@ -178,3 +183,10 @@
     render() {
-        const {alignment, disabled, menuText, style, testId} = this.props;
+        const {
+            alignment,
+            disabled,
+            menuText,
+            style,
+            testId,
+            dropdownStyle,
+        } = this.props;
         const {open} = this.state;
@@ -199,3 +211,3 @@
                 alignment={alignment}
-                dropdownStyle={styles.menuTopSpace}
+                dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
                 items={items}
@@ -202,0 +214,0 @@ keyboard={this.state.keyboard}

components/action-menu.md

@@ -152,1 +152,36 @@ The action menu is used for items that trigger actions, such as navigating to
 ```
+
+### ActionMenu with custom dropdown style
+
+This example shows how we can add custom dropdownStyle to the action menu.
+
+```js
+const React = require("react");
+const {View} = require("@khanacademy/wonder-blocks-core");
+const {StyleSheet} = require("aphrodite");
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+    },
+    dropdown: {
+        maxHeight: 200,
+    },
+});
+
+<View style={styles.row}>
+    <ActionMenu
+        menuText="Betsy Appleseed"
+        testId="teacher-menu"
+        dropdownStyle={styles.dropdown}
+    >
+        <ActionItem label="Profile" href="http://khanacademy.org/profile" testId="profile" />
+        <ActionItem label="Teacher dashboard" href="http://khanacademy.org/coach/dashboard" testId="dashboard" />
+        <ActionItem label="Settings (onClick)" onClick={() => console.log("user clicked on settings")} testId="settings" />
+        <ActionItem label="Help" disabled={true} onClick={() => console.log("this item is disabled...")} testId="help" />
+        <ActionItem label="Feedback" disabled={true} href="/feedback" testId="feedback" />
+        <SeparatorItem />
+        <ActionItem label="Log out" href="http://khanacademy.org/logout" testId="logout" />
+    </ActionMenu>
+</View>
+```

generated-snapshot.test.js

@@ -234,2 +234,62 @@ // This file is auto-generated by gen-snapshot-tests.js
             },
+            dropdown: {
+                maxHeight: 200,
+            },
+        });
+
+        const example = (
+            <View style={styles.row}>
+                <ActionMenu
+                    menuText="Betsy Appleseed"
+                    testId="teacher-menu"
+                    dropdownStyle={styles.dropdown}
+                >
+                    <ActionItem
+                        label="Profile"
+                        href="http://khanacademy.org/profile"
+                        testId="profile"
+                    />
+                    <ActionItem
+                        label="Teacher dashboard"
+                        href="http://khanacademy.org/coach/dashboard"
+                        testId="dashboard"
+                    />
+                    <ActionItem
+                        label="Settings (onClick)"
+                        onClick={() => console.log("user clicked on settings")}
+                        testId="settings"
+                    />
+                    <ActionItem
+                        label="Help"
+                        disabled={true}
+                        onClick={() => console.log("this item is disabled...")}
+                        testId="help"
+                    />
+                    <ActionItem
+                        label="Feedback"
+                        disabled={true}
+                        href="/feedback"
+                        testId="feedback"
+                    />
+                    <SeparatorItem />
+                    <ActionItem
+                        label="Log out"
+                        href="http://khanacademy.org/logout"
+                        testId="logout"
+                    />
+                </ActionMenu>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it("example 6", () => {
+        const React = require("react");
+        const {View} = require("@khanacademy/wonder-blocks-core");
+        const {StyleSheet} = require("aphrodite");
+
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+            },
             setWidth: {
@@ -301,3 +361,3 @@ minWidth: 170,
     });
-    it("example 6", () => {
+    it("example 7", () => {
         const React = require("react");
@@ -365,3 +425,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 7", () => {
+    it("example 8", () => {
         const React = require("react");
@@ -421,3 +481,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 8", () => {
+    it("example 9", () => {
         const React = require("react");
@@ -478,3 +538,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 9", () => {
+    it("example 10", () => {
         const React = require("react");
@@ -554,3 +614,3 @@ const Color = require("@khanacademy/wonder-blocks-color");
     });
-    it("example 10", () => {
+    it("example 11", () => {
         const {View} = require("@khanacademy/wonder-blocks-core");
@@ -573,3 +633,3 @@ const {StyleSheet} = require("aphrodite");
     });
-    it("example 11", () => {
+    it("example 12", () => {
         const React = require("react");
@@ -645,3 +705,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 12", () => {
+    it("example 13", () => {
         const React = require("react");
@@ -711,3 +771,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 13", () => {
+    it("example 14", () => {
         const React = require("react");
@@ -779,3 +839,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 14", () => {
+    it("example 15", () => {
         const {StyleSheet} = require("aphrodite");
@@ -876,3 +936,3 @@ const React = require("react");
     });
-    it("example 15", () => {
+    it("example 16", () => {
         const {StyleSheet} = require("aphrodite");
@@ -879,0 +939,0 @@ const {View} = require("@khanacademy/wonder-blocks-core");

package.json

 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "design": "v1",
@@ -18,8 +18,8 @@ "description": "Dropdown variants for Wonder Blocks.",
   "dependencies": {
-    "@khanacademy/wonder-blocks-button": "^2.2.8",
+    "@khanacademy/wonder-blocks-button": "^2.2.9",
     "@khanacademy/wonder-blocks-color": "^1.0.16",
     "@khanacademy/wonder-blocks-core": "^2.0.1",
     "@khanacademy/wonder-blocks-icon": "^1.0.14",
-    "@khanacademy/wonder-blocks-layout": "^1.0.14",
-    "@khanacademy/wonder-blocks-modal": "^1.2.7",
+    "@khanacademy/wonder-blocks-layout": "^1.0.15",
+    "@khanacademy/wonder-blocks-modal": "^1.2.8",
     "@khanacademy/wonder-blocks-spacing": "^2.0.14",
@@ -26,0 +26,0 @@ "@khanacademy/wonder-blocks-typography": "^1.0.16"

No alert changes

Improved metrics

Total package byte prevSize

403350

2.09%

Lines of code

7949

0.9%

Dependency changes

• Updated

  @khanacademy/wonder-blocks-button@^2.2.9

• Updated

  @khanacademy/wonder-blocks-layout@^1.0.15

• Updated

  @khanacademy/wonder-blocks-modal@^1.2.8