Switch to Tabs from web-common

* Update web-common to 0.3.0
* Tab now uses <button> instead <a>
* Removed box-shadow from a tab when it is focused with keyboard

src/js/component/item-details/attachments.jsx

@@ -5,7 +5,7 @@ import CSSTransition from 'react-transition-group/cjs/CSSTransition';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { useDispatch, useSelector } from 'react-redux';
 import { useDrag, useDrop } from 'react-dnd';
-import { Button, Icon, Spinner } from 'web-common/components';
+import { Button, Icon, Spinner, TabPane } from 'web-common/components';
 import { useFocusManager } from 'web-common/hooks';
 import { noop, isTriggerEvent } from 'web-common/utils';
 
@@ -18,7 +18,6 @@ tryGetAttachmentURL, toggleModal, updateItem } from '../../actions';
 import { get, getScrollContainerPageCount, getUniqueId, openDelayedURL, stopPropagation, sortByKey } from '../../utils';
 import { getFileData } from '../../common/event';
 import { pluralize } from '../../common/format';
-import { TabPane } from '../ui/tabs';
 import { Toolbar, ToolGroup } from '../ui/toolbars';
 import { makePath } from '../../common/navigation';
 import { useForceUpdate, useFetchingState } from '../../hooks';

src/js/component/item-details/info.jsx

@@ -2,11 +2,11 @@ import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { TabPane } from 'web-common/components';
 
 import ItemBox from './box';
 import Abstract from './abstract';
 import { getBaseMappedValue } from '../../common/item';
