@khanacademy/wonder-blocks-dropdown 2.6.3 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.6.4
+
+### Patch Changes
+
+-   77e7523c: Update disabled state to match design specs (offWhite bg)
+
 ## 2.6.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -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

@@ -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.3",
+  "version": "2.6.4",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",

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

@@ -1606,8 +1606,7 @@ exports[`wonder-blocks-dropdown example 10 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "background": "#ffffff",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -1906,8 +1905,7 @@ exports[`wonder-blocks-dropdown example 12 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "background": "#ffffff",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "borderColor": "rgba(33,36,44,0.16)",
           "borderRadius": 4,
           "borderStyle": "solid",
@@ -3140,8 +3138,7 @@ exports[`wonder-blocks-dropdown example 21 1`] = `
             "border": 0,
           },
           "alignItems": "center",
-          "background": "#ffffff",
-          "backgroundColor": "transparent",
+          "background": "#f7f8fa",
           "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/select-opener.js

@@ -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.",
+    },
+};