@khanacademy/wonder-blocks-cell - npm Package Compare versions

Comparing version 3.0.24 to 3.0.25

CHANGELOG.md

 # @khanacademy/wonder-blocks-cell
 
+## 3.0.25
+
+### Patch Changes
+
+-   80cab317: - Change styles to use CSS pseudo-classes instead of relying on `clickableState`
+    values.
+    -   Move `outline` to the button/link element instead of an internal container.
+-   Updated dependencies [80cab317]
+    -   @khanacademy/wonder-blocks-clickable@4.0.7
+
 ## 3.0.24
@@ -4,0 +14,0 @@

dist/es/index.js

@@ -109,3 +109,3 @@ import * as React from 'react';
 };
-const CellCore = props => {
+function CellInner(props) {
   const {
@@ -115,7 +115,5 @@ active,
     disabled,
-    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
-    onClick,
     rightAccessory = undefined,
@@ -125,27 +123,30 @@ rightAccessoryStyle = undefined,
     testId,
+    innerStyle
+  } = props;
+  const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
+  return React.createElement(View, {
+    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles]
+  }, React.createElement(LeftAccessory, {
+    leftAccessory: leftAccessory,
+    leftAccessoryStyle: leftAccessoryStyle,
+    disabled: disabled
+  }), React.createElement(View, {
+    style: styles$1.content,
+    testId: testId
+  }, children), React.createElement(RightAccessory, {
+    rightAccessory: rightAccessory,
+    rightAccessoryStyle: rightAccessoryStyle,
+    active: active,
+    disabled: disabled
+  }));
+}
+const CellCore = props => {
+  const {
+    active,
+    disabled,
+    href,
+    onClick,
     "aria-label": ariaLabel,
-    innerStyle,
     target
   } = props;
-  const renderCell = eventState => {
-    const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
-    return React.createElement(View, {
-      style: [styles$1.wrapper, (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
-      "aria-current": active ? "true" : undefined
-    }, 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
-    }), React.createElement(View, {
-      style: styles$1.content,
-      testId: testId
-    }, children), React.createElement(RightAccessory, {
-      rightAccessory: rightAccessory,
-      rightAccessoryStyle: rightAccessoryStyle,
-      active: active,
-      disabled: disabled
-    })));
-  };
   if (onClick || href) {
@@ -158,6 +159,11 @@ return React.createElement(Clickable, {
       "aria-label": ariaLabel ? ariaLabel : undefined,
-      target: target
-    }, eventState => renderCell(eventState));
+      target: target,
+      style: [styles$1.wrapper, styles$1.clickable, active && styles$1.active, disabled && styles$1.disabled],
+      "aria-current": active ? "true" : undefined
+    }, () => React.createElement(CellInner, props));
   }
-  return renderCell();
+  return React.createElement(View, {
+    style: [styles$1.wrapper, active && styles$1.active],
+    "aria-current": active ? "true" : undefined
+  }, React.createElement(CellInner, props));
 };
@@ -172,5 +178,9 @@ const styles$1 = StyleSheet.create({
   innerWrapper: {
+    minHeight: CellMeasurements.cellMinHeight,
     padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
     flexDirection: "row",
-    flex: 1
+    flex: 1,
+    ":focus-visible": {
+      padding: `${CellMeasurements.cellPadding.paddingVertical - 2}px ${CellMeasurements.cellPadding.paddingHorizontal - 2}px`
+    }
   },
@@ -190,28 +200,44 @@ content: {
   },
-  hovered: {
-    background: Color.offBlack8
+  clickable: {
+    outline: "none",
+    [":hover[aria-disabled=true]"]: {
+      cursor: "not-allowed"
+    },
+    ":focus-visible": {
+      borderRadius: Spacing.xxxSmall_4,
+      overflow: "hidden",
+      position: "relative"
+    },
+    [":focus-visible:after"]: {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      width: `calc(100% - ${Spacing.xxxSmall_4}px)`,
+      height: `calc(100% - ${Spacing.xxxSmall_4}px)`,
+      border: `${Spacing.xxxxSmall_2}px solid ${Color.blue}`,
+      borderRadius: Spacing.xxxSmall_4
+    },
+    [":hover[aria-disabled=false]"]: {
+      background: Color.offBlack8
+    },
+    [":active[aria-disabled=false]"]: {
+      background: Color.offBlack16
+    }
   },
-  focused: {
-    borderRadius: Spacing.xxxSmall_4,
-    outline: `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`,
-    outlineOffset: -Spacing.xxxxSmall_2,
-    overflow: "hidden"
-  },
-  pressed: {
-    background: Color.offBlack16
-  },
   active: {
     background: fade(Color.blue, 0.08),
-    color: Color.blue
+    color: Color.blue,
+    [":hover[aria-disabled=false]"]: {
+      background: fade(Color.blue, 0.16)
+    },
+    [":active[aria-disabled=false]"]: {
+      background: fade(Color.blue, 0.24)
+    }
   },
-  activeHovered: {
-    background: fade(Color.blue, 0.16)
-  },
-  activePressed: {
-    background: fade(Color.blue, 0.24)
-  },
   disabled: {
     color: Color.offBlack32,
-    ":hover": {
-      cursor: "not-allowed"
+    ":focus-visible": {
+      outline: "none"
     }
@@ -218,0 +244,0 @@ },

dist/index.js

@@ -138,3 +138,3 @@ 'use strict';
 };
-const CellCore = props => {
+function CellInner(props) {
   const {
@@ -144,7 +144,5 @@ active,
     disabled,
-    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
-    onClick,
     rightAccessory = undefined,
@@ -154,27 +152,30 @@ rightAccessoryStyle = undefined,
     testId,
+    innerStyle
+  } = props;
+  const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles]
+  }, React__namespace.createElement(LeftAccessory, {
+    leftAccessory: leftAccessory,
+    leftAccessoryStyle: leftAccessoryStyle,
+    disabled: disabled
+  }), React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$1.content,
+    testId: testId
+  }, children), React__namespace.createElement(RightAccessory, {
+    rightAccessory: rightAccessory,
+    rightAccessoryStyle: rightAccessoryStyle,
+    active: active,
+    disabled: disabled
+  }));
+}
+const CellCore = props => {
+  const {
+    active,
+    disabled,
+    href,
+    onClick,
     "aria-label": ariaLabel,
-    innerStyle,
     target
   } = props;
-  const renderCell = eventState => {
-    const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$1.wrapper, (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
-      "aria-current": active ? "true" : undefined
-    }, React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(LeftAccessory, {
-      leftAccessory: leftAccessory,
-      leftAccessoryStyle: leftAccessoryStyle,
-      disabled: disabled
-    }), React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$1.content,
-      testId: testId
-    }, children), React__namespace.createElement(RightAccessory, {
-      rightAccessory: rightAccessory,
-      rightAccessoryStyle: rightAccessoryStyle,
-      active: active,
-      disabled: disabled
-    })));
-  };
   if (onClick || href) {
@@ -187,6 +188,11 @@ return React__namespace.createElement(Clickable__default["default"], {
       "aria-label": ariaLabel ? ariaLabel : undefined,
-      target: target
-    }, eventState => renderCell(eventState));
+      target: target,
+      style: [styles$1.wrapper, styles$1.clickable, active && styles$1.active, disabled && styles$1.disabled],
+      "aria-current": active ? "true" : undefined
+    }, () => React__namespace.createElement(CellInner, props));
   }
