@spaced-out/ui-design-system 0.0.64 → 0.0.66

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.66](https://github.com/spaced-out/ui-design-system/compare/v0.0.65...v0.0.66) (2023-03-30)
+
+
+### Bug Fixes
+
+* onkeydown fix for clickable icon ([#89](https://github.com/spaced-out/ui-design-system/issues/89)) ([28c9c1a](https://github.com/spaced-out/ui-design-system/commit/28c9c1a6f65934c644959c4105c957e008881b7d))
+
+### [0.0.65](https://github.com/spaced-out/ui-design-system/compare/v0.0.64...v0.0.65) (2023-03-29)
+
+
+### Bug Fixes
+
+* remove focus for non-collapsible group title ([#88](https://github.com/spaced-out/ui-design-system/issues/88)) ([d324b67](https://github.com/spaced-out/ui-design-system/commit/d324b672eb12aa00311ebb9b6c73088470e678af))
+
 ### [0.0.64](https://github.com/spaced-out/ui-design-system/compare/v0.0.63...v0.0.64) (2023-03-29)
 
 

package/lib/components/Icon/ClickableIcon.js

@@ -19,9 +19,18 @@ const ClickableIcon = _ref => {
     size = 'medium',
     className,
     ariaLabel,
+    onClick,
     ...props
   } = _ref;
+  const onKeyDownHandler = e => {
+    e.preventDefault();
+    if (e.key === 'Enter') {
+      onClick && onClick(e);
+    }
+  };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
+    onClick: onClick,
+    onKeyDown: onKeyDownHandler,
     ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',

package/lib/components/Icon/ClickableIcon.js.flow

@@ -17,23 +17,34 @@ export const ClickableIcon = ({
   size = 'medium',
   className,
   ariaLabel,
+  onClick,
   ...props
-}: IconProps): React.Node => (
-  <UnstyledButton
-    {...props}
-    ariaLabel={ariaLabel}
-    className={classify(
-      css.button,
-      {
-        [css.small]: size === 'small',
-        [css.medium]: size === 'medium',
-      },
-      className,
-    )}
-  >
-    <Icon size={size} {...props} />
-  </UnstyledButton>
-);
+}: IconProps): React.Node => {
+  const onKeyDownHandler = (e) => {
+    e.preventDefault();
+    if (e.key === 'Enter') {
+      onClick && onClick(e);
+    }
+  };
+  return (
+    <UnstyledButton
+      {...props}
+      onClick={onClick}
+      onKeyDown={onKeyDownHandler}
+      ariaLabel={ariaLabel}
+      className={classify(
+        css.button,
+        {
+          [css.small]: size === 'small',
+          [css.medium]: size === 'medium',
+        },
+        className,
+      )}
+    >
+      <Icon size={size} {...props} />
+    </UnstyledButton>
+  );
+};
 
 export type CloseIconProps = {
   size?: IconSize,

package/lib/components/SubMenu/SubMenu.js

@@ -143,10 +143,12 @@ const SubMenuGroup = _ref5 => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, classNames?.groupHeader),
+    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, {
+      [_SubMenuModule.default.collapsible]: collapsible
+    }, classNames?.groupHeader),
     onClick: collapseHandler,
     onKeyDown: onKeyDownHandlerHeader,
-    tabIndex: "0"
+    tabIndex: collapsible ? 0 : -1
   }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SubMenuModule.default.groupTitle

package/lib/components/SubMenu/SubMenu.js.flow

@@ -204,10 +204,14 @@ export const SubMenuGroup = ({
   return (
     <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
       <div
-        className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
+        className={classify(
+          css.subMenuGroupHeader,
+          {[css.collapsible]: collapsible},
+          classNames?.groupHeader,
+        )}
         onClick={collapseHandler}
         onKeyDown={onKeyDownHandlerHeader}
-        tabIndex="0"
+        tabIndex={collapsible ? 0 : -1}
       >
         <SubTitleExtraSmall
           color={TEXT_COLORS.inverseSecondary}

package/lib/components/SubMenu/SubMenu.module.css

@@ -65,7 +65,7 @@
 .subMenuGroupWrapper {
   display: flex;
   flex-direction: column;
-  padding: spaceMedium spaceNone;
+  padding: spaceSmall spaceNone;
   flex: auto;
 }
 
@@ -82,7 +82,7 @@
   outline: none;
 }
 
-.subMenuGroupHeader:focus {
+.subMenuGroupHeader.collapsible:focus {
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {