@khanacademy/wonder-blocks-cell 2.1.0 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-cell
 
+## 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
+
+-   35b9ef9c: Add target prop to cell.
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -16,7 +16,7 @@ const CellMeasurements = {
    * The cell wrapper's gap.
    */
   cellPadding: {
-    paddingVertical: Spacing.xSmall_8,
+    paddingVertical: Spacing.small_12,
     paddingHorizontal: Spacing.medium_16
   },
 
@@ -24,15 +24,10 @@ 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.
    */
@@ -144,7 +139,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -183,7 +179,8 @@ const CellCore = props => {
       onClick: onClick,
       href: href,
       hideDefaultFocusRing: true,
-      "aria-label": ariaLabel ? ariaLabel : undefined
+      "aria-label": ariaLabel ? ariaLabel : undefined,
+      target: target
     }, eventState => renderCell(eventState));
   } // No click event attached, so just render the cell as-is.
 
@@ -205,8 +202,9 @@ const styles$1 = StyleSheet.create({
   },
   content: {
     alignSelf: "center",
-    overflowWrap: "break-word",
-    padding: `${CellMeasurements.contentVerticalSpacing}px 0`
+    // Expand the content to fill the available space.
+    flex: 1,
+    overflowWrap: "break-word"
   },
   accessory: {
     // Use content width by default.
@@ -219,11 +217,7 @@ const styles$1 = StyleSheet.create({
   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
   },
 
   /**

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.
    */
@@ -309,7 +304,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -348,7 +344,8 @@ const CellCore = props => {
       onClick: onClick,
       href: href,
       hideDefaultFocusRing: true,
-      "aria-label": ariaLabel ? ariaLabel : undefined
+      "aria-label": ariaLabel ? ariaLabel : undefined,
+      target: target
     }, eventState => renderCell(eventState));
   } // No click event attached, so just render the cell as-is.
 
@@ -370,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.
@@ -384,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.1.0",
+  "version": "2.2.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"

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

@@ -130,6 +130,7 @@ const CellCore = (props: CellCoreProps): React.Node => {
         testId,
         "aria-label": ariaLabel,
         innerStyle,
+        target,
     } = props;
 
     const renderCell = (eventState?: ClickableState): React.Node => {
@@ -200,6 +201,7 @@ const CellCore = (props: CellCoreProps): React.Node => {
                 href={href}
                 hideDefaultFocusRing={true}
                 aria-label={ariaLabel ? ariaLabel : undefined}
+                target={target}
             >
                 {(eventState) => renderCell(eventState)}
             </Clickable>
@@ -226,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: {
@@ -243,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.
      */

package/src/util/types.js

@@ -132,4 +132,12 @@ export type CellProps = {|
      * by default if react-router is present.
      */
     href?: string,
+
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
 |};