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

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.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"));
@@ -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';
@@ -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,6 +8,7 @@
   colorTextInverseSecondary,
   colorTextInversePrimary,
   colorSubMenuBackgroundDefault,
+  colorSideMenuIconActive,
   colorSuccess,
   colorFocusDanger
    ) from '../../styles/variables/_color.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 {

package/package.json

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