Tabs design updates (#1785)

* Tabs updates

* update chromatic story

* Remove Content wrapper and title from panels

* lint

Co-authored-by: Rob Snow <[email protected]>

Author: devongovett

packages/@adobe/spectrum-css-temp/components/tabs/index.css

@@ -40,7 +40,7 @@ governing permissions and limitations under the License.
   z-index: 0;
 
   margin: 0;
-  padding: 0 var(--spectrum-tabs-focus-ring-padding-x);
+  padding: 0;
 
   /* Friends should align to the top of the tabs */
   vertical-align: top;
@@ -259,16 +259,22 @@ governing permissions and limitations under the License.
 
 .spectrum-TabsPanel-collapseWrapper {
   display: flex;
-  overflow: hidden;
   position: relative;
 }
 
 .spectrum-TabsPanel-tabs {
-  flex-grow: 1;
+  flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 0%;
 }
 
 .spectrum-TabsPanel-tabpanel {
   flex-grow: 1;
+  border: var(--spectrum-tabs-focus-ring-size) solid transparent;
+}
+
+.spectrum-TabsPanel--vertical {
+  .spectrum-Tabs {
+    padding-right: var(--spectrum-global-dimension-size-160);
+  }
 }

packages/@adobe/spectrum-css-temp/components/tabs/skin.css

@@ -95,3 +95,13 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+.spectrum-TabsPanel-tabpanel {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-ring {
+    border-color: var(--spectrum-tabs-focus-ring-color);
+  }
+}

packages/@react-aria/tabs/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/focus": "^3.2.4",
     "@react-aria/i18n": "^3.3.0",
     "@react-aria/interactions": "^3.3.3",
     "@react-aria/selection": "^3.3.2",

packages/@react-aria/tabs/src/useTabPanel.ts

@@ -12,21 +12,52 @@
 
 import {AriaTabPanelProps} from '@react-types/tabs';
 import {generateId} from './utils';
-import {HTMLAttributes} from 'react';
+import {getFocusableTreeWalker} from '@react-aria/focus';
+import {HTMLAttributes, RefObject, useLayoutEffect, useState} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {TabListState} from '@react-stately/tabs';
 
 interface TabPanelAria {
   /** Props for the tab panel element. */
   tabPanelProps: HTMLAttributes<HTMLElement>
 }
-    
-export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>): TabPanelAria {
+
+export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>, ref: RefObject<HTMLElement>): TabPanelAria {
+  let [tabIndex, setTabIndex] = useState(0);
+
+  // The tabpanel should have tabIndex=0 when there are no tabbable elements within it.
+  // Otherwise, tabbing from the focused tab should go directly to the first tabbable element
+  // within the tabpanel.
+  useLayoutEffect(() => {
+    if (ref?.current) {
+      let update = () => {
+        // Detect if there are any tabbable elements and update the tabIndex accordingly.
+        let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+        setTabIndex(walker.nextNode() ? undefined : 0);
+      };
+
+      update();
+
+      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
+      let observer = new MutationObserver(update);
+      observer.observe(ref.current, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['tabIndex', 'disabled']
+      });
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref]);
+
   return {
     tabPanelProps: mergeProps(props, {
       id: generateId(state, state?.selectedKey, 'tabpanel'),
       'aria-labelledby': generateId(state, state?.selectedKey, 'tab'),
-      tabIndex: 0,
+      tabIndex,
       role: 'tabpanel'
     })
   };

packages/@react-spectrum/tabs/chromatic/Tabs.chromatic.tsx

@@ -10,9 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Content} from '@react-spectrum/view';
 import {Heading, Text} from '@react-spectrum/text';
-import {Item, Tabs} from '../';
+import {Item, TabList, TabPanels, Tabs} from '../';
 import {Meta, Story} from '@storybook/react';
 import React from 'react';
 import {SpectrumTabsProps} from '@react-types/tabs';
