[EXPERIMENT] WB-1588: Dropdowns + Cell prototype

packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

@@ -172,6 +172,8 @@ const CellCore = (props: CellCoreProps): React.ReactElement => {
         href,
         onClick,
         "aria-label": ariaLabel,
+        outerStyle,
+        role,
         target,
     } = props;
 
@@ -183,12 +185,14 @@ const CellCore = (props: CellCoreProps): React.ReactElement => {
                 disabled={disabled}
                 onClick={onClick}
                 href={href}
+                role={role}
                 hideDefaultFocusRing={true}
                 aria-label={ariaLabel ? ariaLabel : undefined}
                 target={target}
                 style={[
                     styles.wrapper,
                     styles.clickable,
+                    outerStyle,
                     active && styles.active,
                     disabled && styles.disabled,
                 ]}
@@ -203,8 +207,9 @@ const CellCore = (props: CellCoreProps): React.ReactElement => {
     // wrapper.
     return (
         <View
-            style={[styles.wrapper, active && styles.active]}
+            style={[styles.wrapper, outerStyle, active && styles.active]}
             aria-current={active ? "true" : undefined}
+            role={role}
         >
             <CellInner {...props} />
         </View>
@@ -216,8 +221,9 @@ const styles = StyleSheet.create({
         background: Color.white,
         color: Color.offBlack,
         display: "flex",
-        minHeight: CellMeasurements.cellMinHeight,
         textAlign: "left",
+        minHeight: 40,
+        width: "100%",
     },
 
     innerWrapper: {
@@ -262,6 +268,7 @@ const styles = StyleSheet.create({
      */
     clickable: {
         outline: "none",
+
         /**
          * States
          */
@@ -273,7 +280,7 @@ const styles = StyleSheet.create({
         },
 
         // focus (only visible when using keyboard navigation)
-        ":focus-visible": {
+        ":focus": {
             borderRadius: Spacing.xxxSmall_4,
             // To hide the internal corners of the cell.
             overflow: "hidden",
@@ -283,7 +290,7 @@ const styles = StyleSheet.create({
         // NOTE: We use a pseudo element to draw the focus ring because we can't
         // use `outline` since it conflicts with different layout contexts (e.g.
         // `View` elements add their own z-index).
-        [":focus-visible:after" as any]: {
+        [":focus:after" as any]: {
             content: "''",
             // Since we are using a pseudo element, we need to manually
             // calculate the width/height and use absolute position to

packages/wonder-blocks-cell/src/util/types.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
+import {ClickableRole} from "@khanacademy/wonder-blocks-clickable";
 
 /**
  * A set of values that can be used to configure the horizontal rule appearance.
@@ -87,6 +88,11 @@ export type CellProps = {
      * separate cells within groups such as lists. Defaults to `inset`.
      */
     horizontalRule?: HorizontalRuleVariant;
+    role?: ClickableRole;
+    /**
+     * Optional custom styles applied to the cell container.
+     */
+    outerStyle?: StyleType;
     /**
      * Optional custom styles applied to the cell container.
      */

packages/wonder-blocks-clickable/src/components/clickable.tsx

@@ -248,7 +248,7 @@ const Clickable = React.forwardRef(function Clickable(
             return (
                 <StyledButton
                     {...commonProps}
-                    type="button"
+                    type={props.role === "button" ? "button" : undefined}
                     aria-disabled={props.disabled}
                     onFocus={(e) => {
                         if (props.onFocus) {

packages/wonder-blocks-dropdown/src/components/action-item.tsx

@@ -1,22 +1,18 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import {Link} from "react-router-dom";
 import {__RouterContext} from "react-router";
 
+import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
-import {
-    getClickableBehavior,
-    isClientSideUrl,
-} from "@khanacademy/wonder-blocks-clickable";
-import {addStyle} from "@khanacademy/wonder-blocks-core";
+import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import {DROPDOWN_ITEM_HEIGHT} from "../util/constants";
 
-const {blue, white, offBlack, offBlack32} = Color;
+const {blue, white, offBlack32} = Color;
 
 type ActionProps = {
     /**
@@ -99,10 +95,6 @@ type DefaultProps = {
     role: ActionProps["role"];
 };
 
-const StyledAnchor = addStyle("a");
-const StyledButton = addStyle("button");
-const StyledLink = addStyle(Link);
-
 /**
  * The action item trigger actions, such as navigating to a different page or
  * opening a modal. Supply the href and/or onClick props. Used as a child of
@@ -150,65 +142,42 @@ export default class ActionItem extends React.Component<ActionProps> {
                 target={target}
             >
                 {(state, childrenProps) => {
-                    const {pressed, hovered, focused} = state;
+                    // const {pressed, hovered, focused} = state;
 
                     const defaultStyle = [
-                        styles.shared,
-                        disabled && styles.disabled,
-                        !disabled &&
-                            (pressed
-                                ? styles.active
-                                : (hovered || focused) && styles.focus),
+                        styles.wrapper,
+                        // styles.shared,
+                        // disabled && styles.disabled,
+                        // !disabled &&
+                        //     (pressed
+                        //         ? styles.a   ctive
+                        //         : (hovered || focused) && styles.focus),
                         // pass optional styles from react-window (if applies)
                         style,
                     ];
 
-                    const props = {
-                        "data-test-id": testId,
-                        disabled,
-                        role,
-                        style: [defaultStyle],
-                        ...childrenProps,
-                    } as const;
-
-                    const children = (
-                        <React.Fragment>
-                            <LabelMedium
-                                lang={lang}
-                                style={[indent && styles.indent, styles.label]}
-                            >
-                                {label}
-                            </LabelMedium>
-                        </React.Fragment>
+                    return (
+                        <CompactCell
+                            disabled={disabled}
+                            horizontalRule="none"
+                            outerStyle={defaultStyle}
+                            style={styles.shared}
+                            role={role}
+                            testId={testId}
+                            title={
+                                <LabelMedium
+                                    lang={lang}
+                                    style={[
+                                        indent && styles.indent,
+                                        styles.label,
+                                    ]}
+                                >
+                                    {label}
+                                </LabelMedium>
+                            }
+                            {...childrenProps}
+                        />
                     );
-
-                    if (href && !disabled) {
-                        return router &&
-                            !skipClientNav &&
-                            isClientSideUrl(href) ? (
-                            <StyledLink {...props} to={href}>
-                                {children}
-                            </StyledLink>
-                        ) : (
-                            <StyledAnchor
-                                {...props}
-                                href={href}
-                                target={target}
-                            >
-                                {children}
-                            </StyledAnchor>
-                        );
-                    } else {
-                        return (
-                            <StyledButton
-                                type="button"
-                                {...props}
-                                disabled={disabled}
-                            >
-                                {children}
-                            </StyledButton>
-                        );
-                    }
                 }}
             </ClickableBehavior>
         );
@@ -224,22 +193,29 @@ export default class ActionItem extends React.Component<ActionProps> {
 }
 
 const styles = StyleSheet.create({
-    shared: {
-        background: white,
-        color: offBlack,
-        textDecoration: "none",
-        border: "none",
-        outline: "none",
-        flexDirection: "row",
-        alignItems: "center",
-        display: "flex",
-        height: DROPDOWN_ITEM_HEIGHT,
-        minHeight: DROPDOWN_ITEM_HEIGHT,
-        paddingLeft: Spacing.medium_16,
-        paddingRight: Spacing.medium_16,
+    wrapper: {
         // This removes the 300ms click delay on mobile browsers by indicating that
         // "double-tap to zoom" shouldn't be used on this element.
         touchAction: "manipulation",
+
+        /**
+         * States
+         */
+        // Overrides the default cell state for the button element.
+        [":hover[aria-disabled=false]" as any]: {
+            color: white,
+            background: blue,
+        },
+
+        // active and pressed states
+        [":active[aria-disabled=false]" as any]: {
+            color: mix(fade(blue, 0.32), white),
+            background: mix(offBlack32, blue),
+        },
+    },
+    shared: {
+        height: DROPDOWN_ITEM_HEIGHT,
+        minHeight: DROPDOWN_ITEM_HEIGHT,
     },
 
     label: {
@@ -250,22 +226,4 @@ const styles = StyleSheet.create({
     indent: {
         marginLeft: Spacing.medium_16,
     },
-
-    // hover and focus states
-    focus: {
-        color: white,
-        background: blue,
-    },
-
-    // active and pressed states
-    active: {
-        color: mix(fade(blue, 0.32), white),
-        background: mix(offBlack32, blue),
-    },
-
-    // disabled state
-    disabled: {
-        color: offBlack32,
-        cursor: "default",
-    },
 });

packages/wonder-blocks-dropdown/src/components/check.tsx

@@ -5,7 +5,7 @@
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 
 const {offBlack, offBlack32, white} = Color;
 
 /**
  * Props describing the state of the OptionItem, shared by the checkbox
@@ -28,18 +28,18 @@
  * The check component used by OptionItem.
  */
 const Check = function (props: CheckProps): React.ReactElement {
     const {disabled, selected, pressed, hovered, focused} = props;
     return (
         <PhosphorIcon
             icon={checkIcon}
             size="small"
-            color={
-                disabled
-                    ? offBlack32
-                    : pressed || hovered || focused
-                    ? white
-                    : offBlack
-            }
+            // color={
+            //     disabled
+            //         ? offBlack32
+            //         : pressed || hovered || focused
+            //         ? white
+            //         : offBlack
+            // }
             style={[styles.bounds, !selected && styles.hide]}
         />
     );

packages/wonder-blocks-dropdown/src/components/checkbox.tsx

@@ -31,21 +31,21 @@
  */
 const Checkbox = function (props: CheckProps): React.ReactElement {
     const {disabled, selected, pressed, hovered, focused} = props;
     const activeBlue = mix(offBlack32, blue);
     const clickInteraction = pressed || hovered || focused;
 
     const bgColor = disabled
         ? offWhite
         : selected && !clickInteraction
         ? blue
         : white;
-    const checkColor = disabled
-        ? offBlack32
-        : clickInteraction
-        ? pressed
-            ? activeBlue
-            : blue
-        : white;
+    // const checkColor = disabled
+    //     ? offBlack32
+    //     : clickInteraction
+    //     ? pressed
+    //         ? activeBlue
+    //         : blue
+    //     : white;
 
     return (
         <View
@@ -54,14 +54,14 @@
                 (clickInteraction || (selected && !disabled)) &&
                     styles.noBorder,
                 disabled && styles.disabledCheckbox,
-                {backgroundColor: bgColor},
+                // {backgroundColor: bgColor},
             ]}
         >
             {selected && (
                 <PhosphorIcon
                     icon={checkIcon}
                     size="small"
-                    color={checkColor}
+                    // color={checkColor}
                     style={[
                         {
                             // The check icon is smaller than the checkbox, as

packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx

@@ -527,7 +527,7 @@
      */
     focusCurrentItem(onFocus?: (node: HTMLElement) => void) {
         const focusedItemRef = this.state.itemRefs[this.focusedIndex];
-
+        console.log("shoould focus", focusedItemRef);
         if (focusedItemRef) {
             // force react-window to scroll to ensure the focused item is visible
             if (this.virtualizedListRef.current) {
@@ -543,6 +543,7 @@
             const node = ReactDOM.findDOMNode(
                 focusedItemRef.ref.current,
             ) as HTMLElement;
+            console.log("node!! ", node);
             if (node) {
                 node.focus();
                 // Keep track of the original index of the newly focused item.