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

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.65](https://github.com/spaced-out/ui-design-system/compare/v0.0.64...v0.0.65) (2023-03-29)
+
+
+### Bug Fixes
+
+* remove focus for non-collapsible group title ([#88](https://github.com/spaced-out/ui-design-system/issues/88)) ([d324b67](https://github.com/spaced-out/ui-design-system/commit/d324b672eb12aa00311ebb9b6c73088470e678af))
+
+### [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

@@ -143,10 +143,12 @@ const SubMenuGroup = _ref5 => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, classNames?.groupHeader),
+    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, {
+      [_SubMenuModule.default.collapsible]: collapsible
+    }, classNames?.groupHeader),
     onClick: collapseHandler,
     onKeyDown: onKeyDownHandlerHeader,
-    tabindex: "0"
+    tabIndex: collapsible ? 0 : -1
   }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SubMenuModule.default.groupTitle

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

@@ -204,10 +204,14 @@ export const SubMenuGroup = ({
   return (
     <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
       <div
-        className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
+        className={classify(
+          css.subMenuGroupHeader,
+          {[css.collapsible]: collapsible},
+          classNames?.groupHeader,
+        )}
         onClick={collapseHandler}
         onKeyDown={onKeyDownHandlerHeader}
-        tabindex="0"
+        tabIndex={collapsible ? 0 : -1}
       >
         <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';
 
@@ -65,7 +65,7 @@
 .subMenuGroupWrapper {
   display: flex;
   flex-direction: column;
-  padding: spaceMedium spaceNone;
+  padding: spaceSmall spaceNone;
   flex: auto;
 }
 
@@ -76,19 +76,15 @@
   cursor: pointer;
   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;
+.subMenuGroupHeader.collapsible:focus {
+  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.65",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {