@availity/mui-tabs 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-tabs@1.1.0...@availity/mui-tabs@1.2.0) (2025-03-24)
+
+
+### Features
+
+* **mui-tabs:** add icon and examples ([af6172d](https://github.com/Availity/element/commit/af6172d25882c03b543fff108424a6875027a5a0))
+
 ## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-tabs@1.0.1...@availity/mui-tabs@1.1.0) (2025-03-13)
 
 

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import { TabListProps as TabListProps$1 } from '@mui/lab/TabList';
 import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
 import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 
-type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'touchRippleRef' | 'TouchRippleProps'>;
+type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'touchRippleRef' | 'TouchRippleProps'>;
 declare const Tab: (props: TabProps) => JSX.Element;
 
 interface TabContextProps extends TabContextProps$1 {

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { TabListProps as TabListProps$1 } from '@mui/lab/TabList';
 import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
 import { TabPanelProps as TabPanelProps$1 } from '@mui/lab/TabPanel';
 
-type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'icon' | 'iconPosition' | 'touchRippleRef' | 'TouchRippleProps'>;
+type TabProps = Omit<TabProps$1, 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'touchRippleRef' | 'TouchRippleProps'>;
 declare const Tab: (props: TabProps) => JSX.Element;
 
 interface TabContextProps extends TabContextProps$1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tabs",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Availity MUI Tabs Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@availity/mui-divider": "^1.0.1",
+    "@availity/mui-icon": "^1.0.1",
     "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/Tab.tsx

@@ -7,8 +7,6 @@ export type TabProps = Omit<
   | 'disableRipple'
   | 'disableTouchRipple'
   | 'focusRipple'
-  | 'icon'
-  | 'iconPosition'
   | 'touchRippleRef'
   | 'TouchRippleProps'
 >;

package/src/lib/TabList.stories.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { LinkIcon, UserIcon } from '@availity/mui-icon';
 import { TabList, TabListProps } from './TabList';
 import { Tab } from './Tab';
 import { TabContext } from './TabContext';
@@ -43,3 +44,23 @@ export const _TabList: StoryObj<typeof TabList> = {
   },
   args: {},
 };
+
+export const _WithIcons: StoryObj<typeof TabList> = {
+  render: () => {
+    const [value, setValue] = useState('1');
+
+    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+      setValue(newValue);
+    };
+    return (
+      <TabContext value={value}>
+        <TabList onChange={handleChange} aria-label="lab API tabs example">
+          <Tab value="1" icon={<LinkIcon/>} label="Links" />
+          <Tab value="2" icon={<UserIcon/>} label="My Account" />
+        </TabList>
+        <TabPanel value="1" children={`Hello from Panel ${value}`} />
+        <TabPanel value="2" children={`Hello from Panel ${value}`} />
+      </TabContext>
+    );
+  },
+};

package/src/lib/Tabs.stories.tsx

@@ -4,8 +4,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { LinkIcon, UserIcon } from '@availity/mui-icon';
+import { Tooltip } from '@availity/mui-tooltip';
 import { Tabs, TabsProps } from './Tabs';
 import { Tab } from './Tab';
+import { useState } from 'react';
 
 const meta: Meta<typeof Tabs> = {
   title: 'Components/Tabs/Tabs',
@@ -134,3 +137,45 @@ export const _Levels: StoryObj<typeof Tabs> = {
     );
   },
 };
+
+export const _WithIcons: StoryObj<typeof Tabs> = {
+  render: () => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+      setValue(newValue);
+    };
+
+    return (
+      <>
+        <Tabs value={value} onChange={handleChange}>
+          <Tab icon={<LinkIcon/>} label="Links" {...a11yProps(0)} />
+          <Tab icon={<UserIcon/>} label="My Account" {...a11yProps(1)} />
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+      </>
+    );
+  },
+};
+
+export const _IconOnly: StoryObj<typeof Tabs> = {
+  render: () => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+      setValue(newValue);
+    };
+
+    return (
+      <>
+        <Tabs value={value} onChange={handleChange}>
+          <Tab label={<Tooltip title="Links"><LinkIcon/></Tooltip>} {...a11yProps(0)} />
+          <Tooltip title="My Account"><Tab label={<UserIcon/>}  {...a11yProps(1)} /></Tooltip>
+        </Tabs>
+        <CustomTabPanel value={value} index={0} />
+        <CustomTabPanel value={value} index={1} />
+      </>
+    );
+  },
+};