feat(tabs): disabled view (#513)

core-ds · Feb 18, 2021 · 8bdb1a7 · 8bdb1a7
1 parent c603562
commit 8bdb1a7
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 56 deletions.
diff --git a/packages/tabs/src/Component.stories.mdx b/packages/tabs/src/Component.stories.mdx
@@ -36,7 +36,7 @@ export const titles = Array(7).fill(0).map((_, i) => ({ title: `Таб ${i + 1}`
                 <Tab title='Таб 1' id='tab-1'>
                     Таб 1
                 </Tab>
-                <Tab title='Таб 2' id='tab-2'>
+                <Tab title='Таб 2' id='tab-2' disabled>
                     Таб 2
                 </Tab>
                 <Tab title='Таб 3' id='tab-3'>
@@ -45,7 +45,7 @@ export const titles = Array(7).fill(0).map((_, i) => ({ title: `Таб ${i + 1}`
                 <Tab title='Таб 4' id='tab-4'>
                     Таб 4
                 </Tab>
-                <Tab title='Таб 5' id='tab-5'>
+                <Tab title='Таб 5' id='tab-5' disabled>
                     Таб 5
                 </Tab>
             </TabsDesktop>
@@ -71,7 +71,7 @@ export const titles = Array(7).fill(0).map((_, i) => ({ title: `Таб ${i + 1}`
                 <Tab title='Таб 2' id='tab-2'>
                     Таб 2
                 </Tab>
-                <Tab title='Таб 3' id='tab-3'>
+                <Tab title='Таб 3' id='tab-3' disabled>
                     Таб 3
                 </Tab>
                 <Tab title='Таб 4' id='tab-4'>
@@ -107,10 +107,10 @@ export const titles = Array(7).fill(0).map((_, i) => ({ title: `Таб ${i + 1}`
                 <Tab title='Таб 3' id='tab-3'>
                     Таб 3
                 </Tab>
-                <Tab title='Таб 4' id='tab-4'>
+                <Tab title='Таб 4' id='tab-4' disabled>
                     Таб 4
                 </Tab>
-                <Tab title='Таб 5' id='tab-5'>
+                <Tab title='Таб 5' id='tab-5' disabled>
                     Таб 5
                 </Tab>
             </TabsResponsive>

diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx
@@ -41,9 +41,12 @@ export const PrimaryTabList = ({
                             type='button'
                             className={cn(styles.title, {
                                 [styles.selected]: item.id === selectedId,
+                                [styles.disabled]: item.disabled,
                             })}
                         >
-                            <span className={cn(focused && styles.focused)}>{item.title}</span>
+                            <span className={focused ? styles.focused : undefined}>
+                                {item.title}
+                            </span>
                             {item.rightAddons && (
                                 <span className={styles.rightAddons}>{item.rightAddons}</span>
                             )}

diff --git a/packages/tabs/src/components/primary-tablist/index.module.css b/packages/tabs/src/components/primary-tablist/index.module.css
@@ -38,7 +38,7 @@
     cursor: pointer;
     outline: none;
 
-    &:hover {
+    &:not(.disabled):hover {
         color: var(--primary-tablist-hover-color);
     }
 }
@@ -52,6 +52,11 @@
     color: var(--primary-tablist-selected-color);
 }
 
+.disabled {
+    cursor: var(--disabled-cursor);
+    color: var(--primary-tablist-disabled-color);
+}
+
 .line {
     position: absolute;
     height: 3px;

diff --git a/packages/tabs/src/components/tab/Component.tsx b/packages/tabs/src/components/tab/Component.tsx
@@ -4,7 +4,7 @@ import { TabProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const Tab = ({ children, hidden, className }: TabProps) => (
+export const Tab = ({ children, hidden, className, disabled }: TabProps) => (
     <div
         className={cn(
             styles.component,
@@ -15,7 +15,7 @@ export const Tab = ({ children, hidden, className }: TabProps) => (
         )}
         hidden={hidden}
         role='tabpanel'
-        tabIndex={0}
+        tabIndex={disabled ? -1 : 0}
     >
         {children}
     </div>

diff --git a/packages/tabs/src/components/tabs/Component.tsx b/packages/tabs/src/components/tabs/Component.tsx
@@ -14,9 +14,10 @@ export const Tabs = ({
     onChange,
 }: Omit<TabsProps, 'view'>) => {
     const tabsArray = React.Children.toArray(children) as TabsProps['children'];
-    const titles = tabsArray.map(({ props: { title, id, rightAddons } }) => ({
+    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled } }) => ({
         title,
         id,
+        disabled,
         rightAddons,
     }));
     const tabs = tabsArray.filter(

diff --git a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap
@@ -17,9 +17,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 1
           </span>
           <span
@@ -35,9 +33,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = `
           tabindex="0"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 2
           </span>
         </button>
@@ -48,9 +44,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 3
           </span>
         </button>
@@ -61,9 +55,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 4
           </span>
         </button>
@@ -74,9 +66,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 5
           </span>
         </button>
@@ -200,9 +190,7 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
             tabindex="-1"
             type="button"
           >
-            <span
-              class=""
-            >
+            <span>
               Таб 1
             </span>
             <span>
@@ -211,14 +199,12 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
           </button>
           <button
             aria-selected="true"
-            class="undefined"
+            class=""
             role="tab"
             tabindex="0"
             type="button"
           >
-            <span
-              class=""
-            >
+            <span>
               Таб 2
             </span>
           </button>
@@ -229,9 +215,7 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
             tabindex="-1"
             type="button"
           >
-            <span
-              class=""
-            >
+            <span>
               Таб 3
             </span>
           </button>
@@ -242,9 +226,7 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
             tabindex="-1"
             type="button"
           >
-            <span
-              class=""
-            >
+            <span>
               Таб 4
             </span>
           </button>
@@ -255,9 +237,7 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
             tabindex="-1"
             type="button"
           >
-            <span
-              class=""
-            >
+            <span>
               Таб 5
             </span>
           </button>
@@ -382,9 +362,7 @@ exports[`Tabs Snapshots tests should match snapshot 5`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 1
           </span>
           <span
@@ -400,9 +378,7 @@ exports[`Tabs Snapshots tests should match snapshot 5`] = `
           tabindex="0"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 2
           </span>
         </button>
@@ -413,9 +389,7 @@ exports[`Tabs Snapshots tests should match snapshot 5`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 3
           </span>
         </button>
@@ -426,9 +400,7 @@ exports[`Tabs Snapshots tests should match snapshot 5`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 4
           </span>
         </button>
@@ -439,9 +411,7 @@ exports[`Tabs Snapshots tests should match snapshot 5`] = `
           tabindex="-1"
           type="button"
         >
-          <span
-            class=""
-          >
+          <span>
             Таб 5
           </span>
         </button>

diff --git a/packages/tabs/src/typings.ts b/packages/tabs/src/typings.ts
@@ -81,6 +81,11 @@ export type TabProps = {
      */
     className?: string;
 
+    /**
+     * Блокирует таб
+     */
+    disabled?: boolean;
+
     /**
      * Управление видимостью таба
      */
@@ -118,6 +123,7 @@ export type TabListProps = Pick<
     titles?: Array<{
         title: string;
         id: SelectedId;
+        disabled?: boolean;
         rightAddons?: ReactNode;
     }>;
 };

diff --git a/packages/tabs/src/useTabs.tsx b/packages/tabs/src/useTabs.tsx
@@ -27,6 +27,8 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
         (position: 'prev' | 'next' | 'start' | 'end') => {
             const refs = itemRefs.current;
 
+            if (refs.every(ref => ref.disabled)) return;
+
             let focusedTabIndex = refs.findIndex(node => document.activeElement === node);
 
             if (focusedTabIndex === -1) {
@@ -49,6 +51,12 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
                     break;
             }
 
+            const shift = ['prev', 'end'].includes(position) ? -1 : 1;
+
+            while (refs[newFocusIndex].disabled) {
+                newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;
+            }
+
             refs[newFocusIndex].focus();
 
             setFocusedTab(refs[newFocusIndex]);
@@ -89,10 +97,12 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
     const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {
         const item = titles[index];
         const itemSelected = item.id === selectedId;
+
         return {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
+            disabled: item.disabled,
             ref: (node: HTMLButtonElement) => {
                 // eslint-disable-next-line no-param-reassign
                 if (outerRef) outerRef.current = node;

diff --git a/packages/tabs/src/vars.css b/packages/tabs/src/vars.css
@@ -5,6 +5,7 @@
     --primary-tablist-color: var(--color-light-text-secondary);
     --primary-tablist-hover-color: var(--color-light-text-primary);
     --primary-tablist-selected-color: var(--color-light-text-primary);
+    --primary-tablist-disabled-color: var(--color-light-text-tertiary);
     --primary-tablist-bottom-border-color: var(--color-light-border-primary);
     --primary-tablist-line-color: var(--color-light-border-accent);