[wb-1797-cell-color-contrast] Make sure inner wrapper has full height

Khan · Jan 29, 2025 · 2dfefe8 · 2dfefe8
1 parent 862e3c3
commit 2dfefe8
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 12 deletions.
diff --git a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
@@ -4,7 +4,12 @@ import {MemoryRouter, Route, Switch} from "react-router-dom";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
-import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    color,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
@@ -13,7 +18,7 @@ import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import ComponentInfo from "../components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {LabelSmall, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 
 export default {
     title: "Packages / Cell / DetailCell",
@@ -470,13 +475,11 @@ export const Scenarios = () => {
 };
 
 /**
- * Custom styling can be applied to the root using the `rootStyle` prop.
+ * Custom styling can be applied to the component using the `rootStyle` or
+ * `style` props.
  */
 export const CustomRootStyle = {
     args: {
-        rootStyle: {
-            borderRadius: border.radius.xLarge_12,
-        },
         title: "Title for article item",
         subtitle1: "Subtitle for article item",
         subtitle2: "Subtitle for article item",
@@ -487,10 +490,60 @@ export const CustomRootStyle = {
     render(args: PropsFor<typeof DetailCell>) {
         return (
             <View style={{gap: spacing.large_24}}>
-                Active:
-                <DetailCell {...args} active={true} />
-                Pressed:
-                <DetailCell {...args} />
+                Active (with rootStyle prop):
+                <DetailCell
+                    {...args}
+                    rootStyle={{borderRadius: border.radius.xLarge_12}}
+                    active={true}
+                />
+                Pressed (with rootStyle prop):
+                <DetailCell
+                    {...args}
+                    rootStyle={{borderRadius: border.radius.xLarge_12}}
+                />
+                Different content heights (with style prop)
+                <View
+                    style={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr 1fr",
+                        gap: "16px",
+                    }}
+                >
+                    <DetailCell
+                        title="Title"
+                        subtitle1="Subtitle 1"
+                        subtitle2="Subtitle2"
+                        onClick={() => {}}
+                        style={[
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                    <DetailCell
+                        title="Title"
+                        onClick={() => {}}
+                        style={[
+                            args.rootStyle,
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                    <DetailCell
+                        title="Title"
+                        onClick={() => {}}
+                        style={[
+                            args.rootStyle,
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                </View>
             </View>
         );
     },
@@ -499,9 +552,7 @@ export const CustomRootStyle = {
 
 const styles = StyleSheet.create({
     example: {
-        backgroundColor: color.offWhite,
         padding: spacing.large_24,
-        width: 376,
     },
     navigation: {
         border: `1px dashed ${color.purple}`,

diff --git a/packages/wonder-blocks-cell/src/components/internal/cell-core.tsx b/packages/wonder-blocks-cell/src/components/internal/cell-core.tsx
@@ -248,6 +248,8 @@ const styles = StyleSheet.create({
         // Hide overflow so that if custom styling applies a border radius, the
         // left visual indicator for press/active states does not overflow
         overflow: "hidden",
+        // Make sure inner wrapper is always the same height as parent
+        height: "100%",
 
         // Reduce the padding of the innerWrapper when the focus ring is
         // visible.