chore(wip): remove unmountScroll option and include long name tab

wwnorton · Jun 1, 2023 · 8470794 · 8470794
1 parent 6188ba1
commit 8470794
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 64 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -55,11 +55,13 @@
     "Infima",
     "jakejarvis",
     "libsass",
+    "llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochensis",
     "localforage",
     "lunr",
     "microbundle",
     "mixins",
     "multiselect",
+    "Myxococcus",
     "Patil",
     "popperjs",
     "progessbar",

diff --git a/packages/react/src/components/Tabs/TabScrollButton.tsx b/packages/react/src/components/Tabs/TabScrollButton.tsx
@@ -22,7 +22,7 @@ const styles = {
 export const TabScrollButton = ({ type, onClick, disabled }: TabScrollButtonProps) => {
 	const text = type === 'left' ? 'Previous' : 'Next';
 	const icon = type === 'left' ? 'chevron-left' : 'chevron-right';
-	const { variant, unmountScroll } = useTabsState();
+	const { variant } = useTabsState();
 
 	const className = classNames(
 		styles.base,
@@ -32,7 +32,7 @@ export const TabScrollButton = ({ type, onClick, disabled }: TabScrollButtonProp
 		},
 	);
 
-	if (disabled && unmountScroll) {
+	if (disabled) {
 		return null;
 	}
 
@@ -42,7 +42,6 @@ export const TabScrollButton = ({ type, onClick, disabled }: TabScrollButtonProp
 			onClick={onClick}
 			aria-hidden
 			tabIndex={-1}
-			disabled={disabled}
 		>
 			<Icon variant={icon} />
 			<span className={styles.text}>{text}</span>

diff --git a/packages/react/src/components/Tabs/context.ts b/packages/react/src/components/Tabs/context.ts
@@ -13,7 +13,6 @@ function useInitCommonTabsState({
 	align,
 	idPrefix: userSetIdPrefix,
 	variant,
-	unmountScroll,
 }: CommonTabsProps): Omit<TabsState, 'selectedTabIndex' | 'setSelectedTabIndex'> {
 	const generatedIdPrefix = useId() as string;
 	const idPrefix = userSetIdPrefix || generatedIdPrefix;
@@ -22,8 +21,7 @@ function useInitCommonTabsState({
 		idPrefix,
 		align: align || 'left',
 		variant: variant || 'contained',
-		unmountScroll: unmountScroll || false,
-	}), [align, idPrefix, variant, unmountScroll]);
+	}), [align, idPrefix, variant]);
 }
 
 export function useInitUncontrolledTabsState({

diff --git a/packages/react/src/components/Tabs/index.stories.tsx b/packages/react/src/components/Tabs/index.stories.tsx
@@ -6,6 +6,7 @@ import {
 	ControlledTabsProps,
 } from '.';
 import { Button } from '../Button';
+import { Link } from '../Link';
 
 export default {
 	title: 'Tabs',
@@ -28,6 +29,8 @@ export const Uncontrolled = () => (
 				<Tab disabled>Horses</Tab>
 				<Tab>Cows</Tab>
 				<Tab>Beavers</Tab>
+				<Tab>Camels</Tab>
+				<Tab>Myxococcus llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochensis</Tab>
 			</TabList>
 			<TabPanels>
 				<TabPanel>Cats content</TabPanel>
@@ -39,6 +42,17 @@ export const Uncontrolled = () => (
 					<Button onClick={() => console.log('Moo!')}>Moo!</Button>
 				</TabPanel>
 				<TabPanel>Beavers content</TabPanel>
+				<TabPanel>Camels content</TabPanel>
+				<TabPanel>
+					Myxococcus llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochensis content.
+					{' '}
+					<Link
+						external
+						href="https://en.wikipedia.org/wiki/Myxococcus_llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogochensis"
+					>
+						Wiki page
+					</Link>
+				</TabPanel>
 			</TabPanels>
 		</Tabs>
 	</div>
@@ -114,27 +128,6 @@ export const Line = () => (
 	</div>
 );
 
-export const unmountScroll = () => (
-	<div style={{ maxWidth: '960px' }}>
-		<Tabs defaultSelectedIndex={0} unmountScroll>
-			<TabList>
-				<Tab>Cats</Tab>
-				<Tab>Dogs</Tab>
-				<Tab disabled>Horses</Tab>
-				<Tab>Cows</Tab>
-				<Tab>Beavers</Tab>
-			</TabList>
-			<TabPanels>
-				<TabPanel>Cats content</TabPanel>
-				<TabPanel>Dogs content</TabPanel>
-				<TabPanel>Horses content</TabPanel>
-				<TabPanel>Cows content</TabPanel>
-				<TabPanel>Beavers content</TabPanel>
-			</TabPanels>
-		</Tabs>
-	</div>
-);
-
 Controlled.args = {
 	selectedIndex: 1,
 };
diff --git a/packages/react/src/components/Tabs/types.ts b/packages/react/src/components/Tabs/types.ts
@@ -18,7 +18,6 @@ export type CommonTabsProps = React.PropsWithChildren<{
 	idPrefix?: string;
 	align?: 'left' | 'center';
 	variant?: 'contained' | 'line';
-	unmountScroll?: boolean;
 }>;
 
 export type TabListProps = React.ComponentPropsWithRef<'div'> & {
@@ -45,5 +44,4 @@ export interface TabsState {
 	setSelectedTabIndex: (index: number) => void;
 	variant: NonNullable<CommonTabsProps['variant']>;
 	align: NonNullable<CommonTabsProps['align']>;
-	unmountScroll: NonNullable<CommonTabsProps['unmountScroll']>;
 }
diff --git a/packages/react/src/components/Tabs/utils.ts b/packages/react/src/components/Tabs/utils.ts
@@ -1,5 +1,3 @@
-import _defer from 'lodash/defer';
-
 const focusableSelectors = [
 	'[contentEditable=true]:not([tabindex="-1"])',
 	'[tabindex]:not([tabindex="-1"])',
@@ -32,9 +30,7 @@ export function moveFocusToTabPanel(id: string) {
 	const firstFocusable = getFocusable(tabPanel)[0];
 	if (firstFocusable) {
 		tabPanel.setAttribute('tabindex', '-1');
-		_defer(() => firstFocusable.focus());
 	} else {
 		tabPanel.setAttribute('tabindex', '0');
-		_defer(() => tabPanel.focus());
 	}
 }
diff --git a/website/docs/components/tabs.mdx b/website/docs/components/tabs.mdx
@@ -54,37 +54,6 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@wwnds/react';
 </Tabs>
 ```
 
-### Unmounted scroll buttons
-
-```tsx live
-<Tabs unmountScroll>
-	<TabList>
-		<Tab>Cats</Tab>
-		<Tab>Dogs</Tab>
-		<Tab disabled>Horses</Tab>
-		<Tab>Cows</Tab>
-		<Tab>Beavers</Tab>
-		<Tab>Pigs</Tab>
-		<Tab>Chicken</Tab>
-		<Tab>Elf</Tab>
-		<Tab>Dragon</Tab>
-		<Tab>Orc</Tab>
-	</TabList>
-	<TabPanels>
-		<TabPanel>Cats content</TabPanel>
-		<TabPanel>Dogs content</TabPanel>
-		<TabPanel>Horses content</TabPanel>
-		<TabPanel>Cows content</TabPanel>
-		<TabPanel>Beavers content</TabPanel>
-		<TabPanel>Pigs content</TabPanel>
-		<TabPanel>Chicken content</TabPanel>
-		<TabPanel>Elf content</TabPanel>
-		<TabPanel>Dragon content</TabPanel>
-		<TabPanel>Orc content</TabPanel>
-	</TabPanels>
-</Tabs>
-```
-
 ### Centered Alignment
 
 ```tsx live