Merge pull request #2136 from habx/fix/TabSelectOptionFocus

APP-25425: fix add `fullWidth` prop
habx · Nov 26, 2021 · e6ecb60 · e6ecb60
2 parents 811dc18 + 365d27d
commit e6ecb60
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/src/TabSelect/TabSelect.interface.ts b/src/TabSelect/TabSelect.interface.ts
@@ -2,4 +2,6 @@ import { TabProps } from '../Tab/Tab.interface'
 
 export interface TabSelectProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    Pick<TabProps, 'large' | 'small'> {}
+    Pick<TabProps, 'large' | 'small'> {
+  fullWidth?: boolean
+}
diff --git a/src/TabSelect/TabSelect.style.ts b/src/TabSelect/TabSelect.style.ts
@@ -3,6 +3,9 @@ import styled from 'styled-components'
 export const TabSelectContainer = styled.div`
   display: flex;
 
+  &[data-fullWidth='true'] > * {
+    flex-grow: 1;
+  }
   &[data-small='true'] > * {
     --tab-horizontal-padding: 8px;
     --tab-height: 24px;

diff --git a/src/TabSelect/TabSelect.tsx b/src/TabSelect/TabSelect.tsx
@@ -5,13 +5,20 @@ import { TabSelectContainer } from './TabSelect.style'
 
 export const TabSelect = React.forwardRef<HTMLDivElement, TabSelectProps>(
   (props, ref) => {
-    const { large = false, small = false, children, ...rest } = props
+    const {
+      large = false,
+      small = false,
+      fullWidth = false,
+      children,
+      ...rest
+    } = props
 
     return (
       <TabSelectContainer
         ref={ref}
         data-large={large}
         data-small={small}
+        data-fullWidth={fullWidth}
         {...rest}
       >
         {children}

diff --git a/src/TabSelect/TabSelectOption/TabSelectOption.style.ts b/src/TabSelect/TabSelectOption/TabSelectOption.style.ts
@@ -1,18 +1,18 @@
 import styled from 'styled-components'
 
+import { zIndex } from '../../_internal/theme/zIndex'
 import { Tab } from '../../Tab'
 
 export const TabSelectOptionContainer = styled(Tab)`
   --tab-border-width: 0;
-  flex-grow: 1;
   border: 1px solid var(--tab-border-color);
 
   &:not(:first-child) {
     border-left: none;
   }
 
   &:focus:not(:active) {
-    z-index: 100;
+    z-index: ${zIndex.floatingButtons};
   }
 
   &:not(:first-child):not(:last-child) {