@automattic/vip-design-system 1.6.1 → 1.6.3

package/build/system/Drawer/styles.js

@@ -59,7 +59,7 @@ var drawerContentStyles = exports.drawerContentStyles = function drawerContentSt
       {
         return _extends({}, defaultStyles, {
           backgroundColor: 'layer.1',
-          top: [56, 0, 0, 64]
+          top: [56, 56, 56, 64]
         });
       }
     default:
@@ -105,7 +105,7 @@ var drawerOverlayStyles = exports.drawerOverlayStyles = function drawerOverlaySt
     case 'right-header':
       {
         return _extends({}, defaultStyles, {
-          top: [56, 0, 0, 64]
+          top: [56, 56, 56, 64]
         });
       }
     default:

package/build/system/Nav/Nav.stories.js

@@ -100,11 +100,10 @@ var Menu = exports.Menu = {
       children: [(0, _jsxRuntime.jsxs)("p", {
         children: [(0, _jsxRuntime.jsx)("strong", {
           children: "Variant: Menu"
-        }), "."]
+        }), ". This menu takes full width by default. You can put it in a container with constrained width.."]
       }), (0, _jsxRuntime.jsxs)(_Nav.Nav.Menu, {
         sx: {
-          mb: 4,
-          width: 250
+          mb: 4
         },
         label: "Nav Menu",
         children: [(0, _jsxRuntime.jsx)(_NavItem.NavItem.Menu, {
@@ -118,7 +117,6 @@ var Menu = exports.Menu = {
           children: "Overview"
         }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Menu, {
           as: CustomLink,
-          active: true,
           href: "https://random-website.com/",
           renderIcon: function renderIcon(size) {
             return (0, _jsxRuntime.jsx)(_bi.BiWindows, {

package/build/system/Nav/styles.js

@@ -299,7 +299,7 @@ var navItemLinkStyles = exports.navItemLinkStyles = function navItemLinkStyles(v
 };
 var navItemLinkVariantStyles = exports.navItemLinkVariantStyles = function navItemLinkVariantStyles(variant) {
   var defaultStyles = {
-    width: 'max-content',
+    width: '100%',
     borderColor: 'transparent'
   };
   switch (variant) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Drawer/styles.ts

@@ -59,7 +59,7 @@ export const drawerContentStyles = (
 			return {
 				...defaultStyles,
 				backgroundColor: 'layer.1',
-				top: [ 56, 0, 0, 64 ],
+				top: [ 56, 56, 56, 64 ],
 			};
 		}
 		default: {
@@ -105,7 +105,7 @@ export const drawerOverlayStyles = (
 		case 'right-header': {
 			return {
 				...defaultStyles,
-				top: [ 56, 0, 0, 64 ],
+				top: [ 56, 56, 56, 64 ],
 			};
 		}
 		default: {

package/src/system/Nav/Nav.stories.tsx

@@ -138,10 +138,11 @@ export const Menu: Story = {
 	render: () => (
 		<>
 			<p>
-				<strong>Variant: Menu</strong>.
+				<strong>Variant: Menu</strong>. This menu takes full width by default. You can put it in a
+				container with constrained width..
 			</p>
 
-			<Nav.Menu sx={ { mb: 4, width: 250 } } label="Nav Menu">
+			<Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
 				<NavItem.Menu
 					href="https://wordpress.com"
 					renderIcon={ size => <BiGridAlt size={ size } /> }
@@ -151,7 +152,6 @@ export const Menu: Story = {
 				</NavItem.Menu>
 				<NavItem.Menu
 					as={ CustomLink }
-					active
 					href="https://random-website.com/"
 					renderIcon={ size => <BiWindows size={ size } /> }
 				>

package/src/system/Nav/styles.ts

@@ -303,7 +303,7 @@ export const navItemLinkStyles = ( variant: NavVariant ): ThemeUIStyleObject =>
 
 export const navItemLinkVariantStyles = ( variant: NavVariant ): ThemeUIStyleObject => {
 	const defaultStyles = {
-		width: 'max-content',
+		width: '100%',
 		borderColor: 'transparent',
 	};