@spaced-out/ui-design-system 0.0.61 → 0.0.62

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.62](https://github.com/spaced-out/ui-design-system/compare/v0.0.61...v0.0.62) (2023-03-28)
+
+
+### Bug Fixes
+
+* sub menu focus and avatar border ([#84](https://github.com/spaced-out/ui-design-system/issues/84)) ([151807a](https://github.com/spaced-out/ui-design-system/commit/151807a18c429670702f3504b9d4a61e4ea5da46))
+
 ### [0.0.61](https://github.com/spaced-out/ui-design-system/compare/v0.0.60...v0.0.61) (2023-03-27)
 
 

package/lib/components/AvatarGroup/AvatarGroup.module.css

@@ -22,6 +22,7 @@
 .avatarInGroup {
   display: flex;
   border: borderWidthTertiary solid colorBackgroundTertiary;
+  position: relative;
 }
 
 .nameList {

package/lib/components/Card/Card.js

@@ -48,13 +48,29 @@ exports.Card = Card;
 const ClickableCard = _ref2 => {
   let {
     classNames,
+    onClick,
+    disabled = false,
     ...props
   } = _ref2;
+  const onClickHandler = e => {
+    if (!disabled) {
+      onClick && onClick(e);
+    }
+  };
+  const onKeyDownHandler = e => {
+    if (e.key === 'Enter') {
+      onClickHandler(e);
+    }
+  };
   return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
     classNames: {
-      wrapper: (0, _classify.default)(_CardModule.default.clickableCard, classNames?.wrapper)
+      wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
+        [_CardModule.default.disabled]: disabled
+      }, classNames?.wrapper)
     },
-    tabIndex: "0"
+    tabIndex: "0",
+    onClick: onClickHandler,
+    onKeyDown: onKeyDownHandler
   }));
 };
 exports.ClickableCard = ClickableCard;

package/lib/components/Card/Card.js.flow

@@ -32,6 +32,7 @@ export type CardProps = {
 export type ClickableCardProps = {
   ...CardProps,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  disabled?: boolean,
   ...
 };
 
@@ -66,11 +67,33 @@ export const Card = ({
 
 export const ClickableCard = ({
   classNames,
+  onClick,
+  disabled = false,
   ...props
-}: ClickableCardProps): React.Node => (
-  <Card
-    {...props}
-    classNames={{wrapper: classify(css.clickableCard, classNames?.wrapper)}}
-    tabIndex="0"
-  />
-);
+}: ClickableCardProps): React.Node => {
+  const onClickHandler = (e) => {
+    if (!disabled) {
+      onClick && onClick(e);
+    }
+  };
+  const onKeyDownHandler = (e) => {
+    if (e.key === 'Enter') {
+      onClickHandler(e);
+    }
+  };
+  return (
+    <Card
+      {...props}
+      classNames={{
+        wrapper: classify(
+          css.clickableCard,
+          {[css.disabled]: disabled},
+          classNames?.wrapper,
+        ),
+      }}
+      tabIndex="0"
+      onClick={onClickHandler}
+      onKeyDown={onKeyDownHandler}
+    />
+  );
+};

package/lib/components/Card/Card.module.css

@@ -21,6 +21,9 @@
   cursor: pointer;
   outline: none;
 }
+.clickableCard.disabled {
+  pointer-events: none;
+}
 
 .clickableCard:hover {
   border-color: colorBorderSecondary;

package/lib/components/SubMenu/SubMenu.js

@@ -66,6 +66,11 @@ const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       onChange && onChange(menuKey);
     }
   };
+  const onKeyDownHandler = e => {
+    if (e.key === 'Enter') {
+      onChangeHandler();
+    }
+  };
   const selected = selectedMenuKey === menuKey;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -88,8 +93,10 @@ const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       [_SubMenuModule.default.selected]: selected,
       [_SubMenuModule.default.disabled]: disabled
     }, classNames?.wrapper),
+    onKeyDown: onKeyDownHandler,
     onClick: onChangeHandler,
-    ref: ref
+    ref: ref,
+    tabIndex: disabled ? '-1' : 0
   }), /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.menuIconName
   }, getNamedComp('SubMenuItemIcon'), getNamedComp('SubMenuItemText')), getNamedComp('SubMenuItemAction'));
