@khanacademy/wonder-blocks-dropdown 2.6.0 → 2.6.4

package/CHANGELOG.md

@@ -1,16 +1,54 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.6.4
+
+### Patch Changes
+
+-   77e7523c: Update disabled state to match design specs (offWhite bg)
+
+## 2.6.3
+
+### Patch Changes
+
+-   11c87db3: - Added `wonder-blocks-birthday-picker`.
+    -   Dropdown: Updated some styles from `backgroundColor` to `background` to avoid some warnings on unit tests.
+
+## 2.6.2
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-button@2.11.2
+-   @khanacademy/wonder-blocks-clickable@2.2.3
+-   @khanacademy/wonder-blocks-core@4.2.1
+-   @khanacademy/wonder-blocks-icon@1.2.25
+-   @khanacademy/wonder-blocks-icon-button@3.4.3
+-   @khanacademy/wonder-blocks-layout@1.4.7
+-   @khanacademy/wonder-blocks-modal@2.2.1
+-   @khanacademy/wonder-blocks-typography@1.1.29
+
+## 2.6.1
+
+### Patch Changes
+
+-   Updated dependencies [901bfe82]
+-   Updated dependencies [e7bbf149]
+    -   @khanacademy/wonder-blocks-clickable@2.2.2
+    -   @khanacademy/wonder-blocks-modal@2.2.0
+    -   @khanacademy/wonder-blocks-button@2.11.1
+    -   @khanacademy/wonder-blocks-icon-button@3.4.2
+
 ## 2.6.0
+
 ### Minor Changes
 
-- 8bccbc9d: Adds `lang` attribute to the `ActionItem` component
+-   8bccbc9d: Adds `lang` attribute to the `ActionItem` component
 
 ### Patch Changes
 
-- Updated dependencies [029b4810]
-- Updated dependencies [45588e5f]
-- Updated dependencies [c57cd770]
-- Updated dependencies [29766c8e]
-- Updated dependencies [875b7893]
-  - @khanacademy/wonder-blocks-timing@2.1.0
-  - @khanacademy/wonder-blocks-core@4.1.0
+-   Updated dependencies [029b4810]
+-   Updated dependencies [45588e5f]
+-   Updated dependencies [c57cd770]
+-   Updated dependencies [29766c8e]
+-   Updated dependencies [875b7893]
+    -   @khanacademy/wonder-blocks-timing@2.1.0
+    -   @khanacademy/wonder-blocks-core@4.1.0

package/dist/es/index.js

