@khanacademy/wonder-blocks-card 0.0.0-PR2799-20250925193915 → 0.0.0-PR2799-20250926210119

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2799-20250925193915
+## 0.0.0-PR2799-20250926210119
 
 ### Minor Changes
 

package/dist/es/index.js

@@ -9,6 +9,6 @@ import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 
 const DismissButton=props=>{const{onClick,style,testId}=props;return jsx(IconButton,{icon:xIcon,"aria-label":props["aria-label"]||"Close",onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=StyleSheet.create({root:{position:"absolute",insetInlineEnd:sizing.size_080,top:sizing.size_080,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
 
-const Card=React.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxs(View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?semanticColor.core.background.base[backgroundColor]:undefined;return StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&border.radius[borderRadius],borderWidth:border.width.thin,boxShadow:boxShadow.low,padding:padding&&sizing[padding],maxWidth:"295px",position:"relative",width:"100%"}})};
+const Card=React.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxs(View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?semanticColor.core.background.base[backgroundColor]:undefined;return StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&border.radius[borderRadius],borderWidth:border.width.thin,boxShadow:boxShadow.low,padding:padding&&sizing[padding],minInlineSize:sizing.size_280,position:"relative"}})};
 
 export { Card };

package/dist/index.js

@@ -37,6 +37,6 @@ var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
 const DismissButton=props=>{const{onClick,style,testId}=props;return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||"Close",onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=aphrodite.StyleSheet.create({root:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_080,top:wonderBlocksTokens.sizing.size_080,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
 
-const Card=React__namespace.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsxRuntime.jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?wonderBlocksTokens.semanticColor.core.background.base[backgroundColor]:undefined;return aphrodite.StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&wonderBlocksTokens.border.radius[borderRadius],borderWidth:wonderBlocksTokens.border.width.thin,boxShadow:wonderBlocksTokens.boxShadow.low,padding:padding&&wonderBlocksTokens.sizing[padding],maxWidth:"295px",position:"relative",width:"100%"}})};
+const Card=React__namespace.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsxRuntime.jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?wonderBlocksTokens.semanticColor.core.background.base[backgroundColor]:undefined;return aphrodite.StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&wonderBlocksTokens.border.radius[borderRadius],borderWidth:wonderBlocksTokens.border.width.thin,boxShadow:wonderBlocksTokens.boxShadow.low,padding:padding&&wonderBlocksTokens.sizing[padding],minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative"}})};
 
 exports.Card = Card;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-card",
-  "version": "0.0.0-PR2799-20250925193915",
+  "version": "0.0.0-PR2799-20250926210119",
   "design": "v1",
   "description": "Card component for Wonder Blocks.",
   "main": "dist/index.js",

package/src/components/card.tsx

@@ -100,6 +100,9 @@ type Props = {
  * use cases that involve displaying comparable content items side-by-side or
  * in structured layouts such as grids, lists, or dashboards.
  *
+ * Note: cards do not set a default width. Width styles should be set by the consumer
+ * with the `styles.root` prop.
+ *
  * ### Usage
  *
  * ```jsx
@@ -110,6 +113,7 @@ type Props = {
  * </Card>
  * ```
  */
+
 const Card = React.forwardRef(function Card(
     props: Props,
     ref: React.ForwardedRef<any>,
@@ -121,7 +125,7 @@ const Card = React.forwardRef(function Card(
         testId,
         backgroundColor = "default",
         borderRadius = "radius_080",
-        padding = "size_160", // TODO: figure out conversion to px
+        padding = "size_160",
         children,
         onDismiss,
         inert,
@@ -170,10 +174,9 @@ const getComponentStyles = ({
             borderRadius: borderRadius && border.radius[borderRadius],
             borderWidth: border.width.thin,
             boxShadow: boxShadow.low,
-            padding: padding && sizing[padding], // TODO: figure out conversion to px
-            maxWidth: "295px", // TODO: figure out max/min widths
+            padding: padding && sizing[padding], // TODO[WB-2094]: figure out conversion to px
+            minInlineSize: sizing.size_280,
             position: "relative",
-            width: "100%",
         },
     });
 };