-import { TabPane } from '../ui/tabs';
 import { get } from '../../utils';
 
 const Info = ({ isActive, isReadOnly, id }) => {

src/js/component/item-details/notes.jsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Icon } from 'web-common/components';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Icon, TabPane } from 'web-common/components';
 import PropTypes from 'prop-types';
 import { memo, forwardRef, useCallback, useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,7 +11,6 @@ import RichEditor from 'component/rich-editor';
 import { get } from 'utils';
 import { noteAsTitle, pluralize } from 'common/format';
 import { getScrollContainerPageCount, sortByKey, stopPropagation } from 'utils';
-import { TabPane } from 'component/ui/tabs';
 import { Toolbar, ToolGroup } from 'component/ui/toolbars';
 import { useFetchingState, usePrepForUnmount } from 'hooks';
 import { deleteItem, deleteUnusedEmbeddedImages, createItem, updateItem, fetchChildItems,

src/js/component/item-details/related.jsx

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Icon } from 'web-common/components';
+import { Button, Icon, TabPane } from 'web-common/components';
 import { useFocusManager } from 'web-common/hooks';
 import { isTriggerEvent, noop } from 'web-common/utils';
 
 import { fetchRelatedItems, navigate, removeRelatedItem } from '../../actions';
 import { getItemTitle } from '../../common/item';
 import { get, getScrollContainerPageCount, getUniqueId, mapRelationsToItemKeys, sortItemsByKey, } from '../../utils';
-import { TabPane } from '../ui/tabs';
 
 
 const RelatedItem = memo(props => {

src/js/component/item-details/standalone-attachment.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
+import { TabPane } from 'web-common/components';
 
-import { TabPane } from '../ui/tabs';
 import AttachmentDetails from './attachment-details';
 
 const StandaloneAttachmentTabPane = ({ id, isActive, isReadOnly }) => {

src/js/component/item-details/standalone-note.jsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { TabPane } from 'web-common/components';
 
 import RichEditor from 'component/rich-editor';
 import { get } from 'utils';
 import { deleteUnusedEmbeddedImages, updateItem } from 'actions';
-import { TabPane } from 'component/ui/tabs';
 import { usePrepForUnmount } from '../../hooks';
 
 const StandaloneNote = ({ id, isActive, isReadOnly }) => {

src/js/component/item-details/tabs.jsx

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Fragment, useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { Spinner } from 'web-common/components';
+import { Spinner, Tab, Tabs } from 'web-common/components';
 
 import Attachments from '../../component/item-details/attachments';
 import EditToggleButton from '../edit-toggle-button';
@@ -13,7 +13,6 @@ import Related from '../../component/item-details/related';
 import StandaloneAttachmentTabPane from '../../component/item-details/standalone-attachment';
 import StandaloneNote from '../../component/item-details/standalone-note';
 import Tags from '../../component/item-details/tags';
-import { Tab, Tabs } from '../ui/tabs';
 import { useEditMode, useFetchingState } from '../../hooks';
 import { get, mapRelationsToItemKeys } from '../../utils';
 import { fetchChildItems, fetchRelatedItems, } from '../../actions';
@@ -151,6 +150,7 @@ const ItemDetailsTabs = () => {
 				<Tabs
 					compact
 					activateOnFocus
+					as-sections={ !shouldUseTabs }
 					aria-label={ shouldUseTabs ? 'Item Details' : null }
 				>
 					{

src/js/component/item-details/tags.jsx

@@ -2,14 +2,13 @@ import PropTypes from 'prop-types';
 import { memo, useEffect, useCallback, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import deepEqual from 'deep-equal';
-import { Button, Icon } from 'web-common/components';
+import { Button, Icon, TabPane } from 'web-common/components';
 import { useFocusManager, usePrevious } from 'web-common/hooks';
 import { isTriggerEvent, noop, pick } from 'web-common/utils';
 
 import Editable from '../editable';
 import { deduplicateByKey, get, getScrollContainerPageCount, sortByKey } from '../../utils';
 import { fetchTagSuggestions, updateItem } from '../../actions';
-import { TabPane } from '../ui/tabs';
 import { Toolbar, ToolGroup } from '../ui/toolbars';
 import { pluralize } from '../../common/format';
 

src/scss/components/_tabs.scss

@@ -1,7 +1,3 @@
-//
-// Tabs
-// --------------------------------------------------
-
 .tabs {
 	display: flex;
 	border-bottom: $border-width solid $tabs-border-color;
@@ -18,14 +14,24 @@
 			flex: 1 1 0;
 		}
 
-		a {
-			flex: 1 1 auto;
-			display: flex;
-			justify-content: center;
+		button {
 			align-items: center;
+			appearance: none;
+			background: none;
+			border: none;
 			color: $tab-inactive-color;
-			padding: 0 $tabs-padding-x;
+			cursor: pointer;
+			display: inline;
+			flex: 1 1 auto;
+			font-family: inherit;
+			font-size: $font-size-base;
+			font-weight: inherit;
 			height: $tabs-height;
+			justify-content: center;
+			padding: 0 $tabs-padding-x;
+			text-decoration: none;
+
+			@include text-truncate;
 
 			@include touch-or-bp-down(sm) {
 				height: $tabs-height-touch;
@@ -44,6 +50,12 @@
 			@include state("li.active") {
 				color: $tab-active-color;
 				box-shadow: inset 0 -1px $tab-active-color, 0 1px $tab-active-color;
+
+				@include scopedVariant(".keyboard") {
+					&:focus-within {
+						box-shadow: none;
+					}
+				}
 			}
 
 			@include variant(".tabs.compact") {
@@ -85,9 +97,10 @@
 			margin: 0;
 			line-height: $line-height-large-touch;
 			padding: $border-width $default-padding-x-touch;
+			background-color: $tab-pane-heading-bg;
+
 			@include hairline(top, $tab-pane-heading-border-color);
 			@include hairline(bottom, $tab-pane-heading-border-color);
-			background-color: $tab-pane-heading-bg;
 		}
 	}
 

src/scss/zotero-web-library.scss

@@ -59,7 +59,7 @@ $scope: ".zotero-wl";
 	@import "../../modules/web-common/scss/icon";
 	@import "components/icon-extra";
 	@import "components/panel";
-	@import "components/tabs";
+	@import "components/tabs"; // "../../modules/web-common/scss/tabs" does not support scopedVariant and touch-specific shenanigans
 	@import "components/toolbar";
 	@import "components/touch-header";
 	@import "components/touch-footer";