@@ -114,6 +121,11 @@ const SubMenuGroup = _ref5 => {
       onChange(value);
     }
   };
+  const onKeyDownHandlerHeader = e => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
   const childrenWithProps = React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
@@ -131,7 +143,9 @@ const SubMenuGroup = _ref5 => {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, classNames?.groupHeader),
-    onClick: collapseHandler
+    onClick: collapseHandler,
+    onKeyDown: onKeyDownHandlerHeader,
+    tabindex: "0"
   }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SubMenuModule.default.groupTitle

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

@@ -97,6 +97,12 @@ export const SubMenuItem: React$AbstractComponent<
       }
     };
 
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
     const selected = selectedMenuKey === menuKey;
 
     const getNamedComp = (comp: string) => {
@@ -129,8 +135,10 @@ export const SubMenuItem: React$AbstractComponent<
           },
           classNames?.wrapper,
         )}
+        onKeyDown={onKeyDownHandler}
         onClick={onChangeHandler}
         ref={ref}
+        tabIndex={disabled ? '-1' : 0}
       >
         <div className={css.menuIconName}>
           {getNamedComp('SubMenuItemIcon')}
@@ -176,6 +184,11 @@ export const SubMenuGroup = ({
       onChange(value);
     }
   };
+  const onKeyDownHandlerHeader = (e) => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const {disabled: disabledChild} = child.props;
@@ -192,6 +205,8 @@ export const SubMenuGroup = ({
       <div
         className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
         onClick={collapseHandler}
+        onKeyDown={onKeyDownHandlerHeader}
+        tabindex="0"
       >
         <SubTitleExtraSmall
           color={TEXT_COLORS.inverseSecondary}

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

@@ -1,14 +1,19 @@
 @value ( size34, size60, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';
 
 @value (
+  colorFillNone,
+  colorFillPrimary,
+  colorFocusPrimary,
   colorNeutralDarkest,
   colorTextInverseSecondary,
   colorTextInversePrimary,
-  colorSubMenuBackgroundDefault
+  colorSubMenuBackgroundDefault,
+  colorSuccess,
+  colorFocusDanger
    ) from '../../styles/variables/_color.css';
 @value ( spaceNone, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';
 
-@value ( borderRadiusSmall, borderWidthPrimary) from '../../styles/variables/_border.css';
+@value ( borderWidthTertiary, borderRadiusSmall, borderWidthPrimary, borderRadiusMedium, borderWidthNone) from '../../styles/variables/_border.css';
 
 .subMenuWrapper {
   background: colorSubMenuBackgroundDefault;
@@ -50,7 +55,21 @@
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
-  padding: spaceNone spaceXSmall spaceNone spaceXSmall;
+  padding: spaceXSmall;
+  border-radius: borderRadiusSmall;
+  border: borderWidthTertiary solid colorFillNone;
+}
+
+.subMenuGroupHeader:focus-within {
+  border: borderWidthTertiary solid colorFocusPrimary;
+}
+
+.subMenuGroupHeader:focus-visible {
+  outline: none;
+}
+
+.subMenuGroupHeader:focus {
+  border: borderWidthTertiary solid colorFocusPrimary;
 }
 
 .groupTitle {
@@ -60,7 +79,8 @@
 .subMenuGroup {
   display: flex;
   flex-direction: column;
-  margin-top: spaceXSmall;
+  margin-top: spaceMedium;
+  gap: spaceMedium;
 }
 
 .subMenuGroup.collapsed {
@@ -83,12 +103,23 @@
   width: sizeFluid;
   cursor: pointer;
   padding: spaceXSmall;
+  box-sizing: border-box;
+  border: borderWidthTertiary solid colorFillNone;
 }
 
 .menuItem:not(.selected):hover {
   color: colorTextInversePrimary;
 }
 
+.menuItem:focus-visible {
+  outline: none;
+}
+
+.menuItem:focus {
+  background: colorNeutralDarkest;
+  border: borderWidthTertiary solid colorFocusPrimary;
+}
+
 .menuIcon {
   color: inherit;
 }

package/package.json

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