-  return renderCell();
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$1.wrapper, active && styles$1.active],
+    "aria-current": active ? "true" : undefined
+  }, React__namespace.createElement(CellInner, props));
 };
@@ -201,5 +207,9 @@ const styles$1 = aphrodite.StyleSheet.create({
   innerWrapper: {
+    minHeight: CellMeasurements.cellMinHeight,
     padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
     flexDirection: "row",
-    flex: 1
+    flex: 1,
+    ":focus-visible": {
+      padding: `${CellMeasurements.cellPadding.paddingVertical - 2}px ${CellMeasurements.cellPadding.paddingHorizontal - 2}px`
+    }
   },
@@ -219,28 +229,44 @@ content: {
   },
-  hovered: {
-    background: Color__default["default"].offBlack8
+  clickable: {
+    outline: "none",
+    [":hover[aria-disabled=true]"]: {
+      cursor: "not-allowed"
+    },
+    ":focus-visible": {
+      borderRadius: Spacing__default["default"].xxxSmall_4,
+      overflow: "hidden",
+      position: "relative"
+    },
+    [":focus-visible:after"]: {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      width: `calc(100% - ${Spacing__default["default"].xxxSmall_4}px)`,
+      height: `calc(100% - ${Spacing__default["default"].xxxSmall_4}px)`,
+      border: `${Spacing__default["default"].xxxxSmall_2}px solid ${Color__default["default"].blue}`,
+      borderRadius: Spacing__default["default"].xxxSmall_4
+    },
+    [":hover[aria-disabled=false]"]: {
+      background: Color__default["default"].offBlack8
+    },
+    [":active[aria-disabled=false]"]: {
+      background: Color__default["default"].offBlack16
+    }
   },
-  focused: {
-    borderRadius: Spacing__default["default"].xxxSmall_4,
-    outline: `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}`,
-    outlineOffset: -Spacing__default["default"].xxxxSmall_2,
-    overflow: "hidden"
-  },
-  pressed: {
-    background: Color__default["default"].offBlack16
-  },
   active: {
     background: Color.fade(Color__default["default"].blue, 0.08),
-    color: Color__default["default"].blue
+    color: Color__default["default"].blue,
+    [":hover[aria-disabled=false]"]: {
+      background: Color.fade(Color__default["default"].blue, 0.16)
+    },
+    [":active[aria-disabled=false]"]: {
+      background: Color.fade(Color__default["default"].blue, 0.24)
+    }
   },
-  activeHovered: {
-    background: Color.fade(Color__default["default"].blue, 0.16)
-  },
-  activePressed: {
-    background: Color.fade(Color__default["default"].blue, 0.24)
-  },
   disabled: {
     color: Color__default["default"].offBlack32,
-    ":hover": {
-      cursor: "not-allowed"
+    ":focus-visible": {
+      outline: "none"
     }
@@ -247,0 +273,0 @@ },

package.json

 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "3.0.24",
+  "version": "3.0.25",
   "design": "v1",
@@ -17,3 +17,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.0.6",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.7",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
@@ -20,0 +20,0 @@ "@khanacademy/wonder-blocks-core": "^6.2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130422

increased by1.85%

Lines of code

1786

increased by5.31%

Dependency changes

• Updated@khanacademy/wonder-blocks-clickable@^4.0.7