feat: changed type for TabsItem label prop to accept also components …

…and fixed problem with Label 'htmlFor' attribute in Fields
DevoInc · Nov 11, 2024 · cb95779 · cb95779
1 parent 197667b
commit cb95779
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/packages/core/src/components/Flex/Flex.tsx b/packages/core/src/components/Flex/Flex.tsx
@@ -17,6 +17,7 @@ const InternalFlex = React.forwardRef<HTMLElement, Resolve<FlexProps>>(
       alignItems,
       childrenFlex,
       columnGap,
+      display,
       flex,
       flexDirection,
       flexWrap,
@@ -41,6 +42,7 @@ const InternalFlex = React.forwardRef<HTMLElement, Resolve<FlexProps>>(
             alignItems,
             childrenFlex,
             columnGap,
+            display,
             flex,
             flexDirection,
             flexWrap,

diff --git a/packages/core/src/components/Flex/mixins.ts b/packages/core/src/components/Flex/mixins.ts
@@ -1,9 +1,10 @@
 import { css, DefaultTheme } from 'styled-components';
-import type { ILayoutFlexCss } from '../../declarations';
+import type { ILayoutBox, ILayoutFlexCss } from '../../declarations';
 
 import { getSpacingPropCss } from '../../helpers';
 
 export interface IFlexMixin extends ILayoutFlexCss {
+  display?: ILayoutBox['display'];
   theme: DefaultTheme;
 }
 
@@ -17,6 +18,7 @@ export const flexMixin = ({
   alignItems,
   childrenFlex,
   columnGap,
+  display,
   flex,
   flexDirection,
   flexWrap,
@@ -26,7 +28,7 @@ export const flexMixin = ({
   rowGap,
   theme,
 }: IFlexMixin) => css`
-  display: ${inline ? 'inline-flex' : 'flex'};
+  display: ${display || (inline ? 'inline-flex' : 'flex')};
   align-content: ${alignContent};
   align-items: ${alignItems};
   flex: ${flex};

diff --git a/packages/core/src/components/Tabs/components/Docs.mdx b/packages/core/src/components/Tabs/components/Docs.mdx
@@ -18,6 +18,10 @@ The `Tabs.Item` component is used to define the individual tabs.
 
 <Canvas of={ItemStories.Item} />
 
+### With badge
+
+<Canvas of={ItemStories.WithBadge} />
+
 ### Props
 
 <ArgTypes of={ItemStories} />

diff --git a/packages/core/src/components/Tabs/components/TabsItem/TabsItem.stories.tsx b/packages/core/src/components/Tabs/components/TabsItem/TabsItem.stories.tsx
@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Tabs } from '../../Tabs';
+import * as React from 'react';
+import { useTabsAccessibility } from '../../hooks';
+import { GIChart, GICheckThick } from '@devoinc/genesys-icons';
+import { Box } from '../../../Box';
+import { Badge } from '../../../Badge';
 
 const meta: Meta<typeof Tabs.Item> = {
   title: 'Components/Navigation/Tabs/Components',
@@ -16,3 +21,28 @@ export default meta;
 type Story = StoryObj<typeof Tabs.Item>;
 
 export const Item: Story = {};
+
+export const WithBadge: Story = {
+  name: 'With badge',
+  tags: ['isHidden'],
+  render: () =>
+    (() => {
+      return (
+        <Tabs.Item
+          icon={<GIChart />}
+          label={
+            <>
+              Tiny
+              <Box
+                position="absolute"
+                positionTop="-0.8rem"
+                positionRight="-0.4rem"
+              >
+                <Badge size="sm" colorScheme="warning" />
+              </Box>
+            </>
+          }
+        />
+      );
+    })(),
+};
diff --git a/packages/core/src/components/Tabs/components/TabsItem/TabsItem.tsx b/packages/core/src/components/Tabs/components/TabsItem/TabsItem.tsx
@@ -34,7 +34,7 @@ export interface TabsItemProps
   /** This property defines the icon type */
   icon?: IconProps['children'];
   /** Tab label */
-  label: string;
+  label: React.ReactNode;
   /** Action when click on close tab button */
   onClose?: () => void;
   /** Possible states */