[wb-1797-cell-color-contrast] rework styling for the left bar indicat…

…or so that we don't set overflow: hidden on clickable items since that was causing layout issues in OptionItems for dropdown components

__docs__/wonder-blocks-cell/detail-cell.stories.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import type {Meta, StoryObj} from "@storybook/react";
 
-import {View} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
@@ -475,16 +475,26 @@ export const Scenarios = () => {
 export const CustomRootStyle = {
     args: {
         rootStyle: {
-            borderRadius: border.radius.large_6,
+            borderRadius: border.radius.xLarge_12,
         },
-        active: true,
         title: "Title for article item",
         subtitle1: "Subtitle for article item",
         subtitle2: "Subtitle for article item",
         leftAccessory: (
             <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
         ),
     },
+    render(args: PropsFor<typeof DetailCell>) {
+        return (
+            <View style={{gap: spacing.large_24}}>
+                Active:
+                <DetailCell {...args} active={true} />
+                Pressed:
+                <DetailCell {...args} />
+            </View>
+        );
+    },
+    parameters: {pseudo: {active: true}},
 };
 
 const styles = StyleSheet.create({

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

@@ -234,16 +234,17 @@ const styles = StyleSheet.create({
         minHeight: CellMeasurements.cellMinHeight,
         textAlign: "left",
         width: "100%",
-        // Hide overflow so that if custom styling applies a border radius, the
-        // left visual indicator for press/active states does not overflow
-        overflow: "hidden",
     },
 
     innerWrapper: {
         minHeight: CellMeasurements.cellMinHeight,
         padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
         flexDirection: "row",
         flex: 1,
+        borderRadius: "inherit",
+        // Hide overflow so that if custom styling applies a border radius, the
+        // left visual indicator for press/active states does not overflow
+        overflow: "hidden",
 
         // Reduce the padding of the innerWrapper when the focus ring is
         // visible.
@@ -342,17 +343,25 @@ const styles = StyleSheet.create({
         // pressed + enabled
         [":active[aria-disabled=false]" as any]: {
             background: color.fadedBlue8,
-            position: "relative",
-            ":before": {
-                content: "''",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                bottom: 0,
-                width: border.width.thin,
-                backgroundColor: semanticColor.surface.emphasis,
-            },
         },
+        // press + enabled + not currently selected (active prop: false)
+        // Using the first child to apply the left bar indicator on the pressed
+        // state because setting the styles on the clickable element
+        // directly causes issues since overflow must be hidden for cases where
+        // the border is rounded
+        [":active[aria-disabled=false]:not([aria-current=true]) > *:first-child" as any]:
+            {
+                position: "relative",
+                ":before": {
+                    content: "''",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    width: border.width.thin,
+                    backgroundColor: semanticColor.surface.emphasis,
+                },
+            },
     },
 
     active: {