@automattic/vip-design-system 2.4.0 → 2.4.1

package/build/system/Nav/Nav.js

@@ -24,7 +24,7 @@ var NavBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-label": label,
     ref: ref,
     className: (0, _classnames["default"])(VIP_NAV, className),
-    sx: (0, _styles.navStyles)(variant),
+    sx: (0, _styles.navStyles)(variant, orientation),
     orientation: orientation,
     children: (0, _jsxRuntime.jsx)(NavigationMenu.List, {
       className: (0, _classnames["default"])(VIP_NAV + "-list"),

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

@@ -68,22 +68,34 @@ var Tab = exports.Tab = {
         },
         label: "Nav Tab",
         children: [(0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
-          active: true,
           as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
+          href: "#!",
           children: "PHP"
         }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
           as: _CustomLink.CustomLink,
-          href: "https://wordpress.com",
+          href: "#2!",
           children: "WordPress"
         }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
+          active: true,
           as: _CustomLink.CustomLink,
-          href: "https://newrelic.com/",
+          href: "#3!",
           children: "New Relic"
+        }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
+          as: _CustomLink.CustomLink,
+          href: "#4!",
+          children: "Datadog"
+        }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
+          as: _CustomLink.CustomLink,
+          href: "#4!",
+          children: "OnePlus"
+        }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
+          as: _CustomLink.CustomLink,
+          href: "#5!",
+          children: "Rollbar"
         }), (0, _jsxRuntime.jsx)(_NavItem.NavItem.Tab, {
           disabled: true,
           as: _CustomLink.CustomLink,
-          href: "https://google.com/",
+          href: "#6!",
           children: "Not accessible"
         })]
       })]

package/build/system/Nav/styles/variants/menu.d.ts

@@ -4,6 +4,7 @@ type MixedStyleProp = {
     [key: string]: string | number | MixedStyleProp | ThemeUIStyleObject;
 };
 export declare const menuItemStyles: (orientation: NavProps['orientation']) => ThemeUIStyleObject;
+export declare const tabItemStyles: (orientation: NavProps['orientation']) => ThemeUIStyleObject;
 export declare const menuInverseItemStyles: (orientation: NavProps['orientation']) => ThemeUIStyleObject;
 export declare const menuItemLinkStyles: MixedStyleProp;
 export declare const menuInverseItemLinkStyles: {

package/build/system/Nav/styles/variants/menu.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.menuItemStyles = exports.menuItemLinkStyles = exports.menuInverseItemStyles = exports.menuInverseItemLinkStyles = void 0;
+exports.tabItemStyles = exports.menuItemStyles = exports.menuItemLinkStyles = exports.menuInverseItemStyles = exports.menuInverseItemLinkStyles = void 0;
 var _primary = require("./primary");
 var _menuItemLinkStyles, _extends2;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -16,6 +16,13 @@ var menuItemStyles = exports.menuItemStyles = function menuItemStyles(orientatio
   });
 };
 