@@ -32,47 +31,47 @@ export default meta;
 
 
 const Template = <T extends object>(): Story<SpectrumTabsProps<T>> => (args) => (
+
   <Tabs {...args} aria-label="Tab example" maxWidth={500}>
-    <Item title="Tab 1" key="val1">
-      <Content margin="size-160">
+    <TabList>
+      <Item key="val1">Tab 1</Item>
+      <Item key="val2">Tab 2</Item>
+      <Item key="val3">Tab 3</Item>
+      <Item key="val4">Tab 4</Item>
+      <Item key="val5">Tab 5</Item>
+    </TabList>
+    <TabPanels>
+      <Item key="val1">
         <Heading>Tab Body 1</Heading>
         <Text>
           Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
         </Text>
-      </Content>
-    </Item>
-    <Item title="Tab 2" key="val2">
-      <Content margin="size-160">
+      </Item>
+      <Item key="val2">
         <Heading>Tab Body 2</Heading>
         <Text>
           Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
         </Text>
-      </Content>
-    </Item>
-    <Item title="Tab 3" key="val3">
-      <Content margin="size-160">
+      </Item>
+      <Item key="val3">
         <Heading>Tab Body 3</Heading>
         <Text>
           Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
         </Text>
-      </Content>
-    </Item>
-    <Item title="Tab 4" key="val4">
-      <Content margin="size-160">
+      </Item>
+      <Item key="val4">
         <Heading>Tab Body 4</Heading>
         <Text>
           Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
         </Text>
-      </Content>
-    </Item>
-    <Item title="Tab 5" key="val5">
-      <Content margin="size-160">
+      </Item>
+      <Item key="val5">
         <Heading>Tab Body 5</Heading>
         <Text>
           Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
         </Text>
-      </Content>
-    </Item>
+      </Item>
+    </TabPanels>
   </Tabs>
 );
 

packages/@react-spectrum/tabs/src/Tabs.tsx

@@ -213,7 +213,6 @@ function TabLine(props: TabLineProps) {
     selectedKey
   } = props;
 
-  let verticalSelectionIndicatorOffset = 12;
   let {direction} = useLocale();
   let {scale} = useProvider();
 
@@ -228,18 +227,18 @@ function TabLine(props: TabLineProps) {
       // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes
       let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
       styleObj.transform = orientation === 'vertical'
-        ? `translateY(${selectedTab.offsetTop + verticalSelectionIndicatorOffset / 2}px)`
+        ? `translateY(${selectedTab.offsetTop}px)`
         : `translateX(${offset}px)`;
 
       if (orientation === 'horizontal') {
         styleObj.width = `${selectedTab.offsetWidth}px`;
       } else {
-        styleObj.height = `${selectedTab.offsetHeight - verticalSelectionIndicatorOffset}px`;
+        styleObj.height = `${selectedTab.offsetHeight}px`;
       }
       setStyle(styleObj);
     }
 
-  }, [direction, setStyle, selectedTab, orientation, scale, verticalSelectionIndicatorOffset, selectedKey]);
+  }, [direction, setStyle, selectedTab, orientation, scale, selectedKey]);
 
   return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
 }
@@ -257,6 +256,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
   // Pass original Tab props but override children to create the collection.
   const state = useTabListState({...tabProps, children: props.children});
 
+  let {styleProps} = useStyleProps(props);
   const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
 
   useEffect(() => {
@@ -265,14 +265,17 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
+  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
   const tabContent = (
     <div
+      {...styleProps}
       {...tabListProps}
       ref={tablistRef}
       className={classNames(
         styles,
         'spectrum-Tabs',
         `spectrum-Tabs--${orientation}`,
+        tabListclassName,
         {
           'spectrum-Tabs--quiet': isQuiet,
           ['spectrum-Tabs--compact']: density === 'compact'
@@ -288,7 +291,6 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
   if (orientation === 'vertical') {
     return tabContent;
   } else {
-    let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
     return (
       <div
         ref={wrapperRef}
@@ -309,20 +311,24 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
 export function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {
   const {tabState, tabProps, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);
   const {tabListState} = tabState;
-  const {tabPanelProps} = useTabPanel(props, tabListState);
+  let ref = useRef();
+  const {tabPanelProps} = useTabPanel(props, tabListState, ref);
+  let {styleProps} = useStyleProps(props);
 
   if (ctxTabPanelProps['aria-labelledby']) {
     tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
   }
 
   const factory = nodes => new ListCollection(nodes);
-  const collection = useCollection({items: tabProps.items, ...props}, factory);
+  const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});
   const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
 
   return (
-    <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
-      {selectedItem && selectedItem.props.children}
-    </div>
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
+      <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
+        {selectedItem && selectedItem.props.children}
+      </div>
+    </FocusRing>
   );
 }