@khanacademy/wonder-blocks-cell 2.2.0 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
+## 2.2.2
+
+### Patch Changes
+
+-   f74b7379: Fixes `CellCore` to set the styles properly (removed `marginLeft: auto` from accessory and expanded the content wrapper).
+
+## 2.2.1
+
+### Patch Changes
+
+-   eadd9c0d: Fix top vertical alignment between accessories and content
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -11,40 +11,16 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 
 const CellMeasurements = {
   cellMinHeight: Spacing.xxLarge_48,
-
-  /**
-   * The cell wrapper's gap.
-   */
   cellPadding: {
-    paddingVertical: Spacing.xSmall_8,
+    paddingVertical: Spacing.small_12,
     paddingHorizontal: Spacing.medium_16
   },
-
-  /**
-   * The DetailCell wrapper's gap.
-   */
   detailCellPadding: {
-    paddingVertical: Spacing.small_12,
+    paddingVertical: Spacing.medium_16,
     paddingHorizontal: Spacing.medium_16
   },
-
-  /**
-   * The extra vertical spacing added to the title/content wrapper.
-   */
-  contentVerticalSpacing: Spacing.xxxSmall_4,
-
-  /**
-   * The horizontal spacing between the left and right accessory.
-   */
   accessoryHorizontalSpacing: Spacing.medium_16
 };
-/**
- * Gets the horizontalRule style based on the variant.
- * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
- * rule.
- * @returns A styled horizontal rule.
- */
-
 const getHorizontalRuleStyles = horizontalRule => {
   switch (horizontalRule) {
     case "inset":
@@ -64,9 +40,7 @@ const styles$2 = StyleSheet.create({
       width: "100%",
       content: "''",
       position: "absolute",
-      // align to the bottom of the cell
       bottom: 0,
-      // align border to the right of the cell
       right: 0,
       height: Spacing.xxxxSmall_2,
       boxShadow: `inset 0px -1px 0px ${Color.offBlack8}`
@@ -74,16 +48,11 @@ const styles$2 = StyleSheet.create({
   },
   horizontalRuleInset: {
     ":after": {
-      // Inset doesn't include the left padding of the cell.
       width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
     }
   }
 });
 
-/**
- * Left Accessories can be defined using WB components such as Icon, IconButton,
- * or it can even be used for a custom node/component if needed.
- */
 const LeftAccessory = ({
   leftAccessory,
   leftAccessoryStyle,
@@ -93,17 +62,13 @@ const LeftAccessory = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  return React.createElement(React.Fragment, null, React.createElement(View, {
     style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends({}, leftAccessoryStyle)]
-  }, leftAccessory), /*#__PURE__*/React.createElement(Strut, {
+  }, leftAccessory), React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
   }));
 };
 
-/**
- * Right Accessories can be defined using WB components such as Icon,
- * IconButton, or it can even be used for a custom node/component if needed.
- */
 const RightAccessory = ({
   rightAccessory,
   rightAccessoryStyle,
@@ -114,21 +79,13 @@ const RightAccessory = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+  return React.createElement(React.Fragment, null, React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
-  }), /*#__PURE__*/React.createElement(View, {
+  }), React.createElement(View, {
     style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends({}, rightAccessoryStyle), active && styles$1.accessoryActive]
   }, rightAccessory));
 };
 
