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

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.63](https://github.com/spaced-out/ui-design-system/compare/v0.0.62...v0.0.63) (2023-03-28)
+
+
+### Features
+
+* optional close button for submenu header ([#85](https://github.com/spaced-out/ui-design-system/issues/85)) ([24cfbdb](https://github.com/spaced-out/ui-design-system/commit/24cfbdb0f8c985fee3ecf8de6771f07eacae26ff))
+
+### [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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SubMenuItemText = exports.SubMenuItemIcon = exports.SubMenuItemAction = exports.SubMenuItem = exports.SubMenuGroup = exports.SubMenu = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _SubMenuModule = _interopRequireDefault(require("./SubMenu.module.css"));
@@ -66,6 +67,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 +94,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 +122,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 +144,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
@@ -150,7 +165,9 @@ const SubMenu = _ref6 => {
   let {
     classNames,
     children,
-    title
+    title,
+    onClose,
+    showClose = false
   } = _ref6;
   const childrenWithProps = React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
@@ -161,10 +178,23 @@ const SubMenu = _ref6 => {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _SubMenuModule.default.subMenuTitleAndButton
   }, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
     className: _SubMenuModule.default.subMenuHeader,
     color: _Text.TEXT_COLORS.inversePrimary
-  }, title), childrenWithProps);
+  }, title), showClose && /*#__PURE__*/React.createElement(_Button.Button, {
+    ariaLabel: "Icon Button",
+    iconRightName: "close",
+    onClick: onClose,
+    size: "small",
+    type: "ghost",
+    actionType: "button",
+    classNames: {
+      wrapper: _SubMenuModule.default.subMenuCloseButton,
+      icon: _SubMenuModule.default.subMenuCloseIcon
+    }
+  })), childrenWithProps);
 };
 exports.SubMenu = SubMenu;
 SubMenu.displayName = 'SubMenu';

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import type {ColorTypes} from '../../types/typography';
 import classify from '../../utils/classify';
+import {Button} from '../Button';
 import type {IconProps} from '../Icon';
 import {Icon} from '../Icon';
 import type {TextProps} from '../Text';
@@ -97,6 +98,12 @@ export const SubMenuItem: React$AbstractComponent<
       }
     };
 
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
     const selected = selectedMenuKey === menuKey;
 
     const getNamedComp = (comp: string) => {
@@ -129,8 +136,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 +185,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 +206,8 @@ export const SubMenuGroup = ({
       <div
         className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
         onClick={collapseHandler}
+        onKeyDown={onKeyDownHandlerHeader}
+        tabindex="0"
       >
         <SubTitleExtraSmall
           color={TEXT_COLORS.inverseSecondary}
@@ -226,12 +242,16 @@ export type SubMenuProps = {
   classNames?: ClassNames,
   title: string,
   children?: React.Node,
+  onClose?: () => mixed,
+  showClose?: boolean,
 };
 
 export const SubMenu = ({
   classNames,
   children,
   title,
+  onClose,
+  showClose = false,
 }: SubMenuProps): React.Node => {
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
@@ -241,12 +261,28 @@ export const SubMenu = ({
 
   return (
     <div className={classify(css.subMenuWrapper, classNames?.wrapper)}>
-      <SubTitleMedium
-        className={css.subMenuHeader}
-        color={TEXT_COLORS.inversePrimary}
-      >
-        {title}
-      </SubTitleMedium>
+      <div className={css.subMenuTitleAndButton}>
+        <SubTitleMedium
+          className={css.subMenuHeader}
+          color={TEXT_COLORS.inversePrimary}
+        >
+          {title}
+        </SubTitleMedium>
+        {showClose && (
+          <Button
+            ariaLabel="Icon Button"
+            iconRightName="close"
+            onClick={onClose}
+            size="small"
+            type="ghost"
+            actionType="button"
+            classNames={{
+              wrapper: css.subMenuCloseButton,
+              icon: css.subMenuCloseIcon,
+            }}
+          />
+        )}
+      </div>
       {childrenWithProps}
     </div>
   );

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

@@ -1,14 +1,20 @@
 @value ( size34, size60, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';
 
 @value (
+  colorFillNone,
+  colorFillPrimary,
+  colorFocusPrimary,
   colorNeutralDarkest,
   colorTextInverseSecondary,
   colorTextInversePrimary,
-  colorSubMenuBackgroundDefault
+  colorSubMenuBackgroundDefault,
+  colorSideMenuIconActive,
+  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;
@@ -20,13 +26,31 @@
   user-select: none;
 }
 
+.subMenuTitleAndButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
+}
+
+.subMenuCloseButton {
+  margin: spaceSmall;
+}
+
+.subMenuCloseButton:hover {
+  background-color: colorNeutralDarkest;
+}
+
+.subMenuCloseIcon {
+  color: colorSideMenuIconActive;
+}
+
 .subMenuHeader {
   height: size60;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: spaceMedium;
-  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
 }
 
 .menuChildWrap {
@@ -50,7 +74,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 +98,8 @@
 .subMenuGroup {
   display: flex;
   flex-direction: column;
-  margin-top: spaceXSmall;
+  margin-top: spaceMedium;
+  gap: spaceMedium;
 }
 
 .subMenuGroup.collapsed {
@@ -83,12 +122,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.63",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {