feat: add support for disabled prop to SubTab (#525)

pluralsh · Oct 16, 2023 · d39ec0f · d39ec0f
1 parent b5197ea
commit d39ec0f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/components/SubTab.tsx b/src/components/SubTab.tsx
@@ -29,15 +29,21 @@ const parentFillLevelToHoverBG = {
 const SubTabBase = styled.div<{
   size: SubTabSize
   active: boolean
+  disabled: boolean
   parentFillLevel: FillLevel
-}>(({ theme, active, size, parentFillLevel }) => ({
+}>(({ theme, active, disabled, size, parentFillLevel }) => ({
   ...(size === 'small'
     ? theme.partials.text.buttonSmall
     : theme.partials.text.buttonMedium),
   tabIndex: 0,
   userSelect: 'none',
-  cursor: active ? 'default' : 'pointer',
-  color: active ? theme.colors.text : theme.colors['text-xlight'],
+  cursor: disabled ? 'default' : active ? 'default' : 'pointer',
+  pointerEvents: disabled ? 'none' : 'all',
+  color: disabled
+    ? theme.colors['text-disabled']
+    : active
+    ? theme.colors.text
+    : theme.colors['text-xlight'],
   backgroundColor: active
     ? theme.colors[parentFillLevelToActiveBG[parentFillLevel]]
     : 'transparent',
@@ -51,9 +57,10 @@ const SubTabBase = styled.div<{
   }px ${theme.spacing.medium}px`,
   align: 'center',
   ':hover': {
-    backgroundColor: !active
-      ? theme.colors[parentFillLevelToHoverBG[parentFillLevel]]
-      : undefined,
+    backgroundColor:
+      !active && !disabled
+        ? theme.colors[parentFillLevelToHoverBG[parentFillLevel]]
+        : undefined,
   },
   transition:
     'background-color 150ms ease, border-color 150ms ease, color 150ms ease',
@@ -63,6 +70,7 @@ const SubTabBase = styled.div<{
 function SubTabRef(
   {
     active,
+    disabled,
     children,
     textValue: _textValue,
     size = 'medium',
@@ -76,6 +84,7 @@ function SubTabRef(
     <SubTabBase
       parentFillLevel={parentFillLevel}
       active={active}
+      disabled={disabled}
       ref={ref}
       size={size}
       {...props}

diff --git a/src/components/TabList.tsx b/src/components/TabList.tsx
@@ -40,6 +40,7 @@ type TabBaseProps = {
   active?: boolean
   activeSecondary?: boolean
   vertical?: boolean
+  disabled?: boolean
   textValue?: string
   renderer?: Renderer
   children?: ReactNode
@@ -62,6 +63,7 @@ type TabListProps = {
   as?: ReactElement & { ref?: MutableRefObject<any> }
   children?: ChildrenType
 }
+
 function TabListRef(
   { stateRef, stateProps, renderer, as, ...props }: TabListProps & FlexProps,
   incomingRef: RefObject<HTMLElement>
@@ -179,6 +181,7 @@ type TabRendererProps = {
   stateProps: AriaTabListProps<object>
   stateRef: TabStateRef
 }
+
 function TabRenderer({ item, state, stateProps, stateRef }: TabRendererProps) {
   const ref = useRef(null)
   const { tabProps: props } = useTab({ key: item.key }, state, ref)

diff --git a/src/stories/Tab.stories.tsx b/src/stories/Tab.stories.tsx
@@ -146,7 +146,7 @@ Vertical.args = {
   vertical: true,
 }
 
-function SubTabs({ args }: any) {
+function SubTabs(args: any) {
   const [active, setActive] = useState(0)
 
   return (
@@ -198,4 +198,6 @@ function SubTabTemplate(args: any) {
 
 export const Subtab = SubTabTemplate.bind({})
 
-Subtab.args = {}
+Subtab.args = {
+  disabled: false,
+}