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

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.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)
 
 

package/lib/components/SubMenu/SubMenu.js

@@ -146,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

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

@@ -207,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}

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

@@ -12,7 +12,7 @@
   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';
 
@@ -76,11 +76,6 @@
   cursor: pointer;
   padding: spaceXSmall;
   border-radius: borderRadiusSmall;
-  border: borderWidthTertiary solid colorFillNone;
-}
-
-.subMenuGroupHeader:focus-within {
-  border: borderWidthTertiary solid colorFocusPrimary;
 }
 
 .subMenuGroupHeader:focus-visible {
@@ -88,7 +83,8 @@
 }
 
 .subMenuGroupHeader:focus {
-  border: borderWidthTertiary solid colorFocusPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
 }
 
 .groupTitle {
@@ -98,8 +94,8 @@
 .subMenuGroup {
   display: flex;
   flex-direction: column;
-  margin-top: spaceMedium;
-  gap: spaceMedium;
+  margin-top: spaceXSmall;
+  gap: spaceXXSmall;
 }
 
 .subMenuGroup.collapsed {
@@ -123,7 +119,6 @@
   cursor: pointer;
   padding: spaceXSmall;
   box-sizing: border-box;
-  border: borderWidthTertiary solid colorFillNone;
 }
 
 .menuItem:not(.selected):hover {
@@ -136,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.63",
+  "version": "0.0.64",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {