Add PhosphorIcon support to remaining WB packages (#2116)

## Summary: Replaces the `Icon` component with `PhosphorIcon` in the following packages: - `wonder-blocks-birthday-picker` - `wonder-blocks-form` - `wonder-blocks-search-field` This concludes the migration of all WB packages to `PhosphorIcon`. Issue: WB-1618, WB-1620, WB-1621 ## Test plan: Verify that the icons look correct in the following components: - `BirthdayPicker` <img width="1012" alt="Screenshot 2023-11-15 at 11 57 46 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/da2ff4ad-cee0-4daf-bf71-fc0f1fbc3396"> - `Checkbox` <img width="862" alt="Screenshot 2023-11-15 at 11 56 09 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/a6a0017a-c396-425b-8cb1-f5a12a8a6f40"> - `SearchField` <img width="1072" alt="Screenshot 2023-11-15 at 11 59 05 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/157e0606-09b6-4dee-9e95-01a18665dd1f"> Author: jandrade Reviewers: jeresig Required Reviewers: Approved By: jeresig Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ codecov/project, ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭ Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 1/2), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ⏭ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ⏭ dependabot Pull Request URL: #2116
Khan · Nov 15, 2023 · c8e9ce3 · c8e9ce3
1 parent af26c59
commit c8e9ce3
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 83 deletions.
diff --git a/.changeset/lazy-impalas-study.md b/.changeset/lazy-impalas-study.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": patch
+"@khanacademy/wonder-blocks-search-field": patch
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Add PhosphorIcon support (replace Icon)
diff --git a/packages/wonder-blocks-birthday-picker/package.json b/packages/wonder-blocks-birthday-picker/package.json
@@ -23,6 +23,7 @@
     "@khanacademy/wonder-blocks-typography": "^2.1.9"
   },
   "peerDependencies": {
+    "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
     "moment": "^2.24.0",
     "react": "16.14.0"

diff --git a/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx b/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx
@@ -4,9 +4,10 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body} from "@khanacademy/wonder-blocks-typography";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Color from "@khanacademy/wonder-blocks-color";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import infoIcon from "@phosphor-icons/core/bold/info-bold.svg";
 
 export type Labels = {
     /**
@@ -245,12 +246,14 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         return (
             <>
                 <Strut size={Spacing.xxxSmall_4} />
-                <View style={{flexDirection: "row"}} role="alert">
-                    <Icon
+                <View
+                    style={{flexDirection: "row", placeItems: "center"}}
+                    role="alert"
+                >
+                    <PhosphorIcon
                         size="small"
-                        icon={icons.info}
+                        icon={infoIcon}
                         color={Color.red}
-                        style={{marginTop: 3}}
                         aria-hidden="true"
                     />
                     <Strut size={Spacing.xxxSmall_4} />

diff --git a/packages/wonder-blocks-form/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap b/packages/wonder-blocks-form/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
@@ -86,27 +86,27 @@ exports[`CheckboxCore type:default checked:null 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "#ffffff",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(minus-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
-      fill="#ffffff"
-    />
-  </svg>,
+  />,
 ]
 `;
 
@@ -150,27 +150,27 @@ exports[`CheckboxCore type:default checked:true 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "#ffffff",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(check-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
-      fill="#ffffff"
-    />
-  </svg>,
+  />,
 ]
 `;
 
@@ -238,27 +238,27 @@ exports[`CheckboxCore type:disabled checked:null 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "rgba(33,36,44,0.32)",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(minus-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
-      fill="rgba(33,36,44,0.32)"
-    />
-  </svg>,
+  />,
 ]
 `;
 
@@ -294,27 +294,27 @@ exports[`CheckboxCore type:disabled checked:true 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "rgba(33,36,44,0.32)",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(check-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
-      fill="rgba(33,36,44,0.32)"
-    />
-  </svg>,
+  />,
 ]
 `;
 
@@ -404,27 +404,27 @@ exports[`CheckboxCore type:error checked:null 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "#ffffff",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(minus-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
-      fill="#ffffff"
-    />
-  </svg>,
+  />,
 ]
 `;
 
@@ -468,27 +468,27 @@ exports[`CheckboxCore type:error checked:true 1`] = `
     }
     type="checkbox"
   />,
-  <svg
+  <span
     className=""
-    height={16}
     style={
       {
+        "backgroundColor": "#ffffff",
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
+        "height": 12,
+        "margin": 2,
+        "maskImage": "url(check-bold.svg)",
+        "maskPosition": "center",
+        "maskRepeat": "no-repeat",
+        "maskSize": "100%",
         "pointerEvents": "none",
         "position": "absolute",
         "verticalAlign": "text-bottom",
+        "width": 12,
       }
     }
-    viewBox="0 0 16 16"
-    width={16}
-  >
-    <path
-      d="M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
-      fill="#ffffff"
-    />
-  </svg>,
+  />,
 ]
 `;
 

diff --git a/packages/wonder-blocks-form/src/components/checkbox-core.tsx b/packages/wonder-blocks-form/src/components/checkbox-core.tsx
@@ -3,9 +3,11 @@ import {StyleSheet} from "aphrodite";
 
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
-import Icon from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
+import minusIcon from "@phosphor-icons/core/bold/minus-bold.svg";
 
-import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 import type {ChoiceCoreProps, Checked} from "../util/types";
 
 // `AriaChecked` and `mapCheckedToAriaChecked()` are used to convert the
@@ -26,15 +28,12 @@ function mapCheckedToAriaChecked(value: Checked): AriaChecked {
 
 const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 
-const StyledInput = addStyle("input");
-
-const checkPath: IconAsset = {
-    small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
-};
+// The checkbox size
+const size = Spacing.medium_16;
+// The check icon size
+const checkSize = Spacing.small_12;
 
-const indeterminatePath: IconAsset = {
-    small: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
-};
+const StyledInput = addStyle("input");
 
 /**
  * The internal stateless ☑️ Checkbox
@@ -70,11 +69,18 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(
     ];
 
     const checkboxIcon = (
-        <Icon
+        <PhosphorIcon
             color={disabled ? offBlack32 : white}
-            icon={checked ? checkPath : indeterminatePath}
+            icon={checked ? checkIcon : minusIcon}
             size="small"
-            style={sharedStyles.checkboxIcon}
+            style={[
+                sharedStyles.checkboxIcon,
+                // The check icon is smaller than the checkbox, as per design.
+                {
+                    width: checkSize,
+                    height: checkSize,
+                },
+            ]}
         />
     );
 
@@ -111,8 +117,6 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(
     );
 });
 
-const size = 16;
-
 const sharedStyles = StyleSheet.create({
     // Reset the default styled input element
     inputReset: {
@@ -144,6 +148,8 @@ const sharedStyles = StyleSheet.create({
     checkboxIcon: {
         position: "absolute",
         pointerEvents: "none",
+        // This margin is to center the check icon in the checkbox.
+        margin: (size - checkSize) / 2,
     },
 });
 

diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx
@@ -2,12 +2,13 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import xIcon from "@phosphor-icons/core/regular/x.svg";
+import magnifyingGlassIcon from "@phosphor-icons/core/regular/magnifying-glass.svg";
 
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 import {View, IDProvider} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -156,8 +157,8 @@ const SearchField: React.ForwardRefExoticComponent<
         <IDProvider id={id} scope="search-field">
             {(uniqueId) => (
                 <View onClick={onClick} style={[styles.inputContainer, style]}>
-                    <Icon
-                        icon={icons.search}
+                    <PhosphorIcon
+                        icon={magnifyingGlassIcon}
                         size="medium"
                         color={Color.offBlack64}
                         style={styles.searchIcon}