Merge pull request #356 from qoretechnologies/foxhoundn/bug-fixed-and…

…-fill-tabs-355 Foxhoundn/bug-fixed-and-fill-tabs-355
qoretechnologies · Nov 21, 2023 · 99cf3fb · 99cf3fb
2 parents 644a64c + af06037
commit 99cf3fb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.38.2",
+  "version": "0.38.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Tabs/item.tsx b/src/components/Tabs/item.tsx
@@ -29,7 +29,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, fill, padded }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, fill, fixed, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -80,10 +80,11 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
             `}
           `}
 
-      ${fill &&
-      css`
-        flex: 1 0 auto;
-      `}
+      ${fill && !fixed
+        ? css`
+            flex: 1 0 auto;
+          `
+        : undefined}
 
       ${disabled &&
       css`
@@ -148,6 +149,7 @@ const ReqoreTabsListItem = memo(
           vertical={vertical}
           theme={theme}
           fill={fill}
+          fixed={rest.fixed}
           padded={padded}
         >
           {label || icon ? (

diff --git a/src/stories/Tabs/Tabs.stories.tsx b/src/stories/Tabs/Tabs.stories.tsx
@@ -247,6 +247,33 @@ export const Fill: Story = {
   },
 };
 
+export const FillWithFixedItem: Story = {
+  render: () => {
+    return (
+      <ReqoreTabs
+        fill
+        tabs={[
+          { id: 'tab1', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
+          { id: 'tab2', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
+          { id: 'tab3', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
+          { id: 'tab4', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
+        ]}
+      >
+        <ReqoreTabsContent tabId='tab1'>
+          <ReqoreH3>Tab 1</ReqoreH3>
+        </ReqoreTabsContent>
+        <ReqoreTabsContent tabId='tab2'>
+          <ReqoreH3>Tab 2</ReqoreH3>
+        </ReqoreTabsContent>
+      </ReqoreTabs>
+    );
+  },
+
+  args: {
+    fill: true,
+  },
+};
+
 export const CustomActiveIntent: Story = {
   render: Template,