@@ -396,7 +396,7 @@ const {
 const styles$6 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
-    backgroundColor: white$1,
+    background: white$1,
     color: offBlack$1,
     alignItems: "center",
     height: DROPDOWN_ITEM_HEIGHT,
@@ -1978,7 +1978,7 @@ const _generateStyles = (light, placeholder) => {
   if (light) {
     newStyles = {
       default: {
-        backgroundColor: "transparent",
+        background: "transparent",
         color: placeholder ? white50 : white,
         borderColor: white50,
         borderWidth: 1
@@ -2006,7 +2006,7 @@ const _generateStyles = (light, placeholder) => {
   } else {
     newStyles = {
       default: {
-        backgroundColor: white,
+        background: white,
         borderColor: offBlack16,
         borderWidth: 1,
         color: placeholder ? offBlack64 : offBlack
@@ -2025,7 +2025,7 @@ const _generateStyles = (light, placeholder) => {
         paddingRight: adjustedPaddingRight
       },
       disabled: {
-        backgroundColor: "transparent",
+        background: Color.offWhite,
         borderColor: offBlack16,
         color: offBlack64,
         cursor: "auto"

package/dist/index.js

@@ -747,7 +747,7 @@ const {
 const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   itemContainer: {
     flexDirection: "row",
-    backgroundColor: white,
+    background: white,
     color: offBlack,
     alignItems: "center",
     height: _util_constants_js__WEBPACK_IMPORTED_MODULE_7__[/* DROPDOWN_ITEM_HEIGHT */ "a"],
@@ -1685,7 +1685,7 @@ const _generateStyles = (light, placeholder) => {
   if (light) {
     newStyles = {
       default: {
-        backgroundColor: "transparent",
+        background: "transparent",
         color: placeholder ? white50 : white,
         borderColor: white50,
         borderWidth: 1
@@ -1713,7 +1713,7 @@ const _generateStyles = (light, placeholder) => {
   } else {
     newStyles = {
       default: {
-        backgroundColor: white,
+        background: white,
         borderColor: offBlack16,
         borderWidth: 1,
         color: placeholder ? offBlack64 : offBlack
@@ -1732,7 +1732,7 @@ const _generateStyles = (light, placeholder) => {
         paddingRight: adjustedPaddingRight
       },
       disabled: {
-        backgroundColor: "transparent",
+        background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offWhite,
         borderColor: offBlack16,
         color: offBlack64,
         cursor: "auto"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.6.0",
+  "version": "2.6.4",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,17 +16,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-button": "^2.10.2",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-button": "^2.11.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.1.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.24",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.1",
-    "@khanacademy/wonder-blocks-layout": "^1.4.6",
-    "@khanacademy/wonder-blocks-modal": "^2.1.45",
+    "@khanacademy/wonder-blocks-core": "^4.2.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.25",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.3",
+    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-modal": "^2.2.1",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.28"
+    "@khanacademy/wonder-blocks-typography": "^1.1.29"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -39,6 +39,6 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.2.0"
+    "wb-dev-build-settings": "^0.3.0"
   }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -651,7 +651,7 @@ exports[`wonder-blocks-dropdown example 4 1`] = `
           "touchAction": "manipulation",
         }
       }
-      tabIndex={-1}
+      tabIndex={0}
       type="button"
     >
       <div
@@ -1134,8 +1134,8 @@ exports[`wonder-blocks-dropdown example 6 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1334,7 +1334,7 @@ exports[`wonder-blocks-dropdown example 8 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1470,7 +1470,7 @@ exports[`wonder-blocks-dropdown example 9 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1606,7 +1606,7 @@ exports[`wonder-blocks-dropdown example 10 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1627,7 +1627,7 @@ exports[`wonder-blocks-dropdown example 10 1`] = `
           "whiteSpace": "nowrap",
         }
       }
-      tabIndex={-1}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -1768,7 +1768,7 @@ exports[`wonder-blocks-dropdown example 11 1`] = `
               "border": 0,
             },
             "alignItems": "center",
-            "backgroundColor": "transparent",
+            "background": "transparent",
             "borderColor": "rgba(255,255,255,0.50)",
             "borderRadius": 4,
             "borderStyle": "solid",
@@ -1905,7 +1905,7 @@ exports[`wonder-blocks-dropdown example 12 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1926,7 +1926,7 @@ exports[`wonder-blocks-dropdown example 12 1`] = `
           "whiteSpace": "nowrap",
         }
       }
-      tabIndex={-1}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -2062,7 +2062,7 @@ exports[`wonder-blocks-dropdown example 13 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2198,7 +2198,7 @@ exports[`wonder-blocks-dropdown example 14 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2292,8 +2292,8 @@ exports[`wonder-blocks-dropdown example 14 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -2498,7 +2498,7 @@ exports[`wonder-blocks-dropdown example 16 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2635,7 +2635,7 @@ exports[`wonder-blocks-dropdown example 17 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2771,7 +2771,7 @@ exports[`wonder-blocks-dropdown example 18 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2907,7 +2907,7 @@ exports[`wonder-blocks-dropdown example 19 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -2998,8 +2998,8 @@ exports[`wonder-blocks-dropdown example 20 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -3138,7 +3138,7 @@ exports[`wonder-blocks-dropdown example 21 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3159,7 +3159,7 @@ exports[`wonder-blocks-dropdown example 21 1`] = `
           "whiteSpace": "nowrap",
         }
       }
-      tabIndex={-1}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -3295,7 +3295,7 @@ exports[`wonder-blocks-dropdown example 22 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3431,7 +3431,7 @@ exports[`wonder-blocks-dropdown example 23 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3567,7 +3567,7 @@ exports[`wonder-blocks-dropdown example 24 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3661,8 +3661,8 @@ exports[`wonder-blocks-dropdown example 24 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -3801,7 +3801,7 @@ exports[`wonder-blocks-dropdown example 25 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "background": "#ffffff",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3984,7 +3984,7 @@ exports[`wonder-blocks-dropdown example 27 1`] = `
           "border": 0,
         },
         "alignItems": "center",
-        "backgroundColor": "#ffffff",
+        "background": "#ffffff",
         "borderColor": "rgba(33,36,44,0.16)",
         "borderRadius": 4,
         "borderStyle": "solid",

package/src/components/multi-select.stories.js

@@ -3,11 +3,12 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
 import type {StoryComponentType} from "@storybook/react";
 
+import {MultiSelect, OptionItem} from "../index.js";
+
 export default {
     title: "Dropdown / MultiSelect",
 };
@@ -94,6 +95,20 @@ export const CustomStylesOpened: StoryComponentType = () => (
     <MultiSelectWithCustomStyles opened={true} />
 );
 
+export const DisabledMultiSelect: StoryComponentType = () => (
+    <MultiSelect disabled={true} onChange={() => {}}>
+        <OptionItem label="Mercury" value="1" />
+        <OptionItem label="Venus" value="2" />
+    </MultiSelect>
+);
+
+DisabledMultiSelect.parameters = {
+    docs: {
+        storyDescription:
+            "`MultiSelect` can be disabled by passing `disabled={true}`. This can be useful when you want to disable a control temporarily.",
+    },
+};
+
 const styles = StyleSheet.create({
     setWidth: {
         minWidth: 170,

package/src/components/option-item.js

@@ -190,7 +190,7 @@ const {blue, white, offBlack, offBlack32} = Color;
 const styles = StyleSheet.create({
     itemContainer: {
         flexDirection: "row",
-        backgroundColor: white,
+        background: white,
         color: offBlack,
         alignItems: "center",
         height: DROPDOWN_ITEM_HEIGHT,

package/src/components/select-opener.js

@@ -231,7 +231,7 @@ const _generateStyles = (light, placeholder) => {
     if (light) {
         newStyles = {
             default: {
-                backgroundColor: "transparent",
+                background: "transparent",
                 color: placeholder ? white50 : white,
                 borderColor: white50,
                 borderWidth: 1,
@@ -261,7 +261,7 @@ const _generateStyles = (light, placeholder) => {
     } else {
         newStyles = {
             default: {
-                backgroundColor: white,
+                background: white,
                 borderColor: offBlack16,
                 borderWidth: 1,
                 color: placeholder ? offBlack64 : offBlack,
@@ -280,7 +280,7 @@ const _generateStyles = (light, placeholder) => {
                 paddingRight: adjustedPaddingRight,
             },
             disabled: {
-                backgroundColor: "transparent",
+                background: Color.offWhite,
                 borderColor: offBlack16,
                 color: offBlack64,
                 cursor: "auto",

package/src/components/single-select.stories.js

@@ -4,7 +4,6 @@ import {StyleSheet} from "aphrodite";
 
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -12,6 +11,8 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
+import {SingleSelect, OptionItem} from "../index.js";
+
 export default {
     title: "Dropdown / SingleSelect",
 };
@@ -170,3 +171,21 @@ DropdownInModal.parameters = {
         disableSnapshot: true,
     },
 };
+
+export const DisabledSingleSelect: StoryComponentType = () => (
+    <SingleSelect
+        disabled={true}
+        placeholder="Choose a juice"
+        onChange={() => {}}
+    >
+        <OptionItem label="Banana juice" value="banana" />
+        <OptionItem label="Strawberry juice" value="strawberry" />
+    </SingleSelect>
+);
+
+DisabledSingleSelect.parameters = {
+    docs: {
+        storyDescription:
+            "`SingleSelect` can be disabled by passing `disabled={true}`. This can be useful when you want to disable a control temporarily.",
+    },
+};