@khanacademy/wonder-blocks-cell 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/es/index.js

@@ -202,6 +202,8 @@ const styles$1 = StyleSheet.create({
   },
   content: {
     alignSelf: "center",
+    // Expand the content to fill the available space.
+    flex: 1,
     overflowWrap: "break-word"
   },
   accessory: {
@@ -215,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

@@ -367,6 +367,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   content: {
     alignSelf: "center",
+    // Expand the content to fill the available space.
+    flex: 1,
     overflowWrap: "break-word"
   },
   accessory: {
@@ -380,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.1",
+  "version": "2.2.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"

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

@@ -107,15 +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,6 +228,8 @@ const styles = StyleSheet.create({
 
     content: {
         alignSelf: "center",
+        // Expand the content to fill the available space.
+        flex: 1,
         overflowWrap: "break-word",
     },
 
@@ -244,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",
     },
 
     /**