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

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.64](https://github.com/spaced-out/ui-design-system/compare/v0.0.63...v0.0.64) (2023-03-29)
+
+
+### Features
+
+* submenu spacing correction ([#87](https://github.com/spaced-out/ui-design-system/issues/87)) ([6cc9011](https://github.com/spaced-out/ui-design-system/commit/6cc901182bb2426ba02769f605b52126ff7a0267))
+
+### [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)
 
 

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"));
@@ -145,7 +146,7 @@ const SubMenuGroup = _ref5 => {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, classNames?.groupHeader),
     onClick: collapseHandler,
     onKeyDown: onKeyDownHandlerHeader,
-    tabindex: "0"
+    tabIndex: "0"
   }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SubMenuModule.default.groupTitle
@@ -164,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)) {
@@ -175,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';
@@ -206,7 +207,7 @@ export const SubMenuGroup = ({
         className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
         onClick={collapseHandler}
         onKeyDown={onKeyDownHandlerHeader}
-        tabindex="0"
+        tabIndex="0"
       >
         <SubTitleExtraSmall
           color={TEXT_COLORS.inverseSecondary}
@@ -241,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)) {
@@ -256,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

@@ -8,10 +8,11 @@
   colorTextInverseSecondary,
   colorTextInversePrimary,
   colorSubMenuBackgroundDefault,
+  colorSideMenuIconActive,
   colorSuccess,
   colorFocusDanger
    ) from '../../styles/variables/_color.css';
-@value ( spaceNone, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';
+@value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';
 
 @value ( borderWidthTertiary, borderRadiusSmall, borderWidthPrimary, borderRadiusMedium, borderWidthNone) from '../../styles/variables/_border.css';
 
@@ -25,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 {
@@ -57,11 +76,6 @@
   cursor: pointer;
   padding: spaceXSmall;
   border-radius: borderRadiusSmall;
-  border: borderWidthTertiary solid colorFillNone;
-}
-
-.subMenuGroupHeader:focus-within {
-  border: borderWidthTertiary solid colorFocusPrimary;
 }
 
 .subMenuGroupHeader:focus-visible {
@@ -69,7 +83,8 @@
 }
 
 .subMenuGroupHeader:focus {
-  border: borderWidthTertiary solid colorFocusPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
 }
 
 .groupTitle {
@@ -79,8 +94,8 @@
 .subMenuGroup {
   display: flex;
   flex-direction: column;
-  margin-top: spaceMedium;
-  gap: spaceMedium;
+  margin-top: spaceXSmall;
+  gap: spaceXXSmall;
 }
 
 .subMenuGroup.collapsed {
@@ -104,7 +119,6 @@
   cursor: pointer;
   padding: spaceXSmall;
   box-sizing: border-box;
-  border: borderWidthTertiary solid colorFillNone;
 }
 
 .menuItem:not(.selected):hover {
@@ -117,7 +131,8 @@
 
 .menuItem:focus {
   background: colorNeutralDarkest;
-  border: borderWidthTertiary solid colorFocusPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
 }
 
 .menuIcon {

package/package.json

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