+// Tab Item Style <li>
+var tabItemStyles = exports.tabItemStyles = function tabItemStyles(orientation) {
+  return _extends({}, (0, _primary.defaultNavItemStyles)(orientation), {
+    mr: 0
+  });
+};
+
 // Menu Inverse Item Style <li>
 var menuInverseItemStyles = exports.menuInverseItemStyles = function menuInverseItemStyles(orientation) {
   return _extends({}, menuItemStyles(orientation), {

package/build/system/Nav/styles/variants/tabs.d.ts

@@ -1,3 +1,4 @@
 import { ThemeUIStyleObject } from 'theme-ui';
-export declare const tabRootStyles: ThemeUIStyleObject;
+import { NavProps } from '../../Nav';
+export declare const tabRootStyles: (orientation: NavProps['orientation']) => ThemeUIStyleObject;
 export declare const tabItemLinkStyles: ThemeUIStyleObject;

package/build/system/Nav/styles/variants/tabs.js

@@ -5,27 +5,61 @@ exports.tabRootStyles = exports.tabItemLinkStyles = void 0;
 var _primary = require("./primary");
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 // Tab Root Styles <nav>
-
-var tabRootStyles = exports.tabRootStyles = {
-  width: '100%',
-  borderColor: 'borders.2'
+var getTabPropsByOrientation = function getTabPropsByOrientation(orientation) {
+  if (orientation === 'vertical') {
+    return {
+      '> div:first-of-type': {
+        height: '100%',
+        overflowY: 'auto'
+      },
+      ul: {
+        minHeight: 'max-content'
+      }
+    };
+  }
+  return {
+    '> div:first-of-type': {
+      width: '100%',
+      overflowX: 'auto'
+    },
+    ul: {
+      minWidth: 'max-content'
+    }
+  };
+};
+var tabRootStyles = exports.tabRootStyles = function tabRootStyles(orientation) {
+  return _extends({
+    width: '100%',
+    borderColor: 'borders.2',
+    gap: 2
+  }, getTabPropsByOrientation(orientation));
 };
 
 // Tab Link <a>
 var tabItemLinkStyles = exports.tabItemLinkStyles = _extends({}, _primary.defaultItemLinkStyles, {
-  px: 0,
-  mr: 2,
+  px: 2,
+  height: '100%',
+  backgroundColor: 'red',
   color: 'heading',
   '&[data-active]': {
     color: 'link',
     fontWeight: 'normal',
-    boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0'
+    position: 'relative',
+    '&::after': {
+      position: 'absolute',
+      bottom: 0,
+      display: 'block',
+      width: '100%',
+      content: '""',
+      height: '0.125rem',
+      backgroundColor: 'link'
+    }
   },
   '&[aria-disabled="true"]': {
     color: 'muted'
   },
   ':hover': {
     fontWeight: 'regular',
-    color: 'heading'
+    color: 'link'
   }
 });

package/build/system/Nav/styles.d.ts

@@ -3,6 +3,5 @@ import { NavProps, NavVariant } from './Nav';
 export declare const navItemLinkVariantStyles: (variant: NavVariant) => ThemeUIStyleObject;
 export declare const navItemLinkStyles: (variant: NavVariant) => ThemeUIStyleObject;
 export declare const navItemStyles: (orientation: NavProps['orientation'], variant?: NavVariant) => ThemeUIStyleObject;
-export declare const navRootStyles: (variant: NavVariant) => ThemeUIStyleObject;
-export declare const navStyles: (variant: NavVariant) => ThemeUIStyleObject;
+export declare const navStyles: (variant: NavVariant, orientation: NavProps['orientation']) => ThemeUIStyleObject;
 export declare const navMenuListStyles: (orientation: NavProps['orientation']) => ThemeUIStyleObject;

package/build/system/Nav/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navStyles = exports.navRootStyles = exports.navMenuListStyles = exports.navItemStyles = exports.navItemLinkVariantStyles = exports.navItemLinkStyles = void 0;
+exports.navStyles = exports.navMenuListStyles = exports.navItemStyles = exports.navItemLinkVariantStyles = exports.navItemLinkStyles = void 0;
 var _breadcrumbs = require("./styles/variants/breadcrumbs");
 var _menu = require("./styles/variants/menu");
 var _primary = require("./styles/variants/primary");
@@ -57,6 +57,10 @@ var navItemStyles = exports.navItemStyles = function navItemStyles(orientation,
       {
         return (0, _menu.menuItemStyles)(orientation);
       }
+    case 'tabs':
+      {
+        return (0, _menu.tabItemStyles)(orientation);
+      }
     case 'menu-inverse':
       {
         return (0, _menu.menuInverseItemStyles)(orientation);
@@ -71,28 +75,12 @@ var navItemStyles = exports.navItemStyles = function navItemStyles(orientation,
       }
   }
 };
-var navRootStyles = exports.navRootStyles = function navRootStyles(variant) {
-  switch (variant) {
-    case 'tabs':
-      {
-        return _tabs.tabRootStyles;
-      }
-    case 'toolbar':
-      {
-        return _toolbar.toolbarRootStyles;
-      }
-    default:
-      {
-        return _primary.defaultNavRootStyles;
-      }
-  }
-};
-var navStyles = exports.navStyles = function navStyles(variant) {
+var navStyles = exports.navStyles = function navStyles(variant, orientation) {
   var navStyle = {};
   switch (variant) {
     case 'tabs':
       {
-        navStyle = _tabs.tabRootStyles;
+        navStyle = (0, _tabs.tabRootStyles)(orientation);
       }
       break;
     case 'toolbar':

package/build/system/Tabs/Tabs.stories.jsx

@@ -38,6 +38,7 @@ export const Default = () => (
 		</TabsContent>
 	</Tabs>
 );
+
 export const SetActiveTab = () => {
 	const [ activeTab, setActiveTab ] = React.useState( 'all' );
 

package/build/system/Tabs/TabsTrigger.js

@@ -24,7 +24,16 @@ const styles = {
 	'&[data-state="active"]': {
 		color: 'link',
 		fontWeight: 'regular',
-		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+		position: 'relative',
+		'&::after': {
+			position: 'absolute',
+			bottom: 0,
+			display: 'block',
+			width: '100%',
+			content: '""',
+			height: '0.125rem',
+			backgroundColor: 'link',
+		},
 	},
 	'&:disabled': {
 		color: 'muted',

package/build/system/theme/index.d.ts

@@ -326,6 +326,7 @@ declare namespace _default {
                 '&:hover': {
                     textDecorationLine: string;
                     textDecorationThickness: string;
+                    textUnderlineOffset: string;
                 };
             };
             export namespace svg {

package/build/system/theme/index.js

@@ -536,7 +536,8 @@ export default {
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',
-					textDecorationThickness: '2px',
+					textDecorationThickness: '0.125rem',
+					textUnderlineOffset: '0.250rem',
 				},
 			},
 			svg: {

package/package.json

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

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

@@ -115,16 +115,25 @@ export const Tab: Story = {
 				<strong>Variant: Tab</strong>
 			</p>
 			<Nav.Tab sx={ { mb: 4 } } label="Nav Tab">
-				<NavItem.Tab active as={ CustomLink } href="https://random-website.com/">
+				<NavItem.Tab as={ CustomLink } href="#!">
 					PHP
 				</NavItem.Tab>
-				<NavItem.Tab as={ CustomLink } href="https://wordpress.com">
+				<NavItem.Tab as={ CustomLink } href="#2!">
 					WordPress
 				</NavItem.Tab>
-				<NavItem.Tab as={ CustomLink } href="https://newrelic.com/">
+				<NavItem.Tab active as={ CustomLink } href="#3!">
 					New Relic
 				</NavItem.Tab>
-				<NavItem.Tab disabled as={ CustomLink } href="https://google.com/">
+				<NavItem.Tab as={ CustomLink } href="#4!">
+					Datadog
+				</NavItem.Tab>
+				<NavItem.Tab as={ CustomLink } href="#4!">
+					OnePlus
+				</NavItem.Tab>
+				<NavItem.Tab as={ CustomLink } href="#5!">
+					Rollbar
+				</NavItem.Tab>
+				<NavItem.Tab disabled as={ CustomLink } href="#6!">
 					Not accessible
 				</NavItem.Tab>
 			</Nav.Tab>

package/src/system/Nav/Nav.tsx

@@ -24,7 +24,7 @@ const NavBase = forwardRef< HTMLElement, NavProps >(
 			aria-label={ label }
 			ref={ ref }
 			className={ classNames( VIP_NAV, className ) }
-			sx={ navStyles( variant ) }
+			sx={ navStyles( variant, orientation ) }
 			orientation={ orientation }
 		>
 			<NavigationMenu.List

package/src/system/Nav/styles/variants/menu.ts

@@ -17,6 +17,12 @@ export const menuItemStyles = ( orientation: NavProps[ 'orientation' ] ): ThemeU
 	justifyContent: 'space-between',
 } );
 
+// Tab Item Style <li>
+export const tabItemStyles = ( orientation: NavProps[ 'orientation' ] ): ThemeUIStyleObject => ( {
+	...defaultNavItemStyles( orientation ),
+	mr: 0,
+} );
+
 // Menu Inverse Item Style <li>
 export const menuInverseItemStyles = (
 	orientation: NavProps[ 'orientation' ]

package/src/system/Nav/styles/variants/tabs.ts

@@ -1,27 +1,64 @@
 import { ThemeUIStyleObject } from 'theme-ui';
 
 import { defaultItemLinkStyles } from './primary';
+import { NavProps } from '../../Nav';
 
 // Tab Root Styles <nav>
+const getTabPropsByOrientation = ( orientation: NavProps[ 'orientation' ] ): ThemeUIStyleObject => {
+	if ( orientation === 'vertical' ) {
+		return {
+			'> div:first-of-type': {
+				height: '100%',
+				overflowY: 'auto',
+			},
+			ul: {
+				minHeight: 'max-content',
+			},
+		};
+	}
+	return {
+		'> div:first-of-type': {
+			width: '100%',
+			overflowX: 'auto',
+		},
+		ul: {
+			minWidth: 'max-content',
+		},
+	};
+};
 
-export const tabRootStyles: ThemeUIStyleObject = {
+export const tabRootStyles = ( orientation: NavProps[ 'orientation' ] ): ThemeUIStyleObject => ( {
 	width: '100%',
 	borderColor: 'borders.2',
-};
+	gap: 2,
+
+	// Responsive in case the content is bigger than the viewport
+	...getTabPropsByOrientation( orientation ),
+} );
 
 // Tab Link <a>
 export const tabItemLinkStyles: ThemeUIStyleObject = {
 	...defaultItemLinkStyles,
-	px: 0,
-	mr: 2,
+	px: 2,
+	height: '100%',
+	backgroundColor: 'red',
 	color: 'heading',
 	'&[data-active]': {
 		color: 'link',
 		fontWeight: 'normal',
-		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+		position: 'relative',
+		'&::after': {
+			position: 'absolute',
+			bottom: 0,
+			display: 'block',
+			width: '100%',
+			content: '""',
+			height: '0.125rem',
+			backgroundColor: 'link',
+		},
 	},
 	'&[aria-disabled="true"]': {
 		color: 'muted',
 	},
-	':hover': { fontWeight: 'regular', color: 'heading' },
+	':hover': { fontWeight: 'regular', color: 'link' },
 };

package/src/system/Nav/styles.ts

@@ -8,6 +8,7 @@ import {
 	menuInverseItemStyles,
 	menuItemLinkStyles,
 	menuItemStyles,
+	tabItemStyles,
 } from './styles/variants/menu';
 import {
 	defaultNavItemStyles,
@@ -68,6 +69,9 @@ export const navItemStyles = (
 		case 'menu': {
 			return menuItemStyles( orientation );
 		}
+		case 'tabs': {
+			return tabItemStyles( orientation );
+		}
 		case 'menu-inverse': {
 			return menuInverseItemStyles( orientation );
 		}
@@ -82,29 +86,16 @@ export const navItemStyles = (
 	}
 };
 
-export const navRootStyles = ( variant: NavVariant ): ThemeUIStyleObject => {
-	switch ( variant ) {
-		case 'tabs': {
-			return tabRootStyles;
-		}
-
-		case 'toolbar': {
-			return toolbarRootStyles;
-		}
-
-		default: {
-			return defaultNavRootStyles;
-		}
-	}
-};
-
-export const navStyles = ( variant: NavVariant ): ThemeUIStyleObject => {
+export const navStyles = (
+	variant: NavVariant,
+	orientation: NavProps[ 'orientation' ]
+): ThemeUIStyleObject => {
 	let navStyle: ThemeUIStyleObject = {};
 
 	switch ( variant ) {
 		case 'tabs':
 			{
-				navStyle = tabRootStyles;
+				navStyle = tabRootStyles( orientation );
 			}
 
 			break;

package/src/system/Tabs/Tabs.stories.jsx

@@ -38,6 +38,7 @@ export const Default = () => (
 		</TabsContent>
 	</Tabs>
 );
+
 export const SetActiveTab = () => {
 	const [ activeTab, setActiveTab ] = React.useState( 'all' );
 

package/src/system/Tabs/TabsTrigger.js

@@ -24,7 +24,16 @@ const styles = {
 	'&[data-state="active"]': {
 		color: 'link',
 		fontWeight: 'regular',
-		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
+		position: 'relative',
+		'&::after': {
+			position: 'absolute',
+			bottom: 0,
+			display: 'block',
+			width: '100%',
+			content: '""',
+			height: '0.125rem',
+			backgroundColor: 'link',
+		},
 	},
 	'&:disabled': {
 		color: 'muted',

package/src/system/theme/index.js

@@ -536,7 +536,8 @@ export default {
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',
-					textDecorationThickness: '2px',
+					textDecorationThickness: '0.125rem',
+					textUnderlineOffset: '0.250rem',
 				},
 			},
 			svg: {