-/**
- * CellCore is the base cell wrapper. It's used as the skeleton/layout that is
- * used by CompactCell and DetailCell (and any other variants).
- *
- * Both variants share how they render their accessories, and the main
- * responsibility of this component is to render the contents that are passed in
- * (using the `children` prop).
- */
 const CellCore = props => {
   const {
     active,
@@ -150,36 +107,28 @@ const CellCore = props => {
 
   const renderCell = eventState => {
     const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles$1.wrapper, // focused applied to the main wrapper to make the border
-      // outline part of the wrapper
-      (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
+    return React.createElement(View, {
+      style: [styles$1.wrapper, (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
       "aria-current": active ? "true" : undefined
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [styles$1.innerWrapper, innerStyle, // custom styles
-      style, horizontalRuleStyles, disabled && styles$1.disabled, active && styles$1.active, // other states applied to the inner wrapper to blend
-      // the background color properly
-      !disabled && (eventState == null ? void 0 : eventState.hovered) && styles$1.hovered, // active + hovered
-      active && (eventState == null ? void 0 : eventState.hovered) && styles$1.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles$1.pressed, // active + pressed
-      !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles$1.activePressed]
-    }, /*#__PURE__*/React.createElement(LeftAccessory, {
+    }, React.createElement(View, {
+      style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles, disabled && styles$1.disabled, active && styles$1.active, !disabled && (eventState == null ? void 0 : eventState.hovered) && styles$1.hovered, active && (eventState == null ? void 0 : eventState.hovered) && styles$1.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles$1.pressed, !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles$1.activePressed]
+    }, React.createElement(LeftAccessory, {
       leftAccessory: leftAccessory,
       leftAccessoryStyle: leftAccessoryStyle,
       disabled: disabled
-    }), /*#__PURE__*/React.createElement(View, {
+    }), React.createElement(View, {
       style: styles$1.content,
       testId: testId
-    }, children), /*#__PURE__*/React.createElement(RightAccessory, {
+    }, children), React.createElement(RightAccessory, {
       rightAccessory: rightAccessory,
       rightAccessoryStyle: rightAccessoryStyle,
       active: active,
       disabled: disabled
     })));
-  }; // Pressable cell.
-
+  };
 
   if (onClick || href) {
-    return /*#__PURE__*/React.createElement(Clickable, {
+    return React.createElement(Clickable, {
       disabled: disabled,
       onClick: onClick,
       href: href,
@@ -187,8 +136,7 @@ const CellCore = props => {
       "aria-label": ariaLabel ? ariaLabel : undefined,
       target: target
     }, eventState => renderCell(eventState));
-  } // No click event attached, so just render the cell as-is.
-
+  }
 
   return renderCell();
 };
@@ -207,42 +155,24 @@ const styles$1 = StyleSheet.create({
   },
   content: {
     alignSelf: "center",
-    overflowWrap: "break-word",
-    padding: `${CellMeasurements.contentVerticalSpacing}px 0`
+    flex: 1,
+    overflowWrap: "break-word"
   },
   accessory: {
-    // Use content width by default.
     minWidth: "auto",
-    // Horizontal alignment of the accessory.
     alignItems: "center",
-    // Vertical alignment.
     alignSelf: "center"
   },
   accessoryRight: {
-    // The right accessory will have this color by default. Unless the
-    // accessory element overrides that color internally.
-    color: Color.offBlack64,
-    // Align the right accessory to the right side of the cell, so we can
-    // prevent the accessory from shifting left, if the content is too
-    // short.
-    marginLeft: "auto"
+    color: Color.offBlack64
   },
-
-  /**
-   * States
-   */
   hovered: {
     background: Color.offBlack8
   },
-  // Handling the focus ring internally because clickable doesn't support
-  // rounded focus ring.
   focused: {
     borderRadius: Spacing.xxxSmall_4,
     outline: `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`,
-    // The focus ring is not visible when there are stacked cells.
-    // Using outlineOffset to display the focus ring inside the cell.
     outlineOffset: -Spacing.xxxxSmall_2,
-    // To hide the internal corners of the cell.
     overflow: "hidden"
   },
   pressed: {
@@ -275,31 +205,13 @@ const styles$1 = StyleSheet.create({
 
 const _excluded$1 = ["title"];
 
-/**
- * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
- * with limited subviews and accessories. Typically they represent additional
- * info or selection lists. It has a minimum height of 48px and a non-bold
- * title. It does not have subtitles or a progress bar, and in general it has
- * less vertical space around text and accessories.
- *
- * ### Usage
- *
- * ```jsx
- * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
- *
- * <CompactCell
- *  title="Compact cell"
- *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
- * />
- * ```
- */
 function CompactCell(props) {
   const {
     title
   } = props,
         coreProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  return /*#__PURE__*/React.createElement(CellCore, coreProps, typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title);
+  return React.createElement(CellCore, coreProps, typeof title === "string" ? React.createElement(LabelMedium, null, title) : title);
 }
 
 const _excluded = ["title", "subtitle1", "subtitle2"];
@@ -313,7 +225,7 @@ const Subtitle = ({
   }
 
   if (typeof subtitle === "string") {
-    return /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(LabelSmall, {
       style: !disabled && styles.subtitle
     }, subtitle);
   }
@@ -321,27 +233,6 @@ const Subtitle = ({
   return subtitle;
 };
 
-/**
- * This is a variant of CompactCell that allows adding subtitles, before and
- * after the cell title. They typically represent an item that can be
- * clicked/tapped to view more complex details. They vary in height depending on
- * the presence or absence of subtitles, and they allow for a wide range of
- * functionality depending on which accessories are active.
- *
- * ### Usage
- *
- * ```jsx
- * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
- *
- * <DetailCell
- *  leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
- *  subtitle1="Subtitle 1"
- *  title="Detail cell"
- *  subtitle1="Subtitle 2"
- *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
- * />
- * ```
- */
 function DetailCell(props) {
   const {
     title,
@@ -350,16 +241,16 @@ function DetailCell(props) {
   } = props,
         coreProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(CellCore, _extends({}, coreProps, {
+  return React.createElement(CellCore, _extends({}, coreProps, {
     innerStyle: styles.innerWrapper
-  }), /*#__PURE__*/React.createElement(Subtitle, {
+  }), React.createElement(Subtitle, {
     subtitle: subtitle1,
     disabled: coreProps.disabled
-  }), subtitle1 && /*#__PURE__*/React.createElement(Strut, {
+  }), subtitle1 && React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
-  }), typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title, subtitle2 && /*#__PURE__*/React.createElement(Strut, {
+  }), typeof title === "string" ? React.createElement(LabelMedium, null, title) : title, subtitle2 && React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
-  }), /*#__PURE__*/React.createElement(Subtitle, {
+  }), React.createElement(Subtitle, {
     subtitle: subtitle2,
     disabled: coreProps.disabled
   }));
@@ -369,7 +260,6 @@ const styles = StyleSheet.create({
   subtitle: {
     color: Color.offBlack64
   },
-  // This is to override the default padding of the CellCore innerWrapper.
   innerWrapper: {
     padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`
   }

package/dist/index.js

@@ -126,7 +126,7 @@ const CellMeasurements = {
    * The cell wrapper's gap.
    */
   cellPadding: {
-    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xSmall_8,
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
     paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
   },
 
@@ -134,15 +134,10 @@ const CellMeasurements = {
    * The DetailCell wrapper's gap.
    */
   detailCellPadding: {
-    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16,
     paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
   },
 
-  /**
-   * The extra vertical spacing added to the title/content wrapper.
-   */
-  contentVerticalSpacing: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxSmall_4,
-
   /**
    * The horizontal spacing between the left and right accessory.
    */
@@ -372,8 +367,9 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   content: {
     alignSelf: "center",
-    overflowWrap: "break-word",
-    padding: `${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].contentVerticalSpacing}px 0`
+    // Expand the content to fill the available space.
+    flex: 1,
+    overflowWrap: "break-word"
   },
   accessory: {
     // Use content width by default.
@@ -386,11 +382,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   accessoryRight: {
     // The right accessory will have this color by default. Unless the
     // accessory element overrides that color internally.
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64,
-    // Align the right accessory to the right side of the cell, so we can
-    // prevent the accessory from shifting left, if the content is too
-    // short.
-    marginLeft: "auto"
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64
   },
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,19 +14,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "author": "",
   "license": "MIT"

package/src/components/__docs__/detail-cell.stories.js

@@ -107,14 +107,16 @@ export const DetailCellWithCustomStyles: StoryComponentType = () => (
         title="Title for article item"
         subtitle1="Subtitle for article item"
         subtitle2="Subtitle for article item"
-        leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+        leftAccessory={<Icon icon={icons.caretLeft} size="small" />}
         leftAccessoryStyle={{
-            minWidth: Spacing.xxLarge_48,
+            alignSelf: "flex-start",
         }}
         rightAccessory={<Icon icon={icons.caretRight} size="small" />}
         rightAccessoryStyle={{
-            minWidth: Spacing.medium_16,
-            alignSelf: "flex-end",
+            alignSelf: "flex-start",
+        }}
+        style={{
+            textAlign: "center",
         }}
     />
 );

package/src/components/internal/cell-core.js

@@ -228,8 +228,9 @@ const styles = StyleSheet.create({
 
     content: {
         alignSelf: "center",
+        // Expand the content to fill the available space.
+        flex: 1,
         overflowWrap: "break-word",
-        padding: `${CellMeasurements.contentVerticalSpacing}px 0`,
     },
 
     accessory: {
@@ -245,10 +246,6 @@ const styles = StyleSheet.create({
         // The right accessory will have this color by default. Unless the
         // accessory element overrides that color internally.
         color: Color.offBlack64,
-        // Align the right accessory to the right side of the cell, so we can
-        // prevent the accessory from shifting left, if the content is too
-        // short.
-        marginLeft: "auto",
     },
 
     /**

package/src/components/internal/common.js

@@ -14,7 +14,7 @@ export const CellMeasurements = {
      * The cell wrapper's gap.
      */
     cellPadding: {
-        paddingVertical: Spacing.xSmall_8,
+        paddingVertical: Spacing.small_12,
         paddingHorizontal: Spacing.medium_16,
     },
 
@@ -22,15 +22,10 @@ export const CellMeasurements = {
      * The DetailCell wrapper's gap.
      */
     detailCellPadding: {
-        paddingVertical: Spacing.small_12,
+        paddingVertical: Spacing.medium_16,
         paddingHorizontal: Spacing.medium_16,
     },
 
-    /**
-     * The extra vertical spacing added to the title/content wrapper.
-     */
-    contentVerticalSpacing: Spacing.xxxSmall_4,
-
     /**
      * The horizontal spacing between the left and right accessory.
      */